Github每日精选（第61期）：虚拟 DOM 走向未来 million

million

million 使创建用户界面像React一样简单，但为最终用户提供更快的性能和更小的包大小。通过使用编译器预先计算用户界面，Million 减少了传统 Virtual DOM 的开销。

虽然像Preact这样的替代库通过有效的代码设计减少了包大小，但 Million 通过利用编译在改进包大小和渲染速度方面取得了巨大的飞跃，更进一步。

安装

在您的项目目录中，运行以下命令：

npm install million

如果你只想玩 Million ，你可以使用 Skypack 导入

<script type="module">import { m, render } from 'https://cdn.skypack.dev/million';// your code here
</script>

使用

在计算机上的某处创建一个空白 HTML 文件，其名称如下：mega-millions.html. 如果您想在浏览器中进行编辑，请分叉此 Stackblitz。

使用文本编辑器，用以下内容填充文件：

<html><head></head><body><script type="module">import { render } from 'https://cdn.skypack.dev/million';render(document.body, 'You won $$$!');</script></body>
</html>

结果为：

You won $$$!

在网络浏览器中打开您的文件，如果您看到You won $$$!，您已经准备好隆隆声了！

现在你已经准备好玩了，让我们看几个实际的例子，作为教你百万基础知识的基础。在本练习结束时，您应该已经具备了开始自己构建东西的能力。

建立一个计数器
构建搜索输入

建立一个计数器

让我们从一个简单的“计数器”示例开始，演示渲染和虚拟节点构建这两个核心功能的基础知识。

<script>在标签中插入以下内容：

import { _, m, render } from 'https://cdn.skypack.dev/million';let seconds = 0;setInterval(() => {render(document.body, m('p', _, [`Time elapsed: ${seconds}`]));seconds++;
}, 1000);

现在，您可以通过一点 JavaScript 看到，我们创建了一个交互式“计数器”。

让我们简要介绍一下正在发生的事情：

render()函数有一个在许多虚拟 DOM 库中使用的标准接口。第一个参数是将用作父 DOM 引用的 DOM 节点，第二个参数是要渲染的虚拟 DOM。

m()函数将为元素实例化一个“虚拟 DOM”节点。

基本上，m()函数是你如何构建你想要的UI的样子，render()函数是你想把它放在屏幕上的时候。

构建搜索输入

现在我们已经了解了一些基本功能，让我们看看如何构建具有更复杂功能的搜索输入。

import {_,m,render,startTransition,style,kebab,Flags,
} from 'https://cdn.skypack.dev/million';
import { compareTwoStrings } from 'https://cdn.skypack.dev/string-similarity';const entries = ['Apple', 'Banana', 'Grape', 'Orange', 'Strawberry'];const update = (highlightedEntries) => {const vnode = m('div', _, [m('input', { onInput: ({ target }) => search(target.value) }, []),m('ul', _, highlightedEntries, Flags.ELEMENT_KEYED_CHILDREN),]);startTransition(() => {render(document.body, vnode);});
};const search = (query = '') => {update(entries.map((entry) => {// Compare two strings returns a float based off of similarity// Ex: 0.8 means high similarity, 0.2 means low similarityconst shouldShow =compareTwoStrings(entry.toLowerCase(), query.trim().toLowerCase()) >0.25;return m('li',{key: `${entry}-${shouldShow}`,style: shouldShow? style(kebab({ textDecoration: 'underline', fontWeight: 'bold' })): undefined,},[entry],);}),);
};search();

默认情况下，将列出所有“条目”（Apple、Banana、Grape、Orange、Strawberry），但您可以通过在文本输入中键入来突出显示它们。在您键入时，条目列表将更改以反映您正在搜索的内容。