![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Javascript面向对象设计模式
我是QinDong
这个作者很懒,什么都没留下…
展开
-
Javascript面向对象之策略模式
我们先看个简单的例子,再根据需求扩展。现在有个需求,三个按钮中选择了两个之后就不能先择第三个了,我们怎么实现呢,代码实现如下:class Client { constructor(nodes) { this.nodes = [...nodes]; this.initEvent(); } initEvent() { this.nodes.forEach((item) => { item.addEventListener('click', (e) => {原创 2021-01-23 20:40:23 · 160 阅读 · 0 评论 -
Javascript面向对象之适配器模式
先看例子:代码:可以看到我们,我们的图形是不适配的,这时候我们可以添加适配器类进行适配,代码实现如下:代码:class element { constructor(el) { this.el = el; } startMove(num){ this.el.style.left = `${num}px`; }} class adapter { constructor(element) { this.element = element; this.cr原创 2021-01-19 22:52:46 · 225 阅读 · 3 评论 -
Javascript面向对象之观察者模式
先看个例子,当我们在例子中输入a时,包含a区块会高亮显示,输入b时,b包含b的区块会高亮显示。代码:比如,现在我们有个需求,添加一个包含数字的区块让它高亮显示,如果实现也是以同样的方法,就需要在原有的代码上进行修改,每次的需求都要在源代码上进行修改,这是无休止的修改。这就违背了面向对象的开闭原则,对扩展开放,对修改关闭,因为对新需求的增加不应该在源代码的基础上进行修改,应该通过扩展类的方式进行扩展,具体实现如下所示。<!DOCTYPE html><html> <h原创 2021-01-17 00:14:52 · 273 阅读 · 5 评论