摘要:小廣告一個(gè)組件這次分享的是一個(gè)前端操作的庫,一共約行代碼,十分小巧簡(jiǎn)潔由于功能行的定位,我們不從工程角度分析這個(gè)庫。
0
這個(gè)系列會(huì)做一些優(yōu)秀開源項(xiàng)目的源碼解析,一是為了沉淀和整理自己一年多來所學(xué),二也是希望自己能堅(jiān)持多做分享,多做開源。文章由初級(jí)工程師面向初級(jí)工程師,大神多多指點(diǎn)。
小廣告:一個(gè)vue slider組件
這次分享的是一個(gè)前端操作cookie的庫,一共約80行代碼,十分小巧簡(jiǎn)潔(由于功能&&80行的定位,我們不從工程角度分析這個(gè)庫)。從第一個(gè)commit到現(xiàn)在不過十來天,就已經(jīng)有將近2k的star了,這個(gè)庫暴露出來的api非常簡(jiǎn)單,設(shè)計(jì)和實(shí)現(xiàn)的確有很多值得學(xué)習(xí)的地方。
2var cookies = function (data, opt) { // 一個(gè)合并對(duì)象屬性的方法,和Object.assign有些類似 function defaults (obj, defs) { obj = obj || {}; for (var key in defs) { // 對(duì)象屬性不存在時(shí),進(jìn)行淺拷貝 if (obj[key] === undefined) { obj[key] = defs[key]; } } return obj; } // 這里cookies是外層的cookies // 函數(shù)依然可以像對(duì)象一樣去使用,見我的一篇回答 // (https://www.zhihu.com/question/44990793/answer/99612521) // 為函數(shù)對(duì)象添加屬性不是炫技和搞笑 // 是為了能通過下面這種簡(jiǎn)單的方式改變?nèi)帜J(rèn)配置 // (defaults函數(shù)在對(duì)象屬性不存在時(shí),才進(jìn)行淺拷貝,對(duì)象屬性存在則不做改動(dòng) // 所以提前賦值能起到改變?nèi)帜J(rèn)配置的作用): // // 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); } }); // 設(shè)置某個(gè)cookie時(shí)多帶帶改變配置 opt = defaults(opt, cookies); // expires的值需要Date.toUTCString()格式的,即 Mon, 03 Jul 2006 21:44:38 GMT 這種格式 // 如果傳入的expires值不是一個(gè)Data對(duì)象,則進(jìn)行轉(zhuǎn)換 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中的每個(gè)cookie var value = document.cookie.split(/;s*/) // 如果autoencode為true,則數(shù)組中的每個(gè)cookie通過decode進(jìn)行處理,否則直接返回 .map(opt.autoencode ? opt.decode : function (d) { return d; }) // 再將每個(gè)cookie分割成[ key, value ]的結(jié)構(gòu) .map(function (part) { return part.split("="); }) // 新建對(duì)象,將[ [ key1, value1 ], [ key2, value2 ] ]結(jié)構(gòu) // 轉(zhuǎn)換為{ key1: value1, key2: value2 }結(jié)構(gòu) .reduce(function (parts, part) { parts[part[0]] = part[1]; return parts; }, {})[data]; // 獲取指定cookie值,將值賦給value // 是否將json字串轉(zhuǎn)換為object輸出 if (!opt.autojson) return value; try { return JSON.parse(value); } catch (e) { return value; } } // data為object,則設(shè)置每個(gè)cookie for (var key in data) { // 當(dāng)設(shè)置的值為undefined,或nulltoremove為true且設(shè)置的值為null時(shí),將expired設(shè)為true // 準(zhǔn)備用于清除cookie值 var expired = data[key] === undefined || (opt.nulltoremove && data[key] === null); // autojson為true時(shí),將object轉(zhuǎn)為json字串。若不轉(zhuǎn)為字串,object將會(huì)以"[object Object]"存入cookie var str = opt.autojson ? JSON.stringify(data[key]) : data[key]; // 是否對(duì)uri自動(dòng)進(jìn)行編碼 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent var encoded = opt.autoencode ? opt.encode(str) : str; // 如果expired為true,將cookie設(shè)空,以清除cookie if (expired) encoded = ""; // 連接cookie的key,value以及各項(xiàng)設(shè)置 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方法,執(zhí)行test方法 if (opt.test) opt.test(res); // 種入cookie document.cookie = res; } // 返回cookies,能做到如下串聯(lián)調(diào)用 // cookies({ token: 42 })({ token: "42" }) // var token = cookies({ token: "42" })("token") token === "42" return cookies; }; // webpack配置output中的libraryTarget設(shè)置為umd,就會(huì)在打包時(shí)自動(dòng)添加這段代碼 // 這樣這個(gè)模塊就可以通過多種方式引入(AMD, commonjs, global) // 具體可查看(https://webpack.github.io/docs/configuration.html#output-librarytarget) // 當(dāng)然直接把這段代碼加到模塊末尾也是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);
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/80364.html
摘要:兩個(gè)域之間是不是存在跨域問題,主要是根據(jù)協(xié)議域名端口號(hào)這三個(gè)點(diǎn)進(jìn)行判斷,只要有一個(gè)不一樣就是跨域。例如協(xié)議不同與域名不同與端口號(hào)不同與瀏覽器默認(rèn)情況下無法主動(dòng)跨域向后端發(fā)送,需要在前端請(qǐng)求時(shí)加入配置項(xiàng)。據(jù)此,可以實(shí)現(xiàn)單點(diǎn)登錄。 cookie是什么 cookie的英文意思是餅干。在計(jì)算機(jī)術(shù)語中指服務(wù)端存放在客戶端的一段數(shù)據(jù)。這段數(shù)據(jù)在客戶端每次進(jìn)行http請(qǐng)求時(shí)會(huì)自動(dòng)加在http請(qǐng)求報(bào)文...
摘要:兩個(gè)域之間是不是存在跨域問題,主要是根據(jù)協(xié)議域名端口號(hào)這三個(gè)點(diǎn)進(jìn)行判斷,只要有一個(gè)不一樣就是跨域。例如協(xié)議不同與域名不同與端口號(hào)不同與瀏覽器默認(rèn)情況下無法主動(dòng)跨域向后端發(fā)送,需要在前端請(qǐng)求時(shí)加入配置項(xiàng)。據(jù)此,可以實(shí)現(xiàn)單點(diǎn)登錄。 cookie是什么 cookie的英文意思是餅干。在計(jì)算機(jī)術(shù)語中指服務(wù)端存放在客戶端的一段數(shù)據(jù)。這段數(shù)據(jù)在客戶端每次進(jìn)行http請(qǐng)求時(shí)會(huì)自動(dòng)加在http請(qǐng)求報(bào)文...
摘要:快速上手先說區(qū)別數(shù)據(jù)大小不能超過。可以在后端設(shè)置修改,數(shù)據(jù)僅在本地瀏覽器保存。數(shù)據(jù)存儲(chǔ)在瀏覽器僅在瀏覽器為關(guān)閉的狀態(tài),關(guān)閉窗口后數(shù)據(jù)就會(huì)銷毀。默認(rèn)情況下,屬于當(dāng)前頁面。 cookie、Sessionstorage、Localstorage快速上手 先說區(qū)別 cookie: 數(shù)據(jù)大小不能超過4KB。 不管是否有需求,cookie數(shù)據(jù)都會(huì)在HTTP請(qǐng)求中攜帶,在瀏覽器和服務(wù)器中來回傳遞,...
摘要:快速上手先說區(qū)別數(shù)據(jù)大小不能超過。可以在后端設(shè)置修改,數(shù)據(jù)僅在本地瀏覽器保存。數(shù)據(jù)存儲(chǔ)在瀏覽器僅在瀏覽器為關(guān)閉的狀態(tài),關(guān)閉窗口后數(shù)據(jù)就會(huì)銷毀。默認(rèn)情況下,屬于當(dāng)前頁面。 cookie、Sessionstorage、Localstorage快速上手 先說區(qū)別 cookie: 數(shù)據(jù)大小不能超過4KB。 不管是否有需求,cookie數(shù)據(jù)都會(huì)在HTTP請(qǐng)求中攜帶,在瀏覽器和服務(wù)器中來回傳遞,...
閱讀 1481·2021-11-17 09:33
閱讀 1260·2021-10-11 10:59
閱讀 2892·2021-09-30 09:48
閱讀 1905·2021-09-30 09:47
閱讀 3024·2019-08-30 15:55
閱讀 2337·2019-08-30 15:54
閱讀 1493·2019-08-29 15:25
閱讀 1646·2019-08-29 10:57