RequireJS與SeaJS模塊化加載示例

web應用越變的龐大，模塊化越顯得重要，尤其Nodejs的流行，Javascript不限用于瀏覽器，還用于后臺或其他場景時，沒有Class，沒有 Package的Javascript語言變得難以管理，于是出現CommonJS項目，提出了一些規范模塊化的寫法，在Nodejs中普遍應用，同樣瀏覽器端也出現了類似的解決方案，并結合瀏覽器異步加載的特性，有RequireJS提出的AMD（Asynchronous Module Definition）規范，以及SeaJS提出的CMD（Common Module Definition）規范，兩者都實現Javascript了模塊化定義的APIs，各有異同，下面將分別使用兩種方案，實現Qunee組件的模塊化加載

相關文章

關于RequireJS的文章很多，這里重復介紹，列出幾篇專業文章：

• requireJS官方網站 http://requirejs.org/
• SeaJS官方網站 http://seajs.org/
• 使用 RequireJS 優化 Web 應用前端 http://www.ibm.com/developerworks/cn/web/1209_shiwei_requirejs/
• Javascript模塊化編程（一）：模塊的寫法 http://www.ruanyifeng.com/blog/2012/10/javascript_module.html
• Javascript模塊化編程（二）：AMD規范 http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html
• Relation between CommonJS, AMD and RequireJS? http://stackoverflow.com/questions/16521471/relation-between-commonjs-amd-and-requirejs

模塊化定義

兩種模塊化方式，都使用define來定義模塊，所以需要將qunee.js改造成模塊化的方式，因為Qunee只有一個全局變量，本身就符合模塊化的寫法，直接用define包一下就可以了，起名為qunee-module.js lib/qunee-module.js

define(function (require, exports, module) {
    return function (t, i, e) {
        "use strict";
        ...
    }
});

使用requireJS加載模塊

<script data-main="main" src="lib/require.js"></script>
<script>
require.config({
baseUrl: 'js',
paths: {
Q: '../lib/qunee-module'
}
});</script>

首先需要引入requireJS，并設置了"data-main"屬性為"main"，表示入口模塊"js/main.js"，之所以在./js/目錄，是因為后面配置了require，設置了"baseUrl"為"js"，表示根目錄為"js/"，后面配置的paths，也是相對這個目錄，paths中相當于設置模塊別名，后面可通過別名引入模塊

var Q = require("Q");

使用SeaJS加載模塊

如果用SeaJS則可以改成下面的代碼

<script src="lib/sea.js"></script>
<script>
// seajs 的簡單配置
seajs.config({
base: "./js",
alias: {
"Q": "../lib/qunee-module.js"
}
});
// 加載入口模塊
seajs.use("main");
</script>

入口模塊

入口程序也可以使用define的形式，并通過傳入參數"require"來加載模塊 比如引入qunee-module.js

var Q = require("Q");

js/main.js

define(function(require) {
    var Q = require("Q");
    var graph = new Q.Graph("canvas");
    var hello = graph.createNode("Hello", -100, -50);
    hello.image = Q.Graphs.server;
    var qunee = graph.createNode("Qunee", 100, 50);
    var edge = graph.createEdge("Hello\nQunee", hello, qunee);

    edge.setStyle(Q.Styles.LABEL_OFFSET_Y, -10);
    edge.setStyle(Q.Styles.LABEL_POSITION, Q.Position.CENTER_TOP);
    edge.setStyle(Q.Styles.LABEL_ANCHOR_POSITION, Q.Position.CENTER_BOTTOM);
    edge.setStyle(Q.Styles.LABEL_BORDER, 1);
    edge.setStyle(Q.Styles.LABEL_POINTER, true);
    edge.setStyle(Q.Styles.LABEL_PADDING, new Q.Insets(2, 5));
    edge.setStyle(Q.Styles.LABEL_BACKGROUND_GRADIENT, Q.Gradient.LINEAR_GRADIENT_VERTICAL);
});

目錄結構

示例下載：load-qunee-by-module.zip

來自：http://my.oschina.net/nosand/blog/232921