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

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

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

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

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

先看 API:

import { useState, html, mount } 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> 
  `
}

mount(html`<${counter}/>`, document.body)

hooks style 的组件化方案

最先看到的应该是 hooks。

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

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

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

react 的方案,class + extend + hoc + render props,依靠 JSX
vue 的方案,模板引擎,依靠 vue-loader
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 的数据更新方案

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

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

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

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

这里顺便一提 diff

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

react 主导的,两套 vdom 进行比对,生成 patches,打到真实 dom 上
preact 主导的,一套 vdom 直接和 真实dom 比对,直接操作 真实 dom
fre 选择的是前者,因为 有了 proxy,其实 vdom 可有可无,充其量只是一层抽象而已,那既然抽象它,就应该和 react 一样抽的彻底点,之后对 diff 的优化,就只是两个对象的事儿了

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

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

https://github.com/132yse/fre

    原文作者:吸管君
    原文地址: https://segmentfault.com/a/1190000017392963
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞