【Hello，前端！】JavaScript 中哪些常用的设计模式｜ 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第5天

今天继续 JavaScript 的内容，这一次呢，Richy来聊一聊JS编程中常用的的设计模式。

设计模式

设计模式这个东西，即是编程的重要部分，却又不太像程序语言或者开发技术那些东西。他仿佛是一代代程序员口口相传的人生经验，凝聚了无数前人在项目开发实践中总结的精华与智慧。

如何编写一份易于维护的代码，是程序员们一直以来的目标和追求，因为程序总是随着时代不断进步和迭代的，迭代的难易就决定的程序生命的周期和产出的价值。设计模式的出现，就是为了系统化的指导程序员如何使得自己编写的代码更加易于维护。用专业点的词汇来描述，就是去实现代码的高内聚和低耦合。让一段代码尽可能的将相关功能凝聚于自身，高度专一化的去实现系统的某个功能，另外尽量减少与其他代码的关联与耦合，使得他易于分离、扩展和变更。

JS前端开发常用设计模式

其实设计模式并不分语言、也不分前后端还是测试，只要是涉及到需要维护的代码编写就需要设计模式的使用。但在前端的JavaScript开发中，有一些设计模式是常常用到，而且非常有必要去使用的。

构造器模式

顾名思义，构造器模式就是用于构造某样“产品”的，在js中，就可以用于构造对象或者函数，例如下面这个例子。

// 构造器
function People(age, name, job) {
    this.age = age
    this.name = name
    this.job = job
}
let student = new People(18, 'Richy', 'student')

从代码中我们就可以看到，构造器其实就是一种构造函数，我们可以用构造器来初始化一些列具有共同特点但又相互差异的对象，所以在这样的场景下，我们就可以用构造器模式的思想去定义对象的构造函数。

单例模式

单例模式确保我们的类仅有一个实例，且提供了一个全局可访问的入口。一个很简单的例子就是网页中的弹窗或抽屉。我们只需要创建一个HTML对象，即单个实例，在我们需要他弹出来的时候，只需要让他显示就行了。如果我们要展示不同的内容，我们还可以通过修改弹窗上面的数据来实现。

// element的对话框
<el-button 
    type="text" 
    @click="dialogVisible = true">
    点击打开 Dialog</el-button>
<el-dialog 
    title="提示" 
    :visible.sync="dialogVisible" 
    width="30%" 
    :before-close="handleClose"> 
    <span>对话框</span>
    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button> 
    </span>
</el-dialog>
>

End

今天的设计模式分享就到这里啦，设计模式丰富多样，每一种都是值得学习和实践使用的，在开发过程中我们也要时刻谨记这些设计模式的思想，写出高质量的可维护代码。