手写发布订阅，手写AJAX

手写发布订阅

const eventHub = {
  map: {
    // click: [f1 , f2]
  },
  on: (name, fn)=>{
    eventHub.map[name] = eventHub.map[name] || []
    eventHub.map[name].push(fn)
  },
  emit: (name, data)=>{
    const q = eventHub.map[name]
    if(!q) return
    q.map(f => f.call(null, data))
    return undefined
  },  
  off: (name, fn)=>{
    const q = eventHub.map[name]
    if(!q){ return }
    const index = q.indexOf(fn)
    if(index < 0) { return }
    q.splice(index, 1)
  }
}

eventHub.on('click', console.log)
eventHub.on('click', console.error)

setTimeout(()=>{
  eventHub.emit('click', 'frank')
},3000)

也可以用 class 实现。

class EventHub {
  map = {}
  on(name, fn) {
    this.map[name] = this.map[name] || []
    this.map[name].push(fn)
  }
  emit(name, data) {
    const fnList = this.map[name] || []
    fnList.forEach(fn => fn.call(undefined, data))
  }
  off(name, fn) {
    const fnList = this.map[name] || []
    const index = fnList.indexOf(fn)
    if(index < 0) return
    fnList.splice(index, 1)
  }
}
// 使用
const e = new EventHub()
e.on('click', (name)=>{
  console.log('hi '+ name)
})
e.on('click', (name)=>{
  console.log('hello '+ name)
})
setTimeout(()=>{
  e.emit('click', 'frank')
},3000)

手写AJAX

const ajax = (method, url, data, success, fail) => {
  var request = new XMLHttpRequest()
  request.open(method, url);
  request.onreadystatechange = function () {
    if(request.readyState === 4) {
      if(request.status >= 200 && request.status < 300 || request.status === 304) {
        success(request)
      }else{
        fail(request)
      }
    }
  };
  request.send();
}

readyState

readyState是XMLHttpRequest对象的一个属性，用来标识当前XMLHttpRequest对象处于什么状态。
readyState总共有5个状态值，分别为0~4，每个值代表了不同的含义

• 0：UNSENT -- 代理被创建，但尚未调用 open() 方法。
• 1：OPENED -- open() 方法已经被调用。
• 2：HEADERS_RECEIVED -- send() 方法已经被调用，并且头部和状态已经可获得。
• 3：LOADING -- 下载中； responseText 属性已经包含部分数据。
• 4：DONE -- 下载操作已完成。

state

一、状态码分类表
1xx | Informational（信息性状态码）→ 接受的请求正在处理
2xx | Success（成功状态码）→ 请求正常处理完毕
3xx | Redirection（重定向）→ 需要进行附加操作以完成请求
4xx | Client error（客户端错误） → 客户端请求出错，服务器无法处理请求
5xx | Server Error（服务器错误） → 服务器处理请求出错
二、常见http状态码
204 表示客户端发送给客户端的请求得到了成功处理，但在返回的响应报文中不含实体的主体部分（没有资源可以返回）
206 表示客户端进行了范围请求，并且服务器成功执行了这部分的GET请求
301 永久性重定向，表示请求的资源被分配了新的URL，之后应使用更改的URL
302 临时性重定向，表示请求的资源被分配了新的URL，希望本次访问使用新的URL
303 请求的资源被分配了新的URL，应使用GET方法定向获取请求的资源
304 客户端发送附带条件（是指采用GET方法的请求报文中包含if-Match、If-Modified-Since、If-None-Match、If-Range、If-Unmodified-Since中任一首部）的请求时，服务器端允许访问资源，但是请求为满足条件的情况下返回改状态码
307 临时重定向，与303有着相同的含义，307会遵照浏览器标准不会从POST变成GET；（不同浏览器可能会出现不同的情况）
400 语义有误，当前请求无法被服务器理解或者请求参数有误
401 未经许可，需要通过HTTP认证
403 服务器拒绝该次访问（访问权限出现问题）
404 服务器无法根据客户端的请求找到资源（网页）
500 服务器错误，导致了无法完成对请求的处理
503 服务器暂时处于超负载或正在进行停机维护，无法处理请求