js 設計模式 oop 面向對象程式設計

最初我們寫js代碼的時候是這麼寫

function checkName(){
        //驗證姓名
    }

    function checkEmail(){
        //驗證郵箱
    }

    function checkPassword(){
        //驗證密碼
    }
           

這種方式會造成全局變量的嚴重污染，再過渡到

var checkObject = {

    checkName : function(){};
    checkEmail: function(){};
    checkPassword: funcion(){}; 

}

//也可如此寫
var checkObject = {}  // || function(){}
checkObject.checkName = function(){};
checkObject.checkEmail = function(){};
checkObject.checkPassword = function(){};


//以上這兩種寫法不能複制一份，也就是說在new 方法建立新的對象的時候，新對象不能繼承這些方法
           

以上是直接使用，而不是建立對象複制一份的,複制一份的話可以這麼寫

var checkObject = function(){

        return {
            checkName:function(){},
            checkEmail:function(){},
            checkPassword:function(){}
        }
    }
//使用的時候 可以

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



這麼寫可以實作對象的複制 但是這不符合面向對象，新建立的類和checkObject 沒有任何關系
于是我們可以采用構造函數的方式書寫代碼

           

var checkObject  = function(){
        this.checkName = function(){}
        this.checkEmail = function(){}
        this.checkPassword = function(){}
    }
//像這樣我們便可以用CheckObject 來建立新的對象了,通過new 來建立對象，建立出來的每個對象都會對this上的屬性進行複制,但是這麼做的話，每次都會有相對較大消耗，對于共有的方法，我們可以放在對象的原型上

var checkObject = function(){};
checkObject.prototype.checkName = function(){};
//...


//這樣寫要将prototype 書寫很多遍 ，是以我們可以這麼寫,并實作鍊式調用，将this傳回

var checkObject = function(){};
checkObject.prototype={
    checkName:function(){
        //驗證姓名
        return this;
    },

    checkEmail:function(){
        //驗證郵箱
        return this
    },

    checkPassword:function(){
        //驗證密碼
        return this;
    }   

}

// 這兩種方式不可混用，否則後邊會覆寫前邊，此時我們調用隻需

new checkObject().checkName().checkEmail().checkPassword();
           

下面再來介紹一下面向對象和面向過程兩種程式設計方式 .page 10

多個function 書寫的方式是一種面向過程書寫代碼的實作方式，添加了很多全局變量而且不利于别人複用，在别人使用時你也不可修改，我們可以改用面向對象方式來重寫，我們把需求抽成一個對象，這個對象稱之為類，面向對象一個重要特點就是封裝，将屬性和方法封裝在一個對象中，就像将物品放在一個旅行箱中，這樣不管是使用和管理我們都友善，(雖然有時候感覺直接拿在外邊擺放也很友善，但是東西一多便不利于管理)

var Book = (function () {
        //靜态私有變量
        var bookNum = ;
        //靜态私有方法
        function checkBook() {
        }

        //傳回構造函數
        return function (newId, newName, newPrice) {
            //私有變量
            var name, price;
            //私有方法
            function checkId(id) {
            }
            //特權方法
            this.getPrice = function () {
            };
            this.getName = function () {
            };
            this.setName = function (name) {
                this.name = name
            };
            this.setPrice = function () {
            };
            //公有屬性
            this.id = newId;
            //公有方法
            this.copy = function () {
            };
            bookNum++;
            if (bookNum > )
                throw new Error('oop javascript');

            //構造器 執行個體化過程中被調用的方法
            this.setName(name);
            this.setPrice(price);

        }
    })();

    Book.prototype = {
        //靜态公有屬性
        isJSBook: false,
        //靜态公有方法
        display: function () {
        }

    };
    //對比Java  别被js 起的這些名字弄混了  其實Js 就模仿了一個New 其他的跟Java基本一樣 類 全局變量 方法 有自己的了解比較好 以前未想明白
    // java 為什麼那麼些
           

//為了看起來更像一個類 我們将原型上的方法 寫到類裡邊

var Book = (function () {
        //靜态私有變量
        var bookNum = ;
        //靜态私有方法
        function checkBook() {
        }

        //傳回構造函數
         function _Book(newId, newName, newPrice) {
            //私有變量
            var name, price;
            //私有方法
            function checkId(id) {
            }
            //特權方法
            this.getPrice = function () {
            };
            this.getName = function () {
            };
            this.setName = function (name) {
                this.name = name
            };
            this.setPrice = function () {
            };
            //公有屬性
            this.id = newId;
            //公有方法
            this.copy = function () {
            };
            bookNum++;
            if (bookNum > )
                throw new Error('oop javascript');

            //構造器 執行個體化過程中被調用的方法
            this.setName(name);
            this.setPrice(price);

        }
        _Book.prototype = {
            //靜态公有屬性
            isJSBook: false,
            //靜态公有方法
            display: function () {
            }

        };
        return _Book;
    })();
           

下面再介紹一種建立對象的安全模式

//注意 執行new Book 方法之前 this.title 會先執行一次
   var Book = function (title) {
        if (this instanceof Book) {
            alert();
            this.title = title;
        }else{
            return new Book(title);
        }
    };

    var book = new Book('js');
    alert(book.title);