使用betty.js将Javascript代码存储到LocalStorage

buildupchao 发布于2019-08-22 10:49 / 2771人阅读

摘要：前言是一款极轻量的使用存储代码的工具。跨域缓存会默认使用请求待缓存的资源，如果跨域则会请求出错。会以格式存储代码，例如所以和有一个发生变化，都会引起重新请求并存储。

前言

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云服务器云服务器将代码部署到云服务器将代码拷贝到云服务器将代码上传到云服务器将代码部署到云服务器上

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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