Yolk异步用户界面构建 JS 库

联合创作 · 2023-09-22 05:55

Yolk 是是构建异步用户界面的 JavaScript 库,基于 RxJSVirtual DOM

主要特性:

  • 熟悉:Yolk 大小约为  11kb minified + gzipped,基于 Virtual DOM 和 RxJS。

  • 一切都是可观察的

  • 无状态

示例代码:

/** @jsx Yolk.createElement */
import Yolk from `yolk`
function Counter () {
  // map all plus button click events to 1
  const handlePlus = this.createEventHandler()
  const plusOne = handlePlus.map(() => 1)
  // map all minus button click events to -1
  const handleMinus = this.createEventHandler()
  const minusOne = handleMinus.map(() => -1)
  // merge both event streams together and keep a running count of the result
  const count = plusOne.merge(minusOne).scan((x, y) => x + y, 0).startWith(0)
  return (
    <div>
      <div>
        <button id="plus" onClick={handlePlus}>+</button>
        <button id="minus" onClick={handleMinus}>-</button>
      </div>
      <div>
        <span>Count: {count}</span>
      </div>
    </div>
  )
}
Yolk.render(<Counter />, document.getElementById('container'))
浏览 2
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报