前端零碎知识点---有点乱

/**
 * @description 将数组平铺到指定的深度
 */
const flatten = (arr, depth = 1) => 
    depth != 1 ? arr.reduce((a, v) => a.concat( Array.isArray(v) ? flatten(v, depth - 1) : v), [])
    : arr.reduce((a, v) => a.concat(v), [])

var flat = (arr) => {
    return arr.flat(Infinity)
}
 /**
  * 递归 flat
  */
 const flat = (arr) => {
    let result = []
    function each(arr) {
        arr.forEach(item => {
            if (item instanceof Array) {
                each(item)
            } else {
                result.push(item)
            }
        })
    }
    each(arr)
    return result.join(',')
}
 /**
  * 做隐式类型转换 flat
  */

 /**
  * 原理：数组 + 加号是双目运算符，
  * arr是数组，不是基本类型也不是数字，是一个对象，
  * 调对象的时候，会调arr的valueof，
  * 如果valueof返回的还不是基本类型，会调toString方法
  * 数组的vauleOf返回的就是数组本身，所以会调toString方法
  * 如果toString方法返回基本类型，到此为止，否则就会报错
  * 
  */
 const flatten = function (arr) {
    let toString = Array.prototype.toString
    Array.prototype.toString = function() {
        return this.join(',')
    }
    let result = arr + ''
    Array.prototype.toString = toString
    return result
 }
 // 所以 改valueOf 也是可以的
 const flatten = function (arr) {
    let value = Array.prototype.valueOf
    Array.prototype.valueOf = function() {
        return this.join(',')
    }
    let result = arr + ''
    Array.prototype.valueOf = value
    return result
 }
 /**
  * es6中的遍历器iterator是对自定义的复杂数据结构，提供遍历的方法
  * 如果想给这个数据结构增加一个遍历器，必须
  * 1. Symbol.iterator为key 
  * 2. value为 function 
  * 3. function 要求必须返回一个对象
  * 4. 这个对象中必须有next方法
  * 
  */
Array.prototype[Symbol.iterator] = function() {
    let arr = [].concat(this) // [1, [2, [3, [4, 5], 6], 7], 8] 每一次都会调一次next方法
    let getFirst = function(array) {
        let first = array.shift()
        return first
    }
    return {
        next: function() {
            let item = getFirst(arr) // 1, 第二个[2, [3, [4, 5], 6]
            if (item) { // 1 是真，标识下面还有值
                return {
                    value: item, // 遍历时，当前要返回的值， 当第二次是一个数组的时候，这里有一个隐式类型转换，转成toString了 "2,3,4,5,6"
                    done: false // 是不是已经遍历结束
                }
            } else {
                return {
                    done: true
                }
            }
        }
    }
}
var flat = function(arr) {
    let r = []
    for (let i of arr) {
        r.push(i)
    }
    return r.join(',')
}
// flat([1, [2, [3, [4, 5], 6], 7], 8]); 

/**
 * @description 使用reduce取代map和filter 更新数组每一项，并筛选部分
 */
const filterSomeValue = arr => arr.reduce((a, v) => {
    v = v * 2
    if (v > 50) {
        a.push(v)
    }
    return a
}, [])

/**
 * @description 取整 | 0
 */
const getInt = num => num | 0

/**
 * @description 单例模式 IIFE方式加闭包 本质是通过函数作用域的方式来隐藏内部作用域的变量
 */
const Singleton = (function() {
    let _instance = null // 存储单例

    const Singleton = function() {
        if (_instance) return _instance // 判断是否已经有单例
        _instance = this
        this.init() // 初始化
        return _instance
    }

    Singleton.prototype.init = function() {
        this.foo = 'Singeton Pattern'
    }

    Singleton.getInstance = function() {
        if (_instance) return _instance
        _instance = new Singleton()
        return _instance
    }
    
    return Singleton
})()

const vistor1 = new Singleton()
const vistor2 = new Singleton()
const vistor3 = new Singleton.getInstance()
console.log(vistor1 === vistor3) // true

/**
 * @description 单例模式 ES6的块级作用域 目的是为了 _instance隐藏内部变量
 */
let getInstance

{
    let _instance = null

    const Singleton = function() {
        if (_instance) return _instance // 判断是否已经有单例
        _instance = this
        this.init() // 初始化
        return _instance
    }

    Singleton.prototype.init = function() {
        this.foo = 'Singeton Pattern'
    }

    getInstance = function() {
        if (_instance) return _instance
        _instance = new Singleton()
        return _instance
    }
}

const vistor1 = getInstance()
const vistor2 = getInstance()

/**
 * @description 单例 抽离 创建 和 功能逻辑
 */
class FuncClass {
    constructor(bar) {
        this.bar = bar
        this.init()
    }
    init() {
        this.foo = 'Single Pattern'
    }
}

const Singleton = (function() {
    let _instance = null

    const ProxySingleton = function(bar) {
        if (_instance) return _instance
        _instance = new FuncClass(bar)
        return _instance
    }
    ProxySingleton.getInstance = function(bar) {
        if (_instance) return _instance
        _instance = new Singleton(bar)
        return _instance
    }
    return ProxySingleton
})()

const vistor1 = new Singleton('单例1')
const vistor2 = new Singleton('单例2')
const vistor3 = Singleton.getInstance()

/**
 * @description 单例模式的应用 element-ui 的 loading
 */

import Vue from 'vue'
import loadingVue from './loading.vue // 自己写的Loading组件

const LoadingConstructor = Vue.extend(loadingVue)

let fullscreenLoading

const Loading = (options = {}) => {
    if (options.fullscreen && fullscreenLoading) { // 如果之前创建国，直接返回
        return fullscreenLoading
    }

    let _instance = new LoadingConstructor({
        el: document.createElement('div'),
        data: options
    })

    if (options.fullscreen) {
        fullscreenLoading = _instance
    }
    
    return _instance
}

export default Loading

/**
 * 设计模式-工厂函数 根据不同的输入返回不同类的实例 主要思想是对象的创建和实现分离
 */
class Restaurant {
    static getMenu(menu) {
        switch (menu) {
            case '鱼香肉丝':
                return new YuXiangRouSi()
            case '宫保鸡丁':
                return new GongBaoJiDin()
            default:
                throw new Error('本店没有')
        }
    }
}

class YuXiangRouSi {
    constructor () {
        this.type = '鱼香肉丝'
    }
    eat() {
        console.log(this.type + '好吃~')
    }
}

class GongBaoJiDin {
    constructor () {
        this.type = '宫保鸡丁'
    }
    eat() {
        console.log(this.type + '好吃~')
    }
}

const dish1 = Restaurant.getMenu('鱼香肉丝')
const dish2 = Restaurant.getMenu('宫保鸡丁')

/**
 * @description Vue 源码中的工厂模式 虚拟DOM树机制 createElement生成VNode 用来映射真是DOM节点
 */
createElement('h3', { class: 'main-title' }, [
    createElement('img', { class: 'avatar', attrs: { src: './avatar.png' } }),
    createElement('p', { class: 'user-desc' }, '我要的飞翔，不是谁的肩膀')
])

// createElement:
class Vnode(tag, data. children) {
    // ...
}
function createElement(tag, data, children) {
    return new Vnode(tag, data, children)
}

/**
 * @description 抽象工厂模式
 */
// 饭店方法
 class Restaurant {
    static orderDish(type) {
        switch (type) {
            case '鱼香肉丝':
                return new YuXiangRouSi()
            case '宫保鸡丁':
                return new GongBaoJiDin()
            default:
                throw new Error('本店没有~')
        }
    }
 }
// 菜品抽象类
 class Dish { // 父类
     constructor() {
         if (new.target === Dish) {
             throw new Error('抽象类不能直接实例化')
         }
         this.kind = '菜'
     }
     // 抽象方法 相当于定义一个接口，由子类继承
     eat() {
         throw new Error('抽象方法不能被调用')
     }
 }

 // 菜品 继承菜品抽象类
 class YuXiangRouSi extends Dish {
     constructor() {
         super()
         this.type = '鱼香肉丝'
     }

     eat() {
         console.log(this.kind, this.type, '鱼香肉丝')
     }
 }

 class GongBaoJiDin extends Dish {
    constructor() {
        super()
        this.type = '宫保鸡丁'
    }

    eat() {
        console.log(this.kind, this.type, '宫保鸡丁')
    }
 }

 const dish0 = new Dish() // Error 抽象类不能直接实例化
 const dish1 = Restaurant.orderDish('鱼香肉丝')
 dish1.eat()


 /**
  * 林衣踩在一个板凳上，左手拿着颜料，右手拿着画笔，给自己的家门口写上四个大字，艺术设计
  * 结束之后，满意的看着自己的作品，含笑打开房门，看着自己屋里的格局，左边窗户上挂着一把她从上个世纪
  * 拿回来的剑，
  * 小黄此时在她脚底下转圈，她把目光放到桌上的一个工厂模型，这是她准备去的地方，那里有她这个时代要找的人，
  * 传说中可以拯救末世的人。
  * 
  *
  */
 /**
  * @description 建造者模式 分布构建一个复杂对象，并允许韩兆步骤构造
  * 如： 汽车， 笔记本， 很多部件都由零件制造商制造 指挥长决定如何组装
  */
 
 
/**
 * @description 代理模式，又称为委托模式，他为目标对象创造了一个代理对象，以控制对目标对象的访问
 * Visitor -----------> Proxy --------------> Target
 * Visitor <----------- Proxy <-------------- Target
 * 如 axios 拦截器， 代理模式和装饰者模式很像，但是代理模式是会对目标对象的访问进行控制，axios拦截器可以取消
 * 请求，而装饰者模式是在目标对象上添加新的功能
 * 
 * vue2.x 通过劫持各个属性的 getter 和 setter ，在数据变化时，通过发布订阅模式发布消息给订阅者
 * 触发相应的监听回调，实现数据响应式
 * vu2.x 的缺点: 
 * 1. 无法监听利用索引直接设置数组的项
 * 2. 无法监听数组的长度变化
 * 3. 无法监听ES6的 Set, WeakSet, Map, WeakMap 的变化
 * 4. 无法监听Class 类型的数据
 * 5. 无法监听对象属性的新增或者删除
 */

//  const proxy = new Proxy(target, handler)
const SuperStar = {
    name: '小鲜肉',
    scheduleFlag: false, // 档期标识 默认没空
    playAdvertisement(ad) {
        console.log(ad)
    }
}

const ProxyAssistant = {
    name: '经纪人张某',
    scheduleTime(ad) {
        const schedule = new Proxy(SuperStar, {
            set(obj, prop, val) {
                if (prop !== prop.scheduleFlag) return
                if (!obj.scheduleFlag && val) {
                    obj.scheduleFlag = true
                    obj.playAdvertisement(ad) // 安排
                }
            }
        })

        setTimeout(() => {
            console.log('小鲜鲜有空了')
            schedule.scheduleFlag = true
        }, 2000)
    },

    playAdvertisement(reward, ad) {
        if (reward > 1000000) {
            console.log('没问题，我们小鲜鲜最喜欢拍广告了')
            ProxyAssistant.scheduleTime(ad)
        } else {
            console.log('没空，滚')
        }
    }
}

ProxyAssistant.playAdvertisement(10000, '广告')

/**
 * @description 享元模式 公用某些资源
 */
let examCardNum = 0 // 驾考车总数

class ExamCar {
    constructor(carType) {
        examCardNum++
        this.cardId = examCardNum
        this.carType = carType ? '手动挡' : '自动挡'
        this.usingState = false // 是否正在占用
    }

    // 在本车上考试
    examine(candidateId) {
        return new Promise(resolve => {
            this.usingState = true
            console.log(`考生 ${candidateId} 在 ${this.carType}驾考车-${this.cardId}上考试`)
            setTimeout(() => { // 0 - 2s 考完后
                this.usingState = false
                resolve()
            }, Math.random() * 2000)
        })
    }
}

// 手动挡汽车对象池
ManualExamCarPool = {
    _pool: [], // 驾考车对象池
    _candidateQueue: [], // 考生队列

    // 注册考生 ID 列表
    registCandidates(candidateList) {
        candidateList.forEach(candidateId => this.registCandidate(candidateId))
    },

    // 注册手动挡考生
    registCandidate(candidateId) {
        const examCar = this.getManualExamCar() // 找一个未被占用的手动挡驾考车
        if (examCar) {
            examCar.examine(candidateId) // 开始考试， 考完了让队列中的下一个考生开始考试
                .then(() => {
                    const nextCandidateId = this._candidateQueue.length && this._candidateQueue.shift()
                    nextCandidateId && this.registCandidate(nextCandidateId)
                })
        } else { // 如果没有空车，将考生推入队列
            this._candidateQueue.push(candidateId)
        }
    },

    // 注册手动挡车
    initManualExamCar(manualExamCarNum) {
        for(let i = 0; i <= manualExamCarNum; i++) {
            this._pool.push(new ExamCar(true))
        }
    },

    // 获取状态为未被占用的手动挡车
    getManualExamCar() {
        return this._pool.find(car => !car.usingState)
    }
}

ManualExamCarPool.initManualExamCar(3) // 一共三辆考车
ManualExamCarPool.registCandidates([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]) // 10个考生来考试

// 数据库连接池
const mysql = require('mysql')

const connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: '123456',
    database: 'mydb',
    port: '3306'
})

// 连接回调，在回调中增删改查
connection.connect()

// 关闭连接
connection.end()

// 连接池的创建
const pool = mysql.createPool({
    host: 'localhost',
    user: 'root',
    password: '123456',
    database: 'mydb',
    port: '3306'
})

pool.getConnection((err, connection) => {
    // 数据库操作
    connection.release() // 将连接释放回连接池中
})

// 关闭连接池
pool.end()

/**
 * @description REST 以及 6个限制
 * REST是一种风格，万维网网络架构风格 Representational State Transfer
 * Representational 表示，数据的表现形式 如json xml
 * State 状态 当前的状态 可变的状态
 * Transfer 传输 数据在互联网上传输
 * 
 * 6 个限制
 * 1. 客户端--服务器（Client-Server） CS架构
 * 服务端专注数据存储，提升简单性 ---形容词来自于REST作者的博士论文
 * 前段转出用户界面，提升可移植性
 * 2. 无状态
 * 所有的用户会话信息都保存在客户端
 * 每次请求必须包含所有信息，不能依赖上下文信息
 * 服务端不用保存会话信息，提升了简单性，可靠性，可见性（每次请求要包含很多信息）
 * 3. 缓存（Cache)
 * 所有服务端响应都要被表位可缓存或不可缓存
 * 如 静态资源，至少在一个版本内不会变
 * 减少交互，提升速度
 * 4. 统一接口 （Uniform Interface）
 * 接口与实现解耦，前后端可以独立开发迭代
 * 5. 分层系统（Layered System）
 * 每层只知道相邻的一层，后面隐藏的就不知道了
 * 客户端不知道是和代理还是很真实服务器通信
 * 中间件，不用关心业务逻辑，只要做系统中的分层
 * 其它层：安全层， 负载均衡（分发流量），缓存层
 * 6. 按需代码（code on Demand 可选）
 * 客户端可以下载运行服务端传来的代码(如， js)
 * eval() 可以执行
 * 简化客户端
 * 
 * 
 * 统一接口 的限制：
 * 1. 资源的标识
 * 资源是任何可以命名的事物，如，用户，评论
 * 每个资源可以通过URI被唯一标识 URI 是统一资源标识符，URI最常见的形式是统一资源定位符，URL
 * 2. 通过表述来操作资源
 * 表述 如 JSON XML 传给服务端，服务端来操作
 * 3. 自描述信息
 * 媒体类型（application/json）
 * HTTP方法
 * 是否缓存 Cache-Control
 * 
 * 
 * 控制器的本质是中间件，中间件的本质是函数
 * 
 * koa 断点调试
 * 在vscode中在要调试的文件界面按下F5就启动了
 * 
 * 错误处理
 * 1. 运行时错误，语法没有错误的前提下，返回500 
 * 2. 逻辑错误，找不到404 
 * 先决条件失败402 （请求某个ID不存在）
 * 无法处理的实体 422 (参数格式不对)
 * 4开头的大多是逻辑错误
 * 
 * 防止程序挂掉，try catch
 * 告诉用户错误信息
 * 便于开发调试
 * 
 * koa自带的错误处理
 * koa找不到的情况下默认返回404
 * 
 * 
 */
// 123456789876543212345678987654321
const getNum = n => {
    let num = 0
    let flag = true
    for(let i = 0; i <= n; i++) {
        if (num == 1) flag = true
        if (num == 9) flag = false
        flag ? num++ : num--
    }
    return num
}

// promise 用法
new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('fullfilled')
    }, 1000)
})

/**
 * 构造函数，必须接受一个函数作为参数，函数又接收 resolve, reject 两个参数，也是函数
 * 1. 必须是函数
 * 2. 状态值
 * promise 对象存在三种状态
 * - Pending 进行中
 * - Fullfilled 已成功
 * - Rejected 已失败
 * 状态只能由 Pending 变为Fullfilled 或者 Pending 变为 Rejected
 * 且状态改变之后不会发生变化，会一直保存这个状态
 * Promise 的值是指状态改变时，传给回调函数的值
 */

 // 判断变量是否为函数
 const isFunction = val => typeof(val) === 'function'

// 定义三个常量 标记Promise对象的三种状态和值
const PENDING = 'PENDING'
const FULLFILLED = 'FULLFILLED'
const REJECTED = 'REJECTED'

// 定义我们自己的 promise
class MyPromise {
    constructor(exector) {
        if (!isFunction(exector)) {
            throw new Error('MyPromise must accept a function as a parameter')
        }
        
        // 添加状态
        this._status = PENDING
        this._value = undefined
        // 添加成功回调函数队列
        this._fullfilledQueues = []
        // 添加失败回调函数队列
        this._rejectedQueues = []

        try {
            exector(this._resolve.bind(this), this._reject.bind(this))
        } catch (err) {
            this._reject(err)
        }
    }
    // 添加resolve时执行的函数
    _resolve(val) {
        if (this._status !== PENDING) return
        // 依次执行成功队列中的函数
        const run = () => {
            this._status = FULLFILLED
            this._value = val
            this._fullfilledQueues.map(cb => cb())
        }
        // 为了支持同步的Promise 这里采用异步调用
        setTimeout(() => run(), 0)
    }
    // 添加reject时执行的函数
    _reject(err) {
        if (this._status !== PENDING) return
        const run = () => {
            this._status = REJECTED
            this._value = err
            let cb
            while (cb = this._rejectedQueues.shift()) {
                cb(err)
            }
        }
        setTimeout(run, 0)
    }

    // 添加 then 方法
    then(onFullfilled, onRejected) {
        const { _value, _status } = this
        // 返回一个新的 Promise
        return MyPromise((onFullfilledNext, onRejectedNext) => {
            // 封装一个成功时执行的函数
            let fullfilled = value => {
                try {
                    if (!isFunction(onFullfilled)) {
                        onFullfilledNext(value)
                    } else {
                        let res = onFullfilled(value)
                        if (res instanceof MyPromise) {
                            // 如果当前回调函数返回MyPromise对象，必须等待其状态改变后再执行
                            res.then(onFullfilledNext, onRejectedNext)
                        } else {
                            // 否则将返回的结果作为参数，传入下一个then回调，并立即执行下一个then
                            onFullfilledNext(res)
                        }
                    }
                } catch (err) {
                    // 如果函数执行出错，新的promise对象状态为失败
                    onRejectedNext(err)
                }
            }

            // 封装一个失败时执行的函数
            let rejected = error => {
                try {
                    if (!isFunction(onRejected)) {
                        onRejectedNext(error)
                    } else {
                        let res = onRejected(error)
                        if (res instanceof MyPromise) {
                            res.then(onFullfilledNext, onRejectedNext)
                        } else {
                            onFullfilledNext(res)
                        }
                    }
                } catch (err) {
                    onRejectedNext(err)
                }
            }
            switch (_status) {
                // 当状态为 pending 时，将then 方法回调函数计入执行队列等待
                case PENDING:
                    this._fullfilledQueues.push(onFullfilled)
                    this._rejectedQueues.push(onRejected)
                    break
                // 当状态已经改变时，立即执行对象的回调
                case FULLFILLED:
                    fullfilled(_value)
                    break
                case REJECTED:
                    rejected(_value)
                    break
            }

        })
    }
}

// promise 的 then 方法接收两个参数 参数可选
// promise.then(onFullfilled, onRejected)
/**
 * 多次调用then 
 * then 可以被同一个Promise对象调用多次
 * 当promise成功状态时，所有onFullFilled需要按注册顺序依次回调
 * 失败同上
 * then方法必须返回一个新的promise对象
 * promise支持链式调用
 */

let promise1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve()
    }, 1000)
})

promise2 = promise1.then(res => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('return promise')
        }, 2000)
    })
})
promise2.then(res => {
    console.log(res)
})


/**
 * @description 适配器 
 */
var chinaPlug = {
    type: '中国插头',
    chinaInPlug() {
        console.log('开始充电')
    }
}
chinaPlug.chinaInPlug() // 开始供电

// 当我们到日本了，要用日本的适配
var japanPlug = {
    type: '日本插头',
    japanInPlug() {
        console.log('开始供电')
    }
}

// 日本插头电源适配器
function japanPlugAdapter(plug) {
    return {
        chinaInPlug() {
            return plug.japanInPlug()
        }
    }
}

japanPlugAdapter(japanPlug).chinaInPlug() // 开始供电

/**
 * @description 装饰者模式
 */
var originHouse = {
    getDesc() {
        console.log('毛坯房')
    }
}

function furniture() {
    console.log('搬入家具')
}
function painting() {
    console.log('刷漆')
}

originHouse.getDesc = function() {
    var getDesc = originHouse.getDesc
    return function() {
        getDesc()
        furniture()
    }
}

originHouse.getDesc = function() {
    var getDesc = originHouse.getDesc
    return function() {
        getDesc()
        painting()
    }
}

originHouse.getDesc()

/**
 * @description 外观模式 --- 一个统一的外观为复杂的子系统提供一个简单的高层功能接口
 */
var uav = {
    // 电子调速器
    diantiao1: {
        up() {
            console.log('电调1发送指令：电机1增大转速')
            uav.dianji1.up()
        },
        down() {
            console.log('电调1发送指令：电机1减少转速')
            uav.dianji1.up()
        }
    },
    diantiao2: {
        up() {
            console.log('电调2发送指令：电机1增大转速')
            uav.dianji1.up()
        },
        down() {
            console.log('电调2发送指令：电机1减少转速')
            uav.dianji1.up()
        }
    }
}
// 遥控器
controller: {
    up() {
        uav.diantiao1.up()
        uav.diantiao2.up()
    }
    down() {
        uav.diantiao1.down()
        uav.diantiao2.down()
    }
    // ...
}

// 函数参数重载
function domBinaEvent(nodes, type, selector, fn) {
    if (fn === undefined) {
        fn = selector
        selector = null
    }
    // ...
}
domBinaEvent(node, 'click', '#div1', fn)
domBinaEvent(node, 'click', '#div1')

// vue 中的函数参数重载
export function createElement(
    context,
    tag,
    data,
    children,
    normalizationType,
    alwaysNormalize
) {
    if (Array.isArray(data) || isPrimitive(data)) {
        normalizationType = children
        children = data
        data = undefined
    }
}

/**
 * @description 发布 订阅 又称观察者模式
 * 比如：群聊，所有群聊的人都订阅了这个群，
 * 当有人发消息时，群会主动通知给所有订阅这个群的人
 * 1. Publisher: 发布者 当消息发生时，负责通知订阅者
 * 2. Subscriber: 订阅者 当消息发生时被通知的对象
 * 3. SubscriberMap: 储存所有订阅者的数组
 * 4. type: 消息类型，订阅者可以订阅不同消息类型
 * 5. subscribe: 将订阅者添加到SubscriberMap中
 * 6. unsubscribe: 将SubscriberMap中删除订阅者
 * 7. notidy: 遍历通知 SubscriberMap 中对象的每个订阅者
 */
const Publisher = (function() {
    const _subsMap = {} // 储存订阅者
    return {
        // 消息订阅
        subscribe(type, cb) {
            if (_subsMap[type]) {
                if (!_subsMap[type].includes(cb)) {
                    _subsMap[type].push(cb)
                }
            } else _subsMap[type] = [cb]
        },
        // 消息退订
        unsubscribe(type, cb) {
            if (!_subsMap[type] || !_subsMap[type].includes(cb)) return
            const idx = _subsMap[type].indexOf(cb)
            _subsMap[type].splice(idx, 1)
        },
        // 消息发布
        notify(type, ...payload) {
            if (!_subsMap[type]) return
            _subsMap[type].forEach(cb => cb(...payload))
        }
    }
})()

Publisher.subscribe('运动鞋', message => console.log('33码 红色'))

Publisher.notify('运动鞋', '运动鞋到货啦...')

class Publisher {
    constructor() {
        this._subsMap = {}
    }

    // 消息订阅
    subscribe(type, cb) {
        if (_subsMap[type]) {
            if (!_subsMap[type].includes(cb)) {
                _subsMap[type].push(cb)
            }
        } else _subsMap[type] = [cb]
    }
    // 消息退订
    unsubscribe(type, cb) {
        if (!_subsMap[type] || !_subsMap[type].includes(cb)) return
        const idx = _subsMap[type].indexOf(cb)
        _subsMap[type].splice(idx, 1)
    }
    // 消息发布
    notify(type, ...payload) {
        if (!_subsMap[type]) return
        _subsMap[type].forEach(cb => cb(...payload))
    }
}

const adadis = new Publisher()
adadis.subscribe('运动鞋', message => console.log('33码 红色'))
Publadadisisher.notify('运动鞋', '运动鞋到货啦...')

/*
 * 
 */

/**
 * @description 考察点，变量提升
 */
var a = 10
function foo () {
    console.log(a)
    var a = 20 // undefined
    // let a = 20 // ReferenceError: a is not defined
}
foo() // undefined

/**
 * @description 考察点
 */
var array = []
for (var i = 0; i < 3; i++) {
    array.push(() => i)
}
var newArray = array.map(el => el())
console.log(array, newArray)

/**
 * @description 考察点，setTimeout异步，让出当前线程
 */
function foo() {
    foo(); //执行1000次左右会发生堆栈溢出的错误， 
    //setTimeout(foo, 0); //永远不会堆栈溢出
}
foo()
/**
 * 执行settimeout函数这个时候虽然它又继续调用自己，
 * 但是这里可以理解多线程操作了，
 * 只是开启另一个线程来启动foo，
 * 而当前线程仍然继续执行，
 * 当当前线程的foo执行完成后，
 * 自然就出栈了，每一次的FOO执行都是这个过程，
 * 所以栈里不会容量超标的
*/

function foo(){ // 会造成页面卡死
    return Promise.resolve().then(foo) 
}
/**
 * @description 如何让一个对象可迭代
 */
var obj = { x: 1, y: 2, z: 3 }
obj[Symbol.iterator] = function() {
    return {
        next: function() {
            if (this._count === 3) {
                return {
                    value: this._count,
                    done: true
                }
            }
            this._count += 1
            return {
                value: this._count,
                done: false
            }
        },
        _count: 0
    }
};
[...obj]