珠峰架构-函数

知识点：

高阶函数，解决异步问题 、 发布订阅模式和观察者模式 、 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