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