javascript設計模式之單體模式

單體是一個用來劃分命名空間並將一批相關的屬性和方法組織在一起的對象，如果他可以被執行個體化，那麼他只能被執行個體化一次。
單體模式是javascript裡面最基本但也是最有用的模式之一。
特點：
1.       可以來劃分命名空間，從而清除全域變數所帶來的危險。
2.       利用分支技術來來封裝瀏覽器之間的差異。
3.       可以把程式碼群組織的更為一體，便於閱讀和維護。
單體的基本結構（正確寫法）：
/*Basic Singleton*/
var Singleton = ｛

         attribute1：true,

         attribute2:10,

         method1:function(){},

　　　　　method2:function(){}

｝;
 
1劃分命名空間：
 1 var box = {
 2         width:0,
 3         height:0,
 4         getArea:function(){
 5             return this.width*this.height;//js中對象成的訪問必須是顯示的，即this是不能省略的
 6         },
 7         init:function(w,h){
 8         //    width = w;
 9         //    height = h;這種方式相當於定義了兩個全域變數，（沒加var聲明的變數為全域變數）
10         //    並不是對對象width和height的賦值
11         //下面是正確的
12             this.width = w;
13             this.height = h;
14         }
15     }//box劃分了一個命名空間，命名空間裡的變數只在空間裡有效
16
上面的單體中的所有的成員以及方法都是公有的（public），也就是在單體的外部可以對他們進行任意的改動，那為什麼說單體提供了一個命名空間呢？
 
我們繼續：
 1 var box = {
 2         width:0,
 3         height:0,//單體的變數
 4         getArea:function(){
 5             return width*height;//中的,width，height其實並不是單體的變數，而是在init中定義的全域變數
 6         }
 7         init:function(w,h){
 8             width = w;
 9             height = h;
10         }
11     }//init中width，height其實並不是單體的變數
12 window.onload = function(){
13         var init = box.getArea();
14     alert(init);
15 }
由於沒有對init中的width，height進行初始化，所以會報錯，這樣改一下：
 1 var box = {
 2         width:0,
 3         height:0,
 4         getArea:function(){
 5             return width*height;
 6         },
 7         init:function(w,h){
 8             width = w;
 9             height = h;
10         }
11     }
12 window.onload = function(){
13         width = 0;
14         height = 0;
15         //or box.init(0,0);
16         var init = box.getArea();
17     alert(init);
18 }
發現可以了，由於init和 getArea所用的width和height並不是歸單體所有的變數，而是一個全域變數，所以我們可以在單體外面進行隨意調用而不受影響
 
如果我們這樣寫一下就更明白了：
 1 var box = {
 2         width:0,
 3         height:0,
 4         getArea:function(){
 5             return width*height;//js中對象成的訪問必須是顯示的，即this是不能省略的
 6         },
 7         init:function(w,h){
 8             width = w;
 9             height = h;
10         }
11     }//這裡的width，height其實並不是單體的對象
12 window.onload = function(){
13         width = 0;
14         height = 0;
15         var width = box.getArea();
16     alert(width);
17 }
這樣寫又會報錯了，可見我們以上的方式對於全域變數並沒有建立起一個命名空間，全域變數為我們帶來了危險。所以最上面的寫法是對的，我們來驗證一下：
 1 var box = {
 2         width:2,
 3         height:2,
 4         getArea:function(){
 5             return this.width*this.height;//js中對象成的訪問必須是顯示的，即this是不能省略的
 6         },
 7         init:function(w,h){
 8             this.width = w;
 9             this.height = h;
10         }
11     }
12 window.onload = function(){
13         width = 0;
14         height = 0;
15         var width = box.getArea();
16     alert(width);
17 }
可見在window.onload中的width 和height已經沒有幹擾了，因為單體為單體中的width和height建立了一個命名空間。
 
2成員的屬性：
討論完命名空間，我們來對單體變數和方法的屬性做一下設定。學過其他語言的人（java，c++，c#...）都應該很瞭解其中類成員的public和private，
雖然在javascript中沒有這麼嚴格的物件導向(oop)，但是我們可以藉助閉包來進行一個模仿，畢竟有的變數設為public是很不好的。
 1 var circle = (function(){
 2 //pravite member!
 3     var r = 5;
 4     var pi = 3.1416;//後面用分號
 5     return{//public member
 6         getArea:function(){
 7             return r*r*pi;//訪問私人成員不要加this
 8  &