文档章节

RequireJS与SeaJS模块化加载示例

nosand
 nosand
发布于 2014/05/04 13:40
字数 803
阅读 4079
收藏 136

web应用越变的庞大,模块化越显得重要,尤其Nodejs的流行,Javascript不限用于浏览器,还用于后台或其他场景时,没有Class,没有Package的Javascript语言变得难以管理,于是出现CommonJS项目,提出了一些规范模块化的写法,在Nodejs中普遍应用,同样浏览器端也出现了类似的解决方案,并结合浏览器异步加载的特性,有RequireJS提出的AMD(Asynchronous Module Definition)规范,以及SeaJS提出的CMD(Common Module Definition)规范,两者都实现Javascript了模块化定义的APIs,各有异同,下面将分别使用两种方案,实现Qunee组件的模块化加载

相关文章

关于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

模块目录结构

© 著作权归作者所有

共有 人打赏支持
nosand
粉丝 79
博文 40
码字总数 33601
作品 0
徐汇
加载中

评论(10)

wyysf
wyysf

引用来自“鱼说还休”的评论

seajs好, 接触了两年的飘过
seajs主要是各大类库都不支持还得自己改造,还挺操蛋的,不过用起来还成
沙发迪
沙发迪

引用来自“LeeRoBeRt”的评论

seajs这种不入流的渣渣
+1
鱼说还休
鱼说还休
seajs好, 接触了两年的飘过
许雷神
许雷神
谢谢
黄开源中国
黄开源中国

引用来自“摔死的鸟”的评论

和博主 讨论一件事。 好像在js不支持 require前,觉得 js的 模块化 不彻底的。
就像我用上了 seajs, 代码的维护性真的 提高了吗?不由得还有点困惑。
楼主 有去 查看 国内大型互联网的公司,他们都有用到 js模块化么。?
最近在用百度的echart。可以看看
空腔
空腔
Angular.js路过
金拱门
金拱门
和博主 讨论一件事。 好像在js不支持 require前,觉得 js的 模块化 不彻底的。
就像我用上了 seajs, 代码的维护性真的 提高了吗?不由得还有点困惑。
楼主 有去 查看 国内大型互联网的公司,他们都有用到 js模块化么。?
LeeRoBeRt
LeeRoBeRt
seajs这种不入流的渣渣
nosand
nosand

引用来自“郏高阳”的评论

就只是简单的说了下两者基本用法。后期有详解不?
后期用到啥写啥,现学现卖
郏高阳
郏高阳
就只是简单的说了下两者基本用法。后期有详解不?
JavaSript模块规范 - AMD规范与CMD规范介绍

JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发? 模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题进行系统性...

大糊涂
2015/06/09
0
0
Gulp和Webpack工具的区别

引用知乎的回答:https://www.zhihu.com/question/37020798 怎么解释呢?因为 Gulp 和 browserify / webpack 不是一回事 Gulp应该和Grunt比较,他们的区别我就不说了,说说用处吧。Gulp / Gr...

easonjim
2016/12/24
0
0
ES6新特性:使用export和import实现模块化

在ES6前, 前端就使用RequireJS或者seaJS实现模块化, requireJS是基于AMD规范的模块化库, 而像seaJS是基于CMD规范的模块化库, 两者都是为了为了推广前端模块化的工具, 更多有关AMD和CMD...

克虏伯
10/17
0
0
Seajs模块化开发Javascript - 用代码说话(一)

前言 模块化开发JS已经逐渐开始普及,在RequireJS和SeaJS中犹豫了2天,最后选择从SeaJS入手.网上有不少教程和使用方法,不过理论东西太多了,我是标准的实用主义和拿来主义者,所以直接用代码说话...

顽Shi
2014/03/30
0
6
CommonJS/AMD/CMD/UMD概念初探

1、CommonJS是一种规范,NodeJS是这种规范的实现。 1.1、CommonJS 加载模块是同步的,所以只有加载完成才能执行后面的操作。 参考: http://www.commonjs.org/ http://javascript.ruanyifen...

easonjim
2016/12/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

【源码分析】面试问烂的equals和各种字符串、Integer比较

今天在空闲时间聊天时发现,面试题中的equals问题,以及String、Integer等的判等问题还是讨论的比较激烈而且混乱。。。(滑稽) 其实网上有非常多关于这种面试题的文章或者博客,其实多去看看就...

LinkedBear
5分钟前
3
0
jvm汇总

https://www.toutiao.com/i6490796229067276814/ https://tech.meituan.com/jvm_optimize.html

tantexian
5分钟前
0
0
限制MongoDB使用内存大小

限制MongoDB使用内存大小 0 收藏(6)因为MongoDB的内存是系统的虚拟内存管理的,MongoDB并不干涉内存管理工作,这样虽然可以简化Mongo的工作,但同时Mongo的内存使用是没法控制的。 真的没法控...

Airship
6分钟前
0
0
“赋能开发者”高峰论坛暨西安葡萄城30周年庆典隆重举办

 2018 年 10 月 18 日,“赋能开发者”高峰论坛暨西安葡萄城 30 周年庆典在古城西安隆重举办。   此次论坛由西安葡萄城信息技术有限公司(以下简称“西安葡萄城”)主办。作为软件开发行业...

葡萄城技术团队
7分钟前
0
0
聊聊storm的reportError

序 本文主要研究一下storm的reportError IErrorReporter storm-2.0.0/storm-client/src/jvm/org/apache/storm/task/IErrorReporter.java public interface IErrorReporter { void report......

go4it
8分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部