betty.js

betty.js是一款极轻量的、使用localStorage存储Javascript代码的工具。她足够轻量，足够简洁易用，足够具有扩展性，压缩后的min.betty.js只有1KB！使得你可以直接以inline引入的方式将betty用到你的项目里。

安装

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"))