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

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