前端模块化

CommonJS规范

适用于node，浏览器不可以直接使用， 它是同步的（重点）

• 模块导出

   module.exports = {}
   exports.xxx = 'xxx'
  

• 模块导入

   require("")
  

• 模块标识符
  分为三种：

   核心模块(Node.js自带的模块)
   
   路径模块(相对或绝对定位开始的模块)
   
   自定义模块(node_modules里的模块)
  

  三种模块的查找方式：

   核心模块，直接跳过路径分析和文件定位
   
   路径模块，直接得出相对路径就好了
   
   自定义模块，先在当前目录的node_modules里找这个模块，如果没有，它会往上一级目录查找，
   查找上一级的node_modules，依次往上，直到根目录下都没有, 就抛出错误。
  

• 文件定位

   在NodeJS中, 省略了扩展名的文件, 会依次补充上 .js .node, .json 来尝试；
   
   如果传入的是一个目录, 那么NodeJS会把它当成一个包来看待, 会采用以下方式确定文件名
   
   第一步, 找出目录下的package.json, 用JSON.parse()解析出main字段
   
   第二步, 如果main字段指定的文件还是省略了扩展, 那么会依次补充.js, .node, .json尝试.
   
   第三步, 如果main字段指定的文件不存在, 或者根本就不存在package.json, 那么会默认加载这个目
   录下的index.js, index.node, index.json文件.
  

• CommonJS规范的特点

  所有代码都运行在模块作用域，不会污染全局作用域；
  
  模块是同步加载的，即只有加载完成，才能执行后面的操作；
  
  模块在首次执行后就会缓存，再次加载只返回缓存结果，如果想要再次执行，可清除缓存；
  
  CommonJS输出是值的拷贝(即，require返回的值是被输出的值的拷贝，模块内部的变化也不会影响这个值)。
  

AMD规范 （异步模块定义）

require.js（AMD规范实现）

• 定义模块

   define(id?, dependencies?, factory)
  
   id（可选参数）:模块名
   
   dependencies（可选参数）：一个数组，是我们当前定义的模块要依赖于哪些模块，数组中的每一
   项表示的是要依赖模块的相对路径
   
   factory（必传参数）：工函数，定义模块具体内容
  

• 模块导入

   模块导入前必须先导入  require.js
  

  var requirejs = require("requirejs"); //引入requirejs模块
  
  requirejs(['module1'],function(module1) {
    console.log(module1.add())  //add为module1内部的方法
  })
  

ES6 Modules规范

• 模块导出

   1、export｛｝   可以逐个导出任意数量模块，可使用 as 重命名模块
   2、export default   默认导出一个模块
  

• 模块导入

   1、import xxx from "modelu1"
   2、import { xxx } from './module1'   解构赋值  xxx必须在module1中同名
   3、import { xxx as yyy } from './module1'   重命名
   4、import * as module from './module1'   整体导入
   5、import module, { xxx } from './module'   默认模块和命名模块一起导入