javascript 模块化开发

时间 2019-11-13

标签 javascript 模块化开发栏目 JavaScript 繁體版

原文原文链接

1、为何会有模块化

1. 当一个项目开发的愈来愈复杂的时候，会遇到一些问题，好比：

命名冲突：当项目由团队进行协做开发的时候，不一样开发人员的变量和函数命名可能相同；即便是一个开发，当开发周期比较长的时候，也有可能会忘记以前使用了什么变量，从而致使重复命名，致使命名冲突。javascript
文件依赖：代码重用时，引入js文件的数目可能少了，或者引入的顺序不对，好比使用boostrap的时候，须要引入jQuery，而且jQuery的文件必需要比boostrap的js文件先引入。php

2. 当使用模块化开发的时候能够避免以上的问题，而且让开发的效率变高，以及方便后期的维护：

提高开发效率：代码方便重用，别人开发的模块直接拿过来就可使用，不须要重复开发法相似的功能。css
方便后期维护：代码方便重用，别人开发的模块直接拿过来就可使用，不须要重复开发法相似的功能。html

因此总结来讲，在生产角度，模块化开发是一种生产方式，这种方式生产效率高，维护成本低。从软件开发角度来讲，模块化开发是一种开发模式，写代码的一种方式，开发效率高，方便后期维护。java

2、模块化开发的演变过程

1. 全局函数

function add(a , b) { return parseFloat(a) + parseFloat(b); } function substract(a ,b) {} function multiply(a ,b) {} function divide(a ,b) {}

在早期的开发过程当中就是将重复的代码封装到函数中，再将一系列的函数放到一个文件中，这种状况下全局函数的方式只能认为的认为它们属于一个模块，可是程序并不能区分哪些函数是同一个模块，若是仅仅从代码的角度来讲，这没有任何模块的概念。node

存在的问题：jquery

污染了全局变量，没法保证不与其余模块发生变量名冲突。
模块成员之间看不出直接关系。

2. 对象封装-命名空间

var calculator = { add: function(a, b) { return parseFloat(a) + parseFloat(b); }, subtract: function(a, b) {}, multiply: function(a, b) {}, divide: function(a, b) {} };

经过添加命名空间的形式从某种程度上解决了变量命名冲突的问题，可是并不能从根本上解决命名冲突。不过此时从代码级别能够明显区分出哪些函数属于同一个模块。git

存在的问题：github

暴露了全部的模块成员，内部状态能够被外部改写，不安全。
命名空间愈来愈长。

3. 私有公有成员分离

var calculator = (function () { // 这里造成一个单独的私有的空间 // 私有成员的做用： // 一、将一个成员私有化 // 二、抽象公共方法（其余成员中会用到的） // 私有的转换逻辑 function convert(input){ return parseInt(input); } function add(a, b) { return convert(a) + convert(b); } function subtract(a, b) {} function multiply(a, b) {} function divide(a, b) {} return { add : add, subtract : subtract, multiply : multiply, divide : divide } })();

利用此种方式将函数包装成一个独立的做用域，私有空间的变量和函数不会影响到全局做用域。
以返回值的方式获得模块的公共成员，公开公有方法，隐藏私有空间内部的属性、元素，好比注册方法中可能会记录日志。
能够有选择的对外暴露自身成员。
从某种意义上来讲，解决了变量命名冲突的问题。

4. 模块的扩展与维护

// 计算模块 (function (calculator) { function convert(input) { return parseInt(input); } calculator.add = function(a, b) { return convert(a) + convert(b); } window.calculator = calculator; })(window.calculator || {}); // 新增需求 (function (calculator) { calculator.remain = function (a , b) { return a % b; } window.calculator = calculator; })(window.calculator || {}); alert(calculator.remain(4,3));

利用此种方式，有利于对庞大的模块的子模块划分。
实现了开闭原则：对新增开发，对修改关闭。对于已有文件尽可能不要修改，经过添加新文件的方式添加新功能。

5. 第三方依赖的管理

(function (calculator , $) { // 依赖函数的参数，是属于模块内部 // console.log($); calculator.remain = function (a , b) { return a % b; } window.calculator = calculator; })(window.calculator || {} , jQuery);

模块最好要保证模块的职责单一性，最好不要与程序的其余部分直接交互，经过向匿名函数注入依赖项的形式，除了保证模块的独立性，还使模块之间的以来关系变得明显。
　　对于模块的依赖经过自执行函数的参数传入，这样作能够作到依赖抽象，本例中使用的jQuery，而当要使用zepto的时候，只要更换传入的参数便可。
　　原则：高内聚低耦合，模块内相关性高，模块间关联低。npm

总结：在什么场景下使用模块化开发

业务复杂
重用逻辑很是多
扩展性要求较高

3、模块化规范

服务器端规范主要是CommonJS，node.js用的就是CommonJS规范。
　　客户端规范主要有：AMD（异步模块定义，推崇依赖前置）、CMD（通用模块定义，推崇依赖就近）。AMD规范的实现主要有RequireJS，CMD规范的主要实现有SeaJS。RequireJS在国外用的比较多，SeaJS在国内用的比较多，而且SeaJS的创始人为阿里的玉伯，因此SeaJS在阿里系用的很是普遍，包括京东等大厂也在用SeaJS，咱们详细介绍的也是SeaJS。可是SeaJS已经中止维护了，由于在ES6中已经有了模块化的实现，随着ES6的普及，第三方的模块化实现将会慢慢的淘汰（可是这个在国内可能还要不少年）。

4、SeaJs

1. SeaJs简介

SeaJS是一个基于CMD规范实现的模块化开发解决方案。
做者：Alibaba 玉伯
Alibaba 玉伯
特性：
- 简单友好的模块化定义规范。
- 天然直观的代码组织方式。
哲学：一切皆模块

2. 使用步骤

引入sea.js库
定义模块

define(function(require, exports, module){ 模块代码 });

* 暴露接口
- exports - module.exports * 依赖模块

require(‘模块id’)

* 启动模块系统

seajs.use(‘模块id’,function( 模块对象 ){ 业务代码 });

#####HelloWorld * 01-convertor.js ```JavaScript /** * 转换模块，处处成员：convertToNumber */ define(function (require, exports, module) { exports.convertToNumber = function (input) { return parseFloat(input); } });

01-calculator.js

define(function (require, exports, module) { // 此处是模块的私有空间，定义模块的私有成员 // 载入01-convertor模块 var convertor = require('./01-convertor'); function add(a, b) { return convertor.convertToNumber(a) + convertor.convertToNumber(b); } exports.add = add; });

01-helloworld.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="node_modules/seajs/dist/sea.js"></script> <script> seajs.use('./01-calculator.js', function (calculator) { alert(calculator.add(1,2)); }); </script> </head> <body> </body> </html>

3. 定义模块define

先有规范，后有实现
在CMD规范中，一个模块就是一个js文件
define是一个全局函数，用来定义模块
define(factory)
- 对象{}这种方式，外部会直接获取到该对象
- 字符串''同上
- 函数function( require, exports, module ){ // 模块代码 }
  - 注意：为了减小出错，定义函数的时候直接把这三个参数写上

factory为对象、字符串时，表示模块的接口就是该对象、字符串。好比能够以下定义一个 JSON 数据模块：

define({ "foo": "bar" });

也能够经过字符串定义模板模块：

define('I am a template. My name is {{name}}.');

factory为函数时，表示是模块的构造方法。执行该构造方法，能够获得模块向外提供的接口。factory方法在执行时，默认会传入三个参数：require、exports和 module：

define(function(require, exports, module) { // 模块代码});

define define(id?, deps?, factory)

define也能够接受两个以上参数。字符串 id表示模块标识，数组 deps是模块依赖。好比：

define('hello', ['jquery'], function(require, exports, module) { // 模块代码});

id和 deps参数能够省略。省略时，能够经过构建工具自动生成。
　　注意：带 id和 deps参数的 define用法不属于 CMD 规范，而属于 Modules/Transport 规范。

define.cmd `Object`

一个空对象，可用来断定当前页面是否有 CMD 模块加载器：

if (typeof define === "function" && define.cmd) { // 有 Sea.js 等 CMD 模块加载器存在 }

require `Function`

require是 factory函数的第一个参数。

require `require(id)`

require是一个方法，接受模块标识做为惟一参数，用来获取其余模块提供的接口。

define(function(require, exports) { // 获取模块 a 的接口 var a = require('./a'); // 调用模块 a 的方法 a.doSomething(); });

注意：在开发时，require的书写须要遵循一些简单约定。

require.async `require.async(id, callback?)`

require.async方法用来在模块内部异步加载模块，并在加载完成后执行指定回调。callback参数可选。

define(function(require, exports, module) { // 异步加载一个模块，在加载完成时，执行回调 require.async('./b', function(b) { b.doSomething(); }); // 异步加载多个模块，在加载完成时，执行回调 require.async(['./c', './d'], function(c, d) { c.doSomething(); d.doSomething(); }); });

注意：require是同步往下执行，require.async则是异步回调执行。require.async 通常用来加载可延迟异步加载的模块。

require.resolve `require.resolve(id)`

使用模块系统内部的路径解析机制来解析并返回模块路径。该函数不会加载模块，只返回解析后的绝对路径。

define(function(require, exports) { console.log(require.resolve('./b')); // ==> http://example.com/path/to/b.js });

这能够用来获取模块路径，通常用在插件环境或需动态拼接模块路径的场景下。

4. exports 和 module.exports

功能:经过给 exports或module.exports动态的挂载变量、函数或对象,外部会获取到该接口
exports 等价于 module.exports
能够经过屡次给exports 挂载属性向外暴露
不能直接给 exports 赋值
若是想暴露单个变量、函数或对象能够经过直接给module.exports 赋值便可

5. exports `Object`

exports是一个对象，用来向外提供模块接口。

define(function(require, exports) { // 对外提供 foo 属性 exports.foo = 'bar'; // 对外提供 doSomething 方法 exports.doSomething = function() {}; });

除了给 exports对象增长成员，还可使用 return直接向外提供接口。

define(function(require) { // 经过 return 直接提供接口 return { foo: 'bar', doSomething: function() {} }; });

若是 return语句是模块中的惟一代码，还可简化为：

define({ foo: 'bar', doSomething: function() {} });

上面这种格式特别适合定义 JSONP 模块。

特别注意：下面这种写法是错误的！

define(function(require, exports) { // 错误用法！！! exports = { foo: 'bar', doSomething: function() {} }; });

正确的写法是用 return或者给 module.exports赋值：

define(function(require, exports, module) { // 正确写法 module.exports = { foo: 'bar', doSomething: function() {} }; });

提示：exports 仅仅是 module.exports 的一个引用。在 factory 内部给 exports 从新赋值时，并不会改变 module.exports 的值。所以给 exports 赋值是无效的，不能用来更改模块接口。

6. module `Object`

module是一个对象，上面存储了与当前模块相关联的一些属性和方法。

6.1 module.id `String`

模块的惟一标识。

define('id', [], function(require, exports, module) { // 模块代码 });

上面代码中，define的第一个参数就是模块标识。

6.2 module.uri `String`

根据模块系统的路径解析规则获得的模块绝对路径。

define(function(require, exports, module) { console.log(module.uri); // ==> http://example.com/path/to/this/file.js });

通常状况下（没有在 define 中手写 id 参数时），module.id 的值就是 module.uri，二者彻底相同。

6.3 module.dependencies `Array`

dependencies是一个数组，表示当前模块的依赖。

6.4 module. exports `Object`

当前模块对外提供的接口。
　　传给 factory 构造方法的 exports 参数是 module.exports 对象的一个引用。只经过 exports 参数来提供接口，有时没法知足开发者的全部需求。好比当模块的接口是某个类的实例时，须要经过 module.exports 来实现：

define(function(require, exports, module) { // exports 是 module.exports 的一个引用 console.log(module.exports === exports); // true // 从新给 module.exports 赋值 module.exports = new SomeClass(); // exports 再也不等于 module.exports console.log(module.exports === exports); // false });

注意：对 module.exports 的赋值须要同步执行，不能放在回调函数里。下面这样是不行的：

// x.js define(function(require, exports, module) { // 错误用法 setTimeout(function() { module.exports = { a: "hello" }; }, 0); });

在 y.js 里有调用到上面的 x.js:

// y.js define(function(require, exports, module) { var x = require('./x'); // 没法马上获得模块 x 的属性 a console.log(x.a); // undefined });

7. 小结

这就是 CMD 模块定义规范的全部内容。常用的 API 只有 define, require, require.async, exports, module.exports 这五个。其余 API 有个印象就好，在须要时再来查文档，不用刻意去记。

与 RequireJS 的 AMD 规范相比，CMD 规范尽可能保持简单，并与 CommonJS 和 Node.js 的 Modules 规范保持了很大的兼容性。经过 CMD 规范书写的模块，能够很容易在 Node.js 中运行

5、CommonJs

其实学完了SeaJs规范以后，CommonJs规范也就差很少会用了，二者很是的类似，而且在node.js中使用起来更简单。

在node.js中直接使用require引包，直接使用exports和module.exports暴露公开成员，而且npm基于CommonJs实现了自动加载和安装依赖。

一样的CommonJs让node.js变得：一、增长内聚性，有助分工协做，二、方便重构，三、提升代码质量

node.js中的实现为：

(function(exports,require,module,__filename,__dirname){ return module.exports; });

require

加载模块后会缓存，屡次加载后获得同一对象 require('http')
查看模块缓存console.log(require.cache);
查询模块绝对路径 require.resolve('./test.js');
查看单个的模块缓存 require.cache[require.resolve('./test.js')]
删除模块缓存 delete require.cache[require.resolve('./test.js')];

做者：iceman_dev 连接：https://www.jianshu.com/p/3832c00a44a7 來源：简书简书著做权归做者全部，任何形式的转载都请联系做者得到受权并注明出处。