vanjs 世界上最小的响应式 UI 框架

原创

前端路迹

2023-5-29 15:52

编辑于 2023-5-31 11:08

今天在github上看到一个号称世界上最小的响应式UI框架，当加了类似这种世界上最小的，不由让人想点进去看一眼。看到官方的这个对比图，还真算得上世界上最小的响应式UI框架，之一都不用加。

接着激动的查看核心代码。发现只有仅仅的93行代码，这还是包含了空行和注释的。

为了成为世界上最小的，框架代码也有一些非常有意思的操作。

首先是文件开头有一行注释：

// This file consistently uses `let` keyword instead of `const` for reducing the bundle size.

使用let定义变量，而不是const，因为const比let多了两个字母，会导致体积变大😅。

接着是把一些名字比较长的变量或方法重新定义了别名。

// Aliasing some builtin symbols to reduce the bundle size.
let Obj = Object, _undefined, protoOf = Object.getPrototypeOf

// Aliasing `this` to reduce the bundle size.
    let s = this, curV = s._val

反正怎么让代码变少就怎么来。

先看一个官方示例，展示如何使用这个响应式UI框架。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>vanjs demo</title>
    <script type="module">
        import van from './vanjs.js'
        const { div, button } = van.tags

        const Counter = () => {
            const counter = van.state(0)
            return div('❤️ ', counter, ' ',
                button({ onclick: () => ++counter.val }, '👍'),
                button({ onclick: () => --counter.val }, '👎')
            )
        }

        van.add(document.body, Counter())
    </script>
</head>
<body>
</body>
</html>

点击按钮，前面的数字会自动更新，做到了响应式的基本特性。

也可以封装组件，方便调用。

<script type="module">
    import van from './vanjs.js'
    const { table, tbody, thead, td, th, tr } = van.tags

    const Table = ({ head, data }) => table(
        head ? thead(tr(head.map(h => th(h)))) : [],
        tbody(data.map(row => tr(
            row.map(col => td(col))
        ))),
    )
    van.add(document.body, Table({
        head: ["ID", "Name", "Country"],
        data: [
            [1, "John Doe", "US"],
            [2, "Jane Smith", "CA"],
            [3, "Bob Johnson", "AU"],
        ],
    }))
</script>

转载请注明出处。本文地址: https://www.qinshenxue.com/article/vanjs-the-worlds-smallest-responsive-ui-framework.html

关注我的公众号