摘要：寫在前面設(shè)計(jì)模式是程序員通識(shí)知識(shí)，熟練掌握并使用各種設(shè)計(jì)模式，可以體現(xiàn)一個(gè)程序員的工程開發(fā)水平。我花了幾天時(shí)間，重溫并整理了多種設(shè)計(jì)模式，以為示例語(yǔ)言。節(jié)流模式對(duì)重復(fù)的業(yè)務(wù)邏輯進(jìn)行節(jié)流控制，執(zhí)行最后一次操作并取消其他操作，以提高性能。

設(shè)計(jì)模式是程序員通識(shí)知識(shí)，熟練掌握并使用各種設(shè)計(jì)模式，可以體現(xiàn)一個(gè)程序員的工程開發(fā)水平。我花了幾天時(shí)間，重溫并整理了30多種設(shè)計(jì)模式，以JavaScript為示例語(yǔ)言。下面我會(huì)列出一些常用的設(shè)計(jì)模式說(shuō)明及示例，更全面的內(nèi)容見：https://github.com/yzsunlei/javascript-design-mode

一個(gè)模式就是一個(gè)可重用的方案，可應(yīng)用于在軟件設(shè)計(jì)中的常見問(wèn)題。另一種解釋就是一個(gè)我們?nèi)绾谓鉀Q問(wèn)題的模板 - 那些可以在許多不同的情況里使用的模板。

創(chuàng)建型設(shè)計(jì)模式：
1、簡(jiǎn)單工廠模式
2、工廠方法模式
3、抽象工廠模式
4、建造者模式
5、原型模式
6、單例模式

結(jié)構(gòu)型設(shè)計(jì)模式：
7、外觀模式
8、適配器模式
9、代理模式
10、裝飾者模式
11、橋接模式
12、組合模式
13、享元模式

行為型設(shè)計(jì)模式：
14、模板方法模式
15、觀察者模式
16、狀態(tài)模式
17、策略模式
18、職責(zé)鏈模式
19、命令模式
20、訪問(wèn)者模式
21、中介者模式
22、備忘錄模式
23、迭代器模式
24、解釋器模式

技巧型設(shè)計(jì)模式：
25、鏈模式
26、委托模式
27、數(shù)據(jù)訪問(wèn)對(duì)象模式
28、節(jié)流模式
29、簡(jiǎn)單模板模式
30、惰性模式
31、參與者模式
32、等待者模式

架構(gòu)型設(shè)計(jì)模式：
33、同步模塊模式
34、異步模塊模式
35、Widget模式
36、MVC模式
37、MVP模式
38、MVVM模式

備注：該分類借鑒于《JavaScript設(shè)計(jì)模式-張容銘》

通過(guò)對(duì)產(chǎn)品類的抽象使其創(chuàng)建業(yè)務(wù)主要負(fù)責(zé)用于創(chuàng)建多類產(chǎn)品的實(shí)例。

// 安全模式創(chuàng)建的工廠類
var Factory = function(type, content) {
    if (this instanceof Factory) {
        // 保證是通過(guò)new進(jìn)行創(chuàng)建的
        var s = new this[type](content);
        return s;
    } else {
        return new Factory(type, content);
    }
};

// 工廠原型中設(shè)置創(chuàng)建所有類型數(shù)據(jù)對(duì)象的基類
Factory.prototype = {
    Java: function(content) {

    },
    Php: function(content) {

    },
    JavaScript: function(content) {

    }
};

用原型實(shí)例指向創(chuàng)建對(duì)象的類，使用于創(chuàng)建新的對(duì)象的類共享原型對(duì)象的屬性以及方法。

// 圖片輪播類
var LoopImages = function(imgArr, container) {
    this.imagesArray = imgArr;
    this.container = container;
};

LoopImages.prototype = {
    // 創(chuàng)建輪播圖片
    createImage: function() {
        console.log("LoopImages createImage function");
    },
    // 切換下一張圖片
    changeImage: function() {
        console.log("LoopImages changeImage function");
    }
};

// 上下滑動(dòng)切換類
var SliderLoopImg = function(imgArr, container) {
    // 構(gòu)造函數(shù)繼承圖片輪播類
    LoopImages.call(this, imgArr, container);
};
SliderLoopImg.prototype = new LoopImages();
// 重寫繼承的“切換下一張圖片”方法
SliderLoopImg.prototype.changeImage = function() {
    console.log("SliderLoopImg changeImage function");
};

又稱單體模式，是只允許實(shí)例化一次的對(duì)象類。

// 惰性
var LarySingle = (function() {
    // 單例實(shí)例引用
    var _instance = null;
    // 單例
    function Single() {
        // 這里定義私有屬性和方法
        return {
            publicMethod: function() {},
            publicProperty: "1.0"
        };
    }
    // 獲取單例對(duì)象接口
    return function() {
        // 如果未創(chuàng)建單例將創(chuàng)建單例
        if(!_instance){
            _instance = Single();
        }
        // 返回單例
        return _instance;
    };
})();

為一組復(fù)雜的子系統(tǒng)接口提供一個(gè)更高級(jí)的統(tǒng)一接口，通過(guò)這個(gè)接口使得對(duì)子系統(tǒng)接口的訪問(wèn)更容易。

function addEvent(dom, type, fn) {
    // 對(duì)于支持DOM2級(jí)事件處理程序addEventListener方法的瀏覽器
    if (dom.addEventListener) {
        dom.addEventListener(type, fn, false);
    } else if (dom.attachEvent) {
        // 對(duì)于不支持addEventListener方法但支持attchEvent方法的瀏覽器
        dom.attachEvent("on" + type, fn);
    } else {
        // 對(duì)于不支持addEventListener方法，也不支持attchEvent方法，但支持“on”+事件名的瀏覽器
        dom["on" + type] = fn;
    }
}

在不改變?cè)瓕?duì)象的基礎(chǔ)上，通過(guò)對(duì)其進(jìn)行包裝拓展(添加屬性或方法)使原對(duì)象可以滿足用戶更復(fù)雜需求。

var decorator = function (input, fn) {
    // 獲取事件源
    var input = document.getElementById(input);
    // 若事件源已經(jīng)綁定事件
    if (typeof input.click === "function") {
        // 緩存事件源原有回調(diào)函數(shù)
        var oldClickFn = input.click;
        // 為事件源定義新的事件
        input.click = function () {
            // 事件源原有回調(diào)函數(shù)
            oldClickFn();
            // 執(zhí)行事件源新增回調(diào)函數(shù)
            fn();
        }
    } else {
        // 事件源未綁定事件，直接為事件源添加新增回調(diào)函數(shù)
        input.onclick = fn;
    }
}

又稱發(fā)布-訂閱者模式或消息機(jī)制，定義一種依賴關(guān)系，解決了主體對(duì)象與觀察者之間功能的耦合。

var Observer = (function () {
    var __messages = {};
    return {
        // 注冊(cè)消息
        register: function (type, fn) {
            if (typeof __messages[type] === "undefined") {
                __messages[type] = [fn];
            } else {
                __messages[type].push(fn);
            }
        },
        // 發(fā)布消息
        fire: function (type, args) {
            if (!__messages[type])
                return;
            var events = {
                type: type,
                args: args || {}
            };
            var i = 0;
            var len = __messages[type].length;
            for (; i < len; i++) {
                __messages[type][i].call(this, events);
            }
        },
        // 移除消息
        remove: function (type, fn) {
            if (__messages[type] instanceof Array) {
                var i = __messages[type].length - 1;
                for (; i >= 0; i--) {
                    __messages[type][i] == fn && __messages[type].splice(i, 1);
                }
            }
        }
    }
})();

當(dāng)一個(gè)對(duì)象的內(nèi)部狀態(tài)發(fā)生改變時(shí)，會(huì)導(dǎo)致其行為的改變，這看起來(lái)像是改變了對(duì)象。

// 狀態(tài)對(duì)象
var ResultState = function () {
    var States = {
        state0: function () {
            console.log("第一種情況");
        },
        state1: function () {
            console.log("第二種情況");
        },
        state2: function () {
            console.log("第三種情況");
        },
        state3: function () {
            console.log("第四種情況");
        }
    };

    function show(result) {
        States["state" + result] && States["state" + result]();
    }

    return {
        show: show
    }
}();

將請(qǐng)求與實(shí)現(xiàn)解耦并封裝成獨(dú)立對(duì)象，從而使不同的請(qǐng)求對(duì)客戶端的實(shí)現(xiàn)參數(shù)化。

// 繪圖命令
var CanvasCommand = (function () {
   var canvas = document.getElementById("canvas");
   var ctx = canvas.getContext("2d");
   var Action = {
       fillStyle: function (c) {
           ctx.fillStyle = c;
       },
       fillRect: function (x, y, w, h) {
           ctx.fillRect(x, y, w, h);
       },
       strokeStyle: function (c) {
           ctx.strokeStyle = c;
       },
       strokeRect: function (x, y, w, h) {
           ctx.strokeRect(x, y, w, h);
       },
       fillText: function (text, x, y) {
           ctx.fillText(text, x, y);
       },
       beginPath: function () {
           ctx.beginPath();
       },
       moveTo: function (x, y) {
           ctx.moveTo(x, y);
       },
       lineTo: function (x, y) {
           ctx.lineTo(x, y);
       },
       arc: function (x, y, r, begin, end, dir) {
           ctx.arc(x, y ,r, begin, end, dir);
       },
       fill: function () {
           ctx.fill();
       },
       stroke: function () {
           ctx.stroke();
       }
   };
   return {
       excute: function (msg) {
           if (!msg)
               return;
           if (msg.length) {
               for (var i = 0, len = msg.length; i < len; i++) {
                   arguments.callee(msg[i]);
               }
           } else {
               msg.param = Object.prototype.toString.call(msg.param) === "[object Array]" ? msg.param : [msg.param];
               Action[msg.command].apply(Action, msg.param);
           }
       }
   }
})();

在不暴露對(duì)象內(nèi)部結(jié)構(gòu)的同時(shí)，可以順序的訪問(wèn)聚合對(duì)象內(nèi)部的元素。

// 迭代器
var Iterator = function (items, container) {
    var container = container && document.getElementById(container) || document;
    var items = container.getElementsByTagName(items);
    var len = items.length;
    var idx = 0;
    var splice = [].splice();

    return {
        first: function () {},
        second: function () {},
        pre: function () {},
        next: function () {},
        get: function () {},
        dealEach: function () {},
        dealItem: function () {},
        exclusive: function () {}
    }
};

通過(guò)在對(duì)象方法中將當(dāng)前對(duì)象返回，實(shí)現(xiàn)對(duì)同一個(gè)對(duì)象多個(gè)方法的鏈?zhǔn)秸{(diào)用。

var A = function (selector) {
    return new A.fn.init(selector);
};
A.fn = A.prototype = {
    constructor: A,
    init: function (selector) {
        console.log(this.constructor);
    }
};
A.fn.init.prototype = A.fn;

對(duì)重復(fù)的業(yè)務(wù)邏輯進(jìn)行節(jié)流控制，執(zhí)行最后一次操作并取消其他操作，以提高性能。

var throttle = function () {
    var isClear = arguments[0];
    var fn;
    if (typeof isClear === "boolean") {
        fn = arguments[1];
        fn.__throttleID && clearTimeout(fn.__throttleID);
    } else {
        fn = isClear;
        param = arguments[1];
        var p = extend({
            context: null,
            args: [],
            time: 30
        }, param);
        arguments.callee(true, fn);
        fn.__throttleID = setTimeout(function () {
            fn.apply(p.context, p.args);
        }, p.time);
    }
}

在特定的作用域中執(zhí)行給定的函數(shù)，并將參數(shù)原封不動(dòng)的傳遞。

// 函數(shù)綁定
function bind(fn, context) {
    return function () {
        return fn.apply(context, arguments);
    }
}

// 函數(shù)柯里化
function curry(fn) {
    var Slice = [].slice;
    var args = Slice.call(arguments, l);
    return function () {
        var addArgs = Slice.call(arguments);
        var allArgs = args.concat(addArgs);
        return fn.apply(null, allArgs);
    }
}

https://book.douban.com/subject/26589719/

https://book.douban.com/subject/26382780/

https://www.w3cschool.cn/zobyhd/m1w6jozt.html

https://www.cnblogs.com/xiyangbaixue/p/3902699.html