前端开发的设计模式（此文章通俗易懂）

admin管理员组

文章数量:1794759

前端开发的设计模式（此文章通俗易懂）

笔者做前端开发已经三年了，各种类型的项目都有经验，jQuery的PC电商项目经验，App的Vue全家桶项目经验，微信小程序经验，后台管理系统的React全家桶经验，React结合TS的项目经验。。。项目虽然做了很多，但是有些时候在各种前端交流群的时候看到别人说什么设计模式什么的就很懵，刚开始看到感觉没什么卵用，知道这些概念有啥用，能实战才是真正的好程序员。

---

可是后来我发现我可能错了，因为我发现更高级的程序员是根据自己的项目经验去决定某某项目采用什么框架，运用什么设计模式。这个人就是技术总监（每个公司可能此角色不同，大家别太较真哈，有可能是架构师，也有可能是啥啥啥的，笔者的公司是由技术总监决定的）。

---

设计模式其实就是开发经验，解决通用问题的套路

---

所以我决定好好的研究一下这些设计模式，结果发现我以前的每一个项目都是有涉及到这些模式的，接下来就与大家分享出来，大家看一看你用过哪些涉及模式呢？

---

一：模块模式

在立即执行函数表达式中定义的变量和方法在外界是访问不到的，只有通过其向外部提供的接口，“有限制”地访问。通过函数作用域解决了属性和方法的封装问题。 现在的主流框架笔者认为都是属于模块模式，还有笔者之前做jQuery结合requireJS的项目也是属于模块模式。

---

二：构造函数模式：

在构造函数的prototype上增加属性和方法。 就是创建一个构造函数然后加属性和方法，使用的时候就在其他地方去调用这个构造函数里面的东西。

---

三：工厂模式：

创建一个函数，通过接收参数来生成不同的对象。 来结合代码就一目了然了：

function Person(name, age) { let person = new Object(); person.name = name; person.age = age; person.printName = function() { console.log(this.name) }; person.printAge = function() { console.log(this.age) }; return person; } let person = Person('xin', 22);

---

四：单例模式：

一句话，全局只有一个实例。

var Singleton = (function() { var instance; function init() { return { }; } return { getInstance: function() { if(!instance) { instace = init(); } return instance; } } })();

---

五：发布-订阅模式（观察者模式）：

定义了对象之间一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。 观察者模式广泛应用于异步编程中，是一种替代回调函数的方案，多个事件处理函数可以订阅同一个事件，当该事件发生后，与其相对应的多个事件处理函数都会运行。 取代对象之间硬编码的通知机制，一个对象不用再显示的调用另外一个对象的某个接口，降低模块之间的耦合程度，虽然不清楚彼此的细节，但是不影响他们之间的相互通信。 应用： DOM事件是一种典型的发布-订阅模式，对一个dom节点的一个事件进行监听，当操作dom节点时，触发响应的事件，响应函数执行，事件函数对dom节点完全未知，不用去理会时什么事件，如何触发，执行就好。

---

六：混合模式：

笔者研究细致了这补充此模式内容。

---

推荐书：GOF 23种设计模式

如果感觉笔者还有哪些地方需要完善或者再做补充可在下方评论，笔者实时更新哦~

本文标签： 易懂通俗模式文章