JavaScript設計模式（1）—— 面對對象的編程

原文出自於本人我的博客網站：https://www.dzyong.com（歡迎訪問）

本文連接地址: https://www.dzyong.com/#/View...

面對對象編程是一種程序設計範型。它將對象做爲程序的基本單元，將程序和數據封裝其中，以提升程序的重用性、靈活性和擴展性。

咱們以一個例子來開始學習。需求：對用戶輸入的用戶名、郵箱、密碼等進行驗證。

實現這個需求很簡單，小白的寫法是：

function checkName() {
    //驗證姓名
}
function checkEmail() {
    //驗證郵箱
}
function checkPassword() {
    //驗證密碼
}

這是一種函數的形式來進行驗證，可是這種寫法的風險很大，若是是我的開發這樣寫的話問題不大，可是若是是團隊開發，若是別人也定義了一樣的方法就會覆蓋掉原有的功能了。由於這3個函數屬於全局變量。

用對象收編變量

爲了不這樣的問題發生，咱們可使用對象收編變量。

var CheckObject = {
    checkName : function(){
        //驗證姓名
    },
checkEmail : function(){
        //驗證郵箱
    },
checkPassword : function(){
        //驗證密碼
    },
}

此時將全部的函數做爲CheckObject 對象的方法，這樣咱們就只有了一個對象，而且咱們使用它也很簡單，好比說檢測姓名 CheckObject.checkName ()，只是比原來的前面多了一個對象的名稱。

對象的另外一種形式

對象還有另外一種形式，能夠先聲明對象，而後在爲它添加方法，因此你能夠這麼作：

var CheckObject = function(){}
CheckObject .checkName = function() {
    //驗證姓名
}
CheckObject .checkEmail = function() {
    //驗證郵箱
}
CheckObject .checkPassword = function() {
    //驗證密碼
}

真假對象

若是你想複製這個對象能夠這樣寫：

var CheckObject = function(){
    return {
        checkName ： function(){ //驗證姓名  },
        checkEmail ： function(){ //驗證郵箱},
        checkPassword ： function(){ //驗證密碼},
    }
}

這樣作的好處是，每當調用這個函數的時候，把以前的那個對象返回出來，當別人每次調用這個函數的時候都返回一個新的對象，這樣每一個人使用時就互不影響了。

var a = CheckObject ();
a.checkName ();

類也能夠

雖然建立新對象完成了需求，可是它不是一個真正意義上類 的建立方式，而且建立的對象a和對象CheckObject 沒有任何關係，接下來咱們就來建立也真正的類：

var CheckObject = function(){
    this.checkName = function(){  //驗證姓名  }
    this.checkEmail = function(){  //驗證郵箱  }
    this.checkPassword = function(){  //驗證密碼  }
}

類的建立方法就不能像對象那樣，既然是一個類，就要用關鍵字new來建立

var a = new CheckObject ();
a.checkName ();

一個檢測類

全部的方法放在函數內部了，經過this定義的，因此每一次經過new關鍵字建立新對象的時候，新建立的對象就會對類的this上的屬性進行復制。因此這些新建立的對象都有本身的一套方法，可是這麼多有時候形成的消耗是很奢侈的，咱們須要處理一下：

var CheckObject = function(){}
CheckObject .prototype.checkName = function(){  //驗證姓名  }
CheckObject .prototype.checkEmail = function(){  //驗證郵箱  }
CheckObject .prototype.checkName = checkPassword (){  //驗證密碼  }

這樣建立對象實例的時候，建立出來的對象所擁有的方法都是一個，由於他們都要依賴prototype原型一次尋找，而找到的方法都是同一個，他麼都綁定在CheckObject對象類的原型上。固然咱們還能夠對上面的方式進行簡化。

var CheckObject = function(){}
CheckObject .prototype = {
    checkName ： function() {  //驗證姓名  },
    checkEmail ： function() {  //驗證郵箱  },
    checkName ： function() {  //驗證密碼  },
}

可是千萬要注意，這兩種方式不能混着用，不然一旦混用，如在後面爲對象的原型對象賦值新對象時，它將覆蓋掉以前對prototype對象賦值的方法。

使用仍是如同以前同樣的方法使用;

var a = new CheckObject ();
a.checkName ();
a.checkEmail ();
a.checkName ();

方法還能夠這樣用

在以前的基礎上還能夠進一步的優化，不知你發現沒，調用3個方法咱們須要寫3遍a，這是能夠避免的，在聲明的每個方法末尾返回當前對象（JavaScript中this指向當前對象）。

var CheckObject =  {
    checkName ： function() {  //驗證姓名  return this； },
    checkEmail ： function() {  //驗證郵箱  return this； },
    checkName ： function() {  //驗證密碼  return this； },
}

此時咱們就能夠這樣用:

CheckObject .checkName().checkEmail().checkName()

是否是感受簡潔了不少，固然一樣的方式也能夠放到類的原型對象中：

var CheckObject = function(){}
CheckObject .prototype = {
    checkName ： function() {  //驗證姓名  return this； },
    checkEmail ： function() {  //驗證郵箱  return this； },
    checkName ： function() {  //驗證密碼  return this； },
}
var a = new CheckObject();
a.checkName().checkEmail().checkName()

函數的祖先

prototype.js是一款JavaScript框架，裏面爲咱們方便的封裝了不少方法，最大的特色就是能夠對源生對象（Function、Array、Object等）的擴展，好比你想給一個函數都添加一個郵箱檢測的方法能夠這麼作：

Function.prototype.checkEmail = function(){
    //驗證郵箱
}

這樣使用這個方法就方便了不少：

函數的形式

var a = function(){}
a.checkEmail ();

類的形式

var a = new Function()；
a.checkEmail ();

可是爲了安全咱們不容許這麼作，由於這會污染源生的對象Function,形成沒必要要的開銷，你能夠抽象出一個統一添加方法的功能：

Function.prototype.addMothed = function(name, fn) {
    this[name] = fn
}

你就可使用以下的方式來添加你的方法

var motheds = function() {}  或   var motheds = new Function()
motheds.addMothed('checkEmail ', function(){  // 檢測郵箱  })

一樣也能夠鏈式添加

Function.prototype.addMothed = function(name, fn) {
    this[name] = fn；
    return this；
}
motheds.addMothed('checkEmail ', function(){  // 檢測郵箱  })
.addMothed('checkName', function(){  // 檢測姓名  })

也是返回方法的this來實現

motheds.addMothed('checkEmail ', function(){  // 檢測郵箱  return this;  })

使用類調用方式

Function.prototype.addMothed = function(name, fn) {
    this.prototype.[name] = fn；
    return this；
}

使用類的方式時要注意，不能直接使用，須要經過new關鍵字來建立對象。

var m = new Methods();
m.checkEmail ()

原文出自於本人我的博客網站：https://www.dzyong.com（歡迎訪問）

轉載請註明來源: 鄧佔勇的我的博客 - 《JavaScript設計模式——面對對象的編程》

本文連接地址: https://www.dzyong.com/#/View...