JS----模块化

ES6:export /import /export default
AMD:require / export / define
CMD:require / require.async / exports / module.exports / define
common.js: require / exports / module.exports

1.Node.js webpack都是common.js模块化规范的实现
2.AMD是require.js模块化推广的规范（预执行）
AMD规范只定义了一个函数“define” define(id, dependencies,factory)
3.CMD是sea.js模块化推广的规范（懒执行）
define(factory) define(function（require,exports,module）)
4.ES6
import/ export/export default
common.js与ES6的区别
前者是动态的同步导入，后者是异步导入；
前者是导出时值拷贝，后者是实时绑定；

sea.js
快速简要知识点：

1,seajs.config({...});   //用来对 Sea.js 进行配置。
2,seajs.use(['a','b'],function(a,b){...});   //用来在页面中加载一个或多个模块。
3,define(function(require, exports, module){...});   //用来定义模块。Sea.js 推崇一个模块一个文件，遵循统一的写法：
4,require(function(require){var a = require("xModule"); ... });   //require 用来获取指定模块的接口。
5,require.async,  //用来在模块内部异步加载一个或多个模块。 例如：
define(function(require){
    require.async(['aModule','bModule'],function(a,b){  // 异步加载多个模块，在加载完成时，执行回调
    a.func();
    b.func();
    })    
});
6,exports, //用来在模块内部对外提供接口。 例如：
define(function(require, exports){
    exports.varName01 = 'varValue';  // 对外提供 varName01 属性    
    exports.funName01 = function(p1,p2){  // 对外提供 funName01 方法
    ....
    }       
});
7,module.exports, 与 exports 类似，用来在模块内部对外提供接口。例如：
define(function(require, exports, module) {  
  module.exports = {  // 对外提供接口
    name: 'a',
    doSomething: function() {...};
  };
});
参考学习：https://blog.csdn.net/shenzhennba/article/details/51661544

参考学习：https://www.jianshu.com/p/3832c00a44a7
1.模块化开发怎么做？

1.立即执行函数,不暴露私有成员
2.通过函数作用域解决了命名冲突、污染全局作用域的问题

  var module1 = (function(){
    　　　　var _count = 0;
    　　　　var m1 = function(){
    　　　　　　//...
    　　　　};
    　　　　var m2 = function(){
    　　　　　　//...
    　　　　};
    　　　　return {
    　　　　　　m1 : m1,
    　　　　　　m2 : m2
    　　　　};
    })();

2.模块化可以给我们带来以下好处

解决命名冲突
提供复用性
提高代码可维护性

Es6的模块化·
在有 Babel 的情况下，我们可以直接使用 ES6的模块化
// file a.js
export function a() {}
export function b() {}
// file b.js
export default function() {}

import {a, b} from './a.js'
import XXX from './b.js'

CommonJS
CommonJs 是 Node 独有的规范，浏览器中使用就需要用到 Browserify解析了。

// a.js
module.exports = {
    a: 1
}
// or
exports.a = 1

// b.js
var module = require('./a.js')
module.a // -> log 1

在上述代码中，module.exports 和 exports 很容易混淆，让我们来看看大致内部实现

var module = require('./a.js')
module.a
// 这里其实就是包装了一层立即执行函数，这样就不会污染全局变量了，
// 重要的是 module 这里，module 是 Node 独有的一个变量
module.exports = {
    a: 1
}
// 基本实现
var module = {
  exports: {} // exports 就是个空对象
}
// 这个是为什么 exports 和 module.exports 用法相似的原因
var exports = module.exports
var load = function (module) {
    // 导出的东西
    var a = 1
    module.exports = a
    return module.exports
};

再来说说 module.exports 和exports，用法其实是相似的，但是不能对 exports 直接赋值，不会有任何效果。

3.对于 CommonJS 和 ES6 中的模块化的两者区别是：
前者支持动态导入，也就是 require(${path}/xx.js)，后者目前不支持，但是已有提案,前者是同步导入，因为用于服务端，文件都在本地，同步导入即使卡住主线程影响也不大。
而后者是异步导入，因为用于浏览器，需要下载文件，如果也采用同步导入会对渲染有很大影响
前者在导出时都是值拷贝，就算导出的值变了，导入的值也不会改变，所以如果想更新值，必须重新导入一次。
但是后者采用实时绑定的方式，导入导出的值都指向同一个内存地址，所以导入值会跟随导出值变化
后者会编译成 require/exports 来执行的

commonJS 动态导入，同步导入，导出时都是值拷贝，导出值变，导入值不变。
ES6 异步导入 实时绑定    导入值会随导出值变化  会编译成require/exports执行

AMD 和 CMD
鉴于目前这两种实现方式已经很少见到，所以不再对具体特性细聊，只需要了解这两者是如何使用的。

// AMD
define(['./a', './b'], function(a, b) {
  // 加载模块完毕可以使用
  a.do()
  b.do()
})
// CMD
define(function(require, exports, module) {
  // 加载模块
  // 可以把 require 写在函数体的任意地方实现延迟加载
  var a = require('./a')
  a.doSomething()
})

AMD，CMD，CommonJs，ES6 Module：解决原始无模块化的痛点

1.AMD：requirejs 在推广过程中对模块定义的规范化产出，提前执行，推崇依赖前置
2.CMD：seajs 在推广过程中对模块定义的规范化产出，延迟执行，推崇依赖就近 3.CommonJs：模块输出的是一个值的copy，运行时加载，加载的是一个对象（module.exports 属性），该对象只有在脚本运行完才会生成
4.ES6 Module：模块输出的是一个值的引用，编译时输出接口，ES6模块不是对象，它对外接口只是一种静态定义，在代码静态解析阶段就会生成。

es6: import / export/ export default
commonjs: require / module.exports / exports
amd: require / defined

谈谈你对AMD、CMD的理解
CommonJS是服务器端模块的规范，Node.js采用了这个规范。CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作。
AMD规范则是非同步加载模块，允许指定回调函数
AMD推荐的风格通过返回一个对象做为模块对象，CommonJS的风格通过对module.exports或exports的属性赋值来达到暴露模块对象的目的

es6模块 CommonJS、AMD、CMD
CommonJS 的规范中，每个 JavaScript 文件就是一个独立的模块上下文（module context），在这个上下文中默认创建的属性都是私有的。也就是说，在一个文件定义的变量（还包括函数和类），都是私有的，对其他文件是不可见的。
CommonJS是同步加载模块,在浏览器中会出现堵塞情况，所以不适用
AMD 异步，需要定义回调define方式
es6 一个模块就是一个独立的文件，该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量 es6还可以导出类、方法，自动适用严格模式

参考学习：https://blog.csdn.net/fen747042796/article/details/70840089
http://www.cnblogs.com/lvdabao/p/js-modules-develop.html
https://www.cnblogs.com/zhongjiang/p/6554514.html

CommonJS是服务器端模块的规范,AMD CMD是浏览器端模块化的规范， ES6提供通用的模块化规范。

简要区别：

CommonJS: require / module.exports / exports

动态导入，同步导入，只有加载完成，才能执行后面的操作，导出时都是值拷贝，
导出值变，导入值不变。

=============================================

   RequireJS：AMD: require / export/define 
    SeaJS：CMD: require, require.async, exports, module.exports define, 
    AMD:提前执行（异步加载：依赖先执行）+延迟执行
    CMD:延迟执行（运行到需加载，根据顺序执行）
    Sea.JS对模块的态度是懒执行, 而RequireJS对模块的态度是预执行

===========================================

es6: import / export/ export default
export和export default的区别就是：前者导出的东西需要在导入的时候加{}，而后者则不需要
ES6 异步导入,实时绑定 ,导入值会随导出值变化  会编译成require/exports执行