全局配置main.js:
var version = +new Date();
require.config({
urlArgs: 'v=' + version,
// 根路径设置,paths下面全部都是根据baseUrl的路径去设置
baseUrl: '../addons/ewei_shopv2/static/js/app/',
paths: {
// 引入文件的路径
'jquery': '../dist/jquery/jquery-1.11.1.min',
'jquery.gcjs': '../dist/jquery/jquery.gcjs',
'Rx':'../dist/Rx/Rx.min',
'bridgeSelf':'../dist/bridge/bridge_self',
'clipboard':'../dist/clipboard.min'
},
// 用来配置不兼容的模块,意思是:该模块没有module.exports,
// jquery就有module.exports输出值
shim: {
'foxui':{
//foxui需要依赖jquery,所以得加deps
deps:['jquery']
},
},
//map"告诉RequireJS在任何模块之前,都先载入这个模块
waitSeconds: 0
});
自定义模块:
dist/moduleA.js
define(function() {
var modal = {};
modal.init = function(){
console.log('我是一个独立的模块A');
}
return modal;
});
dist/moduleB.js
define(function() {
var modal = {};
modal.init = function(){
console.log('我是一个独立的模块B');
}
return modal;
});
dist/moduleC.js
define(['dist/moduleA','dist/moduleB'], function(moduleA,moduleB) {
var modal = {};
modal.init = function(){
console.log('我是引用了moduleA和moduleB的模块C');
moduleA.init(); //我是一个独立的模块A
moduleB.init(); //我是一个独立的模块B
}
return modal;
});
使用:
<!--先引入require.js-->
<script src="js/plugin/require.js"></script>
<!--再引入全局配置-->
<script src="js/main.js"></script>
<script>
//用require引入要引入的模块,[]:已经在main.js里面的Paths设置好了的可以直接引用名称,例如jquery和Rx
//function(),小括号里面对应[]里面值,按顺序在()给变量名
require(['jquery','Rx','dist/moduleC'],function ($,'Rx','moduleC') {
moduleC.init();
/*moduleC.init()运行结果*/
//我是引用了moduleA和moduleB的模块C
//我是一个独立的模块A
//我是一个独立的模块B
console.log($('.rechargeInput').val()); // jquery方法
Rx.Observable.fromEvent($('#rechargeInput'), 'input'); //rxjs方法
})
</script>