使用require加载非AMD规范的js文件,并在模块中使用。

一:浅析javascript中定义全局变量的方式。首先申明,两种方式本质是等价的。原理都是向window对象中注入新的属性或者方法。


(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(){

//............................一系列的业务。

}

二:require引入不规范的模块

很显然:上面两种定义的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"
}
});


本文章参考(参考文章)



你可能感兴趣的:(angularJS,require.js)