应用require.js进行javascript模块化编程小试一例
长久以来都渴望应用javascript的模块化编程。今日紧迫更甚，岁月蹉跎，已经不能再等了。
拜读阮一峰的有关文章已经好几遍，文章写得真好，简洁流畅，头头是道，自觉有点明白了。但经验告诉我们，一定要亲手试一试。
一试之下，果然走了一些弯路，加深了理解。
一、下载require.js
http://requirejs.org/docs/download.html
二、编写相应测试代码。计有：
页面：/index.html
主体结构定义JS：/main.js
符合AMD规范的模块化JS：
/js/amd/module-A.js
/js/amd/module-B.js传统意义上的，不符合AMD规范、非模块化的JS
/js/noamd/file-C.js
代码如下：
//module-A.js
//define方法，应该是在require.js定义的。这也是AMD规范的内容之一
define(function (){
var add = function (x,y){
return x + y;
};
return {
add: add
};
});//module-B.js
//依赖于moduleA
define(['moduleA'], function(ma){
function compute(x,y){
return ma.add(x,y);
}
return {
compute : compute
};
});//这是一个传统意义上，非AMD规范的JS；但是，还是要符合一定的规范：需要返回一个对象，以便在main.js里进行exports，然后外部才能进行使用（使用这个对象里面的方法）。
var objectC = (function(){
function multiply(x,y){
return x * y;
}
return {
multiply:multiply
}
})();至关重要的main.js
//main.js
//重点在于如何映射非规范模块
require.config({
baseUrl: "js",
shim: {
'moduleC': {
deps: [],
exports: 'objectC'//这个名字，跟file-C.js里的"var objectC=..." 对应
}
},
paths: {
"moduleA": "amd/module-A",
"moduleB": "amd/module-B",
"moduleC": "noamd/file-C"//非规范化文件这一步也是要的，并非单单在shim里定义了就行
}
});
瞪灯瞪等！且看如何应用：
index.html
<!DOCTYPE html>
<html>
<head>
<script src="require.js"></script>
<script src="main.js"></script>
</head>
<body>
<script type="text/javascript">
require(['moduleB','moduleC'], function (moduleB,moduleC){
alert(moduleB.compute(3,4));//7
alert(moduleC.multiply(3,4));//12
});
</script>
</body>
</html>参考文章：
应用require.js进行javascript模块化编程小试一例的更多相关文章
- 利用require.js实现javascript模块化加载
这种引入很看到很想死吧! <script src="1.js"></script> <script src="2.js">& ...
- Javascript模块化编程（三）：require.js的用法
Javascript模块化编程(三):require.js的用法 原文地址:http://www.ruanyifeng.com/blog/2012/11/require_js.html 作者: 阮一峰 ...
- Javascript模块化编程之路——(require.js)
转自:http://www.ruanyifeng.com/blog/2012/10/javascript_module.html Javascript模块化编程(一):模块的写法 随着网站逐渐变成&q ...
- 坑人的 Javascript 模块化编程 require.js
坑人的 Javascript 模块化编程 require.js
- Javascript模块化编程require.js的用法
JS模块化工具requirejs教程(一):初识requirejs http://www.runoob.com/w3cnote/requirejs-tutorial-1.html JS模块化工具req ...
- (转)Javascript模块化编程（三）：Require.js的用法
转自 ruanyifeng 系列目录: Javascript模块化编程(一):模块的写法 Javascript模块化编程(二):AMD规范 Javascript模块化编程(三):Require.js的 ...
- Javascript模块化编程－require.js
转自:https://www.cnblogs.com/digdeep/p/4607131.html Javascript模块化编程(一):模块的写法 随着网站逐渐变成"互联网应用程序&quo ...
- 坑人的 Javascript 模块化编程 sea.js
坑人的 Javascript 模块化编程 sea.js 忧伤 加 蛋疼的 开始了 看文档 Sea.js 进行配置 seajs.config({ // 设置路径,方便跨目录调用 paths: { 'ar ...
- Javascript模块化编程（二）：AMD规范
Javascript模块化编程(二):AMD规范 作者: 阮一峰 原文地址:http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_d ...
随机推荐
- oracle表空间，分区表，以及索引的总结
表空间: Oracle的UNDOTBS01.DBF文件太大的解决办法 1..禁止undo tablespace自动增长 alter database datafile 'full_path ...
- HDU-4612 Warm up,tarjan求桥缩点再求树的直径！注意重边
Warm up 虽然网上题解这么多,感觉写下来并不是跟别人竞争访问量的,而是证明自己从前努力过,以后回头复习参考! 题意:n个点由m条无向边连接,求加一条边后桥的最少数量. 思路:如标题,tarjan ...
- 九度oj 题目1450：产生冠军
题目描述: 有一群人,打乒乓球比赛,两两捉对撕杀,每两个人之间最多打一场比赛. 球赛的规则如下: 如果A打败了B,B又打败了C,而A与C之间没有进行过比赛,那么就认定,A一定能打败C. 如果A打败了B ...
- xcode错误－第三方的东西他不支持
ld:' /用户/ tanqihong /桌面/金粒子公司/金粒子公司/ Carloans / Carloans /第三/ TongLianPay / lib_release / libAPayLib ...
- BZOJ 1875 [SDOI2009]HH去散步 ——动态规划 矩阵乘法
发现t非常大,所以大概就是快速幂一类的问题了, 然后根据k^3logn算了算,发现k大约是边数的时候复杂度比较合适. 发现比较麻烦的就是前驱的记录,所以直接把边看做点,不能走反向边,但是可以走重边,然 ...
- USACO Party Lamps
题目大意:一排灯有n个,有4种开关,每种开关能改变一些灯现在的状态(亮的变暗,暗的变亮)现在已知一些灯的亮暗情况,问所以可能的情况是哪些 思路:同一种开关开两次显然是没效果的,那么枚举每个开关是否开就 ...
- 浅谈中途相遇攻击--meet-in-the-middle attack
貌似挖的坑也够多了....好多都没填,这篇最后会不会TJ还得看心情TUT 看过大白书的人应该都会发现一种神奇的算法:中途相遇法.(在第58页)这种算法将以空间换时间的思路运用到了极致,但事实上它在密码 ...
- 刷题总结——奇怪的游戏（scoi2012）
题目: 题目描述 Blinker 最近喜欢上一个奇怪的游戏.这个游戏在一个 N*M 的棋盘上玩,每个格子有一个数.每次 Blinker 会选择两个相邻的格子,并使这两个数都加上 1.现在 Blin ...
- Pizza Delivery
Pizza Delivery 时间限制: 2 Sec 内存限制: 128 MB 题目描述 Alyssa is a college student, living in New Tsukuba Cit ...
- ReSharper7.1.25.234 注册机
经常用vs做开发的人都知道,ReSharper是vistual studio必备插件之一.他的智能提示,智能感知,.net底层方法查看,测试等都非常方便,给程序员带来了巨大的效率. 但众所周知ReSh ...