js中常用设计模式

这里积累下js的设计模式，暂时主要考虑用在React native与uniapp的开发上

js中常用设计模式

一、工厂模式

不暴露创建对象的具体逻辑，而是将逻辑封装在一个函数中，这个函数被视为一个工厂

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操作符，调用构造函数创建新实例。

一般会有以下几步:

1. 创建一个新对象
2. 将构造函数的作用域赋给新对象（因此this就指向了这个新对象）
3. 执行构造函数中的代码（为这个新对象添加属性）
4. 返回新对象

构造函数模式与工厂模式的区别：

1. 没有显式的创建对象
2. 直接将属性和方法赋给了this对象
3. 没有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

五、代理模式

为一个对象提供一个代用品或占位符，以便控制对它的访问。

优点

1. 可以保护对象
2. 优化性能，减少开销很大的对象
3. 缓存结果

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