标签：
在网上看到一篇比较好的文章，摘抄做参考。原文地址：https://segmentfault.com/a/1190000002515305；
http://www.cnblogs.com/johnl/archive/2015/01/26/4251300.html
写过php的人对于require函数都不陌生，它的作用为文件导入，也可以把文件理解为模块、导入理解为调用，称为模块调用
随着用户体验的极致追求，前端业务所占比重逐渐增加，于是出现了前端领域的模块化编程
但是模块加载（javascript文件加载）的先后顺序却给我们带来了不小的麻烦，比如处理模块间的依赖关系
需要载入的文件：require
require可以理解为一个工具库，帮助我们更好的架构前端框架，其本身并非前端框架
客户端代码被定义为各模块后，模块之间错综复杂的依赖关系以及模块的按需加载、加载顺序就成了问题
require很好的解决了这个问题，它的模块化管理遵循AMD规范，模块加载不影响后续语句执行
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/norma/p/5455016.html
