JS设计模式之职责链模式
意图
使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系。将这些对象连城一条链,并沿着这条链传递该请求,直到有一个对象处理它为止。
——《设计模式:可复用面向对象软件的基础》中文版第167页
尤其是我们在处理不同类型的表单时,这个设计模式就能很好的派上用场。
示例
假设我们给一个商场写逻辑,需求是:
已经支付了500元定金的用户享7折优惠。
已经支付了100元定金的用户享 ...
JS设计模式之装饰器模式
意图
动态地给一个对象添加一些额外的职责。就增加功能来说,装饰器模式相比生成子类更为灵活。
——《设计模式:可复用面向对象软件的基础》中文版第132页
在Java中这样的设计可太多了,比如进行IO操作时的XxxReader,那么这里就模仿它进行一个应用。
示例
如下:
123456789101112131415161718192021222324252627282930313233343536 ...
JS设计模式之适配器模式
意图
将一个类的接口转换成客户希望的另外一个接口。适配器模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。
——《设计模式:可复用面向对象软件的基础》中文版第106页
值得注意的是,在JS中,我们对于数据类型的适配(把后端传来的JSON转成我们希望的格式)也应属于适配器的范畴,所以下文中分别叙述它们的应用。
示例
这两个例子都写在了同一个文件里。
适配方法
假设我们有谷歌地图和百度 ...
JS设计模式之原型模式
意图
用原型示例指定创建对象的种类,并且通过拷贝这些原型创建新的对象。
——《设计模式:可复用面向对象软件的基础》中文版第89页
所以这里说的原型类似于对象的蓝图。但是,由于JS的灵活性,这个设计模式对于JS来说不是很重要。
因为在像C++这样的静态语言中,类不是对象,并且运行时只能得到很少或者得不到任何类型信息,所以Prototype(原型模式)特别有用。而在Smalltalk或Objec ...
JS设计模式之单例模式
意图
保证一个类仅有一个实例,并提供一个访问它的全局访问点。
——《设计模式:可复用面向对象软件的基础》中文版第96页
这个概念有些类似于全局变量,它确保所有引用都访问到唯一的实例对象,这可以节省掉创建对象的开销。但是,相应地,在懒加载模式下,它也带来了检查是否已经创建对象的开销。所以还是要根据情况灵活选择使用与否。
示例
有两种实现方法,下面都列出。或许还有更多,这里就不深究了。
更改构造函 ...
JS设计模式之建造者模式
意图
将一个复杂对象的构建与它的表示(即实例对象)分离,使得同样的构建过程可以创建不同的表示
——《设计模式:可复用面向对象软件的基础》中文版第74页
这句话里包含着两个要素:第一个是分离构建与表示,也就是说我们要单独创建一个新的类XxxBuilder来进行构建操作;第二个是这个XxxBuilder可以被继承然后重写方法,使得调用同样的接口却创建了不同的对象。下面通过一段代码来解释清楚。
示例 ...
JS设计模式之工厂模式
工厂方法模式
定义一个用于创建对象的接口,让子类决定实例化哪一个类。工厂方法使一个类的实例化延迟到子类。
——《设计模式:可复用面向对象软件的基础》中文版第81页
在我理解中,所谓工厂方法,是指我们通过调用已知的接口,获得未知的对象,做出预期的行为。工厂方法为我们提供这一对象。试想一下,如果我们有将当前网页分享给QQ或者微信的需求,可以通过以下代码实现:
1234567891011121314 ...
JS实现函数重载
需求
假设我们有这样一个数据(来源于参考文章中的浅谈JavaScript函数重载,链接在文章尾部给出):
123const users = { values: ["Dean Edwards", "Alex Russell", "Dean Tom"]}
要定义一个find方法,使得它可以在下列三种情况工作:
当不 ...
通过EventBus实现发布与订阅模式
源码
来自半年后的说明:我把代码转放到 gists 里了,当时代码风格受 Python 影响较大,这里就不再更改了,毕竟大家本地都有自己的格式化工具。
点击这里前往Github获取本文源码。
背景
后注: 发布-订阅模式属于设计模式中的行为型模式,基本上和观察者模式相同,至于具体定义存在争议,这里不进行讨论。
在Vue中,我们经常通过全局事件总线进行简单的组件间通信,那么究其原理其实并不难 ...
Nginx自定义错误页面
打开配置文件,找到你想自定义错误页面的location块:
1234location / { error_page 404 /404.html; # 其它配置}
确保你有404.html这一文件,如果还想捕捉更多错误,可以这样写:
1error_page 404 403 500 /error.html;
这样就完成了,不用再看经典的Nginx默认错误页面了。