当前位置: 首页 > 工具软件 > Fre > 使用案例 >

Fre:又一个小而美的前端MVVM框架

洪涵亮
2023-12-01

halo,大家好,好久不贱呢!

最近因为看了一些 be 的小说,整个人都比较致郁::>_<::

就在昨天,我用了一天的时间写了 fre,又一个小而美的前端MVMM框架

可能你觉得,有了 vue 和 react,没必要再写一个了::>_<::我觉得我还是想想办法寻找一下它的存在感吧

先看 API:

import { useState, html, render } from 'fre'

function counter() {
  const state = useState({
    count: 0
  })

  return html`
    <div>
      <p>${state.count}</p>
      <button onclick=${() => {state.count++}}>+</button>
      <button onclick=${() => {state.count--}}>-</button>
    </div> 
  `
}

render(html`<${counter}/>`, document.body)
复制代码

hooks style 的组件化方案

最先看到的应该是 hooks。

虽然和 react 的 hooks 并不一样,fre 的 hooks 是通过 Proxy 劫持实现的,react 是通过两个数组对应实现的。

没错,fre 就是因为有了 hooks 才写的,hooks 使得 function 具有了状态,其实是另一种组件化方案。

市面上常见的组件化方案:

  1. react 的方案,class + extend + hoc + render props,依靠 JSX
  2. vue 的方案,模板引擎,依靠 vue-loader
  3. angular 的方案,(我也不知道是啥,没研究,姑且将 web-components 归类到这里)

以上,可以说,各大框架实现组件化的方式各不相同,react 和 vue 都需要 babel,而 web-components 虽然浏览器原生支持,但是它自带的局限也很多(如 scoped css,直接剥夺了 css 复用的能力)

所以 fre 吸取长处,使用了新的方案:

fre 的方案,function + tagged template +JSX(可选)

没错,虽然换了个英文名,但是它就是 ES6 原生支持的 模板字符串 (⊙o⊙)…

tagged template 的模板方案

我一直在寻找能够运行于浏览器的某种写法,web-components 已经否了,tagged template 是最好的选择

没想到,tagged template 不仅仅能够接近 JSX 的开发体验,还有很多惊喜:

html 标准,如<div class=container>这种简写,总之各种的 html5 的写法都是可以的

隔离 js,通过两个反引号,就再也不用担心 calss 和 className

当然,它最重要的还是,无需编译

浏览器直接运行会有什么好处呢?

它可以让后端语言和jq一样来使用 fre,却具备了组件化、响应式数据驱动dom 我曾经说过,大家都在写前端框架,各种的 react-like、vue-like,迷你化、先进化……

但是无法解决痛点。

前端框架的痛点其实很多,比如SSR

SSR 很多限制,并不是 webpack 配置多麻烦,而是它的限制丧失了很多可能。

首当其冲就是使得除 node 以外的语言仅凭自身的能力无法同构。

所以我写 fre,从某个角度上,也是为了其他后端语言。

Proxy 和 vdom diff 的数据更新方案

这个议题也被讨论很久啦,也就是数据更新的方案,通常也有很多种

  1. angular ,脏检查(没研究,不晓得到底是 ng1 还是 ng2)
  2. vue ,对象劫持+vdom diff,vue2 Object.defineproperty
  3. react,vdom diff
  4. san,set(xxx,xxx) 我个人,因为就比较专注 vue 和 react,所以也比较推荐对象劫持+vdom diff 的

所以 fre 也是如此,通过 Proxy 实现的劫持,劫持会触发 rerender,进行 vdom diff

这块内容,只能说个人喜欢,各种方案都可以,看作者个人吧

keyed-diff-patch

通常 diff 算法实现蛮多的,大致有两种:

  1. react 主导的,两套 vdom 进行比对,生成 patches,打到真实 dom 上
  2. preact 主导的,一套 vdom 直接和 真实dom 比对,直接操作 真实 dom

fre 使用的是 preact 的方案,边 diff 边 patch,同时会给 children 绑定唯一的 key,用于记录可以复用的元素,避免过度 diff

呼~望天,写了这么多::>_<::

最后放上 github 地址,欢迎试用 与 star!

github.com/132yse/fre

 类似资料: