使用betty.js將Javascript代碼存儲(chǔ)到LocalStorage

fish 發(fā)布于2019-08-06 13:19 / 2627人閱讀

摘要：前言是一款極輕量的使用存儲(chǔ)代碼的工具?？缬蚓彺鏁?huì)默認(rèn)使用請(qǐng)求待緩存的資源，如果跨域則會(huì)請(qǐng)求出錯(cuò)。會(huì)以格式存儲(chǔ)代碼，例如所以和有一個(gè)發(fā)生變化，都會(huì)引起重新請(qǐng)求并存儲(chǔ)。

前言

betty.js是一款極輕量的、使用localStorage存儲(chǔ)Javascript代碼的工具。市面上已經(jīng)有很多類似的工具：比如餓了么團(tuán)隊(duì)最近發(fā)布的bowl.js，微信團(tuán)隊(duì)的MOON（未開源），以及這個(gè)想法的鼻祖basket.js。

但為何還要“重復(fù)造輪子”？是因?yàn)?b>betty.js她足夠輕量，足夠簡(jiǎn)潔易用，足夠具有擴(kuò)展性，壓縮后的min.betty.js只有1KB！使得你可以直接以inline引入的方式（這也是推薦的引入方式）將betty用到你的項(xiàng)目里。

三年前就想著將Javascript的代碼存儲(chǔ)到LS里，在百度工作的時(shí)候曾寫出一個(gè)基于mod.js的存儲(chǔ)工具mocket.js，它的思想是動(dòng)態(tài)分析項(xiàng)目依賴，本地沒有存儲(chǔ)過的JS再去網(wǎng)絡(luò)請(qǐng)求再存儲(chǔ)下來，這也順利應(yīng)用到百度的部分項(xiàng)目里。

但為何不直接開源mocket.js，就是因?yàn)?b>betty不依賴任何組件，是一個(gè)獨(dú)立的極其輕量的小工具。當(dāng)然，可以借助betty.js來擴(kuò)展實(shí)現(xiàn)mocket.js動(dòng)態(tài)分析組件的思想。

好了，廢話這么多，接下來是介紹文檔：

安裝

npm install betty.js

拷貝min.betty.js的代碼，使用inline的方式引入項(xiàng)目里：

如果你的項(xiàng)目基于FIS，可以這么引入：

示例 方式一：

var betty = Betty({
    uri: "/path/min.allLib.js",
    key: "allLib",
    noCache: false,
    xDomain: false
}, function() {
    // your code...
})

方式二：

var betty = Betty({
    uri: "/path/min.allLib.version.js",
    key: "allLib",
    noCache: false,
    xDomain: false
});

betty.apply(function() {
    // your code...
})

betty.apply(function() {
    // your others code...
})

以上兩種方式的代碼執(zhí)行一遍之后，min.allLib.js的內(nèi)容就會(huì)被betty存儲(chǔ)到localStorage里，第二次執(zhí)行時(shí)就不會(huì)從網(wǎng)絡(luò)請(qǐng)求min.allLib.js，直接從緩存中讀取并執(zhí)行。

至于為何除了第一種寫法，還支持了第二種寫法？是因?yàn)樵谇岸斯こ汤铮梢钥紤]把定義betty的操作放到通用的layout里，把betty.apply寫進(jìn)每個(gè)頁面對(duì)應(yīng)的js文件里。

當(dāng)然，你可以自由選擇自己的喜好。

跨域緩存

betty.js會(huì)默認(rèn)使用Ajax請(qǐng)求待緩存的JS資源，如果跨域則會(huì)請(qǐng)求出錯(cuò)。這時(shí)候你需要設(shè)置betty padding和xDomain來讓跨域請(qǐng)求JS資源被支持：

index.html

min.allLib_with_padding.js

betty.store(function() {
    // your code...
})

注意：

請(qǐng)?jiān)O(shè)置xDomain為true

請(qǐng)?jiān)诖彺娴腏S文件中設(shè)置betty padding，如以上的betty.store(....)

請(qǐng)?jiān)O(shè)置betty為全局變量

版本管理

betty.js絕對(duì)依賴uri和key來管理JS版本。如果你的代碼需要更新，請(qǐng)更換uri的值，新的JS就會(huì)被請(qǐng)求，然后代碼內(nèi)容會(huì)被重新存儲(chǔ)到LocalStorage里，并且會(huì)刪掉舊版本的代碼。

betty.js會(huì)以BETTY:{key}:{uri}格式存儲(chǔ)JS代碼，例如：

BETTY:allLib:/path/min.allLib.version.js

所以key和uri有一個(gè)發(fā)生變化，都會(huì)引起重新請(qǐng)求并存儲(chǔ)。

API Betty

配置betty

var betty = Betty({config, callback[option]})

config:

uri和key必須設(shè)置

noCache: 設(shè)置不緩存，默認(rèn)為false

xDomain: 設(shè)置跨域緩存，默認(rèn)false，詳見[跨域緩存]

betty.store

添加存儲(chǔ)的代碼

betty.store(function() {
    ...
})

betty.apply

執(zhí)行依賴緩存的代碼

betty.apply(function() {
    ...
})

betty.remove

移除緩存的代碼

betty.remove("allLib")

關(guān)于緩存CSS

目前還不支持，也不建議隨意緩存CSS內(nèi)容，還是建議直接在head里引入CSS，主要是基于以下的考慮：

動(dòng)態(tài)插入CSS會(huì)使頁面閃動(dòng)

CSS樣式順序管理問題

當(dāng)然，一些不在首屏展示的CSS可以被緩存，但建議將其轉(zhuǎn)換成JS文件合并到你的min.allLib.js中，可以借助這個(gè)小工具addcss:

addcss("a{color: red,font-size: 12px}")

如果你使用FIS，可以這么處理：

addcss(__inline("style.css"))

原始文檔

https://binnng.github.io/betty.js

云服務(wù)器 GPU云服務(wù)器將代碼部署到云服務(wù)器將代碼拷貝到云服務(wù)器將代碼上傳到云服務(wù)器將代碼部署到云服務(wù)器上

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/61823.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

fish

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

【貪玩巴斯】數(shù)字信號(hào)處理Digital Signal Processing（DSP）——第三節(jié)「離散

閱讀 2024·2021-09-30 09:47
如何選擇虛擬主機(jī)大小-如何選擇虛擬主機(jī)？

閱讀 703·2021-09-22 15:43
css布局：塊級(jí)元素垂直居中

閱讀 1981·2019-08-30 15:52
CSS盒模型

閱讀 2431·2019-08-30 15:52
H3BPM-關(guān)于釘釘免登失敗的處理

閱讀 2540·2019-08-30 15:44
css overflow-scroll-with-padding (Webkit VS Firefo

閱讀 903·2019-08-30 11:10
css 動(dòng)畫

閱讀 3372·2019-08-29 16:21
響應(yīng)式網(wǎng)站開發(fā)基礎(chǔ)

閱讀 3296·2019-08-29 12:19

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

使用betty.js將Javascript代碼存儲(chǔ)到LocalStorage

相關(guān)文章