chore(refactor): run prettier on all files

pull/1009/head
Jan van Brügge 3 years ago
parent 515bc97c27
commit 75cc9de952
No known key found for this signature in database
GPG Key ID: 88E0BF7B7A546481

@ -18,30 +18,30 @@
## 介绍
虚拟DOM非常有趣他允许我们以函数的形式来表达程序视图但现有的解决方式基本都过于臃肿、性能不佳、功能缺乏、API偏向于OOP或者缺少一些我所需要的功能。
虚拟 DOM 非常有趣他允许我们以函数的形式来表达程序视图但现有的解决方式基本都过于臃肿、性能不佳、功能缺乏、API 偏向于 OOP 或者缺少一些我所需要的功能。
Snabbdom 则极其简单、高效并且可拓展,同时核心代码 ≈ 200行。我们提供了一个具有丰富功能同时支持自定义拓展的模块化结构。为了使核心代码更简洁所有非必要的功能都将模块化引入。
Snabbdom 则极其简单、高效并且可拓展,同时核心代码 ≈ 200 行。我们提供了一个具有丰富功能同时支持自定义拓展的模块化结构。为了使核心代码更简洁,所有非必要的功能都将模块化引入。
你可以将 Snabbdom 改造成任何你想要的样子!选择或自定义任何你需要的功能。或者使用默认配置,便能获得一个高性能、体积小、拥有下列所有特性的虚拟 DOM 库。
## 特性
- 主要特点
- 200行 - 你可以通过简单地阅读所有核心代码来充分理解其工作原理
- 200 行 - 你可以通过简单地阅读所有核心代码来充分理解其工作原理
- 通过模块化实现可拓展
- 对于vnode和全局模块都提供了 hook你可以在 patch 过程或者其他地方调用 hook
- 性能卓越Snabbdom 是目前最高效的虚拟DOM库之一
- 对于 vnode 和全局模块都提供了 hook你可以在 patch 过程或者其他地方调用 hook
- 性能卓越Snabbdom 是目前最高效的虚拟 DOM 库之一
- Patch 函数有一个相当于 reduce/scan 函数的函数声明,这将更容易集成其他函数式库
- 模块特点
- 函数`h` 轻松创建虚拟 DOM 节点
- [SVG 需要与 `h` 函数结合使用](#svg)
- 支持复杂的CSS动画实现
- 支持复杂的 CSS 动画实现
- 提供强大的事件监听功能
- 通过 [Thunks](#thunks) 进一步优化 diff 和 patch 过程
- [支持 JSX 及 Typrscript ](#jsx)
- 第三方功能
- [snabbdom-to-html](https://github.com/acstll/snabbdom-to-html) 提供服务端渲染功能
- [snabbdom-helpers](https://github.com/krainboltgreene/snabbdom-helpers) 精简版虚拟DOM创建
- [snabbdom-helpers](https://github.com/krainboltgreene/snabbdom-helpers) 精简版虚拟 DOM 创建
- [snabby](https://github.com/jamen/snabby) 提供 HTML 模板字符串支持
- [snabbdom-looks-like](https://github.com/jvanbruegge/snabbdom-looks-like) 提供虚拟 DOM 断言
@ -123,7 +123,7 @@ patch(vnode, newVnode); // 将旧节点更新为新节点
- [attributes 模块](#attributes-%E6%A8%A1%E5%9D%97)
- [dataset 模块](#dataset-%E6%A8%A1%E5%9D%97)
- [style 模块](#style-%E6%A8%A1%E5%9D%97)
- [自定义属性(CSS变量)](#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%B1%9E%E6%80%A7css%E5%8F%98%E9%87%8F)
- [自定义属性(CSS 变量)](#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%B1%9E%E6%80%A7css%E5%8F%98%E9%87%8F)
- [`delayed`](#delayed)
- [`remove`](#remove-1)
- [`destroy`](#destroy-1)
@ -147,7 +147,7 @@ patch(vnode, newVnode); // 将旧节点更新为新节点
## 核心功能
Snabbdom 仅提供通用的核心部分,这种设计保证了核心代码的纯粹,与此同时又使其更快并且对可拓展性提供更好的支持。
Snabbdom 仅提供通用的核心部分,这种设计保证了核心代码的纯粹,与此同时又使其更快并且对可拓展性提供更好的支持。
### `init`
@ -176,7 +176,7 @@ patch(oldVnode, newVnode);
#### 卸载
虽然没有专门为移除 vnode 树中的节点提供 API但是依然可以通过给 `patch` 函数传入一个 HTML注释的 vnode 作为第二个参数来实现相同的效果,如:
虽然没有专门为移除 vnode 树中的节点提供 API但是依然可以通过给 `patch` 函数传入一个 HTML 注释的 vnode 作为第二个参数来实现相同的效果,如:
```mjs
patch(
@ -208,7 +208,7 @@ const vnode = h("div", { style: { color: "#000" } }, [
### `fragment` (试验性)
警告此功能目前处于试验阶段必须手动开启并且这个API可能会在未来小版本更新中被修改。
警告:此功能目前处于试验阶段必须手动开启,并且这个 API 可能会在未来小版本更新中被修改。
```mjs
const patch = init(modules, undefined, {
@ -311,7 +311,7 @@ h("div.row", {
#### `destroy`
当虚拟节点的DOM元素从DOM中移除或者元素父级从DOM中移除时都将调用该 hook。
当虚拟节点的 DOM 元素从 DOM 中移除或者元素父级从 DOM 中移除时都将调用该 hook。
要知道这个 hook 和 `remove` hook 的区别,先看看这个示例
@ -324,11 +324,11 @@ const vnode1 = h("section", [
remove: (vnode, cb) => {
console.log(vnode);
cb();
}
}
},
},
},
[h("span", "Hello")]
)
),
]);
const vnode2 = h("section", []);
patch(container, vnode1);
@ -457,7 +457,7 @@ h(
// Renders as: <div style="border: 1px solid #bada55; color: #c0ffee; font-weight: bold"></div>
```
#### 自定义属性(CSS变量)
#### 自定义属性(CSS 变量)
已支持 CSS 自定义属性(又称 CSS 变量或者级联变量),属性名需要以 `--` 为前缀。
@ -554,7 +554,7 @@ h("div", { on: { click: clickHandler } });
Snabbdom 允许在 renders 之间交换事件处理,这种情况发生时并没有实际触发 DOM 的事件处理。
但是,当你在 vnode 之间共享事件函数时需要谨慎一点因为从技术层面上我们避免了事件处理函数重复绑定到DOM上。总的来说我们无法保证在 vnode 间共享数据一定能正常工作,因为模块允许对给定的数据进行修改)。
但是,当你在 vnode 之间共享事件函数时需要谨慎一点,因为从技术层面上我们避免了事件处理函数重复绑定到 DOM 上。(总的来说,我们无法保证在 vnode 间共享数据一定能正常工作,因为模块允许对给定的数据进行修改)。
## SVG
@ -581,7 +581,7 @@ const vnode = h("div", [
### Classes in SVG Elements
某些浏览器如IE<=11[不支持SVG元素中的 `classList` 属性](http://caniuse.com/#feat=classlist)。因为 _class_ 模块在内部使用了 classList所以在这种情况下将不起作用除非您使用 classList 的polyfill。如果你不想使用 polyfill你可以使用 _attributes_ 模块的 `class` 属性)
某些浏览器(如 IE<=11[不支持 SVG 元素中的 `classList` 属性](http://caniuse.com/#feat=classlist)。因为 _class_ 模块在内部使用了 classList所以在这种情况下将不起作用除非您使用 classList 的 polyfill。如果你不想使用 polyfill你可以使用 _attributes_ 模块的 `class` 属性)
## Thunks
@ -782,7 +782,7 @@ Uncaught NotFoundError: Failed to execute 'insertBefore' on 'Node':
The node before which the new node is to be inserted is not a child of this node.
```
出现这种错误的原因是在 patches 间复用 vnodes 导致(如下列代码所示),由于 snabbdom 会在虚拟DOM节点中存储真实DOM节点用于性能优化所以并不支持在 patches 之间共享虚拟节点。
出现这种错误的原因是在 patches 间复用 vnodes 导致(如下列代码所示),由于 snabbdom 会在虚拟 DOM 节点中存储真实 DOM 节点用于性能优化,所以并不支持在 patches 之间共享虚拟节点。
```mjs
const sharedNode = h("div", {}, "Selected");

@ -24,71 +24,61 @@ const originalData = [
{
rank: 1,
title: "The Shawshank Redemption",
desc:
"Two imprisoned men bond over a number of years, finding solace and eventual redemption through acts of common decency.",
desc: "Two imprisoned men bond over a number of years, finding solace and eventual redemption through acts of common decency.",
elmHeight: 0,
},
{
rank: 2,
title: "The Godfather",
desc:
"The aging patriarch of an organized crime dynasty transfers control of his clandestine empire to his reluctant son.",
desc: "The aging patriarch of an organized crime dynasty transfers control of his clandestine empire to his reluctant son.",
elmHeight: 0,
},
{
rank: 3,
title: "The Godfather: Part II",
desc:
"The early life and career of Vito Corleone in 1920s New York is portrayed while his son, Michael, expands and tightens his grip on his crime syndicate stretching from Lake Tahoe, Nevada to pre-revolution 1958 Cuba.",
desc: "The early life and career of Vito Corleone in 1920s New York is portrayed while his son, Michael, expands and tightens his grip on his crime syndicate stretching from Lake Tahoe, Nevada to pre-revolution 1958 Cuba.",
elmHeight: 0,
},
{
rank: 4,
title: "The Dark Knight",
desc:
"When the menace known as the Joker wreaks havoc and chaos on the people of Gotham, the caped crusader must come to terms with one of the greatest psychological tests of his ability to fight injustice.",
desc: "When the menace known as the Joker wreaks havoc and chaos on the people of Gotham, the caped crusader must come to terms with one of the greatest psychological tests of his ability to fight injustice.",
elmHeight: 0,
},
{
rank: 5,
title: "Pulp Fiction",
desc:
"The lives of two mob hit men, a boxer, a gangster's wife, and a pair of diner bandits intertwine in four tales of violence and redemption.",
desc: "The lives of two mob hit men, a boxer, a gangster's wife, and a pair of diner bandits intertwine in four tales of violence and redemption.",
elmHeight: 0,
},
{
rank: 6,
title: "Schindler's List",
desc:
"In Poland during World War II, Oskar Schindler gradually becomes concerned for his Jewish workforce after witnessing their persecution by the Nazis.",
desc: "In Poland during World War II, Oskar Schindler gradually becomes concerned for his Jewish workforce after witnessing their persecution by the Nazis.",
elmHeight: 0,
},
{
rank: 7,
title: "12 Angry Men",
desc:
"A dissenting juror in a murder trial slowly manages to convince the others that the case is not as obviously clear as it seemed in court.",
desc: "A dissenting juror in a murder trial slowly manages to convince the others that the case is not as obviously clear as it seemed in court.",
elmHeight: 0,
},
{
rank: 8,
title: "The Good, the Bad and the Ugly",
desc:
"A bounty hunting scam joins two men in an uneasy alliance against a third in a race to find a fortune in gold buried in a remote cemetery.",
desc: "A bounty hunting scam joins two men in an uneasy alliance against a third in a race to find a fortune in gold buried in a remote cemetery.",
elmHeight: 0,
},
{
rank: 9,
title: "The Lord of the Rings: The Return of the King",
desc:
"Gandalf and Aragorn lead the World of Men against Sauron's army to draw his gaze from Frodo and Sam as they approach Mount Doom with the One Ring.",
desc: "Gandalf and Aragorn lead the World of Men against Sauron's army to draw his gaze from Frodo and Sam as they approach Mount Doom with the One Ring.",
elmHeight: 0,
},
{
rank: 10,
title: "Fight Club",
desc:
"An insomniac office worker looking for a way to change his life crosses paths with a devil-may-care soap maker and they form an underground fight club that evolves into something much, much more...",
desc: "An insomniac office worker looking for a way to change his life crosses paths with a devil-may-care soap maker and they form an underground fight club that evolves into something much, much more...",
elmHeight: 0,
},
];

@ -1,10 +1,11 @@
{
"redirects": [
{ "source": "/", "destination": "/examples" }
],
"redirects": [{ "source": "/", "destination": "/examples" }],
"rewrites": [
{ "source": "build/:file", "destination": "build/:file.js" },
{ "source": "build/helpers/:file", "destination": "build/helpers/:file.js" },
{
"source": "build/helpers/:file",
"destination": "build/helpers/:file.js"
},
{ "source": "build/modules/:file", "destination": "build/modules/:file.js" }
]
}

@ -1,7 +1,9 @@
export const array = Array.isArray;
export function primitive(s: any): s is string | number {
return typeof s === "string" ||
return (
typeof s === "string" ||
typeof s === "number" ||
s instanceof String ||
s instanceof Number;
s instanceof Number
);
}

Loading…
Cancel
Save