UDN-企业互联网技术人气社区

板块导航

浏览  : 1193
回复  : 0

[讨论交流] 使用betty.js将JavaScript代码存储到LocalStorage

[复制链接]
芭芭拉的头像 楼主
发表于 2016-12-19 14:36:09 | 显示全部楼层 |阅读模式
  前言

  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 动态分析组件的思想。

  好了,废话这么多,接下来是介绍文档:

  安装
  1. npm install betty.js
复制代码

  拷贝 min.betty.js 的代码,使用 inline 的方式引入项目里:
  1. <script type="text/JavaScript">
  2.     var Betty=function....
  3. </script>
复制代码

  如果你的项目基于 FIS ,可以这么引入:
  1. <script type="text/JavaScript" src="/path/min.betty.js?__inline"></script>
复制代码

  示例

  方式一:
  1. var betty = Betty({
  2.     uri: "/path/min.allLib.js",
  3.     key: "allLib",
  4.     noCache: false,
  5.     xDomain: false
  6. }, function() {
  7.     // your code...
  8. })
复制代码

  方式二:
  1. var betty = Betty({
  2.     uri: "/path/min.allLib.version.js",
  3.     key: "allLib",
  4.     noCache: false,
  5.     xDomain: false
  6. });

  7. betty.apply(function() {
  8.     // your code...
  9. })

  10. betty.apply(function() {
  11.     // your others code...
  12. })
复制代码

  以上两种方式的代码执行一遍之后, min.allLib.js 的内容就会被betty存储到localStorage里,第二次执行时就不会从网络请求 min.allLib.js ,直接从缓存中读取并执行。

  至于为何除了第一种写法,还支持了第二种写法?是因为在前端工程里,可以考虑把定义 betty 的操作放到通用的layout里,把 betty.apply 写进每个页面对应的js文件里。

  当然,你可以自由选择自己的喜好。

  跨域缓存

  betty.js 会默认使用 Ajax 请求待缓存的JS资源,如果跨域则会请求出错。这时候你需要设置 betty padding 和 xDomain 来让跨域请求JS资源被支持:

  index.html
  1. <script>
  2. window.betty = Betty({
  3.     uri: "/path/min.allLib_with_padding.version.js",
  4.     key: "allLib",
  5.     xDomain: true
  6. }, function() {
  7.     console.log(Mobike.site)
  8. })
  9. </script>
  10. min.allLib_with_padding.js

  11. betty.store(function() {
  12.     // your code...
  13. })
复制代码

  注意:

  请设置 xDomain 为 true

  请在待缓存的JS文件中设置 betty padding ,如以上的 betty.store(....)

  请设置 betty 为全局变量

  版本管理

  betty.js 绝对依赖 uri 和 key 来管理JS版本。如果你的代码需要更新,请更换 uri 的值,新的JS就会被请求,然后代码内容会被重新存储到LocalStorage里,并且会 删掉旧版本的代码 。

  betty.js 会以 BETTY:{key}:{uri} 格式存储JS代码,例如:
  1. BETTY:allLib:/path/min.allLib.version.js
复制代码

  所以 key 和 uri 有一个发生变化,都会引起重新请求并存储。

  API

  Betty

  配置betty
  1. var betty = Betty({config, callback[option]})
复制代码

  config:

  uri 和 key 必须设置

  noCache : 设置不缓存,默认为 false

  xDomain : 设置跨域缓存,默认 false ,详见[跨域缓存]

  betty.store

  添加存储的代码
  1. betty.store(function() {
  2.     ...
  3. })
复制代码

  betty.apply

  执行依赖缓存的代码
  1. betty.apply(function() {
  2.     ...
  3. })
复制代码

  betty.remove

  移除缓存的代码
  1. betty.remove("allLib")
复制代码

  关于缓存CSS

  目前还不支持,也不建议随意缓存CSS内容,还是建议直接在 head 里引入CSS,主要是基于以下的考虑:

  动态插入CSS会使页面闪动

  CSS样式顺序管理问题

  当然,一些不在首屏展示的CSS可以被缓存,但建议将其转换成JS文件合并到你的 min.allLib.js 中,可以借助这个小工具 addcss :
  1. addcss("a{color: red,font-size: 12px}")
复制代码

  如果你使用FIS,可以这么处理:
  1. addcss(__inline("style.css"))
复制代码

  原始文档

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

相关帖子

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部