JavaScript重構(十):強化對象封裝和模塊封裝

1、類本身就是一種封裝形式,先來看看最簡單的封裝,JavaScript中沒有private關鍵字,對於私有成員,不如我們統一一個以下劃線開頭的命名來標識:
Js代碼 
var User = function(name){ 
    this._name = name; 
    this.getName = function(){ 
        return _name; 
    }; 
}; 
 
 
2、不過,上面的辦法還不夠好,我依然可以用user._name訪問到這個變量。現在換個思路,通過使用var來定義User中的name屬性,並且通過getName方法來給它暴露訪問入口,實現瞭private一樣的效果:
Js代碼 
var User = function(name){ 
    var name = arguments[0]; 
    this.getName = function(){ 
        return name; 
    }; 
}; 
User.SORT = 1; 
 
var user = new User("Test"); 
alert(user.getName());  //正確打印 
alert(user.name);       //封裝起來的私有成員,不能隨意訪問 
alert(User.SORT);       //類變量 
 
 
3、通過匿名方法,把代碼塊的影響范圍限制在一定區域內:
Js代碼 
(function($){ 
    $.fn.extend({ 
        sayHi : function(){ 
            alert("Hi: " + this.get(0).tagName); 
        } 
    }); 
})(jQuery); 
 
jQuery("body").sayHi(); 
 上例中,外部由於命名沖突的關系,無法使用“$”來獲取jQuery的引用,但是通過這樣匿名函數的調用,在函數實現內部依然可以使用到“$”,並且給JQuery的原型增加瞭一個sayHi的方法。
 
 
4、命名空間帶來的封裝,參見這篇博客。
 
 
5、通過合理規約JS文件的依賴關系和加載執行順序,保證區域代碼執行時對外部的訪問范圍:
Js代碼 
//首先加載URLUtil的類定義,再加載User的類定義,保證瞭依賴關系是User依賴於URLUtil,而不會倒置,避免瞭在URLUtil的代碼區域附近去訪問User對象 
var URLUtil = { 
    getURL : function(){ 
        return "http://xxx"; 
    } 
}; 
 
…… 
 
var User = function(){ 
    var url; 
    this.setURL = function(newUrl){ 
        url = newUrl; 
    }; 
}; 
 
…… 
 
var user = new User(); 
user.setURL(URLUtil.getURL()); 

作者“四火的BLOG”
 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *