分类 JavaScript设计模式与开发实践下的文章

木灵鱼儿 18小时前 JavaScript设计模式与开发实践

JavaScript 享元模式

前言享元模式是一种性能优化的模式，它通过共享对象的方式，减少实例对象的数量，它将对象的属性拆分为内部属性和外部属性，内部属性是可以共享的，外部属性是无法共享的，我们将共享的部分封装到对象中，然后大家共用这一个对象，通过方法或者直接赋值外部属性给这个对象，从而实现对象的复用。但是赋值的过程是会耗时的，这就是典型的时间换空间的优化方式了。享元模式是一种结构型设计模式，旨在减少应用程序中的内存使用或计算开销，通过共享对象实例来优化性能。初识享元模式假设有个内衣工厂，目前的产品有 50 种男式内衣和 50 种女士内衣，为了推销产品，工厂决定生产一些塑料模特来穿上他们的内衣拍成广告照片。正常情...

40 0 0

JavaScript模式享元模式

JavaScript 模板方法模式

木灵鱼儿 20小时前 JavaScript设计模式与开发实践

JavaScript 模板方法模式

前言模板方法模式的核心在于：定义一个操作中的算法骨架（模板方法），并将某些步骤延迟到子类中实现。通常我们会抽象一个父类，父类封装了子类的算法框架，包括实现一些公共方法和所有方法的执行顺序，子类继承父类，可以自己重写父类的方法。在模板方法模式中，子类实现中相同部分被上移到父类中，而将不同的部分留给子类来实现，最后由父类的模板方法来控制整个算法的执行顺序和流程，子类只关心具体的算法实现。这种方式十分依赖抽象类，但是JavaScript中很难去模仿一个抽象，但是我们也可以用自己的方式去实现。咖啡和茶这个是一个非常经典的例子，有助于我们理解什么是模板方法模式。泡一杯咖啡泡咖啡的步骤通常如下：把水...

21 0 0

JavaScript模式模板方法模式

JavaScript 组合模式

木灵鱼儿 1天前 JavaScript设计模式与开发实践

JavaScript 组合模式

前言组合模式真的很难在一些业务项目上有所体现，但是当我们完完全全从零触发去构建一些东西的时候，组合模式还是很有用处的。组合模式是一种结构型设计模式，它可以让你将对象组合成树形结构以表示部分整体的层次结构。组合使得用户对单个对象和组合对象的使用具有一致性。在组合模式中，通常有两种类型的对象：叶子对象（Leaf）：不包含子对象的对象。容器对象（Composite）：包含叶子对象或其他容器对象。注意重点是这个一致性，我们通过上层类型约束，要求叶子对象和容器对象都需要实现我们指定的接口，然后我们就可以放心的进行组合了。最终我们可以发现，组合这些对象，得到的是一种树形结构，因此组合模式也被称为树枝...

24 0 0

JavaScript模式组合模式

JavaScript 命令模式

木灵鱼儿 4天前 JavaScript设计模式与开发实践

JavaScript 命令模式

前言命令模式（Command Pattern）是一种行为设计模式，它将一个请求或简单操作封装成一个对象，从而使你可以使用不同的请求、队列或日志请求来参数化其他对象。同时支持可撤销的操作。命令模式主要包含以下几个角色：命令（Command）接口 - 声明执行操作的接口。此接口通常定义了一个执行具体命令的方法。具体命令（Concrete Command） - Command 接口的实现对象，它定义了绑定在接收者上的动作之间的关联。当命令的 execute() 方法被调用时，将会把动作转发给接收者去执行。客户（Client） - 创建一个具体命令对象并设置其接收者。有时客户负责创建并设置命令对...

123 1 0

JavaScript模式命令模式

JavaScript 发布订阅模式

木灵鱼儿 6天前 JavaScript设计模式与开发实践

JavaScript 发布订阅模式

前言发布订阅模式使用上也非常广泛，比如vue的响应式数据就用到了发布订阅模式，前端的原生事件也是发布订阅模式，这种模式主要解决的就是异步的问题，用于代替回调函数，且使得两个对象是松耦合的联系再一起。发布—订阅模式又叫观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。在 JavaScript 开发中，我们一般用事件模型来替代传统的发布—订阅模式。发布订阅实现var event = { eventMap: new Map(), on(eventName, callback) { let eventL...

114 69 0

JavaScript模式发布订阅模式

JavaScript 迭代器模式

木灵鱼儿 1周前 JavaScript设计模式与开发实践

JavaScript 迭代器模式

迭代器模式是一种行为设计模式，它允许您遍历集合中的元素，而无需暴露其底层表示（列表、堆栈、树等）。简单点来说就是自己去实现一个for循环。var each = function( ary, callback ){ for ( var i = 0, l = ary.length; i < l; i++ ){ callback.call( ary[i], i, ary[ i ] ); // 把下标和元素当作参数传给 callback 函数 } }; each( [ 1, 2, 3 ], function( i, n ){ alert ( [ i, n ]...

161 2 0

JavaScript模式迭代器模式

JavaScript 代理模式

木灵鱼儿 1周前 JavaScript设计模式与开发实践

JavaScript 代理模式

前言代理模式应用非常广泛，比如es6的proxy，接口的反代，vue的响应式数据也用到了代理模式，由于用的很平常，导致对它的认知很模糊。代理模式是一种结构型设计模式，它允许你提供对象的替代品或占位符。代理控制着对原始对象的访问，并允许在将请求传递给对象前后执行一些操作。举个例子，比如前端常用的一个性能优化的方式：事件委托（事件代理）我们给子元素的父元素绑定click事件，通过冒泡的方式统一在父元素处理事件逻辑，这样减少了事件的绑定。这种方式其实又有点像是：中介者模式中介者模式是一种行为设计模式，它通过引入一个中介对象来管理一组对象之间的交互。中介者模式可以将对象之间的复杂多对多关系简化为...

157 3 0

代理模式 JavaScript模式

JavaScript 策略模式

木灵鱼儿 1周前 JavaScript设计模式与开发实践

JavaScript 策略模式

前言策略模式常常用于解耦代码中的多种方案实现，比如表单校验，我们将校验的规则解耦出来，封装成一个个策略，然后在需要使用的dom上，使用这些策略，从而省去在具体的校验函数中一大堆if else的判断，当然也许不是if else。再举个例子，比如代码的压缩方式，我们可以使用gzip，或者br的方式，或者其他，他们都是为了达到压缩目的，又是多种方案可选的形式。使用策略模式计算奖金很多公司的年终奖是根据员工的工资基数和年底绩效情况来发放的。例如，绩效为 S 的人年终奖有 4 倍工资，绩效为 A 的人年终奖有 3 倍工资，而绩效为 B 的人年终奖是 2 倍工资。假设财务部要求我们提供一段代码，来方...

228 2 0

JavaScript模式一等公民策略模式

JavaScript 单例模式

木灵鱼儿 1周前 JavaScript设计模式与开发实践

JavaScript 单例模式

前言单例模式在强类型语言中常常是使用一个类来实现，哪怕在ts中，常见的单例示例也是使用class来实现，但是事实上在js中，不一定非得要用类来实现，我们不应该将实现方式看的太死板，使用class也只是手段的一种，在js中我们有很多种方式达到相同的效果。单例模式的定义是：保证一个类仅有一个实例，并提供一个访问它的全局访问点。拙劣的模仿在强类型语言中，会给类一个getInstance的方法用于获取实例对象，在js中我们也可以这么写：function User(name) { this.name = name; this.instance = null; } User.prototy...

200 0 0

JavaScript模式单例模式泛用型

JavaScript 多态

木灵鱼儿 2周前 JavaScript设计模式与开发实践

JavaScript 多态

前言一直很难去真正理解JavaScript的多态到底是什么，从各种教程上对多态的解释都是：同一操作作用于不同的对象上面，可以产生不同的解释和不同的执行结果。举例说明：移动这个功能，作用在汽车上，他能实现100公里每小时，如果作用在自行车上，只有20公里每小时，一个加油，一个用脚蹬，实现方式和结果完全不同。但是这也没能解释js中的多态到底是什么？如果从代码上去看的话，可以如下：/** 汽车 */ function Car() {} /** 自行车 */ function Bicycle() {} /** 移动 */ function move(obj) { if (obj inst...

337 0 0

javascript 设计模式多态

分类：JavaScript设计模式与开发实践

JavaScript 享元模式

JavaScript 模板方法模式

JavaScript 组合模式

JavaScript 命令模式

JavaScript 发布订阅模式

JavaScript 迭代器模式

JavaScript 代理模式

JavaScript 策略模式

JavaScript 单例模式

JavaScript 多态

最近评论

博客文章RSS订阅

博客评论RSS订阅

登录

分类：JavaScript设计模式与开发实践

JavaScript 享元模式

JavaScript 模板方法模式

JavaScript 组合模式

JavaScript 命令模式

JavaScript 发布订阅模式

JavaScript 迭代器模式

JavaScript 代理模式

JavaScript 策略模式

JavaScript 单例模式

JavaScript 多态

最近评论

博客文章RSS订阅

博客评论RSS订阅