读《Javascript模块化编程系列 - 阮一峰》

发表于 | 分类于

Javascript模块化编程（一）：模块的写法

模块的演变

从全局函数，到对象，再演到立即执行函数(IIFE)返回的闭包。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var module1 = (function(){
   var _count = 0;

　var m1 = function(){
　    //...
　};
　var m2 = function(){
　　//...
　};

　return {
　　m1 : m1,
　　m2 : m2
　};
})();

模块的继承

放大模式和宽放大模式

1
2
3
4
5
6
7
8
9
10
11
12
13
//放大模式
var module1 = (function (mod){
  mod.m3 = function () {
  //...
  };
  return mod;
})(module1);

//宽放大模式
var module1 = ( function (mod){
  //...
  return mod;
})(window.module1 || {});

与放大模式相比，宽放大模式就是立即执行函数的参数可以是空对象。

模块的独立性

独立性是模块的重要特点，模块内部最好不与程序的其他部分直接交互。

为了在模块内部调用全局变量，必须显式地将其他变量输入模块。

1
2
3
var module1 = (function ($, YAHOO) {
  //...
})(jQuery, YAHOO);

Javascript模块化编程（二）：AMD规范

目前，通行的Javascript模块规范共有两种：CommonJS和AMD。

CommonJS

node.js的模块系统，就是参照CommonJS规范实现的。在CommonJS中，有一个全局性方法require()，用于加载模块。

1
2
var math = require('math');
math.add(2,3); // 5

但是，由于一个重大的局限(同步加载)，使得CommonJS规范不适用于浏览器环境。

浏览器端的模块，不能采用”同步加载”（synchronous），只能采用”异步加载”（asynchronous）。
这就是AMD规范诞生的背景。

AMD

AMD是”Asynchronous Module Definition”的缩写，意思就是”异步模块定义”。

它采用异步方式加载模块，模块的加载不影响它后面语句的运行。
所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。

AMD也采用require()语句加载模块，但是不同于CommonJS，它要求两个参数：

1
2
3
require(['math'], function (math) {
  math.add(2, 3);
});

第一个参数[module]，是一个数组，里面的成员就是要加载的模块；
第二个参数callback，则是加载成功之后的回调函数。

Javascript模块化编程（三）：require.js的用法

依次加载多个js文件的缺点

首先，加载的时候，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长；

其次，由于js文件之间存在依赖关系，因此必须严格保证加载顺序，依赖性最大的模块一定要放到最后加载，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。

require.js的诞生，就是为了解决这两个问题：

1，实现js文件的异步加载，避免网页失去响应；

2，管理模块之间的依赖性，便于代码的编写和维护。

require.js的加载

1
2
3
4
5
<script src="js/require.js"></script>
<!--异步加载-->
<script src="js/require.js" defer async="true" ></script>
<!--指定主模块-->
<script src="js/require.js" data-main="js/main"></script>

主模块的写法

require()函数接受两个参数。

第一个参数是一个数组，表示所依赖的模块，即主模块依赖这三个模块；

第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块。

1
2
3
require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){
  // some code here
});

模块的加载

使用require.config()方法，我们可以对模块的加载行为进行自定义。

require.config()就写在主模块（main.js）的头部。
参数就是一个对象，这个对象的paths属性指定各个模块的加载路径。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//路径默认与main.js在同一个目录
require.config({
  paths: {
    "jquery": "jquery.min",
    "underscore": "underscore.min",
    "backbone": "backbone.min"
  }
});
//在其他目录有两种写法
require.config({
  paths: {
    "jquery": "lib/jquery.min",
    "underscore": "lib/underscore.min",
    "backbone": "lib/backbone.min"
  }
});
require.config({
  baseUrl: "js/lib",
  paths: {
    "jquery": "jquery.min",
    "underscore": "underscore.min",
    "backbone": "backbone.min"
  }
});
//直接指定网址
require.config({
  paths: {
    "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
  }
});

require.js要求，每个模块是一个单独的js文件。这样的话，如果加载多个模块，就会发出多次HTTP请求，会影响网页的加载速度。因此，require.js提供了一个优化工具，当模块部署完毕以后，可以用这个工具将多个模块合并在一个文件中，减少HTTP请求数。

AMD模块的写法

require.js加载的模块，采用AMD规范，必须按照AMD的规定来写。

模块必须采用特定的define()函数来定义。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//如果一个模块不依赖其他模块，那么可以直接定义在define()函数之中。
define(function (){
  var add = function (x,y){
    return x+y;
  };
  return {
    add: add
  };
});
//加载方法
require(['math'], function (math){
  alert(math.add(1,1));
});

//如果这个模块还依赖其他模块，那么define()函数的第一个参数，必须是一个数组，指明该模块的依赖性。
define(['myLib'], function(myLib){
  function foo(){
    myLib.doSomething();
  }
  return {
    foo : foo
  };
});
//当require()函数加载上面这个模块的时候，就会先加载myLib.js文件。

加载非规范的模块

非规范的模块在用require()加载之前，要先用require.config()方法，定义它们的一些特征。

shim属性专门用来配置不兼容的模块。

exports值：输出的变量名，表明这个模块外部调用时的名称；

deps数组：表明该模块的依赖性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
require.config({
  shim: {
    'underscore':{
      exports: '_'
    },
    'backbone': {
      deps: ['underscore', 'jquery'],
      exports: 'Backbone'
    }
  }
});
//jQuery的插件可以这样定义
require.config({
  shim: {
    'jquery.scroll': {
      deps: ['jquery'],
      exports: 'jQuery.fn.scroll'
    }
  }
});

require.js插件

1
2
3
4
5
6
7
8
9
//domready插件，可以让回调函数在页面DOM结构加载完成后再运行。
require(['domready!'], function (doc){
  // called once the DOM is ready
});
//text和image插件，则是允许require.js加载文本和图片文件。
define(['text!review.txt', 'image!cat.jpg'], function(review,cat){
  console.log(review);
  document.body.appendChild(cat);
});

类似的插件还有json和mdown，用于加载json文件和markdown文件。