应用require.js进行javascript模块化编程小试一例

时间:2023-03-09 07:44:27
应用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

应用require.js进行javascript模块化编程小试一例

代码如下:

//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里定义了就行
}
});

应用require.js进行javascript模块化编程小试一例

瞪灯瞪等!且看如何应用:

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的前端自动化构建系列文章(二)