文档章节

RequireJS与SeaJS模块化加载示例

nosand
 nosand
发布于 2014/05/04 13:40
字数 803
阅读 4049
收藏 135
点赞 9
评论 10

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

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

就只是简单的说了下两者基本用法。后期有详解不?
后期用到啥写啥,现学现卖
郏高阳
郏高阳
就只是简单的说了下两者基本用法。后期有详解不?
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
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
关于 CommonJS AMD CMD UMD

一、CommonJS CommonJs 是服务器端模块的规范,Node.js采用了这个规范。 根据CommonJS规范,一个单独的文件就是一个模块。加载模块使用require方法,该方法读取一个文件并执行,最后返回文件...

雪飘七月
06/26
0
0
关于 CommonJS AMD CMD UMD

CommonJS CommonJs 是服务器端模块的规范,Node.js采用了这个规范。 根据CommonJS规范,一个单独的文件就是一个模块。加载模块使用require方法,该方法读取一个文件并执行,最后返回文件内部...

奥巴码侬
2014/05/11
0
8
浅谈Javascript模块化开发

*** 自己接触过的几种javascript模块开发,由于水平有限,只能简单谈一谈。 *** 立即执行匿名函数 由于javascript的函数作用域,将模块代码放入立即执行匿名函数中,防止污染全局变量。将需要...

jackzlz
2015/08/17
0
0
Js模块化之-import和export

AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。AMD推崇依赖前置,在定义模块的时候就要声明其依赖的模块 CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。CMD推崇就近依赖,只有...

kimyeongnam
07/05
0
0
前端模块化,AMD和CMD的区别总结

AMD和CMD都是浏览器端的js模块规范,2者的区别总结如下: 1、AMD推崇依赖前置,CMD推崇就近依赖 这种区别各有优劣,只是语法上的差距,而且requireJS和SeaJS都支持对方的写法 2、执行时机不同...

Super Mouse
07/02
0
0
Angular项目构建指南 - 不再为angular构建而犹豫不决

前言 接触Angular也有小半个月了,虽然没有使劲折腾,不过正所谓"no zuo no die".学一门新东西,不好好折腾一下总觉得对不起祖国,最不起人民...好像扯远了,想写前言来着.为什么要写这篇构建指南...

顽Shi
2014/06/16
0
16

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring Cloud Gateway 接口文档聚合实现

在微服务架构下,通常每个微服务都会使用Swagger来管理我们的接口文档,当微服务越来越多,接口查找管理无形中要浪费我们不少时间,毕竟懒是程序员的美德。 由于swagger2暂时不支持webflux 走...

冷冷gg
22分钟前
11
0
流利阅读笔记30-20180719待学习

1.今日导读 2.带着问题听讲解 3.新闻正文(中英文对照) 4.重点词汇 5.拓展内容

aibinxiao
25分钟前
1
0
OSChina 周五乱弹 —— 我们是食物链的最底层

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @温家成 :分享谢安琪的单曲《姿色份子》 《姿色份子》- 谢安琪 手机党少年们想听歌,请使劲儿戳(这里) @贪吃飒:最近p2p怎么了、半个月爆了...

小小编辑
38分钟前
6
1
Android Studio 3.0 之后打包apk出现应用未安装问题

1、废话 出现这个问题的原因,并不是只有一个,而是有多个原因,不懂的估计会被搞得一头雾水,下面我列举的是我遇到的几种问题和网友遇到的几种问题,但不一定是全部,也有可能有些莫名其妙的...

她叫我小渝
58分钟前
0
0
前端基础

1. get请求传参长度的误区 误区:我们经常说get请求参数的大小存在限制,而post请求的参数大小是无限制的。 实际上HTTP 协议从未规定 GET/POST 的请求长度限制是多少。对get请求参数的限制是...

wenxingjun
今天
0
0
拦截SQLSERVER的SSL加密通道替换传输过程中的用户名密码实现运维审计(一)

工作准备 •一台SQLSERVER 2005/SQLSERVER 2008服务 •SQLSERVER jdbc驱动程序 •Java开发环境eclipse + jdk1.8 •java反编译工具JD-Core 反编译JDBC分析SQLSERVER客户端与服务器通信原理 SQ...

紅顏為君笑
今天
9
0
jQuery零基础入门——(六)修改DOM结构

《jQuery零基础入门》系列博文是在廖雪峰老师的博文基础上,可能补充了个人的理解和日常遇到的点,用我的理解表述出来,主干出处来自廖雪峰老师的技术分享。 在《零基础入门JavaScript》的时...

JandenMa
今天
0
0
linux mint 1.9 qq 安装

转: https://www.jianshu.com/p/cdc3d03c144d 1. 下载 qq 轻聊版,可在百度搜索后下载 QQ7.9Light.exe 2. 去wine的官网(https://wiki.winehq.org/Ubuntu) 安装 wine . 提醒网页可以切换成中...

Canaan_
今天
0
0
PHP后台运行命令并管理运行程序

php后台运行命令并管理后台运行程序 class ProcessModel{ private $pid; private $command; private $resultToFile = ''; public function __construct($cl=false){......

colin_86
今天
1
0
数据结构与算法4

在此程序中,HighArray类中的find()方法用数据项的值作为参数传递,它的返回值决定是否找到此数据项。 insert()方法向数组下一个空位置放置一个新的数据项。一个名为nElems的字段跟踪记录着...

沉迷于编程的小菜菜
今天
1
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部