资讯频道 → 编程语言
阅读更多

0顶
0踩

编程语言

转载新闻 JS设计模式漫谈

2017-02-13 13:33 by 副主编 jihong10102006 评论(0) 有4766人浏览
设计模式 js
在编写JS和组装代码的过程中，运用一定的设计模式可以让我们的代码更加优雅、灵活。

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

设计模式解决的问题

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

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

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

一些常用的设计模式概述

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

一个简单的观察者模式代码实践 
  class StateTracker{
        constructor(){
            this.observers = [];
            this.internamState= 10;
        }
        // 改变内部状态，触发状态的观察者列表
        change(val){
            this.internamState= val;
            this.observers.forEach(observer=>observer(val));
        }
        registerObserver(ObserverFn){
            this.obserers.push(ObserverFn)
        }
    }


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)
        }
    }


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


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});


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)   
        }
    }


总结
关于设计模式在前端框架或库的实践，我这边写的是比较简略的。 可能没有写过相关代码的同学不是特别好理解。 总之，在读完本文后，大家对设计模式的概念有所了解和帮助，我就觉得已经达到目的了。
  • 大小: 182.5 KB
来自: slashhuang
0
顶
0
踩
评论 共 0 条 请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • PHP学习的正确方法与个人经历分享

    回想起我第一次接触PHP时，我迫切地想要快速上手，跳过了一些基础知识的学习。这种情况是这样的我也意识到学习PHP不仅仅是为了掌握一门技术，更是一种提升自我、实现自我价值的过程。这些交流和分享让我受益匪浅，不仅解决了我的疑惑，还让我学到了很多实用的技巧和方法。学习PHP的过程中，我发现仅仅看书或听课是远远不够的。在学习PHP的道路上，我走过不少弯路，也收获了许多宝贵的经验。今天，我想与大家分享一些我认为PHP学习的正确方法，并结合我个人的学习经历，希望能对正在学习或即将学习PHP的朋友们有所帮助。

  • PHP经验集锦

    作者:snowai 来源:PHPX.com <!--google_ad_client = "pub-2928087963304701";google_ad_width = 468;google_ad_height = 60;google_ad_format = "468x60_as";google_ad_channel ="9725746080";google_c

  • php项目经验总结,PHP开发经验总结

    1.使用内嵌的HTML代码，而不是PHP的echo语句。因为PHP是一门嵌入式Web编程语言，可以将HTML代码和PHP代码相互嵌入。但是很多程序员担心在HTML代码中过多的使用”"嵌入PHP代码会多次调用PHP解释器，从而降低了PHP代码的运行速度，所以宁愿使用PHP的echo语句来输出HTML代码，而不直接使用HTML代码。但事实却恰恰相反。每一个PHP页面只调用一次PHP解释器来解释所有的P...

  • PHP使用经验总结（一）

    0.php中，$a;若只定义变量而不赋值，则内存中不会给它分配内存；notice和fatal warming的区别，前者在内存中跳过不执行，执行下面的，而后者是致命错误，程序直接跳出，完全不再执行。1.可变变量 可变变量允许动态的改变一个变量的名称。即用一个变量的值作为另一个变量的名称。 varname=′tireqty′;varname = ’tireqty’; varname=5;等价于

  • php项目开发经验

    php项目开发经验（转载）两个月前我几乎完全不会PHP，糊里糊涂的接手了一个手机网游门户的开发，临阵退缩是没有用的，IT技术作为现今工业社会里更新换代最快的一个行业，任凭谁也不可能全部掌握所有的技术，作为一个优秀的开发人员，随时学习新技术并且尽可能的最快掌握应用到项目中，便是必需具备的基本素质。手艺总是多少有一些相通之处和可继承的，琵琶弹得好、学习吉他自然也不难，从钢...

  • javascript 设计模式漫谈【0】 接口类的制造

    最近在看 <Javascipt Design Patterns> ，虽说纯english版的看起来有点费劲伤神，... 我的计划是，一步步来将这个javascript设计模式汲取并且拿出来分享。那么我们的第一站，从javascript的接口讲起...

  • 漫谈JavaScript设计模式

    单体模式： 　用来划分命名空间，减少全局作用域 　代码实例： 　 1 var functionGroup = {2 name:'Darren',3 method1:function(){4 //code5 },6 init:function(){7 //code8 }9 }　 1 var func...

  • PHP设计模式漫谈之调解者模式

    调解者模式，这个模式的目的是封装一组对象之间的相互作用，防止对象之间相互干扰，调解者（Mediator）在同事对象（Colleague）之间充当中间汇聚点。 同事对象之间应该保持松散耦合，避免一个对象直接明确指向另一个...

  • 设计模式漫谈之状态模式

    最近熬夜睡眠不好，这篇文章也写了好几天，最近公司不是太忙，我看了很多博客，感觉js语言，这种解释性语言也挺厉害的。我目前的规划是精通C#语言，JS语言，一种编译语言，一种解释语言，然后框架。当然C语言，汇编...

  • 设计模式漫谈

    前言 随着编程经验的增加，慢慢的发现基本的...本文旨在对设计模式进行粗浅的介绍，后续会陆续介绍JS里常用的设计模式。 1.为什么使用模式？ 模式是一种可复用的解决方案，可用于解决软件设计中遇到的常见问题。...

  • php 经验,PHP 实战经验

    因为分享的内容较多，文章较长，纯技术的讲解可能过于枯燥，你也无心看完。所以，我尽量生动的扯吧，希望对你有一点儿帮助。好了，废话不多说，开始第一个环节，面试，从小白到职场，成为一个专业的攻城狮。一、PHP 面试常问的问题简述：面试过程中，对自己的定位不同(薪资不同)，自然面试的内容也不同，小白可能就问你对 PHP 的使用，以及能不能业务开发，总不能拿着实习生的工资，干着造轮子的事情，自己肯定也不愿意...

  • php项目经验总结,PHP经验总结 - 开发技巧分享

    简述接触PHP差不多2年，从懵懂到入门，再到追求稳定高效的高阶级学习，我慢慢的积累一些PHP编程经验，我本人记性不好，所以把这些经验记下来，慢慢累积，乐自助人，何乐不为呢？下面是我面对一些问题所采取处理解决方案，希望对大家有所帮助，同时也欢迎大家指正。问题&解决方案1、PHP对特殊字符串的处理方案普通的字符串截取，一般采用substr()或者mb_substr()，需要说明的是substr...

  • javascript设计模式漫谈之使用委托

    .net语言中有委托这个概念，委托的本质可以说是面向对象语言中安全的函数指针，javascript语言标准中虽然没有委托概念，但是却可以使用委托。因为在javascript是一个基于对象的语言，函数也是对象，所以自然就可以...

  • 设计模式漫谈之原型模式

    继续唠叨，我写这个系列，好像写流水账或小说一样。今天有点忙，有点累，让我静下来的就是在电脑旁看代码。 Fuck,坏心情！妈的，我31了，每天起床，上班，下班，看代码，与...原型在JS语言中是个很重要很难理解的东...

  • 设计模式那些模糊不清的概念

    — 本文结束 — ● 漫谈设计模式在 Spring 框架中的良好实践 ● 颠覆微服务认知：深入思考微服务的七个主流观点 ● 人人都是 API 设计者 ● 一文讲透微服务下如何保证事务的一致性 ● 要黑盒测试微服务内部...

  • 设计模式的1000+篇文章总结

    本文收集和总结了有关设计模式的1000+篇文章，由于篇幅有限只能总结近期的内容，想了解更多内容可以访问：https://www.ai2news.com/, 其分享了有关AI的论文、文章、图书。

  • [大话技术]话聊有趣的23种设计模式

    在网上看见了23种设计模式的有趣见解这篇文章，作者以轻松的语言比喻了java的23种模式，觉得蛮有意思的,我在其基础上再加工一下,分享给大家.大家一起学习.一起进步. 1、FACTORY(工厂模式) 追MM少不了请吃饭了，...

Global site tag (gtag.js) - Google Analytics