前端模块化

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

  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指定「加载某个输出值」，而「不是加载整个模块」，这种加载称为“编译时加载”。


单枪匹马你别怕，一腔孤勇又如何，这一路你可以哭，但不能怂！

——  Here are lovecode3000 ~