@yacent 2016-07-22T09:59:26.000000Z 字数 2254 阅读 883

why模块化

性能优化

为什么要使用模块化
根据我的理解，以前写代码过程当中，都是以函数式的方式进行编写，函数之间进行调用，但是这样会有一个缺点，就是global被污染，不同的编写人员之间很容易命名冲突，之后，改进了一点，采取了namespace的模式，即采用对象的方式进行编写，调用只需要调用object的属性即可，虽然能够在大部分情况下减少了命名空间的冲突，但是这种方式不安全，别人可以通过修改对象的属性来修改代码。其后，再通过IIFE模式，就是匿名函数的方式来立即执行函数从而获取私有变量，只返回一个对象值，外部不可修改内部变量，再继续就是在IIFE模式下加入引入依赖，引入依赖基本上就是当今模块实现的基石。
那么，在我认为，模块化，就是一个模块只实现一个特定的功能，有了模块，我们在编写代码时，可以只写自己核心的业务逻辑，其余的可以通过加载别人模块，这有利于日后项目的可维护性、可重构。

为什么要使用 AMD CMD规范呢
虽然模块化是实现了封装性，但是仅仅有封装性还是不够的，我们还需要实现加载，在以往的方式，都会写成如下的代码

<head>
    <script type="text/javascript" src="a.js"></script>
    <script type="text/javascript" src="b.js"></script>
    <script type="text/javascript" src="c.js"></script>
    <script type="text/javascript" src="d.js"></script>
    <script type="text/javascript" src="e.js"></script>
    ……
</head>

但是，这种写法非常的不好，原因如下

1. 顺序很重要，即js文件之间的依赖关系决定了他们加载的顺序，如果顺序不正确，可能会导致js文件之间依赖关系的不正确而不能正确运行，难以维护，并且会导致HTTP请求过多而性能下降
2. 如果js文件过多，在浏览器对HTML文档进行处理的时，由于js文件过多，加载解析执行，而阻塞DOM的加载和渲染，网页失去响应，用户体验不好

所以，我们还需要一些工具和模块规范来解决这两者的困难。
1. 来帮助我们正确处理其js文件之间的依赖关系，便于代码的编写和维护
2. 实现js文件的异步加载，避免网页失去响应

AMD: Asynchronous Module Definition

AMD是 requireJS 在推广过程中对模块定义的规范化的产出
每个模块放在一个单独的文件里

主要是使用define函数进行模块的定义

define(id?, dependencies?, factory)

    id：指定义中模块的名字，可选；如果没有提供该参数，模块的名字应该默认为模块加载器请求的指定脚本的名字。如果提供了该参数，模块名必须是“顶级”的和绝对的（不允许相对名字）。
    依赖dependencies：是一个当前模块依赖的，已被模块定义的模块标识的数组字面量。依赖参数是可选的，如果忽略此参数，它应该默认为["require", "exports", "module"]。然而，如果工厂方法的长度属性小于3，加载器会选择以函数的长度属性指定的参数个数调用工厂方法。
    工厂方法factory，模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值。

/* an example of requireJS*/
 define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
       exports.verb = function() {
           return beta.verb();
           //Or:
           return require("beta").verb();
       }
   });

CMD: Common Module Definition

CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
一个文件就是一个模块，以文件名作为模块名

// CMD
define(function(require, exports, module) {
    var a = require('./a')
    a.doSomething()
    // 此处略去 100 行
    var b = require('./b') // 依赖可以就近书写
    b.doSomething()
    // ... 
})

AMD 和 CMD 的区别

AMD是提前执行，异步加载，先加载完依赖模块，后再执行，推崇依赖前置。
CMD是延迟执行，按需加载，根据顺序执行，推崇依赖就近

// CMD
define(function(require, exports, module) {
    var a = require('./a')
    a.doSomething()
    // 此处略去 100 行
    var b = require('./b') // 依赖可以就近书写
    b.doSomething()
    // ... 
})
// AMD 默认推荐的是
define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
    a.doSomething()
    // 此处略去 100 行
    b.doSomething()
    ...
})

CommonJS in Browser
通过 browserify来实现浏览器端的 commonJS模块的编写

Reference：
1. https://github.com/seajs/seajs/issues/588
2. http://huangxuan.me/js-module-7day/#/33

why模块化

AMD: Asynchronous Module Definition

CMD: Common Module Definition

内容目录