前端模块化

前端模块化

为什么要用模块化，因为可以解决两个问题

1. 变量命名冲突
2. 代码复用

ES6中的导出export和导入import

export导出的二种用法

1. 普通导出：直接定义变量/函数/类/对象的时候前面就加exprot

   export {变量名1,变量名2}
   

2. default导出：如果导入的时候我想自己命名，就可以用default方法导入。

   //导出default
   export default function(){}
   
   //导出对象
   export default {} 
   
   //注意：
   //1. 导入时自定义命名时不用加大括号  {}
   //2. 同一模块中default只能存在1个
   

import导入

1. 普通导入方法

   import{变量名1,变量名2} from './xxx.js
   

   1.1 导入时如果有重复的名字还可以起别名

   //如变量obj重名
   import{obj as 别名} from './xxx.js'
   

2. 全部以对象的方式导入

   import * as 自定义对象名 from './xxx.js
   

   使用的时候以对象的方式使用 如 obj.name

3. 直接引入

   //如引入css文件等
   import './xxx.css'
   

4. 异步引入

   	//import当函数用，用到哪个加载哪个。
   //一般引入的是promise，前面要加个await。
   //这样做到好处是可以减少代码的体积
   let p = import './xxx.js'	
   

注意：如果是default导出，则导入无需写{}。如果是其他导出，则导入需要写{}

CommonJS中的导入和导出

导出

module.exports = {变量名1,变量名2}

导入

1. 普通导入

   const {变量名1,变量名2} = require('./xxx.js')

2. 对象方式导入

   const obj = require('./xxx.js')

3. 导入css

   require('./xxx.css')

ES6 模块与 CommonJS 模块的区别：

CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。

• 所谓值的拷贝，原始类型的值被缓存，不随模块内部的改变而改变。
• ES6 模块是动态引用，不缓存值，模块内外是绑定的，而且是只读引用，不能修改值。ES6 的 js 引擎对脚本静态分析的时候，遇到加载命令模块 import ，就会生成一个只读引用，当真正用到模块里边的值的时候，就会去模块内部去取。

CommonJS 模块是运行时加载，ES6 模块是编译时加载输出接口。

• 运行时加载：CommonJS 模块就是对象；是先加载整个模块，生成一个对象，然后再从这个对象上面读取方法，这种加载称为“运行时加载”。
• 编译时加载： ES6模块不是对象，而是通过 export 命令「显式指定输出的代码」。import 时采用静态命令的形式，即在import指定「加载某个输出值」，而「不是加载整个模块」，这种加载称为“编译时加载”。