AMD Demo

--- theme: juejin --- ## 前言前端模块化的概念在技术论坛是个`老生常谈`的话题。什么CommonJS、AMD、CMD、UMD、ES6模块化等都能扯一点，但大多囫囵吞枣。本文围绕前端模块化的目的、历史时间线、应用三方面来叙述。文中案例均测试执行过。如果文字看累了💕，代码直接复制粘贴，更容易理解。 ## 模块化的目的前端开发初期，Javascript只承担简单的交互动画、表单校验等功能实现。随着Ajax技术得以广泛使用，Web进入2.0时代，浏览器也因此承载了更多的内容与逻辑实现。随着工程越来越庞大，越来越复杂，项目需要一个团队进行分工协作、进度管理等，开发人员不得不采取模块化的方法去管控项目开发、迭代。从而避免**命名冲突**、**代码冗余**、**代码高耦合、低内聚**等问题。 ## 模块化历史时间线 ### 无模块化规范 #### 原始写法将不同函数归置在一起，就算是一个模块。 **缺陷**：污染全局变量，存在命名冲突，模块成员之间无明显依赖关系。 ```js function m1() { //... } function m2() { //... } ``` #### 对象/命名空间写法利用对象包裹模块，降低命名冲突的风险，有一定的模块封装和隔离。 **缺陷**：没有解决命名冲突的根本问题，比如模块名称相同🤦‍♂️；暴露私有内部属性和方法，且可被改写。 ```js var m1 = new Object({ a: 0, b: function() { //... } }) m1.a = 1 // 内部a属性被改写 ``` #### 立即调用函数表达式（IIFE）利用立即执行函数，创建私有的命名空间，解决暴露内部属性和方法的问题。 ```js var m1 = (function() { let a = 0 //函数作用域下，a变量私有化 let b = function() { console.log('a': a) } return { b: b } })() m1.b() // 0 ``` #### 引入依赖显式地传入模块依赖的全局变量。既保证模块的独立性，且使模块之间的依赖关系变的明显，依赖模块 (Jquery) 需要先于当前模块引入。这种写法奠定了模块化规范的基础。 ```html ``` ### 模块化规范 #### CommonJs [09- 10] CommonJs规范下，每个`js`文件都被视为独立的模块，拥有私有的变量和方法，不会污染全局环境；模块可加载多次，但仅在首次加载时运行，后续加载均读取缓存文件，需清理缓存后可再次读取文件；模块加载按照代码顺序同步执行；导出的值为拷贝； `NodeJs`即基于CommonJs规范下编写。 **案例** ```js //helloworld.js module.exports.helloworld = function () { console.log('hello world') } //main.js let helloworld = require('./hello.js').helloworld helloworld() // node main.js 输出 hello wolrd ``` CommonJs 在服务端取得了不错的实践，但在浏览器端却无法得以推广，主要因为如下原因。 1. 没有 `module`、`exports`、`require`、`global`变量。 2. 在服务端`require`一个模块，只会有磁盘`I/O`，所以同步加载机制没什么问题；但若是浏览器加载，一是会产生开销更大的网络`I/O`，存在严重阻塞问题；二是异步，会产生时序上的错误。目前，`borwserify`可转换CommonJS格式，使其运行在浏览器端。但无法根本解决上述所说的阻塞问题。 #### AMD [10] 为了制订新的适用浏览器的标准规范，衍生出三大流派（保守派、激进派、中间派），其中的激进派思想的产物即AMD规范。AMD规范是异步加载模块，允许指定回调函数。 `require.Js`是该规范下的产物。[官网直通车](https://requirejs.org/docs/api.html#jsfiles) ```js define(id?: String, dependencies?: String[], factory: Function|Object) ``` `id` 是模块名字，？代表可选参数。 `dependencies` 指定依赖的模块列表，是个数组，也是可选的参数。每个依赖的模块的输出将作为参数传入`factory`。如果没有指定`dependencies`，默认值是`['require', 'exports', 'module']`。 `factory`是最后一个参数，包裹了模块的具体实现。 **案例** ```js //定义模块 //helloworld.js define(function () { let msg = 'hello world' let helloworld = function () { console.log(msg) } return { helloworld } }) //main.js (function () { require.config({ baseUrl: '', //加载模块根路径 paths: { helloworld: './helloworld' //基于根路径下的相对路径 } }) require(['helloworld'], function (helloworld) { helloworld.helloworld() }) })() ``` ```html AMD Demo ``` 当依赖大量模块时，AMD规范存在性能问题，需等待所有依赖模块加载完毕才可执行模块内的程序。 #### CMD[11] CMD 规范与AMD规范相似，且保留CommonJS中的延迟加载、就近声明特点。 `sea.js`基于当前规范编写，由玉伯提出。[官网直通车](https://seajs.github.io/seajs/docs/) **案例** ```js //helloworld.js define(function (require, exports, module) { let msg = 'hello world' function helloworld() { console.log(msg) } exports.helloworld = helloworld }) //main.js define(function (require, exports, module) { let helloworld = require('./hello').helloworld //就近原则 helloworld() }) ``` ```html CMD Demo ``` #### UMD[14] UMD规范主要通过`if-elseif-else`达到通用的目的。 * 先判断是否存在 `exports` 方法，如果存在，采用 **CommonJS** 方式加载模块。 * 后判断是否存在 `define` 方法，如果存在，采用 **AMD** 方式加载模块。 * 均没有，直接挂在window上 #### ES6[15-17] 喜大普奔！！！庆幸生存在ES6模块化的时代。 ES6模块化思想：尽量静态化。使得在`编译`阶段就能确定模块的依赖关系、输入和输出的变量。这种差异主要因为ES6模块对外接口是一种`静态定义而非对象`。 **案例** ```js // helloworld.js let helloWorld = function() { console.log('hello world') } export { helloWorld } // main.js import { helloWorld } from './helloworld.js' helloWorld() //node main.js hello world ``` 案例需借助`babel-cli`和`babel-preset-es2015`将ES6语法转为ES5语法才可执行。步骤 1. `npm init`初始化生成`package.json`。 2. `npm i babel-cli -g` 和 `npm install babel-preset-es2015 --save-dev`。 3. 生成`.babelrc`文件。 ```js { "presets": ["es2015"] } ``` 4. 新建文件夹`src`，移动`helloworld.js`以及`main.js`文件至`src`文件夹。 5. 在根目录下执行`babel src -d lib` 6. `lib`文件夹下执行`node main.js`输出`hello world` ES6模块化有如下特点 * ES6模块输出的是值的引用，而非拷贝。 * ES6模块是编译时输出接口，`import`命令会被JS引擎静态分析，优先于其他模块内容执行，`export`模块命令会有变量提升的效果。因此，`import`和`export`的位置不影响程序的输出。 ## 参考 [Javascript模块化编程（一）](http://www.ruanyifeng.com/blog/2012/10/javascript_module.html) [深入了解JavaScript模块化编程](https://jerryzou.com/posts/jsmodular/) [《编程时间简史系列》JavaScript 模块化的历史进程](https://segmentfault.com/a/1190000023017398) [深入浅出javaScript模块化](https://github.com/Nealyang/PersonalBlog/issues/61)