js命名空间的玩法详解

时间 2019-11-07

原文原文链接

1.首先为何要用js命名空间
javascript

在咱们的项目中，若是多我的为同一个页面写js的话，命名冲突就有可能发生，若是全部的函数都是全局的话，以下：css

a.js中html

function com()
{
  .....
}

b.js中java

function com()
{
    ........
}

且一个页面同时引用了这两个js文件，这样咱们调用的时候会出问题，可能总是调用到第一个文件里面的函数了，我以前在作一个项目的时候就碰到了这个问题，我本身b.js文件中ajax的响应函数的名字和a.js文件中的ajax响应函数名字同样，结果，ajax响应数据每次到一个a.js中去了，而两个响应函数要作的功能不同，因此出问题了，后来咱们是把b.js的ajax的响应函数的名字重命名了，后来就没有冲突了，（当时我不知道用命令空间的办法，因此采用这种方法）c++

其实，若是我弄一个命名空间，这样a.js里面的函数在a空间中，b.js里面的函数在b命令空间中。ajax

这样咱们调用的时候就能够以下调用：dom

     a.com();
     b.com();

2.js如何制造命名空间函数

咱们知道不少语言，天生支持命名空间，好比c++,java，等等，可是咱们的javascript并无在其语法中有规定专门为命名空间的提供什么语法，可是若是咱们熟悉js的对象字面量的表示法以后，咱们就能够完全的理解js命名空间的玩法了。（其实就是利用js对象字面量这个语法来实现js的命名空间的）this

下面咱们来介绍一下s命名空间的玩法，仍是接着上面的上面提出的这个问题，要想实现以下调用:spa

     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文件之间就不会有命名冲突了

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文件都有一个本身的命令空间，而后调用的时候带命名空间名字就能够了！