源碼分析之：cookies.js

0

這個系列會作一些優秀開源項目的源碼解析，一是爲了沉澱和整理本身一年多來所學，二也是但願本身能堅持多作分享，多作開源。文章由初級工程師面向初級工程師，大神多多指點。
小廣告：一個vue slider組件

1

此次分享的是一個前端操做cookie的庫，一共約80行代碼，十分小巧簡潔（因爲功能&&80行的定位，咱們不從工程角度分析這個庫）。從第一個commit到如今不過十來天，就已經有將近2k的star了，這個庫暴露出來的api很是簡單，設計和實現的確有不少值得學習的地方。

2

var cookies = function (data, opt) {
  // 一個合併對象屬性的方法，和Object.assign有些相似
  function defaults (obj, defs) {
    obj = obj || {};
    for (var key in defs) {
      // 對象屬性不存在時，進行淺拷貝
      if (obj[key] === undefined) {
        obj[key] = defs[key];
      }
    }
    return obj;
  }

  // 這裏cookies是外層的cookies
  // 函數依然能夠像對象同樣去使用，見個人一篇回答
  // （https://www.zhihu.com/question/44990793/answer/99612521）
  // 爲函數對象添加屬性不是炫技和搞笑
  // 是爲了能經過下面這種簡單的方式改變全局默認配置
  // （defaults函數在對象屬性不存在時，才進行淺拷貝，對象屬性存在則不作改動
  // 因此提早賦值能起到改變全局默認配置的做用）：
  //
  // cookies.expires = 100 * 24 * 3600;      // The time to expire in seconds
  // cookies.domain = false;                 // The domain for the cookie
  // cookies.path = '/';                     // The path for the cookie
  // cookies.secure = https ? true : false;  // Require the use of https
  defaults(cookies, {
    // cookie配置，詳見 https://developer.mozilla.org/zh-CN/docs/Web/API/Document/cookie
    // 這裏不清楚做者爲何不使用Cache-Control，有大神能解答一下嗎
    expires: 365 * 24 * 3600,
    path: '/',
    secure: window.location.protocol === 'https:',

    // Advanced，詳見 https://github.com/franciscop/cookies.js#advanced-options
    nulltoremove: true,
    autojson: true,
    autoencode: true,
    encode: function (val) {
      return encodeURIComponent(val);
    },
    decode: function (val) {
      return decodeURIComponent(val);
    }
  });

  // 設置某個cookie時單獨改變配置
  opt = defaults(opt, cookies);

  // expires的值須要Date.toUTCString()格式的，即 Mon, 03 Jul 2006 21:44:38 GMT 這種格式
  // 若是傳入的expires值不是一個Data對象，則進行轉換
  function expires (time) {
    var expires = time;
    if (!(expires instanceof Date)) {
      expires = new Date();
      expires.setTime(expires.getTime() + (time * 1000));
    }
    return expires.toUTCString();
  }

  // 若是data爲字串，則查詢cookie
  if (typeof data === 'string') {
    // 分割document.cookie中的每一個cookie
    var value = document.cookie.split(/;\s*/)
      // 若是autoencode爲true，則數組中的每一個cookie經過decode進行處理，不然直接返回
      .map(opt.autoencode ? opt.decode : function (d) { return d; })
      // 再將每一個cookie分割成[ key, value ]的結構
      .map(function (part) { return part.split('='); })
      // 新建對象，將[ [ key1, value1 ], [ key2, value2 ] ]結構
      // 轉換爲{ key1: value1, key2: value2 }結構
      .reduce(function (parts, part) {
        parts[part[0]] = part[1];
        return parts;
      }, {})[data];  // 獲取指定cookie值，將值賦給value
    // 是否將json字串轉換爲object輸出
    if (!opt.autojson) return value;
    try {
      return JSON.parse(value);
    } catch (e) {
      return value;
    }
  }

  // data爲object，則設置每一個cookie
  for (var key in data) {
    // 當設置的值爲undefined，或nulltoremove爲true且設置的值爲null時，將expired設爲true
    // 準備用於清除cookie值
    var expired = data[key] === undefined || (opt.nulltoremove && data[key] === null);
    // autojson爲true時，將object轉爲json字串。若不轉爲字串，object將會以'[object Object]'存入cookie
    var str = opt.autojson ? JSON.stringify(data[key]) : data[key];
    // 是否對uri自動進行編碼 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent
    var encoded = opt.autoencode ? opt.encode(str) : str;
    // 若是expired爲true，將cookie設空，以清除cookie
    if (expired) encoded = '';
    // 鏈接cookie的key,value以及各項設置
    var res = opt.encode(key) + '=' + encoded +
      (opt.expires ? (';expires=' + expires(expired ? -10000 : opt.expires)) : '') +
      ';path=' + opt.path +
      (opt.domain ? (';domain=' + opt.domain) : '') +
      (opt.secure ? ';secure' : '');
    // 若是opt中有test方法，執行test方法
    if (opt.test) opt.test(res);
    // 種入cookie
    document.cookie = res;
  }
  // 返回cookies，能作到以下串聯調用
  // cookies({ token: 42 })({ token: '42' })
  // var token = cookies({ token: '42' })('token')      token === '42'
  return cookies;
};

// webpack配置output中的libraryTarget設置爲umd,就會在打包時自動添加這段代碼
// 這樣這個模塊就能夠經過多種方式引入(AMD, commonjs, global)
// 具體可查看(https://webpack.github.io/docs/configuration.html#output-librarytarget)
// 固然直接把這段代碼加到模塊末尾也是ok的
//
// 該模塊經過commonjs的module.exports暴露出去 或
// 經過AMD的define暴露出去 或
// 經過this['cookies']（global.cookies）暴露出去
// 具體看if條件
(function webpackUniversalModuleDefinition (root) {
  if (typeof exports === 'object' && typeof module === 'object') {
    module.exports = cookies;
  } else if (typeof define === 'function' && define.amd) {
    define('cookies', [], cookies);
  } else if (typeof exports === 'object') {
    exports['cookies'] = cookies;
  } else {
    root['cookies'] = cookies;
  }
})(this);