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文件都有一個本身的命令空間，而後調用的時候帶命名空間名字就能夠了！