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

2024年5月14日 217次阅读 来源: binnng

媒介

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

    原文作者：binnng
    原文地址: https://segmentfault.com/a/1190000007764956
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞