ES6：使用export和import实现模块化

前端模块化

1. 模块化的好处

先后端分离以来，常常提到前端工程化，前端工程化是一个高层次的思想,前端工程化主要包括四个方面：模块化、组件化、规范化、自动化。而模块化和组件化是为工程化思想下相对较具体的开发方式,所以能够简单的认为模块化和组件化是工程化的表现形式。

模块化带来的好处：
   1 避免变量污染，命名冲突
   2 提升代码复用率
   3 提升维护性
   4 依赖关系的管理

2. 什么是模块化？

那具体什么是模块化呢,仍是举简单的例子,咱们要写一个实现A功能的JS代码,这个功能在项目其余位置也须要用到,那么咱们就能够把这个功能当作一个模块采用必定的方式进行模块化编写,既能实现复用还能够分而治之,同理在写样式的时候,若是咱们须要某种特殊的样式,会在不少地方应用,那么咱们也能够采用必定的方式进行CSS的模块化,具体说来,JS模块化方案不少有AMD/CommonJS/UMD/ES6 Module等,CSS模块化开发大可能是在less、sass、stylus等预处理器的import/mixin特性支持下实现的,具体技术你们自行学习。

3. 没有ES6模块化以前是怎么表达模块化的？

在ES6前， 前端就使用RequireJS或者seaJS实现模块化， requireJS是基于AMD规范的模块化库， 而像seaJS是基于CMD规范的模块化库， 二者都是为了为了推广前端模块化的工具

4. ES6的模块化

如今ES6自带了模块化， 也是JS第一次支持module，咱们能够直接做用import和export在浏览器中导入和导出各个模块了， 一个js文件表明一个js模块；

ES6的模块化的基本规则或特色：

　　　　1：每个模块只加载一次,每个JS只执行一次,若是下次再去加载同目录下同文件,直接从内存中读取。
　　　　2：每个模块内声明的变量都是局部变量， 不会污染全局做用域；
　　　　3：模块内部的变量或者函数能够经过export导出；
　　　　4：一个模块能够导入别的模块
　　　　5：ES6的模块自动采用严格模式
　　　　6：模块顶级做用域的this值为undefined
　　　　7：须要外部使用的部分，必须导出才能够
　　　　
　5.实际应用

// 普通的使用
    export var a = '1'
    export function sum(num1,num2){
        return num1+num2
    }
    
    import a from './a.js'
    import {sum} from './sum.js'
// 重命名导出与导入
    function sum(num1,num2){
        return num1+num2
    }
    export {sum as add}
    
    import {add as sum} from './sum.js'
    
// 模块的默认值

    export default function(num1,num2) {
        return num1 + num2
    }
    
// 在script标签中使用模块

    <script type="module" src="module.js"></script>
    <script type="module">
    import a from '../b.js'
    </script>