js 設計模式 oop 物件導向編程

標籤：app   執行   tty   複用   重要   使用   js代碼   實現   安全模式   

最初我們寫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 = 0;        //靜態私人方法        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 > 100)                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 = 0;        //靜態私人方法        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 > 100)                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(1);            this.title = title;        }else{            return new Book(title);        }    };    var book = new Book(‘js‘);    alert(book.title);

js 設計模式 oop 物件導向編程