https://github.com/ymzuiku/vanilla-ob
简单的，基于 memo 的元素观察者，用于 vanilla-js 的状态管理
https://github.com/ymzuiku/vanilla-ob
Last synced: about 2 months ago
JSON representation
简单的，基于 memo 的元素观察者，用于 vanilla-js 的状态管理
- Host: GitHub
- URL: https://github.com/ymzuiku/vanilla-ob
- Owner: ymzuiku
- License: mit
- Created: 2021-05-02T04:28:55.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2022-04-08T09:50:37.000Z (about 3 years ago)
- Last Synced: 2025-01-20T17:48:18.525Z (3 months ago)
- Language: TypeScript
- Homepage:
- Size: 60.5 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vanilla-ob
为 Element 绑定动态属性，并且在有需要的时候进行更新，此库作为核心库使用在 [aoife](https://github.com/ymzuiku/aoife) 项目中
> Gzip size < 1kb
## Install
```sh
$ npm install --save vanilla-ob
```
## Use
```js
import { ob } from "vanilla-ob";
const state = {
name: "dog",
css: 'page-style'
age: 20,
};
const ele = document.createElement("div");
// 首先，绑定一些属性为动态属性
// 绑定动态属性，例子1 普通绑定
// 动态属性是一个函数，返回值会进行赋值
ob(ele, "textContent", () => state.name);
ob(ele, "className", () => state.css);
// 绑定动态属性，例子2 attribute 属性
// 当属性发现有 '-' 字符，会使用 setAttribute 赋值
ob(ele, "data-name", ()=>"hello");
// 绑定动态属性，例子3 赋值函数，可以返回 Promise
ob(ele, "data-list", () => fetch('/url').then(v=>v.text()));
// 其次，选择一部分元素，让其重新更新自身的动态属性
// 更新动态属性，例子1
// 重新执行某个元素及其子元素的 bind 函数，用新的返回值赋值
state.name = "world";
ob.next(ele);
// 更新动态属性，例子2
// 通过css选择器查找多个元素
ob.next(".page-style");
// 更新动态属性，例子3
// 使用第二个css选择器，忽略某些元素及其子元素的此次更新
ob.next(".page-style", ".ignore");
// 未有参数，更新所有
ob.next();
// 未有参数，更新除 ignore 之外的元素
ob.next(null, ".ignore");
document.body.append(ele);
```