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

buildupchao 發布于2019-08-22 10:49 / 2798人閱讀

摘要：前言是一款極輕量的使用存儲代碼的工具。跨域緩存會默認使用請求待緩存的資源，如果跨域則會請求出錯。會以格式存儲代碼，例如所以和有一個發生變化，都會引起重新請求并存儲。

前言

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的方式引入項目里：

如果你的項目基于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...
})

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

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

當然，你可以自由選擇自己的喜好。

跨域緩存

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

index.html

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

GPU云服務器云服務器將代碼部署到云服務器將代碼拷貝到云服務器將代碼上傳到云服務器將代碼部署到云服務器上

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91311.html

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

摘要：前言是一款極輕量的使用存儲代碼的工具。跨域緩存會默認使用請求待緩存的資源，如果跨域則會請求出錯。會以格式存儲代碼，例如所以和有一個發生變化，都會引起重新請求并存儲。前言 betty.js是一款極輕量的、使用localStorage存儲Javascript代碼的工具。市面上已經有很多類似的工具：比如餓了么團隊最近發布的bowl.js，微信團隊的MOON（未開源），以及這個想法的鼻祖ba...

fish 2019-08-06 13:19 評論0 收藏0
我推薦的一些前端開發工具

摘要：性能卓越的模板引擎簡潔的模版語法，簡單的，關鍵還能前后端共用模板，簡直就是前端開發利器。是由阿里巴巴部門推出的矢量圖標管理網站。是一個簡單的設備檢測工具。 artTemplate 性能卓越的 js 模板引擎簡潔的模版語法，簡單的API，關鍵還能前后端（Nodejs）共用模板，簡直就是前端開發利器。今天有個想法，把artTemplate封裝下，模版render后給input等注冊幾個事...

nodejh 2019-08-21 10:32 評論0 收藏0
Javascript本地存儲小結

摘要：不是很安全，別人可以分析存放在本地的并進行欺騙，考慮到安全應當使用。因此不是一種持久化的本地存儲，僅僅是會話級別的存儲。用于持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。前言總括：詳細講述Cookie,LocalStorge,SesstionStorge的區別和用法。人生如畫，歲月如歌。原文博客地址：Javascript本地存儲小結知乎專欄&&簡書專題：前端...

garfileo 2019-08-20 12:19 評論0 收藏0
JavaScript學習篇--本地存儲

摘要：本地存儲的方案傳統把信息存儲到客戶端的瀏覽器中但是項目服務器端也是可以獲取的把信息存儲到服務器上的服務器存儲永久存儲在客服端的本地。在客戶端運行的js是不能操作用戶電腦磁盤中的文件的（這是為了保護客戶端運行的安全）。 1、js中的本地存儲：使用js向瀏覽器的某一個位置中存儲一些內容，瀏覽器即使關閉了，存儲的信息也不會銷毀，當在重新打開瀏覽器的時候我們依然可以獲取到上一次存儲的信息。...

hss01248 2019-08-22 10:54 評論0 收藏0