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