珠峰架构-函数

知识点：

高阶函数，解决异步问题 、 发布订阅模式和观察者模式 、 promise核心应用，promise解决异步问题 、 实现一个完成的promise库 、 promise中常见的面试题 、 扩展promise中常见的方法 、 掌握 generator的使用以及co库的应用 、 异步方案 async+await

高阶函数

AOP 面向切片编程

// 高阶函数 函数参数如果是函数，或者这个函数返回一个新的函数，我们就叫它高阶函数

// AOP 面向切片编程
// before函数

function say(who) {
    console.log(who + ' hello')
}

Function.prototype.before = function(beforeFn) {
    return (...args) => {
        beforeFn();
        this(...args);
    }
}

Function.prototype.after = function(afterFn) {
    return (...args) => {
        this(...args);
        afterFn();
    }
}

let beforeSay = say.before(() => {
    console.log('开始说话')
})

let afterSay = beforeSay.after(() => {
    console.log('结束说话')
})

afterSay('laibh.top');
/**
开始说话
laibh.top hello
结束说话
*/

React事务简单模拟

class Transaction {
    perform(anyMethod, wrappers) {
        wrappers.forEach(wrapper => wrapper.initialize())
        anyMethod();
        wrappers.forEach(wrapper => wrapper.close())
    }
}

let transaction = new Transaction()

let oldFunc = () => {
    console.log('原有的逻辑')
}

transaction.perform(oldFunc, [{ // wrapper1
        initialize() {
            console.log('初始化1')
        },
        close() {
            console.log('关闭1')
        }
    },
    { // wrapper2
        initialize() {
            console.log('初始化2')
        },
        close() {
            console.log('关闭2')
        }
    }
])
/**
初始化1
初始化2
原有的逻辑
关闭1
关闭2
*/

判断类型

// 判断数据类型

// typeof instaceof constructor Object.prototype.toString.call

function isType(type) {
    return (args) => Object.prototype.toString.call(args) === `[object ${type}]`
}
const types = ['String', 'Boolean', 'Number', 'Null', 'Undefined', 'Symbol', 'Object']

const utils = {}

for (let i = 0; i < types.length; i++) {
    let type = types[i]
    utils[`is${type}`] = isType(type)
}

console.log(utils.isSymbol(Symbol()))

异步并发 lodash after

// lodash after 在执行多少次之后
// 做异步的并发处理

function after(times, callback) {
    return () => {
        if (--times == 0) {
            callback();
        }
    }
}

let fn = after(3, () => {
    console.log('执行三次后才执行')
})

fn()
fn()
fn()

// node 方法异步的 I/O

let fs = require('fs')

const after = (times, callback) => {
    let website = {}
    return (key, value) => {
        website[key] = value
        if (--times === 0) {
            callback(website)
        }
    }

}
const out = after(2, (website) => {
    console.log(website)
})

fs.readFile('./name.txt', 'utf8', (err, data) => {
    out('name', data)
});

fs.readFile('./age.txt', 'utf8', (err, data) => {
    out('age', data)
});

发布订阅模式和观察者模式

发布订阅解决异步

// node 方法异步的 I/O

let fs = require('fs')

// 希望两次都完成后，分别打印最终结果，再打印一次已经处理完毕的

// 发布emit 订阅 on 一种一对多的关系 [fn,fn,fn]
class Events {
    constructor() {
        this.stack = []
    }
    on(callback) {
        this.stack.push(callback)
    }
    emit() {
        this.stack.forEach(callback => callback())
    }
}

let events = new Events();
let website = {};
events.on(() => {
    if (Object.keys(website).length === 2) {
        console.log(website)
    }
    console.log('当前获取完毕')
})

fs.readFile('./name.txt', 'utf8', (err, data) => {
    website.name = data
    events.emit();
});

fs.readFile('./age.txt', 'utf8', (err, data) => {
    website.age = data
    events.emit();
});

观察者模式简单模拟

// 观察者模式
class Subject { // 被观察者
    constructor() {
        this.stack = [];
        this.state = 'happy'
    }
    attach(observer) {
        this.stack.push(observer)
    }
    setState(newState) {
        this.state = newState
        this.stack.forEach(p => p.update(newState))
    }
}

class Observer { // 观察者
    constructor(name) {
        this.name = name
    }
    update(newState) {
        console.log(`${this.name},小宝宝${newState}`)
    }
}

let p1 = new Observer('爸爸')
let p2 = new Observer('妈妈')

let c = new Subject('小宝宝')
c.attach(p1)
c.attach(p2)
c.setState('unhappy')

Promise