这里积累下js的设计模式，暂时主要考虑用在React native与uniapp的开发上
js中常用设计模式
@[toc]
一、工厂模式
不暴露创建对象的具体逻辑，而是将逻辑封装在一个函数中，这个函数被视为一个工厂
function createPerson(name, age){
var o = new Object(); // 创建一个对象
o.name = name;
o.age = age;
o.sayName = function(){
console.log(this.name)
}
return o; // 返回这个对象
}
var person1 = createPerson('ccc', 18)
var person2 = createPerson('www', 18)
二、单例模式
保证一个类仅有一个实例，并且提供一个可以访问它的访问点
2.1、写法一(构建instance)
class Singleton {
//构造函数
constructor(name) {
this.name = name;
}
//实例方法
getName() {
console.log(this.name);
}
//静态方法获取实例对象
static getInstance(name) {
if (!this.instance) {
this.instance = new Singleton(name);
}
return this.instance;
}
}
//创建静态属性作为唯一标识
Singleton.instance = null;
//验证
var a = Singleton.getInstance('a');
2.2、写法二(export单例)
class UserModel {
}
const userModel = new UserModel();
export default userModel;
三、观察者模式
当一个对象的状态发生变化时，所有依赖于他的对象都将得到通知。
常用于事件订阅，以及Vue框架的双向数据绑定。
//发布者(售楼处)
class SalesOffices{
constructor(){
//缓存列表(售楼花名册)
this.clientList = [];
}
//订阅函数(订阅售楼消息)
listen(fn){
this.clientList.push(fn);
}
//发布函数(发布售楼消息)
trigger(){
//遍历花名册，给他们发消息
for(var i=0;i<this.clientList.length;i++){
var fn = this.clientList[i];
fn.apply(this,arguments);
}
}
}
//实例化
var salesOffices = new SalesOffices();
//小明订阅售楼消息
salesOffices.listen(function(price){
console.log("小明" + price);
});
//小红订阅售楼消息
salesOffices.listen(function(price){
console.log("小红" + price);
});
//售楼处发布售楼消息
salesOffices.trigger("你好，今天的房价为2万一平！");
//打印结果:
小明你好，今天的房价为2万一平！
小红你好，今天的房价为2万一平！
//订阅消息
myDiv.addEventListener('click', function(){
console.log("myDiv被点击了")
});
//发布消息
myDiv.click();
四、构造函数模式
使用new操作符，调用构造函数创建新实例。
一般会有以下几步:
- 创建一个新对象
- 将构造函数的作用域赋给新对象（因此this就指向了这个新对象）
- 执行构造函数中的代码（为这个新对象添加属性）
- 返回新对象
构造函数模式与工厂模式的区别：
- 没有显式的创建对象
- 直接将属性和方法赋给了this对象
- 没有return 语句
function Person(name , age){
this.name = name;
this.age = age;
this.sayName = function(){
console.log(this.name)
}
}
var person1 = new Person('ccc', 18)
var person2 = new Person('www', 18)
person1.sayName() // --> 'ccc'
console.log(person1 instanceof Person) // --> true
五、代理模式
为一个对象提供一个代用品或占位符，以便控制对它的访问。
优点
- 可以保护对象
- 优化性能，减少开销很大的对象
- 缓存结果
5.1、保护代理
比如说对传入的数据做一下初步的处理，整理格式，处理类型，过滤字段等等
// 保护代理
function do1(value){
console.log(value)
}
function xdo1(value){
if(value==undefined||value==null){
console.log("输入不合规")
return
}
value = ('' + value).replace(/沙\s*雕/g, '**');
if(typeof(value)!='String'){
do1(value.toString())
return
}
do1(value)
}
xdo1()
xdo1(123123)
xdo1({})
xdo1("eqweqwrqw")
xdo1("你是个沙雕吧")
5.2、虚拟代理
就是在访问主函数之前，做一些控制，如果时合规的数据，再发送至主函数，否则自动返回 防抖、节流以及图片占位图就是一个典型的例子
// 防抖 所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
// 应用场景： 用户输入间隔多久后没有输入时进行检查
/**
* @desc 函数防抖
* @param func 函数
* @param wait 延迟执行毫秒数
* @param immediate true 表立即执行，false 表非立即执行
*/
let timeout={
// 'default':null
};
let debounce = (func, wait=500, immediate = true,key='default') => {
if (timeout[key]) clearTimeout(timeout[key]);
if (immediate) {
let callNow = !timeout[key];
timeout[key] = setTimeout(() => {
timeout[key] = null;
}, wait)
if (callNow) func()
} else {
timeout[key] = setTimeout(function() {
func()
}, wait);
}
}
// 节流 所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。
// 应用场景： 需要稀释执行效率的地方使用，例如懒加载的时候监听滚动条。
/**
* @desc 函数节流
* @param func 函数
* @param wait 延迟执行毫秒数
* @param immediate true 表示立即执行，false 表示非立即执行
*/
let previous = 0;
let throttle = (func, wait, immediate = false,key='default') => {
if (immediate) {
let now = Date.now();
if (now - previous > wait) {
func();
previous = now;
}
} else {
if (!timeout[key]) {
timeout[key] = setTimeout(() => {
timeout[key] = null;
func();
}, wait)
}
}
}
export default {
debounce,
throttle,
}
5.2、缓存代理
缓存代理就是在需要比较大的计算的时候，可以把结果做一个缓存，在遇到相同入参时直接返回结果，可以提高性能
listadd=(list)=>{
return list.reduce(function(start,value,index,list){
return start+value
},0)
}
//这里使用闭包，节省了一个全局变量
var proxy=(function(){
var chace={}
return function(...arguments){
let item=arguments.join(',')
if(chace[item]>=0){
return chace[item]+'缓'
}else{
let value=listadd(arguments)
chace[item]=value
return value
}
}
})()
console.log(proxy(1,2,3,4))
console.log(proxy(1,2,3,4))
console.log(proxy(1,5,3,4))
console.log(proxy(1,2,3,4))
console.log(proxy(1,23,4,5))
console.log(proxy(1,23,4,5))
六、原型模式
通过原型链prototype初始化参数，它省略了为构造函数传递参数初始化参数的环节。
缺点：所有的实例在默认情况下都将取得相同的属性值
function Person(){
}
Person.prototype = {
constructor: Person,
name: 'ccc',
age: 18,
friends:['www', 'aaa'],
sayName: function () {
console.log(this.name)
}
}
var person1 = new Person()
var person2 = new Person()
person1.friends.push('bbb')
console.log(person1.friends) // --> ["www", "aaa", "bbb"]
console.log(person2.friends) // --> ["www", "aaa", "bbb"]
console.log(person1.friends === person2.friends) // --> true
这里补充一点js知识
1，在javascript中，是并不存在真正意义上的类，这里方法被当作一个类来处理
2，同时function Person(){}定义的函数式是全局性的，可以与下面的调换顺序
3，但是const Person=function是匿名函数的定义方法，需要在使用前优先初始化
七、组合使用构造函数模式和原型模式
创建自定义类型的最常见方式，就是组合使用构造函数模式与原型模式。构造函数模式用于定义实例属性，而原型模式用于定义方法和共享的属性。这种方式还支持向构造函数传递参数。
function Person(name, age){
this.name = name;
this.age = age;
this.friends = ['aaa', 'bbb']
}
Person.prototype = {
constructor: Person,
sayName: function(){
console.log(this.name)
}
}
var person1 = new Person('ccc', 18)
var person2 = new Person('www', 18)
person1.friends.push('ddd')
console.log(person1.friends) // --> ["aaa", "bbb", "ddd"]
console.log(person2.friends) // --> ["aaa", "bbb"]
console.log(person1.friends === person2.friends) // --> false
console.log(person1.sayName === person2.sayName) // --> true
八、动态原型模式
通过检查某个应该存在的方法是否有效，来决定是否需要初始化原型以及初始化的方向。
function Person(name, age){
// 属性
this.name = name
this.age = age
// 方法
if(typeof this.sayName !== 'function'){
Person.prototype.sayName = function(){
console.log(this.name)
}
}
}
var person1 = new Person('ccc', 18)
person1.sayName() // --> ccc
