文档章节

RequireJS与SeaJS模块化加载示例

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

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
粉丝 78
博文 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 博主

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

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

命名冲突和文件依赖,是前端开发过程中的两个经典问题。通过模块化开发来解决。 AMD 规范在这里:github.com/amdjs/amdjs… CMD 规范在这里:github.com/seajs/seajs… AMD 是 RequireJS 在推...

BothEyes1993
2018/12/15
0
0
JavaSript模块规范 - AMD规范与CMD规范介绍

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

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

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

easonjim
2016/12/24
0
0
关于javascript模块化编程的疑惑

最近看了很多关于javascript模块化编程的解释,感觉都是针对web app的,目前我所知的有seaJS和requireJS,但是在我做的项目中,用起来有点别扭,100%肯定的是,我的用法不正确,所以想在此请...

Janking
2014/08/18
551
1
seajs 与 requirejs

1:AMD与CMD 提前依赖加载,延迟依赖加载 eg: require('a'); console.log(a); require('b'); console.log('b'); requirejs 会先加载a,b文件,然后在执行a,b输出。 seajs会加载a,输出a,加载b......

copperpeas
2015/01/26
3
4

没有更多内容

加载失败,请刷新页面

加载更多

1、Docker学习,第一天

Docker学习,第一天 一、Docker简介 环境配置如此之麻烦,换台机器,重来一次,费事费力。安装的时候,把原始环境一模一样的复制过来。开发人员利用Docker可以消除写作编码时,”在我的机器上...

有一个小阿飞
6分钟前
1
0
10.23

一、编写一个程序,把用分钟表示的时间转换成用小时和分钟表示的时间。使用#define或const创建一个表示60的符号常量或const变量。通过while循环让用户重复输入值,直到用户输入小于或等于0...

197王彧涛
32分钟前
2
0
手机视频如何制作GIF动图

很多小伙伴都喜欢用GIF动图在各大社交软件上与好友斗图,那你知道这些好玩有趣的GIF动图是如何制作的吗?下面教你一个将手机视频制作成GIF动图的方法,让你都可以随时随地制作有趣的表情包,...

白米稀饭2019
37分钟前
5
0
Spring Security 实战干货:实现自定义退出登录

1. 前言 上一篇对 Spring Security 所有内置的 Filter 进行了介绍。今天我们来实战如何安全退出应用程序。 2. 我们使用 Spring Security 登录后都做了什么 这个问题我们必须搞清楚!一般登录...

码农小胖哥
今天
10
0
JVM核心知识-类加载机制

JVM中类的生命周期包括7个阶段,加载、准备、验证、解析、初始化、使用、卸载。其中准备、验证、解析被归为连接阶段。 加载 jvm在这个阶段完成的工作 通过类名获取类的二进制字节流 将这个字...

moon888
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部