Asynchronous Module Definition - 异步加载模块规范
解决模块化编程带来的代码加载先后顺序问题及常规异步加载代码带来的不确定因素
|
1
|
<script src="/static/js/require.min.js" data-main="/static/js/shop"></script> |
data-main指定了入口配置文件shop.js，同时指定了基于shop.js的相对路径baseUrl，baseUrl可以在config配置方法内重置
|
1
2
3
|
require.config({ baseUrl : ‘js/lib‘}); |
|
1
2
3
4
5
6
|
require.config({ paths : { jquery : ‘jquery.min‘, control : ‘control‘ }}); |
已配置路径的模块的调用方式
|
1
2
3
|
require([‘jquery‘, ‘control‘], function ($, Control){ return true;}); |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
require.config({ paths : { underscore : ‘underscore.min‘, backbone : ‘backbone.min‘ }, shim : { underscore : { exports : ‘_‘ }, backbone : { deps : [‘underscore‘], exports : ‘Backbone‘ } }}); |
有时我们需要使用非AMD定义模块，如jQuery，需要shim参数来帮助解决这些库的解析名称及载入顺序问题
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
require.config({ paths : { jquery : ‘jquery.min‘, jqmd5 : ‘jquery.md5‘, cookie : ‘public/cookie‘, jqui : ‘jquery.ui.min‘, /* 前端UI框架 */ jquid : ‘jquery.ui.dialog.min‘, /* 前端UI框架 - 模态框模块 */ jqtmpl : ‘jquery.tmpl.min‘, /* 模版引擎 */ jqvali : ‘jquery.validation.min‘, /* 表单验证 */ jqvalicn : ‘jquery.validation.cn.min‘, /* 表单验证汉化 */ base : ‘base‘, /* 基础功能 */ control : ‘control‘, /* 控制器模块 */ login : ‘login/index‘, /* 登录页模块 */ register : ‘register/index‘, /* 注册页模块 */ detail : ‘detail/index‘ /* 详情页模块 */ }});require([‘control‘], function (Control){ Control.cookie(); Control.template();}); |
|
1
2
3
4
|
define(function (){ var control = {}; return control;}); |
该模块调用不依赖其它模块
|
1
2
3
4
|
define([‘base‘], function (){ var control = {}; return control;}); |
该模块调用需要依赖base模块
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
define([‘jquery‘, ‘jqmd5‘, ‘cookie‘, ‘base‘], function (){ var control = {}; /** * 登录状态检测 */ control.cookie = function (){ setTimeout(WK.LC.syncLoginState, 100); }; /** * 模块调用及配置 */ control.template = function (){ if($(‘.naver‘).length > 0) base.naver(); if(CATEGORY == ‘login‘) { if(MODEL == ‘index‘){ // 登录页 require([‘login‘], function (Login){ Login.form(); }); }; if(MODEL == ‘register‘ || MODEL == ‘check‘){ // 注册页 require([‘register‘], function (Register){ Register.form(MODEL); }); }; }; if(CATEGORY == ‘goods‘) { // 详情页 if(MODEL == ‘index‘){ require([‘detail‘], function (Detail){ // Detail.form(); }); }; }; }; return control;}); |
|
1
2
3
4
|
require([‘control‘], function (Control){ Control.cookie(); Control.template();}); |
定义模块的define方法和调用模块的require方法，合称AMD模式
该模式的定义模块方法清晰且不会污染全局环境，能够清楚的显示依赖关系
原文：http://www.cnblogs.com/bzggood/p/5844526.html