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

前言

betty.js是一款極輕量的、使用localStorage存儲Javascript代碼的工具。市面上已經有不少相似的工具：好比餓了麼團隊最近發佈的bowl.js，微信團隊的MOON（未開源），以及這個想法的鼻祖basket.js。

但爲什麼還要「重複造輪子」？是由於betty.js她足夠輕量，足夠簡潔易用，足夠具備擴展性，壓縮後的min.betty.js只有1KB！使得你能夠直接以inline引入的方式（這也是推薦的引入方式）將betty用到你的項目裏。

三年前就想着將Javascript的代碼存儲到LS裏，在百度工做的時候曾寫出一個基於mod.js的存儲工具mocket.js，它的思想是動態分析項目依賴，本地沒有存儲過的JS再去網絡請求再存儲下來，這也順利應用到百度的部分項目裏。

但爲什麼不直接開源mocket.js，就是由於betty不依賴任何組件，是一個獨立的極其輕量的小工具。固然，能夠藉助betty.js來擴展實現mocket.js動態分析組件的思想。

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

安裝

npm install betty.js

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

<script type="text/javascript">
    var Betty=function....
</script>

若是你的項目基於FIS，能夠這麼引入：

<script type="text/javascript" src="/path/min.betty.js?__inline"></script>

示例

方式一：

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...
})

以上兩種方式的代碼執行一遍以後，min.allLib.js的內容就會被betty存儲到localStorage裏，第二次執行時就不會從網絡請求min.allLib.js，直接從緩存中讀取並執行。

至於爲什麼除了第一種寫法，還支持了第二種寫法？是由於在前端工程裏，能夠考慮把定義betty的操做放到通用的layout裏，把betty.apply寫進每一個頁面對應的js文件裏。

固然，你能夠自由選擇本身的喜愛。

跨域緩存

betty.js會默認使用Ajax請求待緩存的JS資源，若是跨域則會請求出錯。這時候你須要設置betty padding和xDomain來讓跨域請求JS資源被支持：

index.html

<script>
window.betty = Betty({
    uri: "/path/min.allLib_with_padding.version.js",
    key: "allLib",
    xDomain: true
}, function() {
    console.log(Mobike.site)
})
</script>

min.allLib_with_padding.js

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

注意：

• 請設置xDomain爲true

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

• 請設置betty爲全局變量

版本管理

betty.js絕對依賴uri和key來管理JS版本。若是你的代碼須要更新，請更換uri的值，新的JS就會被請求，而後代碼內容會被從新存儲到LocalStorage裏，而且會刪掉舊版本的代碼。

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

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

因此key和uri有一個發生變化，都會引發從新請求並存儲。

API

Betty

配置betty

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

config:

• uri和key必須設置

• noCache: 設置不緩存，默認爲false

• xDomain: 設置跨域緩存，默認false，詳見[跨域緩存]

betty.store

添加存儲的代碼

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

betty.apply

執行依賴緩存的代碼

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

betty.remove

移除緩存的代碼

betty.remove("allLib")

關於緩存CSS

目前還不支持，也不建議隨意緩存CSS內容，仍是建議直接在head裏引入CSS，主要是基於如下的考慮：

• 動態插入CSS會使頁面閃動

• CSS樣式順序管理問題

固然，一些不在首屏展現的CSS能夠被緩存，但建議將其轉換成JS文件合併到你的min.allLib.js中，能夠藉助這個小工具addcss:

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

若是你使用FIS，能夠這麼處理：

addcss(__inline("style.css"))

原始文檔

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