1.首先为什么要用js命名空间
在我们的项目中,如果多个人为同一个页面写js的话,命名冲突就有可能发生,如果所有的函数都是全局的话,如下:
a.js中
function com() { ..... }
b.js中
function com() { ........ }
且一个页面同时引用了这两个js文件,这样我们调用的时候会出问题,可能老是调用到第一个文件里面的函数了,我之前在做一个项目的时候就碰到了这个问题,我自己b.js文件中ajax的响应函数的名字和a.js文件中的ajax响应函数名字一样,结果,ajax响应数据每次到一个a.js中去了,而两个响应函数要做的功能不一样,所以出问题了,后来我们是把b.js的ajax的响应函数的名字重命名了,后来就没有冲突了,(当时我不知道用命令空间的办法,所以采用这种方法)
其实,如果我弄一个命名空间,这样a.js里面的函数在a空间中,b.js里面的函数在b命令空间中。
这样我们调用的时候就可以如下调用:
a.com(); b.com();
2.js如何制造命名空间
我们知道很多语言,天生支持命名空间,比如c++,java,等等,但是我们的javascript并没有在其语法中有规定专门为命名空间的提供什么语法,但是如果我们熟悉js的对象字面量的表示法之后,我们就可以彻底的理解js命名空间的玩法了。(其实就是利用js对象字面量这个语法来实现js的命名空间的)
下面我们来介绍一下s命名空间的玩法,还是接着上面的上面提出的这个问题,要想实现如下调用:
a.com(); b.com();
可以用如下方法:
var a={ com: function(){ .......... } } var b={ com: function(){ } }
上面都是采用对象字面量的方法,定义了两个对象a和对象b是全局的,且两个对象里面都有一个com方法,没有变量,(我们知道js里面的对象可以拥有属性和方法),可以看得到我们已经实现js的命令空间了。
例如:登录界面有一个login.js文件,他的命名空间为:
var BP={ login:{ //其余关于这个登录页面的函数和全局变量写在这个里面,即在这个命名空间里面 } }
这个表示全局对象BP里面有一个login对象,然后关于对登录界面的操作都在的属性和方法都要放在login对象里面,就是关于这个页面的操作在命名空间BP.login里面。BP便是项目名字,loging表示本js的功能
很多人可能不习惯这种方式,比较习惯比如BP.login这种方式的来注册一个命令空间 nameSpace.Register("BP.login")(比较符合其他语言的命令空间); 我们只需要在Resister这个函数里面动态的创建出BP对象和BP的子对象login。
动态创建对象我们可以通过 两种方法:1.window 对象实现 2.eval实现。
我们只介绍通过注册window方法
我们知道定义一个对象可以这样,window[‘BP‘]={}; window.BP[‘login‘]={};表示window对象有一个子对象BP,BP有一个子对象login。
下面就是采用这种方法来动态的拆分字符串,然后用上面这种方法动态创建对象的
var nameSpace = nameSpace || {}; (function () { var global = window; /** * * @param {} nsStr * @return {} */ nameSpace.ns = function (nsStr) { var parts = nsStr.split("."), root = global, max, i; for (i = 0, max = parts.length ; i < max ; i++) { //如果不存在,就创建一个属性 if (typeof root[parts[i]] === "undefined") { root[parts[i]] = {}; } root = root[parts[i]]; } return root; }; })();
逐一解释一下
a.表示nameSpace定义成一个对象
var nameSpace = nameSpace || {};
b.//匿名函数
(function(){
//code,运行的代码
})();
注意:()在JavaScript中有两种含义:一是运算符;二是分隔符。
上面匿名函数需要说明两点:
①红色括号里是一个匿名函数,红色括号代表分割,表示里面的函数是一个部分;
②绿色括号表示一个运算符,表示红色括号里面的函数要运行;相当于定义完一个匿名函数后就让它直接运行。
3.使用命名空间
在我们登录的界面的login.js文件中,我们一般希望我们的每一个js文件里面的代码都放在自己的命名空间里面,这样多个js文件之间就不会有命名冲突了
login.js文件内容如下:
nameSpace.ns("BP.login"); //注册命令空间 BP.login={ min_height:660,//页面最小高度 min_widht:1024,//页面最小宽度 isIE:false, init:function(){ this.isIE=$.browser.msie; this.regEvent(); this.initPage(); BP.page.i18nInit();//国际化加载 } ........ ....... }
使用命名空间里面的函数:
<html> <head> <meta name="others" content="login_page"> <script type="text/javascript"> $(document).ready(function(){ BP.login.init(); }); </script> </head> <body> </body> </html>
utils.js文件内容如下:
nameSpace.ns("BP.utils"); BP.utils = { time:3000, timeOut:null, interValForFake:null, isProgressBarShow:false, timeOutReturn:‘‘, alert:function(content){ var dom=$("#alert_tip"); $(".alert_tip_content",dom).text(content); if(dom.hasClass("alert_tip_system_config_bg")){//系统设置中 var tbW=$("#tb").width(); var left=tbW/2 -dom.width()/2 +180; $("#alert_tip").css({"left":left,"top":38}); }else{ var bw=$("body").width(); var left=bw/2 -dom.width()/2; $("#alert_tip").css("left",left); } dom.show(); this.timeOutReturn = setTimeout(function(){ dom.fadeOut(2000); },2000); }, ............................. }
总之后面就不再列举了,反正每一个js文件都有一个自己的命令空间,然后调用的时候带命名空间名字就可以了!