require.js入門

AMD是"Asynchronous Module Definition"的縮寫，意思就是"異步模塊定義"。它採用異步方式加載模塊，模塊的加載不影響它後面語句的運行。全部依賴這個模塊的語句，都定義在一個回調函數中，等到加載完成以後，這個回調函數纔會運行。

require([module], callback);

在CommonJS中，有一個全局性方法require()，用於加載模塊。假定有一個數學模塊math.js，就能夠像下面這樣加載。

var math = require('math');

在define下也有所不一樣

1.對於依賴的模塊，AMD（Asynchronous Module Definition）異步模塊加載機制 是 提早執行，CMD（common module definition）模塊定義規範 是 延遲執行。不過 RequireJS 從 2.0 開始，也改爲能夠延遲執行（根據寫法不一樣，處理方式不一樣）。CMD 推崇 as lazy as possible.

2. CMD 推崇 依賴就近，AMD 推崇 依賴前置。看代碼：

// 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()
...
}) 

說道正題。。

先去官網下載require.js放到網頁底部加載，加載一個main.js

<script type="text/javascript" src="require.js" defer async="true" data-main="main"></script>

main.js下面放

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

math.js下面放

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

　本文參考

做者：玉伯
連接：https://www.zhihu.com/question/20351507/answer/14859415
來源：知乎
著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處

和阮一峯的require.jshttp://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html