JS设计模式入门和框架中的实践

ccj659 发布于2019-08-22 13:47 / 2819人阅读

摘要：下面笔者就结合诸如的的里面的里面的来给大家简单介绍下设计模式在这些库语法和框架中的使用。笔者认为把设计模式多带带抽象出来探讨，就和算法中抽象出来冒泡排序一样，是为了描述一种常用的。

本文为饥人谷讲师slashhuang原创文章

在编写JS代码的过程中，运用一定的设计模式可以让我们的代码更加优雅、灵活。

下面笔者就结合诸如redux的subscribe、ES6的class、vue里面的$dispatch、jquery里面的on/off来给大家简单介绍下设计模式在这些库、语法和框架中的使用。

设计模式解决的问题

设计模式并不是很玄乎的知识，很多同学在编写JS代码的时候已经在不经意间用了不少设计模式了。

笔者认为把设计模式多带带抽象出来探讨，就和算法中抽象出来冒泡、排序一样，是为了描述一种常用的JS pattern。

通过研习这类pattern，让模式来指导我们的代码结构及JS算法。

一些常用的设计模式概述

1、observer [观察者模式]

根据状态的变化主动触发观察者队列、hashMap的回调行为

一个简单的观察者模式代码实践

    class StateTracker{
        constructor(){
            this.observers = [];
            this.internalState= 10;
        }
        // 改变内部状态，触发状态的观察者列表
        change(val){
            this.internalState= val;
            this.observers.forEach(observer=>observer(val));
        }// 注册观察者
        registerObserver(ObserverFn){
            this.obserers.push(ObserverFn)
        }
    }

2、publish/subscribe [订阅发布模式]

在代码模块的共享访问空间存储hashMap的topic/callback形式。

添加on/off/trigger等接口实现挂载、移除、触发等动作。

一个简单的订阅发布模式代码实践

    class PubSubHandler{
        constructor(){
            this.eventPool = {};
        }
        //移除
        off(topicName){
            delete this.observers[topicName]
        }
        //发布
        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[单例模式]

构造函数的实例只有一个，一般是通过闭包存储内部实例，通过接口访问内部实例。

一个简单的单例模式代码实践

    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装饰者模式

这个模式就是在原有的对象上面装饰更多行为，并且保持变量名不变。

用过ES7的@decorator或者python等语言的，应该对decorator不陌生的。

一个简单的装饰者模式代码实践

    function decorator(sourceObj,decortorFn){
        decortorFn(sourceObj);
        return sourceObj
    }
    var d = {a:1};
    // d变为了{a:1,b:1}
    d = decorator(d,(d)=>{d.b=1});

5、mixin混合模式

这个模式和decorator有点类似，只是它的功能更加垂直。

就是在原有的对象上面增加、覆盖对象的行为。

相比于extends、Object.assign等方法，mixin模式更富有表现力。

mixin模式不能一概而论，可能依据不同的数据类型有不同的mixin策略，比如vue.mixin

一个简单的混合模式代码实践

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

笔者暂时先介绍这么多设计模式。

下面就针对常用的框架、语法、库等来说明这些设计模式的应用。

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

    var store = createStore(reducer,initialState);
    //注册redux store，存储在 nextListeners数组
    var test = store.subscribe(()=>{console.log("我注册了！")});
    // 取消注册监听
    test.unsubscribe();

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

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

decorator模式在react-redux中的实践

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

总结

关于设计模式在前端框架或库的实践，我这边写的是比较简略的，可能没有写过相关代码的同学不是特别好理解，有相关疑问的同学可以在文末直接提问。

希望本文能够对大家学习和了解设计模式的概念有所了解

本文首发于笔者的github blog

github设计模式教程代码地址

加微信号: astak10或者长按识别下方二维码进入前端技术交流群，暗号：写代码啦

每日一题，每周资源推荐，精彩博客推荐，工作、笔试、面试经验交流解答，免费直播课，群友轻分享... ，数不尽的福利免费送

GPU云服务器云服务器 php框架和设计模式 js中的提示模式框 h5框架和js框架 js中的call和apply

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92430.html

JS设计模式入门和框架中的实践

摘要：下面笔者就结合诸如的的里面的里面的来给大家简单介绍下设计模式在这些库语法和框架中的使用。笔者认为把设计模式单独抽象出来探讨，就和算法中抽象出来冒泡排序一样，是为了描述一种常用的。本文为饥人谷讲师slashhuang原创文章。在编写JS代码的过程中，运用一定的设计模式可以让我们的代码更加优雅、灵活。下面笔者就结合诸如redux的subscribe、ES6的class、vue里面的$...

lmxdawn 2019-08-26 17:15 评论0 收藏0
前端资源分享-只为更好前端

摘要：一团队组织网站说明腾讯团队腾讯前端团队，代表作品，致力于前端技术的研究腾讯社交用户体验设计，简称，腾讯设计团队网站腾讯用户研究与体验设计部百度前端研发部出品淘宝前端团队用技术为体验提供无限可能凹凸实验室京东用户体验设计部出品奇舞团奇虎旗下前一、团队组织网站说明腾讯 AlloyTeam 团队腾讯Web前端团队，代表作品WebQQ，致力于前端技术的研究 ISUX 腾...

zxhaaa 2019-08-22 16:11 评论0 收藏0
前端资源分享-只为更好前端

摘要：一团队组织网站说明腾讯团队腾讯前端团队，代表作品，致力于前端技术的研究腾讯社交用户体验设计，简称，腾讯设计团队网站腾讯用户研究与体验设计部百度前端研发部出品淘宝前端团队用技术为体验提供无限可能凹凸实验室京东用户体验设计部出品奇舞团奇虎旗下前一、团队组织网站说明腾讯 AlloyTeam 团队腾讯Web前端团队，代表作品WebQQ，致力于前端技术的研究 ISUX 腾...

JouyPub 2019-08-02 10:10 评论0 收藏0
前端资源分享-只为更好前端

摘要：一团队组织网站说明腾讯团队腾讯前端团队，代表作品，致力于前端技术的研究腾讯社交用户体验设计，简称，腾讯设计团队网站腾讯用户研究与体验设计部百度前端研发部出品淘宝前端团队用技术为体验提供无限可能凹凸实验室京东用户体验设计部出品奇舞团奇虎旗下前一、团队组织网站说明腾讯 AlloyTeam 团队腾讯Web前端团队，代表作品WebQQ，致力于前端技术的研究 ISUX 腾...

vslam 2019-08-30 15:53 评论0 收藏0
个人分享--web前端学习资源分享

摘要：前言月份开始出没社区，现在差不多月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了一般来说，差不多到了转正的时候，会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客，博文推荐分享给大家。 1.前言 6月份开始出没社区，现在差不多9月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了！一般来说，差不多到了转正的时候，会进行总结或者分享会议！那么今天我就...

sherlock221 2019-08-20 18:59 评论0 收藏0