【H2O2|全栈】JS案例章节（四）——使用原型的JS工厂模式
目录
前言
开篇语
本系列为短章节，单独讲述部分特殊重点案例，本期讲述使用原型来实现JS的工厂模式。
与HTML和CSS相比，JS加入了很多逻辑性的元素在里面，所以需要一定的逻辑思维能力，要求能够整合一些知识。如果遇到不理解之处，可以参阅同系列之前的章节。
准备工作
软件：【参考版本】Visual Studio Code
插件（扩展包）：Open in browser, Live Preview, Live Server, Tencent Cloud AI Code Assistant, htmltagwrap
提示：在不熟练的阶段建议关闭AI助手
浏览器版本：Chrome
系统版本： Win10/11/其他非Windows版本
需求
现在，我们有几组按钮，就像下面这样——
要求是，点击添加按钮，可以在按钮的下方生成一些内容为aa的盒子；
点击删除按钮，可以移除这些盒子。
工厂模式
概念
工厂（Factory）模式是JS高阶方法中的内容，实际上就是一种创建对象的方式，当我们需要重复创建对象时，只需要不断调用工厂即可。
在ES6中，我们常常使用构造函数定义实例属性，使用原型定义方法和共享属性。这种方式是目前在ECMAScript中使用最广泛，认同度最高的一种使用工厂模式的方法。
优点
工厂模式可以让我们更加方便地创建对象，并帮助我们减少冗余代码，实现前端的性能优化。
同时，由于使用原型定义方法，所以还可以减少内存的消耗。
添加元素的新方法
之前我们知道，想要把一个指定的元素添加到盒子中，原生DOM可以使用innerHTML实现。
但是，该方法会覆盖原来的内容，而这不是我们所期望的。
当然，后来我们又学习了使用createElement()和insertBefore()，appendChild()等方法结合使用，这才实现了在指定位置添加DOM元素的方法。
现在，有一种更加简便的在指定位置添加元素的方法insertAdjacentHTML，可以直接解析字符串中的HTML标签，并添加到指定的位置。
这里是一个添加元素的示例——
box.insertAdjacentHTML("beforeEnd", "<div>aa</div>")
"beforeEnd"处填写的是我们插入元素的位置，一般有下面几种——
| 参数 | 位置 |
|---|---|
| beforeBegin | 第一个子元素之前插入 |
| afterBegin | 第一个子元素之后插入 |
| beforeEnd | 最后一个子元素之前插入 |
| afterEnd | 最后一个子元素之后插入 |
"<div>aa</div>"处填写的是需要插入的HTML元素。
分析案例
HTML代码
这里我们不设置CSS样式，示例HTML代码如下——
<div class="box">
<button class="add">添加</button>
<button class="del">删除</button>
</div>
<div class="box1">
<button class="add1">添加</button>
<button class="del1">删除</button>
</div>JS实现
回到我们的案例，我们实际上需要实现添加盒子和删除盒子这两个功能，涉及到的对象有区域盒子（用来装按钮以及新添加的盒子），添加按钮和删除按钮。
我们先设置一个构造函数，作为我们的工厂。现在，我们为这个工厂添加必要的设备（参数），也就是我们的盒子和按钮——
function Factory(box, add, del){
// 获取按钮盒子和按钮
this.box = document.querySelector(box);
this.add = document.querySelector(add);
this.del = document.querySelector(del);
}然后，我们需要设置两个按钮的点击事件，由于事件处理程序为方法，所以将它们放在原型中声明——
Factory.prototype = {
constructor: Factory,
addElem() {
this.box.insertAdjacentHTML("beforeEnd", "<div>aa</div>");
},
delElem() {
this.box.removeChild(this.box.lastChild);
}
}注意，这里的this指向构造函数Factory，我们期望它指向我们的事件源，并在点击事件onclick后调用。
而bind()恰好可以实现手动调用修改this指向的功能。
所以，在构造函数中，我们需要像下面一样绑定点击事件，使用bind()修改事件处理函数的this，使之指向事件源——
function Factory(box, add, del){
// 获取按钮盒子和按钮
this.box = document.querySelector(box);
this.add = document.querySelector(add);
this.del = document.querySelector(del);
// 绑定点击事件
this.add.onclick = this.addElem.bind(this);
this.del.onclick = this.delElem.bind(this);
}最后，我们就可以利用创建工厂的方式为两个盒子绑定按钮点击事件了——
var box = new Factory('.box', '.add', '.del');
var box1 = new Factory('.box1', '.add1', '.del1');结束语
本期的内容到这里就结束了，在后续的本系列博客中，我会继续更新js的特殊重点案例。
在全栈领域，博主也只不过是一个普通的萌新而已。本系列的博客主要是记录一下自己学习的一些经历，然后把自己领悟到的一些东西总结一下，分享给大家。
文章全篇的操作过程都是笔者亲自操作完成的，一些定义性的文字加入了笔者自己的很多理解在里面，所以仅供参考。如果有说的不对的地方，还请谅解。
==期待与你在下一期博客中再次相遇==
——还在漏气的【H2O2】
原文地址：https://blog.csdn.net/ZC13786305863/article/details/144001705
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！