JavaScript模块化语法总结

CommonJS 服务端模块化规范

AMD/CMD 浏览器(客户端)模块化规范

1
2
3
var math = require("math");

math.add(2, 3);

第二行 math.add(2, 3),在第一行 require(‘math’)之后运行,因此必须等 math.js 加载完成。也就是说,如果加载时间很长,整个应用就会停在那里等。

这对服务器端不是一个问题,因为所有的模块都存放在本地硬盘,可以同步加载完成,等待时间就是硬盘的读取时间。但是,对于浏览器,这却是一个大问题,因为模块都放在服务器端,等待时间取决于网速的快慢,可能要等很长时间,浏览器处于”假死”状态。

因此,浏览器端的模块,不能采用”同步加载”(synchronous),只能采用”异步加载”(asynchronous)。这就是 AMD 规范诞生的背景。

AMD 规范的模块化插件(require.js 和 curl.js)

使用的是 require 导入模块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){

    // some code here

  });
require会先加载jquery,underscore, backbone模块,因为这个模块化都是异步加载,加载完成后,在回调函数中调用这些模块的方法;


//指定路径

require.config({
baseUrl:'js/lib',//放置公共路径
    paths: {

      "jquery": "jquery.min",
      "underscore": "underscore.min",
      "backbone": "backbone.min"

    }

  });

AMD 模块规范写法

  • 五、AMD 模块的写法

require.js 加载的模块,采用 AMD 规范。也就是说,模块必须按照 AMD 的规定来写。

具体来说,就是模块必须采用特定的 define()函数来定义。如果一个模块不依赖其他模块,那么可以直接定义在define()函数之中。

假定现在有一个 math.js 文件,它定义了一个 math 模块。那么,math.js 就要这样写:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// math.js

define(function() {
var add = function(x, y) {
return x + y;
};

return {
add: add
};
}); // main.js

// 加载方法如下:

require(["math"], function(math) {
alert(math.add(1, 1));
});
坚持原创技术分享,您的支持将鼓励我继续创作!

欢迎关注我的其它发布渠道