后会无期之jshttp解析（3）

hkc452
216 阅读4分钟

我有个大胆的想法，不如我们继续死磕缓存吧，今天就来解读Vary库吧

同样，我们先看下mdn官方是怎么解释Vary这个响应头把

Vary 是一个HTTP响应头部信息，它决定了对于未来的一个请求头，应该用一个缓存的回复(response)还是向源服务器请求一个新的回复。它被服务器用来表明在 content negotiation algorithm（内容协商算法）中选择一个资源代表的时候应该使用哪些头部信息（headers）

说人话就是，防止我们客户端用了错误的缓存，例如你提供给移动端的内容是不同的，可用防止你客户端误使用了用于桌面端的缓存。 并可帮助Google和其他搜索引擎来发现你的移动端版本的页面，同时告知他们不需要Cloaking,

Vary 字段用于列出一个响应字段列表，告诉缓存服务器遇到同一个 URL 对应着不同版本文档的情况时，如何缓存和筛选合适的版本(来自：imququ.com/post/vary-h…)。

应该大家都明白Vary是干什么了吧，那么接下来Show me the code

Show time 环节

Vary的使用方法很简单

var http = require('http')
var vary = require('vary')

http.createServer(function onRequest (req, res) {
  // about to user-agent sniff
  vary(res, 'User-Agent')

  var ua = req.headers['user-agent'] || ''
  var isMobile = /mobi|android|touch|mini/i.test(ua)

  // serve site, depending on isMobile
  res.setHeader('Content-Type', 'text/html')
  res.end('You are (probably) ' + (isMobile ? '' : 'not ') + 'a mobile user')
})

如上所示，vary(res, 'User-Agent')这段就把为vary添加User-Agent字段，这样缓存服务器就会根据User-Agent来缓存不同版本的内容以及返回不同内容的给客户端

我们看看入口vary方法,参数res 表示服务器的response， field表示要添加的filed

function vary (res, field) {
  if (!res || !res.getHeader || !res.setHeader) {
    // quack quack
    throw new TypeError('res argument is required')
  }

  // get existing header
  var val = res.getHeader('Vary') || ''
  var header = Array.isArray(val)
    ? val.join(', ')
    : String(val)

  // set new header
  if ((val = append(header, field))) {
    res.setHeader('Vary', val)
  }
}

首先肯定要进行参数判断，这个没什么好说的，接下来从res从获取现有的Vary信息，如果为数组则使用join(',')处理成字符串，处理完毕之后，调用append函数，同时把header和filed传进去

/**
 * Append a field to a vary header.
 *
 * @param {String} header
 * @param {String|Array} field
 * @return {String}
 * @public
 */

function append (header, field) {
  if (typeof header !== 'string') {
    throw new TypeError('header argument is required')
  }

  if (!field) {
    throw new TypeError('field argument is required')
  }
    ...
  return val
}

append的作用已经很明确地写在函数开头的注释了，就是添加字段到vary头部，实参header不为字符串抛异常，因为header前面我们调用append之前处理过，必须字符串，filed为空同样抛异常

 // get fields array
  var fields = !Array.isArray(field)
    ? parse(String(field))
    : field

fileds如果不是数组，则调用parse方法解析一下，说明我们希望fileds最后的值是数组，后面我再继续讲解parse方法，这里我们先假设fileds已经是数组了

// assert on invalid field names
  for (var j = 0; j < fields.length; j++) {
    if (!FIELD_NAME_REGEXP.test(fields[j])) {
      throw new TypeError('field argument contains an invalid header name')
    }
  }

我们需要保证fileds数组里面的值都是有效的值，用到了FIELD_NAME_REGEXP正则去校验，那么我们康康这个正则是啥亚子

/**
 * RegExp to match field-name in RFC 7230 sec 3.2
 *
 * field-name    = token
 * token         = 1*tchar
 * tchar         = "!" / "#" / "$" / "%" / "&" / "'" / "*"
 *               / "+" / "-" / "." / "^" / "_" / "`" / "|" / "~"
 *               / DIGIT / ALPHA
 *               ; any VCHAR, except delimiters
 */

var FIELD_NAME_REGEXP = /^[!#$%&'*+\-.^_`|~0-9A-Za-z]+$/

注释讲的很清楚了，只允许单个filed是这些集合里面的值，返回继续我们append方法

 // existing, unspecified vary
  if (header === '*') {
    return header
  }

header是原来的头部vary的值，如果是*的话，完犊子，说明所有的请求都被视为唯一并且非缓存的，那还处理个啥，直接返回这个*就好了

 // enumerate current values
  var val = header
  var vals = parse(header.toLowerCase())

  // unspecified vary
  if (fields.indexOf('*') !== -1 || vals.indexOf('*') !== -1) {
    return '*'
  }

如果不是*，我们继续使用parse来解析header成数组，如果fields或者vals中存在*,还是完犊子，return '*'

 for (var i = 0; i < fields.length; i++) {
    var fld = fields[i].toLowerCase()

    // append value (case-preserving)
    if (vals.indexOf(fld) === -1) {
      vals.push(fld)
      val = val
        ? val + ', ' + fields[i]
        : fields[i]
    }
  }

最后我们循环fields，如果vals中不存在filed，则把filed塞到vals里面，同时把filed添加val后面，循环结束，ok，返回val给vary函数

if ((val = append(header, field))) {
    res.setHeader('Vary', val)
  }

如果append返回来的值不为空，则调用res.setHeader('Vary', val)设置新的Vary的值，我完事了。

/**
 * Parse a vary header into an array.
 *
 * @param {String} header
 * @return {Array}
 * @private
 */

function parse (header) {
  var end = 0
  var list = []
  var start = 0

  // gather tokens
  for (var i = 0, len = header.length; i < len; i++) {
    switch (header.charCodeAt(i)) {
      case 0x20: /*   */
        if (start === end) {
          start = end = i + 1
        }
        break
      case 0x2c: /* , */
        list.push(header.substring(start, end))
        start = end = i + 1
        break
      default:
        end = i + 1
        break
    }
  }

  // final token
  list.push(header.substring(start, end))

  return list
}

我们是不是还差parse函数还没讲解，这里我简单说下,就是遍历字符串，使用/* , */去切割字符串，用/* */去消灭空格，最后返回解析完的fileds数组。

缓存过瘾吗

哈哈哈，没想到，讲了三节，还是在缓存里面，http中缓存是个大头，也是很多人掌握不好的地方，通过js来解释http，真的很简单明了，快快动动你的聪明的脑袋，点关注吧，不然怎么看后面的后会无期jshttp，看过的人都说好呢

avatar
文章
阅读
粉丝