23种设计模式之外的一些设计模式

23种之外的：
缩写：构混防伪发步帝。
构造、混合、防抖、委托、发布订阅、异步、递归

1.构造函数模式：

function Animal(name, color){
     this.name = name;
     this.color = color;
    this.getName = function(){
        return this.name;
     }
}
 // 实例一个对象
 var cat = new Animal('猫', '白色'); console.log( cat.getName() );

2.混合模式(混合继承)

3.防抖节流模式

4.委托模式，也称为代理模式。
一组按钮点击，频繁获取dom，可以利用冒泡事件原理，在父级加事件就节省dom操作了
参考这篇文章

5.发布订阅模式，类似观察者模式

6.异步模式
setTimeout setInterval
promise

7.递归模式

//递归遍历实现
var recursiveFunction = function(){
    var str = ''
    const getStr = function(list){
        list.forEach(function(row){
            if(row.children){
                getStr(row.children)
            }else {
                str += row.name + ";"
            }
        })
    }
    getStr(data)
    console.log(str)
}
recursiveFunction()
//输出：青苹果;红苹果;北方米饭;南方米饭;联想电脑;苹果电脑;锄头;锤子;洗发水;沐浴露;

vue中的设计模式
那首先通过我们最熟悉的react||vue来了解一下GOF.
GOF是设计模式的经典名著《设计模式——可复用面向对象软件的基础》，在书本总结了23个设计模式。我来罗列一下哪些设计模式是我们见过的。

单例（Singleton）模式
定义：某个类只能生成一个实例，该类提供了一个全局访问点供外部获取该实例，其拓展是有限多例模式。
例子：Vuex 保证唯一 Store,以及单例组件
工厂（Factory Method）模式
定义：一个用于创建产品的接口，由子类决定生产什么产品。
例子：将new操作单独封装，遇到new时，就要考虑是否该用工厂模式。 在组件中传入实参，返回出不同的组件**
抽象工厂（Abstract Factory）模式
定义：提供一个创建产品族的接口，其每个子类可以生产一系列相关的产品。
例子：
比如说有个案例有不同的订单状态对应不同的操作按钮。我们是不是一般会写出如下的代码
switch (status){ case ‘待付款’: setState({status:1}) break; }
如果我们把订单状态的一些判断与业务代码掺杂在一块，不利于我们做扩展和复用。那对比一下下面的代码
export default class OrderStatusFactory { createStatusObjWith (status) { let obj = undifined switch (status) { case ‘待付款’: obj = new StatusWaitToPay() break; case ‘待发货’: obj = new StatusWaitToShip() break; … } return obj } //拿到数据使用 let orderStatusFactory = new OrderStatusFactory() let status = orderStatusFactory.createStatusObjWith(data.status) this.setState({ status: status })

组合（Composite）模式

定义：将对象组合成树状层次结构，使用户对单个对象和组合对象具有一致的访问性。

例子：组件
组合模式给我们的启示，组件接口设计三原则

保持接口小，props 数量要少
根据数据边界来划分组件，利用组合（composition）
把 state 尽量往上层组件提取
同时，我们也接触了这样一些最佳实践：

避免 renderXXXX 函数，直接使用独立的纯函数组件
给回调函数类型的 props 加统一前缀，比如 on 或者 handle
使用 propTypes 来定义组件的 props
观察者（Observer）模式
定义当一个变量值被修改时，可以自动通知所有关注这个变量的其他对象，自动重新更新获取这个变量的新值
例子：vue的双向监听就是基于观察者模式实现的

8.模块模式（命名空间管理）
闭包 return出公共字段和方法

var myNameSpace = (function() {
	// 私有变量
	var privateVar = 0
	// 私有方法
	var privateMethod = function(foo) {
		console.log(foo)
	}
	
	return {
		// 公有变量
		publicVar: 'foo',
		// 公有方法
		publicMethod: function(bar) {
			// 修改私有变量
			privateVar++
			// 调用私有方法
			privateMethod(bar)
		}
	}
})()

// 使用
console.log(myNameSpace.publicVar)
myNameSpace.publicMethod('bar')

或者判断是否冲突

var MYNAMESPACE = MYNAMESPACE || {};
MYNAMESPACE.person = function(name) {
this.name = name;
};

MYNAMESPACE.person.prototype.getName = function() {
return this.name;
};
ƒ () {
return this.name;
}

命名空间管理几种方式：
1.自执行函数，return字段
2.用let、const定义
3.对象字面量
4.字段名加后缀属性区分
5.参考vuex的module管理方式
6.ts的命名空间管理()，原理是第1条

namespace Ailjx {
    // a没有使用export向外暴露，在外部无法访问
    let a;
    export const str = "Ailjx";
    export type S = string;
    export function f() {}
    export class N {}
}

const s: Ailjx.S = Ailjx.str;
Ailjx.f();
new Ailjx.N();
// 类型“typeof Ailjx”上不存在属性“a”
// console.log(Ailjx.a);// err