JavaScript學習筆記之常見設計模式

一、單例模式

單例模式（Singleton）:又被稱爲單體模式，只允許實例化一次的對象類。有時也會用一個對象來規劃一個命名空間，有條理的去管理對象上的屬性和方法。

比如，有一個需求，需要在活動頁面實現新聞列表中的鼠標滑動特效。

    function g(id){
        return document.getElementById(id);
    }
    function css(id,key,value) {
        g(id).style[key] = value;
    }

使用上述方法給頁面定義了許多變量，存在可能引起代碼衝突的隱患。而單例模式則是將所有的功能方法定義在一個對象裏面。比如jQuery庫就是典型使用單例模式的代表。我們可以使用單例模式來實現上述需求。

var Ming = {
        g: function () {
            return document.getElementById(id);
        },
        css: function (id,key,value) {
            this.g(id).style[key] = value;
        }
    }

模塊分明 ：單例模式還可以用來管理代碼庫的各個模塊。比如早起百度的tangram中，當設置元素class方法，添加一個元素方法時，會放到dom模塊中；當添加事件阻止事件的冒泡方法時，會放到event模塊裏；當添加去除字符串首位空白字符方法，會放到string模塊中。

    baidu.dom.addClass
    baidu.event.stopPropagation
    baidu.string.encodeHTML

創建一個小型代碼庫：

比如有一個A庫，包含公共模塊、工具模塊、ajax模塊和其他模塊。

  var A = {
        Util: {
            util_method1: function () {},
            util_method2: function () {}
        },
        Tool: {
            tool_method1: function () {},
            tool_method2: function () {}
        },
        Ajax: {
            get: function () {},
            post: function () {}
        },
        others: {}
    }
    
    A.Util.util_method1();
    A.Ajax.get();
    A.Tool.tool_method1();

二、 原型模式

原型模式（Prototype）：用原型實例指向創建對象的類，使用於創建新的對象的類共享原型對象的屬性以及方法。

需求：創建一個焦點圖，焦點圖類：LoopImages。

// 圖片輪播類
    var LoopImages = function (imgArr, container) {
        this.imagesArray = imgArr;    // 輪播圖片數組
        this.container = container;   // 輪播圖片容器
        this.createIamge = function () {}   // 創建輪播圖片
        this.changeImage = function () {}   // 切換下一張圖片
    }
    
    
    // 上下滑動切換類
    var SlideLoopImg = function (imgArr, container) {
        // 構造函數繼承輪播圖片類
        LoopImages.call(this,imgArr,container);
        // 重寫繼承的切換下一張圖片方法
        this.changeImage = function () {
            console.log('SlideLoopImg');
        }
    }
    // 漸隱切換類
    var FadeLoopImg = function (imgArr,container,arrow) {
        LoopImages.call(this,imgArr,container);
        this.arrow = arrow;
        this.changeImage = function () {
            console.log('FadeLoopImg');
        }
    }

但是，上述代碼並不是最優解。在基類loopImages中，作爲基類是要被子類繼承的，那麼此時屬性和方法全寫在基類的構造函數中會出現問題，比如子類每繼承一次都要創建一次父類。我們可以將較大的方法放在基類的原型中。

// 圖片輪播類
    var LoopImages = function (imgArr, container) {
        this.imagesArray = imgArr;    // 輪播圖片數組
        this.container = container;   // 輪播圖片容器
    }
    LoopImages.prototype = {
        // 創建輪播圖片
        createImage: function () {},
        // 切換下一張圖片
        changeImage: function () {}
    }
    
    // 上下滑動切換類
    var SlideLoopImg = function (imgArr, container) {
        // 構造函數繼承輪播圖片類
        LoopImages.call(this,imgArr,container);
    }
    // 重寫繼承的切換下一張圖片方法
    SlideLoopImg.prototype = new LoopImages();
    SlideLoopImg.prototype.changeImage =function () {}
    // 漸隱切換類
    var FadeLoopImg = function (imgArr,container,arrow) {
        LoopImages.call(this,imgArr,container);
        this.arrow =arrow;
    }
    FadeLoopImg.prototype = new LoopImages();
    FadeLoopImg.prototype.changeImage = function () {
        console.log('FadeLoopImg');
    }

三、建造者模式 

建造者模式（Builder）：將一個複雜對象的構建層與其表示層相互分離，同樣的構建方式可採用不同的表示。

建造者模式更關心的是創建這個對象的整個過程。我們來創建簡歷。

// 創建一個人類
    var Human = function (param) {
        // 技能
        this.skill = param && param.skill || '保密';
        // 興趣
        this.hobby = param && param.hobby || '保密';
    }
    // 類人原型方法
    Human.prototype = {
        getSkill: function () {
            return this.skill;
        },
        getHobby: function () {
            return this.hobby;
        }
    }
    // 實例化姓名類
    var Named = function (name) {
        vat that = this;
        // 構造器
        // 構造函數解析姓名的姓與名
        (function (name,that) {
            that.wholeName = name;
            // ....
        })
    }
    // 實例化職位類
    var Work = function (work) {
        vat that = this;
        // 構造器
        // 構造函數中通過傳入的職位特徵來設置相應職位以及描述
        (function (work,that) {
            switch (work){
                case 'code':
                    that.work = '';
                    break;
                case 'UI':
            }
        })(work,that);
    }

未完待續