使用betty.js將Javascript代碼存儲到LocalStorage

buildupchao 發(fā)布于2019-08-22 10:49 / 2813人閱讀

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

前言

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

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

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

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

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

安裝

npm install betty.js

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

如果你的項目基于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)容就會被betty存儲到localStorage里，第二次執(zhí)行時就不會從網(wǎng)絡(luò)請求min.allLib.js，直接從緩存中讀取并執(zhí)行。

至于為何除了第一種寫法，還支持了第二種寫法？是因為在前端工程里，可以考慮把定義betty的操作放到通用的layout里，把betty.apply寫進(jìn)每個頁面對應(yīng)的js文件里。

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

跨域緩存

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

index.html

min.allLib_with_padding.js

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

注意：

請設(shè)置xDomain為true

請在待緩存的JS文件中設(shè)置betty padding，如以上的betty.store(....)

請設(shè)置betty為全局變量

版本管理

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

betty.js會以BETTY:{key}:{uri}格式存儲JS代碼，例如：

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

所以key和uri有一個發(fā)生變化，都會引起重新請求并存儲。

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

添加存儲的代碼

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

betty.apply

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

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

betty.remove

移除緩存的代碼

betty.remove("allLib")

關(guān)于緩存CSS

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

動態(tài)插入CSS會使頁面閃動

CSS樣式順序管理問題

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

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

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

addcss(__inline("style.css"))

原始文檔

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

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/91311.html

發(fā)表評論

登陸后可評論

0條評論

buildupchao

男|高級講師

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

TA的文章

OUC2021軟件工程“e拼“校園拼車程序小組Alpha階段博客目錄

閱讀 1335·2021-11-15 11:37
LeetCode刷題題解：495. 提莫攻擊

閱讀 3519·2021-11-11 16:55
DediPath：$6/年/512MB內(nèi)存/5GB SSD空間/不限流量/100Mbps端口/Ope

閱讀 1778·2021-08-25 09:39
前端交互體驗優(yōu)化若干點

閱讀 3241·2019-08-30 15:44
阿里云前端周刊 - 第 14 期

閱讀 1754·2019-08-29 12:52
Django項目前端工程化的探索

閱讀 1429·2019-08-29 11:10
react-native-vector-icons使用遇到的大坑

閱讀 3262·2019-08-26 11:32
啥？四分錢就能學(xué)會開發(fā)電商和游戲小程序？！

閱讀 3252·2019-08-26 10:16

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

使用betty.js將Javascript代碼存儲到LocalStorage

相關(guān)文章