链式调用

函数调用返回的是个实例，然后接着调用

关注点在于对象流通

Stream流式编程

(function(root){
      var _ = function (){
      if(!(this instanceof _)){
        return new _(data) // 语法糖
      }
      this.wrapper = data
    }
       _.unique = function(source, callback){
       var ref = []
       for(let i = 0; i< source.length; i++){
         var target = callback ? callback[source[i]]:source[i]
         if(ref.indexOf(target) == -1){
            ref.push(target)
            }
           )
       }
    }
      _.prototype.ending = funciton(){
      return this.wrapper
    }
      _.filters = function(source){
      return source
    }
      _.chain = function(source){
      var ins = _(source)
      ins._chain = true
    }
      _.model = function(instance,outcome){
      if(instance._chain){
        instance.wrapper = outcome
        return instance
      }
      return outcome
    }
      _.prossess = function(target){
      var res = []
      for(var key in target){
        res.push(key)
      }
      return res
    }
      _.beforHook = function(arr, callback){
      for(let i = 0; i< arr.length; i++){
        callback(arr[i])
      }
    }
      // 混入 方法的名称 存储在数组中 遍历数组 给原型扩展item
      _.mixin = function(target){
      //方法的名称 存储在数组中
      beforHook(_.prossess(target), function(key){
        var func = target[key]
        _.prototype[key] = function(){
             var decon = [this.wrapper]
          Array.prototype.push.apply(decon, arguments)
          return func.apply(this, decon)
        }
      })
    }
      root._ = _
})(this)

_([]).unique(function(item){
  return typeof item === 'string' ?item.toLowerCase() : item
})

1.1. 可扩展性

1.1.1. 1-22 方法层面

可扩展性的目的：需求变更，方便更改需求；减少代码修改饿难度

好的可扩展性：

需求的变更不要重写
代码修改不会引起大规模变动
方便加入新模块

适配器模式

与其我更改源头，不如我去适配

通过写一个适配器，来代替替换

面临接口名不通用的问题

例子：现在想要用log代替console.log方法

例子：框架的变更

自研的A框架，A框架和jquery很相似，现在要用jquery代替A框架

window.A = $
A.c = function(){
  return $.css.call(this, arg)
}

例子：数据适配，参数适配

装饰者模式

给原方法扩展一些操作，并包装为新方法

不重写源方法的情况下去扩展方法

当一个方法需要扩展，但是不好去修改方法

重写一个新方法，加入老操作，写入新操作

例子：扩展已有事件绑定

例子：vue2数组的监听

命令模式

解藕方法和调用

解藕实现和调用，让双方互不干扰

调用的命令充满不确定性

// 命令
{
    type: "Circle",
    data: [10,12,2]
},
  {
        type: "tec",
      data" [2,3,5]
  }
var command = (function(){
  // 实现
    var action = {
    drawCircle: function (){}
    ,drawRect: function (){}
  }
  // 命令解析 => 调用实现的方法
  return function excute(commander){
    // 在这里解析commander命令
    // 然后去调用action里的方法
  } 
})
conmmand({
    type: "Circle",
  data: [10,12,2]
})

1.1.2. 1-23 模块层面

观察者模式

同步模块与异步模块的沟通

解藕在中间加入观察者中间件

必要结构

例子：多人合作问题

A写了首页模块，B写了评论模块，现在要把评论展示在首页 => 通过观察者模式联系起来

function observe(){
  // 储存观察
    message: {}
  // 注册监听
  regist: function (type,fn){

  }
  // 触发监听
  fire: function (){

  }
  // 移除监听
  remove: function (){

  }
}

obj.regist("getComment",(data)=>{

})
obj.fire("")

转盘：每转一圈速度都会减慢

/**
// 梳理要做什么
* 开始转动
* 选定奖品
* 展示转动动画
* 每转一圈
* 下一圈慢一点
*/
// 转盘初始化模块
// 选定奖品模块
// 转动控制模块
// 转动动画

// 转动控制 与 转动动画 之间使用观察者沟通

function init(){
  for(let i = 0; i <= 9;i++){
        var _dir = document.create('div')
    _div.innerHTML = i
    _div.setAttributeNS("class","item")
    _domArr.push(_div)
  }
}
function getFinnal(){

}
function moveControll(){
  let final = getFinnal()
  var _cricle = Math.floor(final /10,0)
  let _runCircle = 0
  let stopNum = final %10
  let _speed = 50
  mover({
      moveTime: _moveTime,
      speed: _speed
    })
  observer.regist("finish",()=>{
    let _moveTime = 10
    _speed += 50
    _runCircle++
    if(_runCircle > _circle){
      _moveTime = stopNum
    }
    mover({
      moveTime: _moveTime,
      speed: _speed
    })
  })
}
function mover(moveConfig){
  let nowIndex = 0
  let removeNum = 9
  let timer = setInterval(()=>{
    if(nowINdex != 0){
      removeNum = nowINdex - 1
            _domArr[9].setAttribute("calss","item")
      _domArr[0].setAttribute("calss","item-on"
    }

     if(nowIndex == moveConfig.moveTime){
                clearInterval(timer)
        onserver.fire("fire")
      }

  },moveConfig.speed)
}

职责链模式

把模块组织成一个链条，搞成流水线

分好模块，按序执行

目的：为了避免请求发送者与多个请求处理者耦合

场景：当你面对一个半成品需求

例子：表单验证

有一个表单要验证

可能出现：验证身份证号

当前：验证格式符不符合规则，是否已经存在

做法：把要做的事情组织成一个队列

input.onblur = function (){
  var _arr = [font, back]
  async function test(){
      var _res = _val
    while(_arr.length > 0){
      _res = await _arr.shift()(_res)
      if(_res.error){
                return _res
      }
    }
    return _res

}}

例子：

Axios的拦截器

axios.interceptor.request.use()
axios.interceptor.response.use()
function axios(){
  this.intercetor = {
    request: new INterceptorManner(),
    response: new INterceptorManner()
  }
}
axios.prototype.request = function (){
  let chain = []
  this.interceptor.request.handlers.forEach(interceptor) => {
    chain.unshift(interceptor.fullfilled, interceptor.rejected)
  }
  this.interceptor.response.handlers.forEach(interceptor) => {
    chain.unshift(interceptor.fullfilled, interceptor.rejected)
  }
  while(chain.length){
    promise = promise.then(chain.shift(),chain.shift())
  }
}
function interceptorManner(){
    this.handlers = []
}
inter.prototype.use = function (fullfilled,rejected){
  this.handlers.push({
    fullfilled,
    rejected,
  })
}

1.2. 1-28 复习课

1.2.1. 函数式编程

1.2.2. 异步编程

1.3. 3-13

（卸载文档unload） =》 DNS解析 =〉准备发起http连接 =》 TCP建立连接 =》 IP协议分包 =〉发送请求 =》然后回传

直播