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 具有了状态,其实是另一种组件化方案。
市面上常见的组件化方案:
- 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
这块内容,只能说个人喜欢,各种方案都可以,看作者个人吧
keyed-diff-patch
通常 diff 算法实现蛮多的,大致有两种:
- react 主导的,两套 vdom 进行比对,生成 patches,打到真实 dom 上
- preact 主导的,一套 vdom 直接和 真实dom 比对,直接操作 真实 dom
fre 使用的是 preact 的方案,边 diff 边 patch,同时会给 children 绑定唯一的 key,用于记录可以复用的元素,避免过度 diff
呼~望天,写了这么多::>_<::
最后放上 github 地址,欢迎试用 与 star!