JavaScript設計模式深入分析(1)

一直都在考慮這個月分享大家什麼東西最好，原計劃是打算寫一些HTML5中JS方面的內容或者是AJAX方面的，可是自己由於表達能力，時間，還有個人工作方面的問題，這個還是等下個月再做分享吧。

老規矩，開始本文以前先交代自己寫這篇文章的目的和一些注意事項：

1.首先本人一直從事前端開發，所以除了JavaScript其他的語言瞭解不深，所以文章只會以JavaScript語言的角度去論證;

2.其實我個人在項目用過的模式也不多，對模式的概念的理解也沒有那麼抽象，所以最近在面試中如果面試官問到與模式相關的問題，自己感覺在對答過程中很鬱悶，很多東西表達不清楚，於是就找了些相關資料，才會有這篇文章分享;

3.JavaScript模式與前端的工作和成長密不可分，因為這確實不是一個簡單的話題，所以我只能儘力用簡單表達和例子闡明，而且園子裡有很多的高手，所以希望大家踴躍發言(由於水平有限，請大家多多指教，希望嘴下留情);

4.由於這篇文章更多的只是想起到一個介紹和講解的作用，並不打算對每種模式進行細緻的分析，所以每種模式只用到一個至二個例子，可能會造成這個例子的表達並不是最優的或者不夠全面，如果各位看官覺得不過癮，可以再去尋找相關資料;

5.做任何事都需要堅持，寫部落格也是一樣，嘿嘿，每月至少一篇(文章確實較長，希望能對朋友們有所協助，重點部分在前言中有介紹，大家可以選擇感興趣的模式進行深入)。

6.歡迎轉載，不過請註明出處，謝謝。

瞭解JavaScript設計模式我們需要知道的一些必要知識點：(內容相對基礎，高手請跳過)

JavaScript閉包

1.閉包最常用的方式就是返回一個內嵌函式(何為內嵌函式?就是在函數內部聲明的函數);

2.在JavaScript中有範圍和執行環境的問題，在函數內部的變數在函數外部是無法訪問的，在函數內部卻可以得到全域變數。由於種種原因，我們有時候需要得到函數內部的變數，可是用常規方法是得不到的，這時我們就可以建立一個閉包，用來在外部存取這個變數。

3.閉包的用途 主要就是上一點提到的讀取函數內部變數，還有一個作用就是可以使這些變數一直儲存在記憶體中。

4.使用閉包要注意，由於變數被儲存在記憶體中，所以會對記憶體造成消耗，所以不能濫用閉包。解決方案是 在退出函數之前，將不使用的局部變數全部刪除。

最後還是上一套閉包的代碼吧，這樣更直觀。

 

  
function f(){  
  
 var n = 999;  
  
 function f1(){  
  
   alert(n+=1);  
  
  }  
  
 return f1;  
  
}  
  
var result = f();  
  
result(); // 1000  
  
result(); // 1001  
  
result(); // 1002 
 

封裝：通過將一個方法或者屬性聲明為私用的，可以讓對象的實現細節對其他對象保密以降低對象之間的耦合程度，可以保持資料的完整性並對其修改方式加以約束，這樣可以是代碼更可靠，更易於調試。封裝是物件導向的設計的基石。

儘管JavaScript是一門物件導向的語言，可它並不具備將成員聲明為公用或私用的任何內部機制，所以我們只能自己想辦法實現這種特性。下面還是通過一套完整的代碼去分析，介紹什麼是私人屬性和方法，什麼是特權屬性和方法，什麼是公有屬性和方法，什麼是公有靜態屬性和方法。

私人屬性和方法：函數有範圍，在函數內用var 關鍵字聲明的變數在外部無法訪問，私人屬性和方法本質就是你希望在對象外部無法訪問的變數。

特權屬性和方法：建立屬性和方法時使用的this關鍵字，因為這些方法定義在構造器的範圍中，所以它們可以訪問到私人屬性和方法;只有那些需要直接存取私人成員的方法才應該被設計為特權方法。

共有屬性和方法：直接鏈在prototype上的屬性和方法，不可以訪問構造器內的私人成員，可以存取權限成員，子類會繼承所有的共有方法。

共有靜態屬性和方法：最好的理解方式就是把它想象成一個命名空間，實際上相當於把構造器作為命名空間來使用。

 

  
　/* -- 封裝 -- */ 
  
 var _packaging = function(){  
  
    //私人屬性和方法  
  
    var name = 'Darren';  
  
    var method1 = function(){  
  
       //...  
  
    }  
  
    //特權屬性和方法  
  
    this.title = 'JavaScript Design Patterns' ;  
  
    this.getName = function(){  
  
       return name;  
  
    }  
  
 }  
  
 //共有靜態屬性和方法  
  
 _packaging._name = 'Darren code';  
  
 _packaging.alertName = function(){  
  
    alert(_packaging._name);  
  
 }  
  
//共有屬性和方法  
  
_packaging.prototype = {  
  
    init:function(){  
  
       //...  
  
    }  
  
 }