requirejs多重依赖的实现
在使用requirejs管理代码的时候会有a依赖b，b依赖c……这样的情况，我选我遇到的的一种来说。
我在某一次使用requirejs的时候引入angular与它的插件angular-ui-router，angula-ui-router是依赖于angular的，而main.js又依赖于这两者，如果直接使用
//config.js
requirejs.config({
baseUrl: './js',
paths: {
jquery: 'lib/jquery/jquery',
angular: 'lib/angular/angular',
angularUiRouter:'lib/angular-ui-router/angular-ui-router',
main:'main'
},
shim: {
angular : {
exports : 'angular'
},
angularUiRouter : {
exports : 'angularUiRouter'
}
}
});
requirejs(['main'], function(main) {
});
//main.js
define(['angular','angularUiRouter',function(angular,angularUiRouter){
});
的写法，就会出现有时候angular-ui-router先于angular被读取的情况，就是第一次进入页面肯定会报错。
那么我在angular-ui-router.js里面给它加上了define(['angular'],function(angular){});这样一层，
在config.js里面
在
requirejs(['main'], function(main) {
});
之前添加
requirejs(['angularUiRouter'], function(angularUiRouter) {
});
define(['angular','angularUiRouter',function(angular,angularUiRouter){
修改为
define(['angularUiRouter'], function(angularUiRouter) {
这样就实现了两重依赖而不会有报错的情况了
ps：同样的，mvc模式我们可以这么写
在新添加的模块controllers.js中
define(['angular'],function(angular){
angular.module('firstController',function($scope){……});
});
在config.js添加声明
requirejs.config({
paths:{
……
controllers:'controller'
},
shim:{
……
}
})
requirejs(['controllers'],function(angular){
});
requirejs(['main'], function(main) {
});
在main.js中
define(['controllers','angularUiRouter',function(controllers,angularUiRouter){
});
新定义的模块就能被引用到主要js里面了