le5le-store 前端 Cookie 和全局内存存储库

发布于 2020-11-03 13:40:09 字数 3497 浏览 1432 评论 0

le5le-store是前端cookie和全局内存存储库,用于全局变量存储和跨组件通信。

为什么不用 redux 之类的

  • 轻量 - 不到100行,没有性能问题
  • 使用简单 - 几乎0学习成本
  • 订阅式 - 非入侵式,少即是多

不足:

  • 数据全局共享 - 没有单向数据流功能,可以和其他库一起使用。其实看个人习惯,我对单向数据流不感冒。
  • 没有数据快照。个人认为如果需要,做好单一职责和单元测试。

理念

  • 少即是多
  • 不应该过渡使用全局数据;除了需要,普通数据都应该是局部数据,用完就释放
  • 虽然没有单向数据流和数据快照,但未来实现一个深度拷贝的历史快照,也不无可能。

快速入门

Store

import { Store } from 'le5le-store';

Store.set('name', 'topology');
Store.get('name');

// 实时监听变化
const subcribe = Store.subcribe('name', value => {
  console.log('name:', value);
});
// 取消订阅(监听)
subcribe.unsubcribe();


Store.set('obj', { str: 'abc', num: 1, arr: ['aaa', 111], children: { key: 123 } });
Store.get('obj.num'); // == 1

Store.get('obj').num = 100;
// 通知obj.num发生变化,触发订阅回调函数
Store.updated('obj.num');

Cookie

Cookie.set('token', 'secret', {path: '/'});
Cookie.get('token');
Cookie.delete('token');

使用方法

cookie

// 参数: key, name, options
Cookie.set('token', 'secret', {path: '/'});

Cookie.get('token');
Cookie.delete('token');

store

全局共享

import { Store } from 'le5le-store';

Store.set('name', 'topology');
Store.get('name');

// 实时监听变化
const subscribe = Store.subscribe('name', value => {
  console.log('name:', value);
});
// 取消订阅(监听)
subcribe.unsubscribe();


Store.set('obj', { str: 'abc', num: 1, arr: ['aaa', 111], children: { key: 123 } });
Store.get('obj.num'); // == 1

Store.get('obj').num = 100;
// 通知obj.num发生变化,触发订阅回调函数
Store.updated('obj.num');

实例化(数据独立隔离)

import { Store } from 'le5le-store';

const store = new Store();
store.set('name', 'topology');
store.get('name');

// 实时监听变化
const subscribe = store.subscribe('name', value => {
  console.log('name:', value);
});
// 取消订阅(监听)
subcribe.unsubscribe();


store.set('obj', { str: 'abc', num: 1, arr: ['aaa', 111], children: { key: 123 } });
store.get('obj.num'); // == 1

store.get('obj').num = 100;
// 通知obj.num发生变化,触发订阅回调函数
store.updated('obj.num');

成员函数列表

以下函数,类的静态函数和new的实例化函数同名

[static] get(key?: string)

获取属性为key的值。例如:

Store.set('name', 'topology');
const name = Store.get('name');
console.log(name);
// The log: 'topology'

const store = new Store();
store.set('name', 'topology');
const name = store.get('name');

[static] set(key: string, value: any)

设置 key=value

[static] subscribe(key: string, fn: (data: any) => void): Observer

订阅(监听)属性为key的值,返回一个订阅者对象。当内容发生变化,将触发回调函数fn。

当不需要订阅的时候,请调用observer.unsubcribe();

[static] updated(key: string)

当使用非set函数修改数据时,调用updated通知订阅者数据发送改变。例如:

Store.get('obj').num = 100;
// 通知obj.num发生变化,触发订阅回调函数
Store.updated('obj.num');

【说明】:

子对象属性会自动触发父属性订阅通知。例如:

Store.set('obj.num', 100);

// 实时监听变化
const subscribe = Store.subscribe('obj', value => {
  console.log('obj:', value);
});
// 取消订阅(监听)
subcribe.unsubscribe();

相关链接

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

待"谢繁草

文章 0 评论 0

战皆罪

文章 0 评论 0

子英

文章 0 评论 0

爱的十字路口

文章 0 评论 0

孤者何惧

文章 0 评论 0

xi霄xi

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。