Module (CommonJs 产出的 AMD和CMD + ES6)

es6之前,JavaScript·制定了四个标准CommonJS, 用于服务器;AMD, CMD标准用于录浏览器。再讲es6的module前我们先认识一下这三个标准。
CommonJs

一个单独的文件就是一个模块。每一个模块都是一个单独的作用域,也就是说,在该模块内部定义的变量,无法被其他模块读取,除非定义为global对象的属性

// commonjs模块就是对象,输入是必须查找对象属性
//这一步其实整体上是已经加载了fs的所有方法
let { stat, exists, readFile } = require('fs');

// 输出area方法
function area (){}
module.exports {
   area: area,
}

AMD
AMD是RequireJS在推广过程中对模块定义的规范化产出,它是一个概念,RequireJS是对这个概念的实现。
RequireJS是一个AMD框架,可以异步加载JS文件,按照模块加载方法,通过define()函数定义,第一个参数是一个数组,里面定义一些需要依赖的包,第二个参数是一个回调函数,通过变量来引用模块里面的方法,最后通过return来输出。

// myModule.js
define(['dep1','dep2'],function(dep1,dep2){
  // 内部只能用指定的模块
  function foo() {dep1.xxx()}   
  return { foo: foo};
})

// 加载模块
require(['myModule'],function(moduleA){
   //some code here
})

CMD
CMD---是SeaJS在推广过程中对模块定义的规范化产出,是一个同步模块定义,是SeaJS的一个标准,SeaJS是CMD概念的一个实现。
通过define()定义,通过require加载插件,CMD是依赖就近,在什么地方使用到插件就在什么地方require该插件,即用即返,这是一个同步的概念

// myModule.js
// require 方法获取其他模块提供的接口
// exports 对外提供接口
// module  是一个对象,储存了当前模块关联的一些属性方法
define(function(require,export,module){
   var $ = require('jquery')
})

// 加载模块
seajs.use(['myModule.js'], function(my){
   // some code here
});

CMD和AMD区别?
CMD定义一个模块的时候不需要立即制定依赖模块,在需要的时候require就可以了,比较方便;而AMD则相反,定义模块的时候需要制定依赖模块

ES6

import (命令用于输入其他模块提供的功能) 有声明提升效果

import {stat,esists,readFile} from 'fs';
// 这一步只是从fs模块加载了其中三个方法(编译时加载||静态加载)
// 效率变高 但是无法使用fs对象,因为es6模块不是对象
import  *  as fs from 'fs' //  * 输出值都加载在这个对象上
import {a} from './***.js';
a = {}; //报错 加载了变量不能重新辅助
a.foo = '123'; // 但可以重新赋值

export (命令用于规定模块的对外接口)

let firstName = 'Michael';
let lastName = 'Jackson';
let year = 1958;
// as 重命名
export { firstName as f, lastName, year };

export 1; // 报错  因为导出的是值 而不是对外接口
let m = 1;
export m; //报错 同上
export {m} //正确

export default function() {}; // 默认导出
// export default命令其实只是输出一个叫做default的变量, 
import {default} from './xxx.js'
// 所以不能后面跟赋值 
export default const a = 123; //error

目前缺陷
import 虽然能够静态加载可用资源,但是无法像Node的require方法一样 动态加载

const path = './' + fileName;
const myModule = require(path); // require是运行时加载模块

import可以按需加载,条件加载

//按需加载
button.addEventListener('click', event => {
  //import()加载模块成功以后,这个模块会作为一个对象,当作then方法的参数
  import('./dialogBox.js')
  .then(dialogBox => {
    dialogBox.open();
  })
  .catch(error => {
    /* Error handling */
  })
});
// 条件加载
if (condition) {
  import('moduleA').then(...);
} else {
  import('moduleB').then(...);
}

你可能感兴趣的:(Module (CommonJs 产出的 AMD和CMD + ES6))