应用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 ...
随机推荐
- BZOJ 3856: Monster【杂题】
Description Teacher Mai has a kingdom. A monster has invaded this kingdom, and Teacher Mai wants to ...
- 【数位DP】HDU 6156 Palindrome Function
http://acm.hdu.edu.cn/showproblem.php?pid=6156 [AC] #include<bits/stdc++.h> using namespace st ...
- jenkins异常解答
1.安装插件时offline 需要更换插件管理中的升级URL http://mirror.xmission.com/jenkins/updates/current/update-center.js ...
- day2之爬取拉勾网
认证流程 浏览器清空cookies 步骤一 访问拉勾网网站 https://www.lagou.com/ 做了些什么: 以get方式请求"https://www.lagou.com/&qu ...
- 洛谷 [P3224] 永无乡
Treap 的合并 首先感谢 @Capella 的DeBug 其次,这是由一个 & 号引发的血案 注意对于所有修改操作都要 & Treap的合并, 启发式合并,对于每一个节点都 ins ...
- 安装sqlServer2012失败补救
今天拿着新电脑win10,装数据库2012,装了第一次,没装上,有一半的工具都失败了,慌了.. 连management studio都没装上,我用navicat也连不上. 卸了,第二次安装,装一半卡住 ...
- HDU 4433 locker（12年天津，DP）
4576 njczy2010 C Accepted 860 KB 140 ms G++ 2063 B 2014-10-16 09:51:19 哎,为啥1000*100*100的复杂度的dp就不敢敲了呢 ...
- excel批量导入数据库SQL server
思路: 第一是文件上传,可以参照Jakarta的FileUpload组件,用普通的Post也就行了.第二是Excel解析,用JSL或者POI都行第三是数据保存,这个应该简单吧,一个循环,一行对应一条数 ...
- P1111 修复公路 洛谷
https://www.luogu.org/problem/show?pid=1111 题目背景 A地区在地震过后,连接所有村庄的公路都造成了损坏而无法通车.政府派人修复这些公路. 题目描述 给出A地 ...
- @font-face制作小图标的实践
1.为啥要用font-face制作小图标 1)适用性:一个图标字体要比一系列的图像要小,一旦字体图标加载完,图标则会立刻显示出来,不需要去下载一个图像. 2)可扩展性:可以使用font-size对图标 ...