Better

Ethan的博客,欢迎访问交流

读《JavaScript设计模式》有感

哈哈,这又是一本通过讲故事方式讲解技术的书,但这并不是凑单买的,而是特意买的,因为我一直想知道如何写出优雅的代码,设计模式不就是前人经验的总结么。这本书并没有很难懂的代码,更多的一种书写代码的方式,还是有不少收获的。

前言

书中的代码都不难理解,但确实解决了日常开发中一些痛点,有些模式更多的是一些小技巧,在这里总结几个印象深刻滴!

重点掌握几个常用的

  • 面向对象
  • 单例
  • 装饰器模式
  • 代理模式
  • 观察者模式

工厂模式

属于一种进一步抽象的思想,最简单的例子,日常开发中有简单弹窗,有确认弹窗,有填写信息弹窗。我们对每种情况进行抽象,回导致需要记忆的对象过多,给开发增加成本,我们可以为这些对象再加一个抽象层,增加一个工厂,你需要什么我就给你什么,将入口归一化处理,也便于日后迭代。

原型模式

本质就是JavaScript中,抽象对象,且通过原型实现继承

单例模式

本质通过闭包保存创建过的对象,如果再次需要对象,则可以直接返回已经创建对象,从而避免重复创建

模版模式

利用强大的文本匹配功能实现HTML模版功能。可以实现一个模版加载器功能。

适配器模式

可以标题看起来有点模糊,可以直接的理解成适配数据,比如后台返回的数据不符合我的要求,可以通过适配器处理成我们需要的数据,再比如函数内部需要参数默认值,可以通过适配器解决参数空值问题

装饰器模式

这个模式就比较好理解,可以理解成添砖加瓦

命令模式

通过闭包在内部封装一系列命令,对外公布一个execute函数,这样一来你只需要指定指令即可,将请求与实现解

迭代器模式

不暴露对象内部结构的同时,可以顺序的访问聚合对象内部的元素。

我们可以通过迭代器,对外屏蔽并不美观的for循环,迭代器在日常开发中十分常见,比如数组迭代器,对象迭代器,同步变量迭代器(解决 A.b.c 表达式取值与赋值操作在中间环节有空时的报错)

备忘录模式

本质就是缓存函数的具体使用,主要是对现有的数据或状态做缓存,为将来某个时刻使用或恢复做准备,同样是通过闭包现有的值。

观察者模式

这应该是一个很重要的模式了,又称发布-订阅模式或消息机制,定义了一种依赖关系,解决了主体对象和观察者之间功能的耦合

状态模式

解决程序中臃肿的分支判断语句,将每个分支转化为一种状态独立出来,方便每种状态的管理又不至于每次执行时遍历所有分支

链式调用

在jQuery中就很常见,通过在函数内返回this,实现函数的链式调用

委托模式

多个对象接受并处理同一个请求,他们可以将请求委托给另一个对象统一处理请求。

在前端中,常用来进行数据处理减少事件数,因为消耗就打了,尤其在低版本浏览器中,事件过多会影响用户体验

惰性模式

减少每次代码执行时的重复分支判断,通过对对象重定义来屏蔽原对象的分支判断。

在解决前端兼容性常用,因为判断兼容性时需要进行能力检测,但一旦检测完毕,这个浏览器在此次运行环境中是不可能发生变化的,所以重复检测就没有意义,就可以通过惰性模式较少判断

节流与防抖

这个在之前的学习中重点讲过,主要减少事件的高频率触发

等待者模式

本质就是实现一个Promise

AMD&SMD

SMD同步加载模式,AMD异步加载模式,在实际中肯定是AMD模式,将复杂的系统分解成高内聚、低耦合的模块

主要用来解决前端模块化开发和异步加载的问题。

MVC&MVP&MVVM

理解如何从MVC发展到MVP,最终要现在最流行的MVVM。

在NVC中,view层依赖model层,controller层同样依赖于model层。

在MVP中,弱化view层能力,无需依赖model层,强化presenter层,将所有层次的交互都发生在Precenter层中。

MVVM中,是视图的逆袭,为视图层量身定做一套视图模型,并在视图模型中创建属性和方法,为视图层绑定数据并实现交互

思考:能否直接通过HTML创建视图实现复杂页面的需求呢,视图反过来控制管理器实现组件的需求

总结

观察上面各个实现的模式,可以看出来闭包是多么重要呀。

实践代码:js-design-pattern



留言