源码分析之:cookies.js
发布在源码分析系列2016年9月16日view:681开源项目前端开发webpack
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

# 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);
评论
发表评论
WRITTEN BY
PUBLISHED IN
源码分析系列

挑一些优秀的开源项目进行源码分析

我的收藏