首頁 >web前端 >js教程 >JavaScript 命名空間 使用介紹_javascript技巧

JavaScript 命名空間 使用介紹_javascript技巧

WBOY
WBOY原創
2016-05-16 17:24:101659瀏覽

使用過Java、C#的同學對命名空間非常的熟悉,在複雜的系統中會有N多的函數、對象,語言提供的、架構預定義的,這麼多的函數和對象,由於程式設計規範要求起有實際意義的名字,難免會重名發生錯誤調用,而有了命名空間煩惱就沒有了,不但可以分類組織函數與對象,還可以形成隔離,解決重名問題。

使用JavaScript就沒有這麼舒服了,Javascript只有函數作用域,什麼塊兒啊、神馬文件啊統統都認為是一個命名空間的,有時因為一些重名問題導致的錯誤讓人莫名其妙,難以調試解決。

一個簡單的例子

複製程式碼 程式碼如下:



       
由於JavaScript沒有檔案作用域,不同的函數分散在不同的檔案中,甚至由不同的人編寫,重名的機率大大增加。是不是夠小心就可以了呢?也不盡然,還有些意外狀況,例如常常會用到繼承,於是寫了一個沒出現過的函數名稱extend,不料在EcmaScript5中加入了extend函數,命名空間的必要性就體現出來了。

JavaScript有函數的作用域,可以利用這點把自訂的函數寫到一個函數體內,這樣函數內的變數、物件、函數就像在一個命名空間內一樣和外部隔離。

複製程式碼

程式碼如下:

                  this.alert=function( ){                    console.log('test');
      }
       



這樣自訂的alert方法就不會跟window的alert衝突了。


簡單進化


這樣可以是可以,但也有問題,最大的問題在於呼叫方式複雜而醜陋!每次呼叫的時候都要實例化對象,然後呼叫其方法,簡單修改程式碼讓其實現自動實例化。

複製程式碼

程式碼如下:




       
       //function 身體

 })(); 

這樣寫xxx函數就可以在定義完後自動執行,看起來神奇,其實上面寫法可以拆成這樣



複製程式碼

程式碼如下:function xxx(){
function xxx(){
       //function 身體

 }

xxx();


就是定義一個函數,然後使用括號語法調用,而函數定義外面的一層括號只起到將函數聲明轉為函數定義表達式,因為只有表達式才可以使用括號調用。看懂這些妖蛾之後上面程式碼就簡單了,在自訂namespace函數最後把this賦值為window的NS屬性,在呼叫的時候直接使用NS.xx就可以了。看起來好了很多。

美化一下

上面的寫法看起來不錯了,但是函數名稱namespace似乎是多餘的了,可以美化一下

複製程式碼 程式碼如下:
( function(){
                    console.log('test');
              window.NS=this;
            })();



變成了一個立即執行的匿名函數,美化了一些,不過看起來還是怪怪的,對呀,明明是實例化的function,為什麼方法定義不寫到prototype中呢,匿名函數怎麼寫prototype 。 。 。 ,還得動動腦筋

複製碼

                }
                       console.log('test');
               ;
            })();




寫幾個有用的函數


querySelector和querySelectorAll是W3C提供的新的查詢接口,但是名字好長,自己寫個簡單的,innerHTML屬性也常用到,寫個簡單版仿jQuery的html方法

複製程式碼

程式碼如下:


(function () {
            var _NS = function () {

      _NS.prototype.select = 函數(選擇器,下方){
var context = context || document;
               return context.querySelectorAll(selector);
   
            _NS.prototype.isArrayLike=function(obj){
                    return true;                }


                var length=obj.length;
                         return true;
                         }

            _NS.prototype.html = function (obj,value) {
          
                if (typeof value == 'string') {
                          obj.innerHTML = value;
                        var length = obj.length;
                        while (i                          obj[i].innerHTML = value;

                            i = 1;
                        }

                    }

                } else {
                    if (!isArray) {
                       return obj.innerHTML;
                  } else {
                        return obj[0].innerHTML;
                    }
                }
            }

            window.NS = new _NS();
        })();

這樣一個有命名空間的簡單JavaScript庫就寫成了,不用擔心命名衝突了,但是用起來很不方便啊,做前端的同學都用過jQuery,人家用起來那叫一個簡單,jQuery是怎麼做的?欲知後事如何,且聽下回分解。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn