JavaScript 设计模式入门和框架中的实践
来源:互联网 发布:淘宝怎么发布宝贝 编辑:程序博客网 时间:2024/06/05 15:38
在编写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) }}
学习前端的同学注意了!!!
学习过程中遇到什么问题或者想获取学习资源的话,欢迎加入前端学习交流群,群号码:328058344
- JavaScript 设计模式入门和框架中的实践
- 设计模式和框架
- 设计模式和框架
- JavaScript设计模式与开发实践
- 《JavaScript设计模式与开发实践》
- JavaScript设计模式与开发实践笔记
- JavaScript设计模式与开发实践
- 框架模式和设计模式
- 框架模式和设计模式
- GEF 框架中的设计模式
- GEF 框架中的设计模式
- ACE中的设计模式,入门
- 理解JavaScript中的设计模式
- 理解JavaScript中的设计模式
- 【学习笔记javascript设计模式与开发实践(this、call和apply)----2】
- 【学习笔记javascript设计模式与开发实践(闭包和高阶函数)----3】
- 【学习笔记javascript设计模式与开发实践(this、call和apply)----2】
- 【学习笔记javascript设计模式与开发实践(闭包和高阶函数)----3】
- 应知道的数据库连接池DBCP配置及JDBC超时设置
- 转载:王垠 的《完全用Linux工作》
- JavaSe总结-13- API常用对象(3)
- 使用http client必须知道的参数设置及代码写法、存在的风险
- POJ 3995 Hop — Don’t Walk! 已被翻译
- JavaScript 设计模式入门和框架中的实践
- scala函数与方法
- 洛谷 1219——[USACO 1.5] 八皇后(深度优先搜索)
- POJ-3673 cow multiplition
- Android Studio与Unity的交互出现的错误
- 浅谈Django的Q查询以及AngularJS的Datatables分页插件
- 服务降级背后的技术架构设计
- 王垠:完全用Linux工作 (转载)
- 高性能高并发系统的稳定性保障