javaScript設計模式 -- 靈活的javaScript語言

　　因為好長時間的懶惰和懈怠，好久沒有更新文章了，從現在開始我會按時更新一些自己總結的一些知識，和研究的東西，希望能讓大家從我這裡學到一點點的知識。

　　本文參考了張榮銘的javascript設計模式一書，算是自己對看了文章的總結吧，如果你想學習設計模式，可以去購買一本，學習一下，寫的非常好。

javaScript

 在我們的開發中，如果給了自己一些驗證姓名、郵箱、密碼的任務，按照下麵的寫法看

 1 //這樣寫就會污染到全局變數 都會掛載到window下
 2 function checkName() {
 3     //驗證姓名
 4 }
 5 function checkEmail() {
 6     //驗證郵箱
 7 }
 8 function checkPassword() {
 9     //驗證密碼
10 }

聲明的方式，還有另外一種

1 var checkName = function () {
2     //驗證姓名
3 };
4 var checkEmail = function () {
5     //驗證郵箱
6 };
7 var checkPassword = function () {
8     //驗證密碼
9 }

上面的兩種聲明方式都會產生好多全局變數，會影響其他人的使用，命名，所以我們可以把這些放到一個對象下麵

 1 var checkObject = {
 2     checkName : function () {
 3         //驗證姓名
 4     },
 5     checkEmail : function () {
 6         //驗證郵箱
 7     },
 8     checkPassword : function () {
 9         //驗證密碼
10     }
11 }

//還有另外一種添加方式
1 var checkObject = function(){}
2 checkObject.checkName = function(){}
3 checkObject.checkEmail = function(){}
4 checkObject.checkPassword = function(){}

雖然這樣可以滿足自己的需求，但是當別人想用你寫的對象的方法時候就麻煩了，因為這個對象不能複製一份

要實現複製一份看下麵的寫法

 1 var checkObject = function() {
 2     return {
 3         checkName : function(){
 4             //驗證姓名
 5         },
 6         checkEmail : function () {
 7             //驗證郵箱
 8         },
 9         checkPassword : function () {
10             //驗證密碼
11         }
12     }
13 };
14 ​
15 var a = checkObject();
16 console.log(a);
17 a.checkEmail();

上面的方法雖然可以實現我們的功能，但是創建出來的對象a和對象checkObject沒有任何關係

我們對其進行改造一下

 1 var CheckObject = function () {
 2     this.checkName = function () {
 3         //驗證姓名
 4     };
 5     this.checkEmail = function () {
 6         //驗證郵箱
 7     };
 8     this.checkPassword = function () {
 9         //驗證密碼
10     }
11 };
12 ​
13 var a = new CheckObject();
14 console.log(a);

上面這種方式已經實現了複製,但是我們每一次通過new關鍵字創建新對象的時候，新創建的對象都會經過this再執行一次，所以這些

新創建的對象都會有屬於自己的一套方法，然後有時候這麼做造成的性能消耗是非常奢侈的，我們需要處理一下，​

將公有的方法放到構造函數的原型上

 1 var CheckObject = function () {
 2 };
 3 ​
 4 CheckObject.prototype.checkName = function () {
 5     //驗證姓名
 6 };
 7 CheckObject.prototype.checkEmail = function () {
 8     //驗證郵箱
 9 };
10 CheckObject.prototype.checkPassword = function () {
11     //驗證密碼
12 };

這樣創建對象實例的時候，找方法的時候如果自己本身沒有的話就會上原型上面一層一層的去找，就可以擁有方法了

上面的方法要把peototype寫好多遍，還可以寫成另外的一種形式

 1 CheckObject.prototype = {
 2     checkName : function(){
 3         //驗證姓名
 4     },
 5     checkEmail : function () {
 6         //驗證郵箱
 7     },
 8     checkPassword : function () {
 9         //驗證密碼
10     }
11 };
12 //這兩種方法不能混著用，要不然會覆蓋
13 //使用方法
14 ​
15 var a = new CheckObject();
16 console.log(a);
17 a.checkEmail();

經常使用jQ都知道鏈式操作，其實實現方法很簡單就是將當前的對象作為函數的返回值return出去就行了，

鏈式操作

 1 var CheckObject = function () {
 2     this.checkName = function () {
 3         //驗證姓名
 4         return this;
 5     };
 6     this.checkEmail = function () {
 7         //驗證郵箱
 8         return this;
 9     };
10     this.checkPassword = function () {
11         //驗證密碼
12         return this;
13     }
14 };
15 var obj = new CheckObject();
16 obj.checkEmail().checkName().checkPassword();

函數的祖先

1 Function.prototype.checkEmail = function () {
2     console.log('驗證了郵箱');
3 };
4 //我們在他的原型上寫了一個這樣的方法之後，凡是用函數構造出來的對象都有了這個方法
5 var a = function () {
6 ​
7 };
8 a.checkEmail();

如果習慣類的形式還可以這樣寫

1 var f = new Function(){};
2 f.checkEmail();

但是這樣做 在這裡是不允許的 因為污染了全局變數Function

可以用這種方法就可以避免了

 1 Function.prototype.addMethod = function (name,fn) {
 2     this[name] = fn;
 3 };
 4 ​
 5 var methods = function () {
 6 ​
 7 };
 8 methods.addMethod('checkName',function () {
 9     //驗證姓名
10     console.log('姓名');
11 });
12 methods.addMethod('checkEmail',function () {
13     //驗證郵箱
14     console.log('郵箱');
15 });
16 ​
17 methods.checkName();
18 methods.checkEmail();

當然上面你嫌寫了好多個methods對象，你可以用鏈式方法

 1 Function.prototype.addMethod = function (name,fn) {
 2     this[name] = fn;
 3     return this;  //在這裡返回對象就可以了
 4 };
 5 ​
 6 var methods = function () {
 7 ​
 8 };
 9 methods.addMethod('checkName',function () {
10     //驗證姓名
11     console.log('姓名');
12 }).addMethod('checkEmail',function () {
13     //驗證郵箱
14     console.log('郵箱');
15 });
16 ​
17 methods.checkName();
18 methods.checkEmail();

對於習慣類的人來說也可以這樣寫

當然習慣用類的人來說 也可以寫成類的形式

​

 1 Function.prototype.addMethod = function (name,fn) {
 2    this.prototype[name] = fn;
 3    return this;
 4 };
 5 ​
 6 var Methods = function(){};
 7 ​
 8 Methods.addMethod('checkName',function () {
 9    //驗證姓名
10    console.log('姓名');
11 }).addMethod('checkEmail',function () {
12    //驗證郵箱
13    console.log('郵箱');
14 });
15 ​
16 var m = new Methods();
17 ​
18 m.checkName();
19 m.checkEmail();

javaScript是一種靈活的語言，使用javascript可以編寫出更多的優雅的代碼藝術，我會在接下來的一段時間內將一些常用的設計模式的寫法，分享給大家，如果你能學到一些知識，我會非常開心的，文章如有不足之處，還望可以提醒。