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

最新推荐文章于 2024-09-26 08:05:06 发布

go2coding

最新推荐文章于 2024-09-26 08:05:06 发布

阅读量185

点赞数

分类专栏： Github每日精选文章标签： github ui javascript 1024程序员节

本文链接：https://blog.csdn.net/weixin_40425640/article/details/126778612

版权

Github每日精选专栏收录该内容

99 篇文章 69 订阅

订阅专栏

Million是一个轻量级库，提供类似React的用户体验，但具有更快的性能和更小的包体积。通过预计算用户界面，Million减少了VirtualDOM的开销。本文介绍了如何安装和使用Million，包括创建计数器和搜索输入的实际示例。

摘要由CSDN通过智能技术生成

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 similarity
      const 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();