JavaScript 模块化加载

存在AMD(Asynchronous Module Definition异步模块定义)规范和CMD(Common Module Definition通用模块定义)规范。
对于依赖的模块,AMD是提前执行,CMD是延迟执行;并非绝对,CMD推从as lazy as possible;
AMD推从依赖前置,CMD推从依赖就近;
AMD的API默认一个当多个用,CMD的API职责单一。

一个简单的开始,使用Sea.js模块化框架,该框架遵循CMD规范,简单的使用如下:

JavaScript 模块化加载
1 define(function(require, exports, module) {
2     exports.name="xf_z1988";
3     exports.getnm=function(){
4         return exports.name;
5     };
6 });
定义一个CMD模块define_test_exports
JavaScript 模块化加载
1 define(function(require, exports, module) {
2     module.exports={
3         name:"xf_z1988 module.exports test"
4     };
5 });
定义个CMD模块define_test_module_exports
JavaScript 模块化加载
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <style rel="stylesheet" type="text/css">
 6 </style>
 7 <script src="http://seajs.github.io/examples/sea-modules/seajs/seajs/2.1.1/sea.js"></script>
 8 <script type="text/javascript">
 9 if(typeof define === "function" && define.cmd){
10     show();
11 }
12 function show(){
13     seajs.config({
14         // 定义基本路径.
15         base:"/",
16         // 别名.
17         alias:{
18             "jquery":"http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js",
19             "define_test_exports":"http://files.cnblogs.com/xf_z1988/js_cmd_define_test_exports.js",
20             "define_test_module_exports":"http://files.cnblogs.com/xf_z1988/js_cmd_define_test_module_exports.js"
21         },
22         // 提前加载.
23         preload:["jquery"]
24     });
25     // 在页面中加载模块.
26     seajs.use(["jquery","define_test_exports"],function(_$,x){
27         $(document).ready(function(){
28             document.body.innerHTML+=x.name+"_1<br/>";
29         });
30     });
31     // 定义模块
32     define(function(require,request,module){
33         // 同步加载一个模块.
34         var xd=define("define_test_exports");
35         // 异步加载一个模块,在加载完成时,执行回调
36         require.async("define_test_module_exports", function(x) {
37             $(document).ready(function(){
38                 document.body.innerHTML+=x.name+"_2<br/>";
39             });
40         });
41     });
42 }
43 </script>
44 </head>
45 <body></body>
46 </html>
一个使用Sea.js来模块化的例子

未完成

 

JavaScript 模块化加载,布布扣,bubuko.com

JavaScript 模块化加载

上一篇:JavaScript Ajax技术


下一篇:ThinkPHP5.0打造小程序商城构建全栈应用