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！