第 26 题: 介绍模块化发展历程

[cleverboy32]

答案

[wenJonSnow]

很cool

[lvtraveler]

参考:模块化

[hengliyin]

模块化主要是用来抽离公共代码，隔离作用域，避免变量冲突等。

IIFE： 使用自执行函数来编写模块化，特点：在一个单独的函数作用域中执行代码，避免变量冲突。

(function(){
  return {
	data:[]
  }
})()

AMD： 使用requireJS 来编写模块化，特点：依赖必须提前声明好。

define('./index.js',function(code){
	// code 就是index.js 返回的内容
})

CMD： 使用seaJS 来编写模块化，特点：支持动态引入依赖文件。

define(function(require, exports, module) {  
  var indexCode = require('./index.js');
});

CommonJS： nodejs 中自带的模块化。

var fs = require('fs');

UMD：兼容AMD，CommonJS 模块化语法。

webpack(require.ensure)：webpack 2.x 版本中的代码分割。

ES Modules： ES6 引入的模块化，支持import 来引入另一个 js 。

import a from 'a';

[LouisaNikita]

es6,amd,smd,commonjs 思维导图

(function(){
  return {
	data:[]
  }
})()

define('./index.js',function(code){
	// code 就是index.js 返回的内容
})

define(function(require, exports, module) {  
  var indexCode = require('./index.js');
});

var fs = require('fs'):

import a from 'a';

[cathy1024]

es6,amd,smd,commonjs 思维导图

太棒了！

[wind4gis]

模块化

模块化的作用

模块化是为了处理全局污染和依赖管理混乱的问题

模块化

因为一开始js本身没有提供模块化的机制，所以才会衍生出commonJS、AMD、CMD和UMD这么多模块化规范。js在ES6时原生提供了import和export模块化机制

commonJS

定义

文件即模块，每个文件通过module来表示，用require来引用其他依赖，用module.exports来导出自身

机制

通过require去引用文件时，会将文件执行一遍后，将其执行结果通过浅克隆的方式，写入全局内存。后续再require该路径，就直接从内存里取出，不需要重新执行对应的文件

特点

commonJS是服务器编程范式，因为服务器上所有文件都在硬盘里，通过同步加载的方式即可，所以该规范是同步加载规范。同时它是在运行时加载，也就是你可以在require里拼接变量，在加载时会自动识别出最终的实际路径

AMD

定义

define(module, [dep1, dep2], callback)

机制

通过require加载时，它会先加载对应的依赖，等依赖资源加载完之后，会执行回调函数，将依赖作为入参，执行对应的业务逻辑

特点

AMD机制是浏览器编程范式，它是在客户端使用的，由于资源都是在服务器上，所以它是异步加载。同时，它最大的特点是强调依赖前置。

CMD

定义

机制和AMD类似，最大的区别就是CMD强调延迟加载，对应的依赖等到回调函数里执行具体依赖语句，才会去加载，但是AMD在后续版本里也支持了延迟加载的写法

机制

同上

特点

同上

UMD

定义

CommonJS、AMD、CMD并行的状态下，就需要一种方案能够兼容他们，这样我们在开发时，
就不需要再去考虑依赖模块所遵循的规范了，而UMD的出现就是为了解决这个问题。

ES6

定义

通过import引入依赖，通过export导出依赖

机制

ES6的模块机制在依赖模块时并不会先去预加载整个脚本，而是生成一个只读引用，并且静态解析依赖，等到执行代码时，再去依赖里取出实际需要的模块

特点

编译时加载，不允许在里边引用变量，必须为真实的文件路径。可以通过调用import()语句，会生成一个promise去加载对应的文件，这样子就是运行时加载，可以在路径里边编写变量

[Reaper622]

AMD，CMD用的不多，主要讲一下CommonJS和ESModule

模块的特性

• 为创建一个内部作用域而调用了一个包装函数。
• 包装函数的返回值至少包含一个对内部函数的引用，这样才会创建涵盖整个包装函数内部作用域的闭包。

CommonJS

特点: require、module.exports、exports
CommonJS 一般用在服务端或者Node用来同步加载模块，它对于模块的依赖发生在代码运行阶段，不适合在浏览器端做异步加载。
exports实际上是一个对module.exports的引用:

    exports.add = function add () {/* 方法 */}
    // 等同于
    module.exports.add = function add () {/* 方法 */}

但注意，不能给exports赋值，否则会断开与module.exports的连接。

ES6 Module

特点: import、export
ES6模块化不是对象，import会在JavaScript引擎静态分析，在编译时就引入模块代码，而并非在代码运行时加载，因此也不适合异步加载。
在HTML中如果要引入模块需要使用

    <script type="module" src="./module.js"></script>

ESModule的优势：

• 死代码检测和排除。我们可以用静态分析工具检测出哪些模块没有被调用过。比如，在引入工具类库时，工程中往往只用到了其中一部分组件或接口，但有可能会将其代码完整地加载进来。未被调用到的模块代码永远不会被执行，也就成为了死代码。通过静态分析可以在打包时去掉这些未曾使用过的模块，以减小打包资源体积。
• 模块变量类型检查。JavaScript属于动态类型语言，不会在代码执行前检查类型错误（比如对一个字符串类型的值进行函数调用）。ES6 Module的静态模块结构有助于确保模块之间传递的值或接口类型是正确的。
• 编译器优化。在CommonJS等动态模块系统中，无论采用哪种方式，本质上导入的都是一个对象，而ES6 Module支持直接导入变量，减少了引用层级，程序效率更高。

二者的差异

CommonJS模块引用后是一个值的拷贝，而ESModule引用后是一个值的动态映射，并且这个映射是只读的。

• CommonJS 模块输出的是值的拷贝，一旦输出之后，无论模块内部怎么变化，都无法影响之前的引用。
• ESModule 是引擎会在遇到import后生成一个引用链接，在脚本真正执行时才会根据这个引用链接去模块里面取值，模块内部的原始值变了import加载的模块也会变。

CommonJS运行时加载，ESModule编译阶段引用。

• CommonJS在引入时是加载整个模块，生成一个对象，然后再从这个生成的对象上读取方法和属性。
• ESModule 不是对象，而是通过export暴露出要输出的代码块，在import时使用静态命令的方法引用指定的输出代码块，并在import语句处执行这个要输出的代码，而不是直接加载整个模块。