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

0顶
0踩

编程语言

转载新闻 JS设计模式漫谈

2017-02-13 13:33 by 副主编 jihong10102006 评论(0) 有4702人浏览
设计模式 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经验集锦

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

  • php 经验,PHP 实战经验

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

  • 3 年经验的 PHP 程序员应该掌握哪些知识

    中级PHP开发面试经验及问题总结 对于互联网的从业人员来说，每年的3，4月份可以说是一个跳槽的黄金时期，也因此业内有金三银四的说法。本人在上一家公司工作三年之后也渐渐按耐不住激动的心情选择了跳槽。在经过了半个多月的面试之后，对于目前市场上对于 3 年左右的程序员的的一个技能需求大概有了了解，对于个人的短板也有了一个更加全面的认识。今天我把最近一段时间面试中遇到的一些问题和考察的技能点总结下来...

  • 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