JavaScript設(shè)計模式整理

zhangke3016 發(fā)布于2019-08-23 18:13 / 1010人閱讀

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

寫在前面

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

什么是設(shè)計模式？

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

設(shè)計模式的分類：

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

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

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

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

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

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

工廠方法模式：

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

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

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

    },
    Php: function(content) {

    },
    JavaScript: function(content) {

    }
};

原型模式：

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

// 圖片輪播類
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");
    }
};

// 上下滑動切換類
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");
};

單例模式：

又稱單體模式，是只允許實例化一次的對象類。

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

外觀模式：

為一組復(fù)雜的子系統(tǒng)接口提供一個更高級的統(tǒng)一接口，通過這個接口使得對子系統(tǒng)接口的訪問更容易。

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

裝飾者模式：

在不改變原對象的基礎(chǔ)上，通過對其進行包裝拓展(添加屬性或方法)使原對象可以滿足用戶更復(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ā)布-訂閱者模式或消息機制，定義一種依賴關(guān)系，解決了主體對象與觀察者之間功能的耦合。

var Observer = (function () {
    var __messages = {};
    return {
        // 注冊消息
        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);
                }
            }
        }
    }
})();

狀態(tài)模式：

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

// 狀態(tài)對象
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
    }
}();

命令模式：

將請求與實現(xiàn)解耦并封裝成獨立對象，從而使不同的請求對客戶端的實現(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);
           }
       }
   }
})();

迭代器模式：

在不暴露對象內(nèi)部結(jié)構(gòu)的同時，可以順序的訪問聚合對象內(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 () {}
    }
};

鏈模式：

通過在對象方法中將當前對象返回，實現(xià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;

節(jié)流模式：

對重復(fù)的業(yè)務(wù)邏輯進行節(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ù)原封不動的傳遞。

// 函數(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

云服務(wù)器 GPU云服務(wù)器函數(shù)模式整理 javascript設(shè)計模式 javascript命令模式 javascript嚴格模式

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/104873.html

發(fā)表評論

登陸后可評論

0條評論

zhangke3016

男|高級講師

我要關(guān)注我要私信

TA的文章

2018我看過的書籍及好文推薦

閱讀 2012·2019-08-29 16:27
用戶輸入一個網(wǎng)址到頁面展示內(nèi)容的這段時間內(nèi)，瀏覽器和服務(wù)器都發(fā)生了生么事情？

閱讀 1382·2019-08-29 16:14
IFC

閱讀 3383·2019-08-29 14:18
【呆萌の研究】圣杯布局引發(fā)對margin負值的研究

閱讀 3469·2019-08-29 13:56
淘寶 rem 機制入門學(xué)習

閱讀 1263·2019-08-29 11:13
CSS 引入方式

閱讀 2136·2019-08-28 18:19
NPM酷庫052：sax，按流解析XML

閱讀 3454·2019-08-27 10:57
NPM酷庫：accounting，格式化數(shù)字和貨幣

閱讀 2289·2019-08-26 11:39

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

JavaScript設(shè)計模式整理

相關(guān)文章

前端學(xué)習資源整理

JavaScript 中常見設(shè)計模式整理

*Javascript**設(shè)計*模式資源整理

前端進階資源整理

W3School 教程整理

W3School 教程整理

發(fā)表評論

0條評論

zhangke3016

男|高級講師

TA的文章

2018我看過的書籍及好文推薦

用戶輸入一個網(wǎng)址到頁面展示內(nèi)容的這段時間內(nèi)，瀏覽器和服務(wù)器都發(fā)生了生么事情？

IFC

【呆萌の研究】圣杯布局引發(fā)對margin負值的研究

淘寶 rem 機制入門學(xué)習

CSS 引入方式

NPM酷庫052：sax，按流解析XML

NPM酷庫：accounting，格式化數(shù)字和貨幣

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

JavaScript設(shè)計模式整理

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！