js中的變量封裝

一般情況下，我們寫一些簡單的js時，都如下：

var name = 'Chris';
 var age = '34';
 var status = 'single';
 function createMember(){
 // [...]
 }
 function getMemberDetails(){
 // [...]
 }
           

但因為js變量的作用範圍問題（function外的變量均為全局變量），加入引用的頁面中出現多次的同變量名定義，之前的變量就會被替換。

為了解決這一問題，我們可以把 變量和函數 封裝在一個特定的函數中，如下：

var myApplication = function(){
  var name = 'Chris';
  var age = '34';
  var status = 'single';
  function createMember(){
    // [...]
  }
  function getMemberDetails(){
    // [...]
  }
}();
           

沒錯，上面的方法很好的解決了變量作用範圍的問題，但也出現了新的問題，myApplaction中的變量和函數無法在其他地方調用。

當然，如果你認為這樣就滿足要求了，這自然是一個不錯的解決方案，或者我們可以寫得更簡單：

(function(){
  var name = 'Chris';
  var age = '34';
  var status = 'single';
  function createMember(){
    // [...]
  }
  function getMemberDetails(){
    // [...]
  }
})();
           

但大多數情況下，我們都希望之前定義的函數或者變量可以進行重用，那下面的優化就可以滿足我們了：

var myApplication = function(){
 var name = 'Chris';
 var age = '34';
 var status = 'single';
 return{
 createMember:function(){
 // [...]
 },
 getMemberDetails:function(){
 // [...]
 }
 }
 }();
 // myApplication.createMember() and
 // myApplication.getMemberDetails() now works.
           

這種做法稱之為：a module pattern 或者 singleton

在YUI中用得非常多，進一步優化：

var myApplication = function(){
 var name = 'Chris';
 var age = '34';
 var status = 'single';
 function createMember(){
 // [...]
 }
 function getMemberDetails(){
 // [...]
 }
 return{
 create:createMember,
 get:getMemberDetails
 }
 }();
 //myApplication.get() and myApplication.create() now work.
           

via：http://coding.smashingmagazine.com/2010/04/20/seven-javascript-things-i-wish-i-knew-much-earlier-in-my-career/