JavaScript中的模块化开发

作者: iceman_dev | 来源:发表于2016-12-28 19:45 被阅读2172次

一、为什么会有模块化

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

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

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

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

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

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

1. 全局函数

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

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

存在的问题：

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

2. 对象封装-命名空间

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

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

存在的问题：

暴露了所有的模块成员，内部状态可以被外部改写，不安全。
命名空间越来越长。

3. 私有公有成员分离

var calculator = (function () {
    // 这里形成一个单独的私有的空间
    // 私有成员的作用：
    //   1、将一个成员私有化
    //   2、抽象公共方法（其他成员中会用到的）
    
    // 私有的转换逻辑
    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的时候，只要更换传入的参数即可。
　　原则：高内聚低耦合，模块内相关性高，模块间关联低。

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

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

三、模块化规范

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

四、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 中运行

五、CommonJs

其实学完了SeaJs规范之后，CommonJs规范也就差不多会用了，两者非常的相似，并且在node.js中使用起来更简单。

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

同样的CommonJs让node.js变得：1、增加内聚性，有助分工协作，2、方便重构，3、提高代码质量

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')];

个人公众号（icemanFE）：分享更多的前端技术和生活感悟

个人公众号.png

JavaScript中的模块化开发

一、为什么会有模块化

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

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

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

1. 全局函数

2. 对象封装-命名空间

3. 私有公有成员分离

4. 模块的扩展与维护

5. 第三方依赖的管理

三、模块化规范

四、SeaJs

1. SeaJs简介

2. 使用步骤

3. 定义模块define

define define(id?, deps?, factory)

define.cmd Object

require Function

require require(id)

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

require.resolve require.resolve(id)

4. exports 和 module.exports

5. exports Object

6. module Object

6.1 module.id String

6.2 module.uri String

6.3 module.dependencies Array

6.4 module. exports Object

7. 小结

五、CommonJs

require

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

JavsScript专场

前端路

Web前端之路

前端开发那些事

让前端飞

前端开发

Web 前端开发