框架原理与设计模式¶

Fetch 库设计： axios¶

学习 axios：封装一个结构清晰的 Fetch 库

如何设计请求库¶

• 适配浏览器 or Node.js 环境

• XMLHttpRequest or Fetch

  • XHR：配置使用繁琐，
  • Fetch：兼容性不如 XHR

• 功能设计与抽象

  • 自定义headers添加
  • 统一断网/弱网处理
  • 接口缓存处理
  • 接口统一错误提示
  • 接口统一数据处理
  • 统一数据层结合
  • 统一请求埋点
  • 避免设计一个特别大的Fetch方法，用 options 驱动一切

axios 设计之美¶

• 功能特点

  • l)在浏览器端，使用XMLHttpRequest发送请求
  • 2)支持Node.js端发送请求
  • 3)支持Promise API，使用Promise风格语法
  • 4)支持请求和响应拦截
  • 5)支持自定义修改请求和返回内容
  • 6)支持请求取消
  • 7)默认支持XSRF防御

• 拦截思想

  • 拦截，并注入自定义行为
  • 任务注册 -> 任务编排 -> 任务调度（执行）

• 适配器思想

• 安全思想

  • CSRF (双重cookie)
  • 请求中携带 cookie，保证请求安全

中间件的理念：Koa 和 Redux¶

对比 Koa 和 Redux：分析前端中间件的理念

Koa 中间件¶

• 洋葱模型
• 使用 compose 方法组合中间件。
• 通过洋葱模型，await next() 控制调用“下游”中间件；直到 “下游” 没有中间件，且堆栈执行完成，最终流回“上游”中间件；
• 优点：对日志记录、错误处理友好
• Koa v1：Generator + Co
• Koa v2：Async/Await

Express¶

• 线性机制：不容易实现拦截处理逻辑。

Redux 中间件¶

• 也是洋葱模型
• 也实现 compose 方法，完成中间件注册和串联。
• compose

function compose(...funcs) {
  return funcs.reduce((a, b) => (...args) => a(b(...args)));
}

// fn1(fn2(fn3(fn4(x)))) // 洋葱模型
// compose(fn1, fn2, fn3, fn4)(x) // 从右到左执行

数据结构¶

如何利用 Javascript 实现经典数据结构？¶

剖析前端中数据结构应用场景¶

编程思想¶

面向对象¶

如何理解前端中面向对象的思想？

函数式编程¶

如何理解软件开发灵活性和高定制性？

• 函数式编程思想
• 纯函数
• 高阶函数
• curry 和 uncurry