相关文章 关于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 目录结构
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.jsvar 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