珠峰架构-函数
珠峰架构-函数
知识点:
高阶函数,解决异步问题
、 发布订阅模式和观察者模式
、 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')