应用require.js进行javascript模块化编程小试一例
来源:互联网 发布:pcb软件哪个好 编辑:程序博客网 时间:2024/06/16 22:43
长久以来都渴望应用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//依赖于moduleAdefine(['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>
参考文章:
Javascript模块化编程(三):require.js的用法
基于gulp requirejs rjs的前端自动化构建系列文章(二)
0 0
- 应用require.js进行javascript模块化编程小试一例
- javascript 模块化编程 require.js
- Javascript模块化编程 require.js
- 转:javascript模块化编程(require.js)
- Javascript模块化编程:require.js的用法
- Javascript模块化编程:require.js的用法
- Javascript模块化编程--require.js(上)
- Javascript模块化编程--require.js(下)
- Javascript模块化编程:require.js的用法
- Javascript模块化编程:require.js的用法
- Javascript模块化编程:require.js的用法
- Javascript模块化编程require.js的用法
- Javascript模块化编程:require.js的用法
- Javascript模块化编程(三):require.js的用法[require]
- js模块化编程 : require.js
- JS模块化编程 Require.JS
- javascript高级模块化--require.js
- [技巧] Javascript模块化编程(三):require.js的用法
- Java代码优化技巧
- (UVA)1584
- expect的基本用法
- 抽象工厂--Java实现
- linux, kill掉占用60%多cpu的进程,几秒后换个pid 和 command 又出现?
- 应用require.js进行javascript模块化编程小试一例
- (3)ArcGIS 10.2 链接64位Oracle数据库
- 无限重启病毒
- Win下必备神器之Cmder
- maven下载部署以及环境变量配置
- TCP、UDP、HTTP、SOCKET之间的区别
- 去广告引用优酷视频
- java合成多张图片
- MySQL 开启与关闭远程访问