JavaScript没有包管理概念,没有有效的命名空间机制,但通过require.js库,则能很好的实现js的命名空间管理,实现不同js模块间的调用和依赖。
定义模块:
mod1.js
define(funtion() {
...
return {...} // 需要暴露出的属性
}) // 定义mod1.js模块
mod2.js
define(['mod1'], function(m1) {
...
return {...}
}) // 定义mod2.js模块,并依赖于mod1模块
引用模块:
main.js
require(['mod1', 'mod2'], function(m1, m2)) {...}
html中引用require.js库:
<script type="text/javascript" data-main="main" src="require.js"></script> // data-main为主入口文件
模块中引用jquery模块:
1. 修改路径映射
require.config({
paths: {
jquery: 'jquery-1.11.1.min',
jqueryUI: 'jquery-ui-1.10.4.min'
}
});
2. 添加jquery依赖
define(['jquery', 'jqueryUI'], function($, $UI) {...})
通过paths属性修改路径映射,避免引用时书写繁琐的后缀名。