JavaScript设计模式
文章平均质量分 59
介绍JavaScript的设计模式
sif_666
If you can't explain it to a six year old, you don't understand it yourself.
展开
-
[JS设计模式]Prototype Pattern
Prototype pattern可便于同类型的多个对象共享属性。原型(prototype)是JS原生的对象,其他对象可以通过原型链(prototype chain)来访问原型。单独看这句描述可能还是有点儿抽象,下面通过具体的示例来详细阐述。这里可以看到,有一个name属性;根据ES6类的语法规则,所有在类中定义的属性(本例的属性bark),都自动加入到类的prototype中,Dog类本身有两个属性:constructor和bark。有两种方式可以查看,一种是通过类本身的prototype。原创 2023-12-31 22:20:04 · 510 阅读 · 0 评论 -
[JS设计模式]Observer Pattern
观察者模式对象和观察者对象没有紧密耦合,并且可以随时(去)耦合。EventObserver中定义了subscribe和unsubscribe函数来向其订阅和取消订阅观察者,同时通过broadcast函数向所有观察者通知事件,再由观察者自己决定对收到的事件做具体的处理。观察者需要收到事件,首先要进行订阅,当有事件产生时,EventObserver才会将事件传递给订阅者(即观察者)。上述示例代码中,定义了2个观察者(logger1和logge2),可通过EventObserver通知所有的观察者某个事件。原创 2023-12-28 21:51:37 · 334 阅读 · 0 评论 -
[JS设计模式] Module Pattern
这降低了在代码库的其他部分声明的命名冲突的风险,因为这些值在全局作用域中不可用。可以看到,math.js中的4个显示声明的函数可以导出,index.js中也能正常导入这四个函数,并正常调用。不必担心模块使用者会意外覆盖模块内部的变量的值,这些变量可能与模块的私有变量具有相同的名称:它可以。,可以在index.js中直接调用。仅仅将math.js中的函数export还不够,还需要在index.js中,将需要调用的函数导入。为了使index.js能调用到math.js中的函数,则需要先将这几个函数导出。原创 2023-12-27 22:22:29 · 948 阅读 · 0 评论 -
[JS设计模式]Flyweight Pattern
每个区都有多个图书馆,每个图书馆都有大量的图书,每种书都会有多本,那么该城市要建一个图书管理系统显然需要非常大的内存资源。一本书通常有多个属性,例如,书名、作者、ISBN、图例、所属图书馆、总数量、在馆数量等等。如果每一本书的每一个副本,我们都创建一个对象来进行管理,有些共有的属性所占用的内存是一种显而易见的浪费。那么,在这种场景下,使用享元模式就能极大的优化图书管理系统的内存。通过通俗的场景描述了享元模式的作用,接下来,在技术层面来看看要怎样实现。需要说明的是,该模式也可以用于其他设计语言,不限于JS。原创 2023-12-22 22:46:00 · 338 阅读 · 0 评论 -
[JS设计模式]Command Pattern
不是将方法直接耦合到OrderManager实例,它们现在是分离的、解耦的函数,我们可以通过OrderManager上可用的execute方法调用它们。命令模式允许我们将方法与执行该方法的对象解耦。如果您正在处理具有特定生命周期的命令,或者应该在特定时间排队并执行的命令,那么它可以为您提供更多的控制。以后可能决定重命名某些方法,或者这些方法的功能发生了变化。使用命令模式,我们可以将执行特定任务的对象与调用该方法(执行特定任务)的对象解耦。使用命令模式,我们可以将执行特定任务的对象与调用该方法的对象解耦。原创 2023-12-21 23:00:00 · 305 阅读 · 0 评论 -
[JS设计模式]Mediator/Middleware Pattern
以航空公司的空中飞行管控为例,来解释mediator模式。假设,每架飞机相互之间都是自己直接沟通,整个沟通网络会非常繁杂而不好控制,可能会出现意外情况,后果将非常严重。那么,实际的飞行调度是通过AOC来完成,而AOC将相当于一个mediator的角色。中介模式使组件能够通过一个中心点(中介)相互交互。各组件之间并不是直接交互,而是接收请求并将其转发!在JavaScript中,中介通常只是一个对象字面量或一个函数。中介模式的一个很好的用例是聊天室!相反,聊天室充当了用户之间的中介。原创 2023-12-23 21:16:27 · 54 阅读 · 0 评论 -
[JS设计模式]Mixin Pattern
Mixin是一个对象,我们可以使用它来为另一个对象或类添加可重用的功能,而无需使用继承。我们不能单独使用mixins:它们的唯一目的是在没有继承的情况下向对象或类添加功能。假设对于我们的应用程序,我们需要创建多个狗。然而,我们创建的基本狗没有任何属性,只有一个name属性。一只狗能做的不仅仅是有一个名字。它应该会叫,会摇尾巴,会玩!我们可以创建一个mixin,为我们提供bark, wagTail和play属性,而不是直接添加到Dog类中。我们可以用将添加到Dog原型中。这样Dog的每个新实例都可以访问。原创 2023-12-23 21:21:44 · 535 阅读 · 0 评论 -
[JS设计模式]Factory pattern
工厂函数是任何不使用class或的函数并且会return一个对象。因此,工厂函数不使用new关键字。工厂函数在JavaScript中一直很有吸引力,因为它们提供了轻松生成对象实例的能力,而无需深入到类和new关键字的复杂性中。JavaScript提供了一种非常方便的对象字面语法来创建对象。看起来和JSON非常类似。(JavaScript’s Object literal Notation)其实JSON是基于javascript的对象字面量表示来的。的左边是属性名,的右边是属性值。原创 2023-12-20 14:28:22 · 354 阅读 · 0 评论 -
[JS设计模式]Singleton Pattern
单例是可以被实例化一次的类,并且可以被全局访问。原创 2023-12-19 12:36:22 · 647 阅读 · 0 评论