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！

github.com/132yse/fre