使用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