(1)方式一:
文件名:routeOne.js
(function(window){
var routeOne= {};
routeOne.constructor = function(){
//............................一系列的业务。
}
window.routeOne=routeOne;//这里将model对象作为属性添加到了window对象中
})(window);
注:方式一的用法也是常用的,如jquery等就是采用的这种方式。
(2)方式二
文件名:routetwo.js
//首先直接定义全局变量
var routeTwo={};
routeTwo.DDD306DDD = function(){
//............................一系列的业务。
}
很显然:上面两种定义的js文件的编写,都不符合AMD规范,也及模块化开发。了解AMD与CMD的规范介绍请挫链接(JavaSript模块规范 - AMD规范与CMD规范介绍)。
require能够加载按照AMD规范来写的js文件,那么require能够加载非AMD规范的js文件呢?答案是肯定的。但是需要一定的配置。详情如下
1:首先是main.js中的require的config的配置。
require.config({
//baseUrl:用来指定加载模块的目录,如果你在加载js文件中使用绝对路径的时候,或者其它相对路径时,可以不写。
//paths,是指定模块的加载路径。
path{
//假如我的routeTwo.js文件在/questionnairePrj/js文件夹下面,那么我引入该js方式为
"routeTwo":"/questionnairePrj/js/routeTwo",//很多人疑惑为什么没有.js后缀,因为这里require加载的文件默认后缀为.js所以不用写。
};
//shim:是配置不兼容的模块。这里用来配置前面讲的不符合AMD规范的模块。
shim{
"routeTwo":{
deps:[],//deps里面就是该js文件依赖的模块。如果没有依赖的模块,那么就为空数组。
exports:"routeTwo",//这里的exports就是模块的返回值,main.js中的exports的值,一定与routeTwo.js中暴露的全局变量的值一致,因为前面的routeTwo.js中的全局变量就是routeTwo,显然routeTwo.js模块的返回值,就是暴露的全局变量window.routeTwo,requirejs就是将这些全局变量的值返回,作为模块的返回结果,如果routeTwo.js中暴露了多个全局变量,那么require可能将任何一个返回。不过一般只有一个全局变量,这样冲突的可能性会减少,毕竟全局变量越少越好。
}
}
});
2:然后是require的加载过程的编写
require(["routeTwo"],function(routeTwo){
//这样routeTwo就加载进来了
});
3:最后是其它模块使用加载进来的模块
//这里我以一个指令为例:
angular.module("uploadImgModel",["routeTwo"])
.directive("routeTwo",function(){
return{
restrict:"E",
replace:true,
controller:function($scope,$transclude,$state,$element,$parse){
//在这里我们就可以调用routeTwo里面的方法了。
},
templateUrl:"/questionnairePrj/directiveHtml/uploadImgTemp.html"
}
});
本文章参考(参考文章)