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);