JS設(shè)計(jì)模式入門(mén)和框架中的實(shí)踐

ccj659 發(fā)布于2019-08-22 13:47 / 2901人閱讀

摘要：下面筆者就結(jié)合諸如的的里面的里面的來(lái)給大家簡(jiǎn)單介紹下設(shè)計(jì)模式在這些庫(kù)語(yǔ)法和框架中的使用。筆者認(rèn)為把設(shè)計(jì)模式多帶帶抽象出來(lái)探討，就和算法中抽象出來(lái)冒泡排序一樣，是為了描述一種常用的。

本文為饑人谷講師slashhuang原創(chuàng)文章

在編寫(xiě)JS代碼的過(guò)程中，運(yùn)用一定的設(shè)計(jì)模式可以讓我們的代碼更加優(yōu)雅、靈活。

下面筆者就結(jié)合諸如redux的subscribe、ES6的class、vue里面的$dispatch、jquery里面的on/off來(lái)給大家簡(jiǎn)單介紹下設(shè)計(jì)模式在這些庫(kù)、語(yǔ)法和框架中的使用。

設(shè)計(jì)模式解決的問(wèn)題

設(shè)計(jì)模式并不是很玄乎的知識(shí)，很多同學(xué)在編寫(xiě)JS代碼的時(shí)候已經(jīng)在不經(jīng)意間用了不少設(shè)計(jì)模式了。筆者認(rèn)為把設(shè)計(jì)模式多帶帶抽象出來(lái)探討，就和算法中抽象出來(lái)冒泡、排序一樣，是為了描述一種常用的JS pattern。
通過(guò)研習(xí)這類pattern，讓模式來(lái)指導(dǎo)我們的代碼結(jié)構(gòu)及JS算法。

一些常用的設(shè)計(jì)模式概述

1、observer [觀察者模式]

根據(jù)狀態(tài)的變化主動(dòng)觸發(fā)觀察者隊(duì)列、hashMap的回調(diào)行為

一個(gè)簡(jiǎn)單的觀察者模式代碼實(shí)踐

    class StateTracker{
        constructor(){
            this.observers = [];
            this.internalState= 10;
        }
        // 改變內(nèi)部狀態(tài)，觸發(fā)狀態(tài)的觀察者列表
        change(val){
            this.internalState= val;
            this.observers.forEach(observer=>observer(val));
        }// 注冊(cè)觀察者
        registerObserver(ObserverFn){
            this.obserers.push(ObserverFn)
        }
    }

2、publish/subscribe [訂閱發(fā)布模式]

在代碼模塊的共享訪問(wèn)空間存儲(chǔ)hashMap的topic/callback形式。添加on/off/trigger等接口實(shí)現(xiàn)掛載、移除、觸發(fā)等動(dòng)作。
一個(gè)簡(jiǎn)單的訂閱發(fā)布模式代碼實(shí)踐

    class PubSubHandler{
        constructor(){
            this.eventPool = {};
        }
        //移除
        off(topicName){
            delete this.observers[topicName]
        }
        //發(fā)布
        trigger(topicName,...args){
            this.eventPool[topicName] && 
            this.eventPool[topicName].forEach(callback=>callback(...args));
        }
        //訂閱
        on(topicName,callback){
            let topic = this.eventPool[topicName] ;
            if(!topic){
                this.eventPool[topicName] =[]
            }
            this.eventPool[topicName].push(callback)
        }
    }

3、singleton[單例模式]

構(gòu)造函數(shù)的實(shí)例只有一個(gè)，一般是通過(guò)閉包存儲(chǔ)內(nèi)部實(shí)例，通過(guò)接口訪問(wèn)內(nèi)部實(shí)例。一個(gè)簡(jiǎn)單的單例模式代碼實(shí)踐

    var singleton = ()=>{
        var instance;
        var createInstance = ()=>{
            this.a = 1;
            this.b = 2;
        }// 單例模式方法入口
        return {
            getInstance:()=>{
                if(!instance){
                    instance = createInstance();
                }
                return instance;
            }
        }
    }
    var test = singleton();
    test.getInstance() == test.getInstance() //true

4、decorator裝飾者模式

這個(gè)模式就是在原有的對(duì)象上面裝飾更多行為，并且保持變量名不變。用過(guò)ES7的@decorator或者python等語(yǔ)言的，應(yīng)該對(duì)decorator不陌生的。
一個(gè)簡(jiǎn)單的裝飾者模式代碼實(shí)踐

    function decorator(sourceObj,decortorFn){
        decortorFn(sourceObj);
        return sourceObj
    }
    var d = {a:1};
    // d變?yōu)榱藍(lán)a:1,b:1}
    d = decorator(d,(d)=>{d.b=1});

5、mixin混合模式

這個(gè)模式和decorator有點(diǎn)類似，只是它的功能更加垂直。就是在原有的對(duì)象上面增加、覆蓋對(duì)象的行為。
相比于extends、Object.assign等方法，mixin模式更富有表現(xiàn)力。
mixin模式不能一概而論，可能依據(jù)不同的數(shù)據(jù)類型有不同的mixin策略，比如vue.mixin
一個(gè)簡(jiǎn)單的混合模式代碼實(shí)踐

    class StateTracker{
        constructor(){
            this.raw = {
                a:1,
                b:2
            }
        }// 混合模式方法入口
        mixin(obj){
            Object.assign(this.raw,obj)
        }
    }

筆者暫時(shí)先介紹這么多設(shè)計(jì)模式。下面就針對(duì)常用的框架、語(yǔ)法、庫(kù)等來(lái)說(shuō)明這些設(shè)計(jì)模式的應(yīng)用。

observer模式在redux中的使用示例代碼

    var store = createStore(reducer,initialState);
    //注冊(cè)redux store，存儲(chǔ)在 nextListeners數(shù)組
    var test = store.subscribe(()=>{console.log("我注冊(cè)了！")});
    // 取消注冊(cè)監(jiān)聽(tīng)
    test.unsubscribe();

publish/subscribe在jquery中的使用示例代碼

    $(document).on("hello",()=>{console.log("hello")})
    $(document).trigger("hello");
    $(document).off("hello")

decorator模式在react-redux中的實(shí)踐

    //裝飾器
    @connect(state=>state)
    class Container extends Component{
        render(){
            return JSON.stringify(this.props)   
        }
    }

總結(jié)

關(guān)于設(shè)計(jì)模式在前端框架或庫(kù)的實(shí)踐，我這邊寫(xiě)的是比較簡(jiǎn)略的， 可能沒(méi)有寫(xiě)過(guò)相關(guān)代碼的同學(xué)不是特別好理解，有相關(guān)疑問(wèn)的同學(xué)可以在文末直接提問(wèn)。希望本文能夠?qū)Υ蠹覍W(xué)習(xí)和了解設(shè)計(jì)模式的概念有所了解
本文首發(fā)于筆者的github blog
github設(shè)計(jì)模式教程代碼地址

加微信號(hào): astak10或者長(zhǎng)按識(shí)別下方二維碼進(jìn)入前端技術(shù)交流群，暗號(hào)：寫(xiě)代碼啦

每日一題，每周資源推薦，精彩博客推薦，工作、筆試、面試經(jīng)驗(yàn)交流解答，免費(fèi)直播課，群友輕分享... ，數(shù)不盡的福利免費(fèi)送

云服務(wù)器 GPU云服務(wù)器 php框架和設(shè)計(jì)模式 js中的提示模式框 h5框架和js框架 js中的call和apply

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/92430.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

ccj659

男|高級(jí)講師

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

TA的文章

【LeetCode 二叉樹(shù)專項(xiàng)】二叉搜索樹(shù)中的中序后繼（285）

閱讀 1859·2021-11-24 09:39
珠峰前端架構(gòu)師培養(yǎng)計(jì)劃

閱讀 3424·2021-11-22 15:24
微軟現(xiàn)在允許您在 Windows 11 上測(cè)試 Android 應(yīng)用程序

閱讀 3207·2021-10-26 09:51
GitHub Actions安全漏洞可使攻擊者繞過(guò)代碼審查機(jī)制影響受保護(hù)分支

閱讀 3444·2021-10-19 11:46
如何實(shí)現(xiàn)一個(gè)顏色選擇器

閱讀 2980·2019-08-30 15:44
sublime常用基礎(chǔ)插件合集

閱讀 2313·2019-08-29 15:30
寫(xiě)一個(gè)簡(jiǎn)單易用可擴(kuò)展vue表單驗(yàn)證插件(vue-validate-easy)

閱讀 2632·2019-08-29 15:05
nth-child和nth-of-type的區(qū)別和用法(選擇器)

閱讀 872·2019-08-29 10:55

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

JS設(shè)計(jì)模式入門(mén)和框架中的實(shí)踐

相關(guān)文章