《Javascript 設計模式》－讀書筆記

第一章   設計模式類別

什麼是設計模式：模式是一種可複用的解決方案。

1、設計模式有三種類別

　　一、建立型模式：專一於處理對象機制。包括：構造器、工廠、抽象、原型、單例、生成器

　　二、結構型模式：用於找出在不一樣對象之間創建關係密切的簡單方法。 包括：裝飾者、外觀、享元、適配器、代理

　　三、行爲模式：用於改善或簡化系統中不一樣對象之間的通訊。包括：迭代器、中介者、觀察者、訪問者

 

第二章   JavaScript設計模式

1、四種方法能夠將健值賦給一個對象

 1 <script>
 2     // 一、使用點
 3     var newObject = {};
 4     newObject.sonKey = "Hello World";       // 設置
 5     var key = newObject.sonKey;             // 獲取
 6 
 7     // 二、中括號語法
 8     newObject['sonKey'] = "Hello World";
 9     var key = newObject['sonKey'];
10     
11     // 三、object.defineProperty
12 </script>

 

　　一、建立對象兩種經常使用方法

　　　　var newObject = {};　　　　

　　　　// 構造器的簡潔記法

　　　　var newObject = new Object()

　　

　　二、四種方法將鍵值賦值給一個對象

　　　　a、"點"語法　　　　設置：newObject.someKey = "Hello World";　　　　獲取：var key = newObject.someKey

　　　　b、中括號語法　　  設置：newObject["someKey"] = "Hello World";　　   獲取：var key = newObject["someKey"];

　　　　c、ECMAScript5中的defineProperty

　　　　d、defineProperties

 

模式一：Constructor（構造器）模式也能夠叫構造函數

       Constructor是一種在內存已分配權給該對象的狀況下，用於初始化新建立對象的特殊方法

 

優勢：每一個實例都進行new實例化在內存中會簡單建立一個空間，數據不會衝突

缺點：這種簡單的構造函數中的write()方法都是公用，而不象是屬性須要分離，而建立一個實例也會建立一個write()方法對性能上有所影響，建議使用porotype

 1 <script>
 2 
 3     // 建立對象
 4     function Car(model, year, miles){
 5        this.model = model;
 6        this.year = year;
 7        this.miles = miles;
 8 
 9        this.write = function(){
10            return this.model + " has done " + this.year;
11        }
12     }
13 
14     // 建立實例
15     var civic = new Car("Honda Civic", 2009, 3000);
16     var mondeo = new Car("Honda Civic", 2009, 3000);
17 
18     civic.write();
19     mondeo.write();
20 </script>

 

帶原型的構造函數

JS中的prototype屬性，在調用構造函數建立對象後，新對象都會具備構造函數的全部屬性

 1 <script>
 2 
 3     // 建立對象
 4     function Car(model, year, miles){
 5        this.model = model;
 6        this.year = year;
 7        this.miles = miles;
 8     }
 9 
10     Car.prototype = {
11         constructor: Car,
12         write: function(){
13             return this.model + " has done " + this.year;
14         }
15     }
16 
17     // 建立實例
18     var civic = new Car("Honda Civic", 2009, 3000);
19     var mondeo = new Car("Honda Civic", 2009, 3000);
20 
21     civic.write();
22     mondeo.write();
23 </script>

 

 

模式二：Module（模塊）模式

　　有幾種用於實現模塊的方法？

　　一、對象字面量　　　　

　　二、Module模式　　　　

　　三、AMD模塊　　　

　　四、CommonJS模塊　　　　

　　五、ECMAScript Harmony模塊

 

一、對象字面量

優勢：有本身命名空間能夠經過"."來訪問全名空間

缺點：一個頁面中若是有兩個功能同時調用而且同時改變其屬性會出現問題

 1 <script>
 2     var myModule = {
 3         myProperty : "someValue",
 4 
 5         myConifg: {
 6             useCaching: true,
 7             language: "en"
 8         },
 9 
10         // 方法
11         myMethod: function(){
12             console.log("where in the world is paul irish today?");
13         }
14     }
15 </script>

 

二、Module模式

　　模塊模式（當即調用函數IIFE）：能夠定義私有和公有封裝的方法，自動執行匿名函數，並返回暴露的公用接口

缺點：接口返回的count和money只是第一次調用的值，若是setData改變了count和money的值，這時候在調用countSsq.count不是爲0，解決的方法就是經過getData來從新獲取一下count和money的值

 1 <script>
 2     var countSsq = (function(){
 3         var count = 0;
 4         var money = 0;
 5         var setData = function(countNum, moneyNum){
 6             count = countNum;
 7             money = moneyNum;
 8         }
 9         var getData = function(){
10             return {count: count, money: money}
11         }
12         
13         return {
14             count: count,
15             money: money,
16             setData: setData,
17             getData: getData
18         }
19     })();
20 </script>

 

 

　　揭示模塊模式：

 1 <script>
 2     var myModule = (function(){
 3 
 4         var privateVar = "Ben Cherry", publicVar = "Hey tthere";
 5         
 6         function privateFunction(){
 7             console.log("name:" + privateVar);
 8         }
 9         
10         function publicFunction(strName){
11             privateVar = strName;
12         }
13         
14         function publicGetName(){
15             privateFunction()
16         }
17         
18         // 將暴露的公有指針指向到私有的函數和屬性上
19         return {
20             setName: publicFunction,
21             greeting: publicVar,
22             getNam: publicGetName
23         }
24     })();
25 </script>

 

引入混入

　　好比咱們引用瞭如jquery的庫，能夠將jquery對象經過匿名函數傳遞進來，並按咱們本身但願的取個本地的中

 1 <script>
 2     var myModule = (function(JQ){
 3 
 4         // JQ爲jQuery對象經過參數傳遞進來，將在模塊內轉成本身所定義的名子
 5         function privateMethod(){
 6             JQ(".box").html("test");
 7         }
 8 
 9         return {
10             publicMethod: function(){
11                 privateMethod();
12             }
13         }
14 
15     })(jQuery)
16 </script>

 

引出

 1 <script>
 2     var myModule = (function(){
 3 
 4         // 模塊對象
 5         var module = {},
 6                 privateVariable = "hello world";
 7 
 8         module.publicProperty = "Foobar";
 9         module.publicMethod = function(){
10             console.log(privateVariable);
11         }
12 
13         return module;      // 將模塊對象暴露給外部
14     })()
15 
16     myModule.publicMethod();
17 </script>

 

模式3、單例模式（Singleton）

　　單例模式限制了類的實例化次數只能一次

 1 <script> 
 2     var mySingleton = (function () {
 3 
 4         /* 這裏聲明私有變量和方法 */
 5         var privateVariable = 'something private';
 6         function showPrivate() {
 7             console.log(privateVariable);
 8         }
 9 
10         /* 公有變量和方法（能夠訪問私有變量和方法） */
11         return {
12             publicMethod: function () {
13                 showPrivate();
14             },
15             publicVar: 'the public can see this!'
16         };
17     })();
18 
19     mySingleton.publicMethod();  // 輸出 'something private'
20     console.log(mySingleton.publicVar); // 輸出 'the public can see this!'    
21 </script>

 

模式4、觀察者模式

　　目標：維護一系列觀察者，方便添加或刪除觀察者

　　觀察者：目標狀態發生改變時需得到通知的對象提供一個更新接口

　　具體目標：狀態發生改變時向觀察者發出通知，存儲具體觀察者

　　具體觀察者：存儲一個指向具體目標的引用，實現觀察者更新接口，以自身狀態與目標的狀態保持一致

 1 <script>
 2 
 3     // 觀察者
 4     function Observer(){
 5         this.observerList = [];
 6     }
 7 
 8     Observer.prototype = {
 9         constructor: Observer,
10 
11         // 向數據中添加數據
12         add: function(obj){
13             return this.observerList.push(obj);
14         },
15 
16         // 清空數據
17         empty: function(){
18             this.observerList = [];
19         },
20 
21         // 獲取對象的長度
22         count: function(){
23             return this.observerList.length;
24         }
25     }
26 
27 
28     // 擴展對象的方法
29     function extend(obj, extension){
30         for(var key in obj){
31             extension[key] = obj[key];
32         }
33     }
34 
35     // 模擬目標
36     function Subject() {
37         this.observerList = new Observer();     // 將觀察者引入到目標的屬性
38     }
39 
40     Subject.prototype = {
41         constructor: Subject,
42 
43         addObserver: function(data){
44             this.observerList.add(data);
45         },
46 
47         getCount: function(){
48             return this.observerList.count();
49         }
50     }
51 
52     var oSub = new Subject();
53     oSub.addObserver("aaa");
54     console.log(oSub.getCount());
55 
56     oSub.addObserver("bbb");
57     oSub.addObserver("ccc");
58     console.log(oSub.getCount());
59 </script>

 

模式5、中介者模式

　　中介者模式的功能就是封裝了多個類之間的交互

http://ju.outofmemory.cn/entry/107912

Why Mediator ?

　　各個對象之間的交互操做很是多，每一個對象的行爲操做都依賴彼此對方，修改一個對象的行爲，同時會涉及到修改不少其餘對象的行爲，若是使用Mediator模式，可使各個對象間的耦合鬆散,只需關心和 Mediator的關係,使多對多的關係變成了一對多的關係，能夠下降系統的複雜性，提升可修改擴展性。

 

使用中介者模式的場合

1.一組定義良好的對象，如今要進行復雜的通訊。

2.定製一個分佈在多個類中的行爲，而又不想生成太多的子類。

能夠看出，中介對象主要是用來封裝行爲的，行爲的參與者就是那些對象，可是經過中介者，這些對象不用相互知道。（迪米特法則的具體實現）

 

使用中介者模式的優勢：

1.下降了系統對象之間的耦合性，使得對象易於獨立的被複用。

2.提升系統的靈活性，使得系統易於擴展和維護。

 

使用中介者模式的缺點：

　　中介者模式的缺點是顯而易見的，由於這個「中介「承擔了較多的責任，因此一旦這個中介對象出現了問題，那麼整個系統就會受到重大的影響。

 1 <script>
 2 
 3     // 中介者模式的簡單實現，暴露publih()和subscribe()
 4     var mdeiator = (function(){
 5 
 6         // 存儲可被廣播或監聽的topic
 7         var topics = {};
 8 
 9         // 訂閱一個topic，提供一個回調函數，一旦topic被廣告就執行回調
10         var subscribe = function(ic, fn){
11 
12             // 若是存儲中沒有當前數據則建立一個
13             if(!topics[ic]){
14                 topics[ic] = [];
15             }
16 
17             topics[ic].push({context: this, callback: fn});
18             return this;
19         }
20 
21         // 發佈/廣播事件到程序的剩餘部分
22         var publish = function(ic){
23             var args;
24 
25             if(!topics[ic]){
26                 return false;
27             }
28 
29             args = Array.prototype.slice.call(arguments, 1);
30 
31             for(var i= 0,l = topics[ic].length; i<l; i++){
32                 var subscription = topics[ic][i];
33                 subscription.callback.applay(subscription.context, args);
34             }
35 
36             return this;
37         }
38 
39         return {
40             publish: publish,
41             subscribe: subscribe,
42             installTo: function(obj){
43                 obj.subscribe = subscribe;
44                 obj.publish = publish;
45             }
46         }
47     })();
48 
49     mdeiator.subscribe("aa", function (){ alert("haha"); });
50     mdeiator.subscribe("aa", function (){ alert("haha"); });
51 
52     mdeiator.publish("aa");
53 
54 </script>

 

 

 

 

 

 

 

 

 

 

 

 

 

第十一章   模塊化的JavaScript設計模式

1、腳本加載器

　　AMD、CommandJS和seajs三種模塊化開發 

　　一、AMD：異步模塊定義的總體目標是提供模塊化的.

 　　　　模塊入門：

　　　　模塊定義define方法和用於處理依賴加載的require方法

 

第10章   JavaScript MV*設計模式

1、三個架構模式

　　一、MVC：模型、視圖、控制器

　　二、MVP：模型、視圖、表示器

　　三、MVVM：模型、視圖、視圖模型

 

2、MVC

　　MVC它將業務數據（modle）、用戶界面（view）隔離、第三個組件（controller）管理邏輯和用戶輸入.

　　當UI的變化引發模型屬性改變時，模型會觸發"change"事件； 全部顯示模型數據的視圖會接收到該事件的通知，繼而視圖從新渲染。 你無需查找DOM來搜索指定id的元素去手動更新HTML。 — 當模型改變了，視圖便會自動變化

 

　　一、Modle模型

　　　　管理應用於程序的數據，不涉及用戶界面，也不涉及表示層

 1 <script>
 2     var Photo = Backbone.model.extend({
 3 
 4         // photo默認屬性
 5         defaults : {
 6             src: "place.jpg",
 7             caption: "a default image",
 8             viewed: false
 9         },
10 
11         // 確保每個photo都有一個src
12         init: function (){
13             this.set({ "src": this.defaults.src });
14         }
15     })
16 </script>

 

　　Model主要是與業務數據有關

 

　　二、View（視圖）

　　視圖是Model（模型）的可視化表示，用戶能夠與視圖進行交互，包括讀取和編輯模型，在模型中獲取或設置障礙屬性值

 

　　模板：

　　在支持MVC/MV*的框架中，javascript模版與view的關係

　　javascript模板一般是用於將view模板定義爲包含模板變量的標記錄

1 Handlebars.js
2 <li>
3     <h2>{{caption}}</h2>
4     <img class="source" src="{{src}}">
5     <div>
6         {{metadata}}
7     </div>
8 </li>

 

　　三、Controller（控制器）

　　控制器是模型和視圖之間的中介，當用戶操做視圖時，控制器負責更新模型

 

 

 

 

 

 

 

BackBone中文官網：http://www.csser.com/tools/backbone/backbone.js.html

 

 

第七章   設計模式類別