require.js【模块化编程】- 模块加载简例
今天去学习了一下javascript的模块化编程,写了个简单的例子。
———————————————— 这是我的第一篇技术性的小博文,希望和大家相互交流 ————————————————
这个列子我打算分两个部分罗列:
1.文件地图
![](http://images0.cnblogs.com/blog/671034/201409/101758018093599.jpg)
2.源代码
demo.html:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>模块加载简例</title> 6 <script data-main="main" type="text/javascript" src="require.js"></script> 7 8 </head> 9 <body> 10 空页面 11 </body> 12 </html>
a.js
var Radd = function(numA,numB){ return numA + numB; }
b.js
//减法 var Rsub = function(numA,numB){ return numA - numB; } //除法对象 function glinDiv(divisor){ this.divisor = divisor; this.Rdiv = function(num){ return num / this.divisor; } }
c.js
//乘法 var Rmul = function(num,ples){ return num * ples; } //实例化除法对像 myDiv = new glinDiv(4); /*==== 此处依赖 b.js 中定义的 glinDiv 对象 ====*/
main.js
//模块加载路径配置 require.config = { "a":"a", "b":"b", "c":"c" } //模块加载的顺序及回调函数-----------(其中“c”必须在“b”之后,因为“c”中的 “//实例化除法对像” 依赖“b”中的 “//除法对象”) require(["a","b","c"],function(a,b,c){ var num01 = 10; var num02 = 20; var pels = 2; //调用加载好的模块中的函数进行运算 var tol = Rsub(Radd(num01,num02),Rmul(num01,pels)); alert(myDiv.Rdiv(tol));//弹窗test });
require.js(工具库,自己百度)
结语:欢迎各位同学交流指导,特别希望得到一些好的博文表述和展示方式方面的建议!