多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
# js设计模式 **开始!** 在程序中,大部分语言的实现都是基于“类”。 在js中并没有类这个概念,js中的函数属于对象,而基于js中闭包与弱类型等特性,在实现一些设计模式的方式上与众不同。 ## 设计原则 **单一职责原则(SRP)** 一个对象或方法只做一件事情。如果一个方法承担了过多的职责,那么在需求的变迁过程中,需要改写这个方法的可能性就越大。 应该把对象或方法划分成较小的粒度 **最少知识原则(LKP)** 一个软件实体应当 尽可能少地与其他实体发生相互作用  应当尽量减少对象之间的交互。如果两个对象之间不必彼此直接通信,那么这两个对象就不要发生直接的 相互联系,可以转交给第三方进行处理 **开放-封闭原则(OCP)** 软件实体(类、模块、函数)等应该是可以 扩展的,但是不可修改 当需要改变一个程序的功能或者给这个程序增加新功能的时候,可以使用增加代码的方式,尽量避免改动程序的源代码,防止影响原系统的稳定 ## 什么是设计模式? >假设有一个空房间,我们要日复一日地往里面放一些东西。最简单的办法当然是把这些东西 直接扔进去,但是时间久了,就会发现很难从这 个房子里找到自己想要的东西,要调整某几样东 西的位置也不容易。所以在房间里做一些柜子也 许是个更好的选择,虽然柜子会增加我们的成 本,但它可以在维护阶段为我们带来好处。使用 这些柜子存放东西的规则,或许就是一种模式 —— [《JavaScript设计模式与开发实践》](https://book.douban.com/subject/26382780/) 学习设计模式,有助于写出可复用和可维护性高的程序 设计模式的原则是“找出 程序中变化的地方,并将变化封装起来”,它的关键是意图,而不是结构。 不过要注意,使用不当的话,可能会事倍功半。 ## 一、**单例模式** 1.定义 保证一个类仅有一个实例,并提供一个访问他的全局访问点 2.核心 确保只有一个实例,并提供全局访问 3.实现 假设要设置一个管理员,多次调用也仅设置一次,我们可以使用闭包缓存一个内部变量来实现这个单例 ``` function SetManager(name) { this.manager = name; } SetManager.prototype.getName = function() { console.log(this.manager); }; var SingletonSetManager = (function() { var manager = null; return function(name) { if (!manager) { manager = new SetManager(name); } return manager; } })(); SingletonSetManager('a').getName(); // a SingletonSetManager('b').getName(); // a SingletonSetManager('c').getName(); // a ``` 此为比较简单的做法,但是假如我们还要设置一个别的角色比如说HR呢?就得复制一遍代码了 所以,可以改写单例内部,实现的更通用一些 ~~~ // 提取出通用的单例 function getSingleton(fn) { var instance = null; return function() { if (!instance) { instance = fn.apply(this, arguments); } return instance; } } ~~~ >在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向。 //先解释一下apply方法 ``` //一、 var name = '小王', age = 17; var obj = { name: '小张', objAge: this.age, myFun: function() { console.log( this.name + '年 龄' + this.age ) } } obj.objAge; //17 obj.myFun() //小张年龄 undefined //二、 var fav = '弱智' function show() { console.log(this.fav) } show() //弱智 可以发现第一个打印的this指向obj,第二个全局声明this指向window call/apply/bind都是用来重新定义this这个对象的 如一中的代码 加 var db = { name: '神经病', age: 99 } obj.myFun.apply(db); //神经病年龄 99 ``` 接上所述 我们提取好之后,再进行调用 结果还是一样 ***** # **观察者模式** **概念:** >观察者模式是软件设计模式的一种。在此种模式中,一个目标对象管理所有相依于它的观察者对象,并且在它本身的状态改变时主动发出通知。这通常透过呼叫各观察者所提供的方法来实现。此种模式通常被用来实时事件处理系统。 说的简单些,就是在<font style="color: red">数据发生</font>改变时,对应的处理函数自动执行。