js中的變數封裝

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

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

 

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

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

[javascript]
var myApplication = 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';
  function createMember(){
    // [...]
  }
  function getMemberDetails(){
    // [...]
  }
}();

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

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

 

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

 

 

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

[javascript]
var myApplication = function(){ 
 var name = 'Chris'; 
 var age = '34'; 
 var status = 'single'; 
 return{ 
 createMember:function(){ 
 // [...]  
 }, 
 getMemberDetails:function(){ 
 // [...]  
 } 
 } 
 }(); 
 // myApplication.createMember() and  
 // myApplication.getMemberDetails() now works. 
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中用得非常多，進一步最佳化：

[javascript]
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. 
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/

 摘自 簡生的代碼備忘錄