JS设计模式漫谈

0顶
0踩

2017-01-23 13:54 by 副主编 jihong10102006 评论(0) 有5380人浏览

设计模式 js

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

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

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

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

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

一些常用的设计模式概述

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

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

查看图片附件

来自: slashhuang

分享到：

0
顶

0
踩

评论共 0 条请登录后发表评论

发表评论

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

相关推荐

前台提交对象数组，后台接收并解析

获取选中的所有对象，序列化为json字符串。后台String 类型，接收参数。然后转化为JSON数组。再转化为JOSNObject,最后转化为java bean.

SpringMVC前台向后台传输对象

通过注解实现SpringMVC，一直按照Struts的思路去做传参，发现后台没有接收到前台的对象参数，试验了多种方法，终于发现了原因，在此做一下记录。前台：&lt;form action="method" method="post"&gt; &lt;input name='id' value='张三'&gt; &lt;input name='name' value='...

asp.net button前台和后台事件同时执行

前台事件写在Script中，用OnClientClick执行Script中的代码后台事件写在cs中，用OnClick执行cs中的方法或点击事件 <asp:Button ID="btnsave" runat="server" Text="确定" OnClick="btnsave_Click" OnClientClick="this.disabled = true;alert('提示')...

微信小程序 js动态给前台元素绑定事件

//js动态给前台绑定事件 var myList = ["items1","items2","items3"] pageObject = { data:{ actionSheetItems:myList } } for(var i = 0;i (function(itemName){ pageObject[itemName] = function(e){

java前台向后台传对象

get方式java向后台传值对象前台url var url=url+"?tableModel="+JSON.stringify(对象); 后台代码将json解析转换成类 String tableModelJson = RequestUtil.getString(request, "tableModel"); Map classMap = new HashMap(); classMap.p

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

最近在看 &lt;Javascipt Design Patterns&gt; ，虽说纯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.为什么使用模式？模式是一种可复用的解决方案，可用于解决软件设计中遇到的常见问题。...

前端-对象-合集

对象是什么对象是由多个键值对组成的无序的集合。对象中每个属性对应任意类型的值 1.面向对象是什么使用对象中的属性和方法就是面向对象 JavaScript的本地对象有哪些分别有什么特点本地对象为array obj regexp等特点是本地对象可以new实例化 1.JavaScript的内置对象有哪些有什么特点 JavaScript常见的内置对象有 Object,Math,Stri...

ios监听程序回到前台，viewController获取事件

法在接下来的随笔中实现) //增加监听 [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(appHasGoneInForeground:)

电商项目中遇到的经典问题

请描述一下这个系统？【回答技巧】从3个方面来回答这个问题： |--系统背景及系统概述 |--系统包括的业务模块及主业务流程 |--责任模块【回答示例】第一个方面：系统背景及系统概述优购时尚商城是香港上市公司百丽国际公司为拓宽旗下运动品牌服饰市场而开发的一个专业销售购物网站户外运动装备的网站。第二个方面：系统包括的业务模块及主业务流程改项目分为前台和后天2大模...

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

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

设计模式漫谈之原型模式

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

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

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

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

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

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

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

0顶0踩