後會無期之jshttp解析（3）

我有個大膽的想法，不如咱們繼續死磕緩存吧，今天就來解讀 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，看過的人都說好呢