首先说说require.js
这个js是按需加载js的,也就是说将js写成java引入外包的模式,需要什么就加载什么。传统的写法是一坨js直接加载进来,用不用反正是都扔进来了,大大降低了效率,维护起来也很麻烦。
做的时候我们需要一个入口页面,我这里用的是HTML
<script src="js/lib/require.js" defer async="true" data-main="js/app"></script>
src就是你require.js所存在的路径,data-main的值即就是入口js。
下面是app.js的内容:
requirejs.config({ //默认从 js/lib 中加载模块 baseUrl: 'js/lib', urlArgs: "bust=v201501152", //如果模块ID以app开头,则会在 js/app 目录下寻找 paths: { //path中配置各个js文件的基本路径,冒号前是今后引用该js的缩写名称 app: '../app', zepto: 'zepto', zepto_cookie: 'zepto.cookie', conf: '../conf', tools: '../tools', tm: '../../template/build', mvc: '../mvc', 'socket.io': '../plugin/socketio/socket.io' }, shim: { //shim中配置的是js之间的依赖关系, //或者export出的全局名称(在外部使用时比较方便,export后全局可用) 'zepto_cookie': {deps: ['zepto']}, 'socket.io': {exports: 'io'}, zepto: { exports: '$' } } }); requirejs(['zepto','mvc/workreport/model/workreport_model'], function ($,_wm) { /**这里比较重要:这个写法就是基于AMD规范的闭包。 []中写需要引入的js,例如[]中的第二个参数就是上面path中定义的路径别名+workreport_model.js 对于'mvc'的相对路径。function中的参数,对应[]中的js,其实相当于java中new了一个类,这个时候 这个类中允许被调用的方法就可以 以"类名.方法名"的方式调用。例如代码中的 _wm.getMyTeam(); **/ function init() { _wm.getMyTeam(); }; $(document).ready(function (){ init(); }); })
接着我们来看看_wm中是怎么写的,上面说到_wm其实就是对应的workreport_model.js:
define(['zepto','tools/consts','mvc/workreport/controller/workreport_ctrl','mvc/common/util/DIVHelper'],function($,_tc,_wrc,_dh){ //var requestBaseUrl = _t.baseUrl; var requestBaseUrl = _tc.baseurl; //var token = _tu.token; var token = 'EE6C98324197BF613E4BA7BC3EEBDAD3340A9499B4438EAA15282F22D05C8DB2AF5A67B5A7C5381ACA07001BB1D23632'; var teamData = null; var ccData = null; var errData = null; init=function(){ getMyTeam(); }; /* * 根据token获取当前使用者相关的team * */ getMyTeam = function(){ var url = 'taskhelper/team/getMyTeam?tst=1'; var option = { type:'POST', dataType:'json', url:requestBaseUrl+'/'+url+'&token='+token, success:function(data){ teamData = eval(data); _wrc.init(teamData); }, error:function(e){ errData = e; } }; $.ajax(option); }; openTree=function(){ _dh.WinTip(_dh.input_bgId,_dh.input_showId); }; //原java调用用回调方法 //callbackfn = function(msg){ // alert(msg); //} return{ init:init, getMyTeam:getMyTeam, openTree:openTree } });
我们看到AMD的标准闭包写法是
define([js1,js2...],function(name1,name2...){
//some code
return{
};
});
在最后的return中,可以return方法,也可以是属性。只有被return其他引用本js文件的js才可以使用该方法或者属性,有点java里public 或者 private的意思。与app.js一样,这个js也在define的时候引用了很多其他的js并给与了相应的别名,方便使用。