資訊專欄INFORMATION COLUMN
摘要：，大家好，好久不賤呢最近因為看了一些的小說，整個人都比較致郁就在昨天，我用了一天的時間寫了，又一個小而美的前端框架可能你覺得，有了和，沒必要再寫一個了我覺得我還是想想辦法尋找一下它的存在感吧先看的組件化方案最先看到的應該是。
halo，大家好，好久不賤呢！
最近因為看了一些 be 的小說，整個人都比較致郁::>_<::
就在昨天，我用了一天的時間寫了 fre，又一個小而美的前端MVMM框架
可能你覺得，有了 vue 和 react，沒必要再寫一個了::>_<::我覺得我還是想想辦法尋找一下它的存在感吧
先看 API：
import { useState, html, mount } from "fre"
function counter() {
const state = useState({
count: 0
})
return html`
${state.count}
`
}
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 標準，如 瀏覽器直接運行會有什么好處呢？ 它可以讓后端語言和jq一樣來使用 fre，卻具備了組件化、響應式數據驅動dom 但是無法解決痛點。 前端框架的痛點其實很多，比如SSR SSR 很多限制，并不是 webpack 配置多麻煩，而是它的限制喪失了很多可能。 首當其沖就是使得除 node 以外的語言僅憑自身的能力無法同構。 所以我寫 fre，從某個角度上，也是為了其他后端語言。 這個議題也被討論很久啦，也就是數據更新的方案，通常也有很多種 angular ，臟檢查（沒研究，不曉得到底是 ng1 還是 ng2） 所以 fre 也是如此，通過 Proxy 實現的劫持，劫持會觸發 rerender，進行 vdom diff 這塊內容，只能說個人喜歡，各種方案都可以，看作者個人吧 這里順便一提 diff 其實 diff 算法實現蠻多的，大致有兩種： react 主導的，兩套 vdom 進行比對，生成 patches，打到真實 dom 上 呼~望天，寫了這么多::>_<:: 最后放上 github 地址，歡迎試用 與 star！ https://github.com/132yse/fre 文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。 轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100078.html這種簡寫，總之各種的 html5 的寫法都是可以的
隔離 js，通過兩個反引號，就再也不用擔心 calss 和 className
當然，它最重要的還是，無需編譯
我曾經說過，大家都在寫前端框架，各種的 react-like、vue-like，迷你化、先進化……
vue ，對象劫持+vdom diff，vue2 Object.defineproperty
react，vdom diff
san，set（xxx，xxx）
我個人，因為就比較專注 vue 和 react，所以也比較推薦對象劫持+vdom diff 的
preact 主導的，一套 vdom 直接和 真實dom 比對，直接操作 真實 dom
fre 選擇的是前者，因為 有了 proxy，其實 vdom 可有可無，充其量只是一層抽象而已，那既然抽象它，就應該和 react 一樣抽的徹底點，之后對 diff 的優化，就只是兩個對象的事兒了
摘要：，大家好，好久不賤呢最近因為看了一些的小說，整個人都比較致郁就在昨天，我用了一天的時間寫了，又一個小而美的前端框架可能你覺得，有了和，沒必要再寫一個了我覺得我還是想想辦法尋找一下它的存在感吧先看的組件化方案最先看到的應該是。 halo，大家好，好久不賤呢！ 最近因為看了一些 be 的小說，整個人都比較致郁::>__+ {state.count--}}>- ...
摘要：寫在最后總體來說，是一個小而美的框架，值得我們來折騰一下，以上均為本人理解，如有錯誤還請指出，不勝感激一個硬廣我所在團隊工作地點在北京求大量前端社招實習，有意者可發簡歷至 寫在前面 沒錯，又是一個新的前端框架，hyperapp非常的小，僅僅1kb，當然學習起來也是非常的簡單，可以說是1分鐘入門。聲明式：HyperApp 的設計基于Elm Architecture（這也意味著組件更多的是...
摘要：好好打基礎，然后多嘗試不同風格的框架，因為只有嘗試過后才能理解比如徐飛提到的各種權衡，也只有嘗試過后才能知道哪個能真正提升自己的開發效率。 今天看了幾篇關于這三個主流框架的PK，如標題：react.js,angular.js,vue.js學習哪個好？相信每個人都有這種問題。 現在的前端框架層出不窮，作為前端開發者何去何從？fackbook的react.js盛世火熱，react nati...
摘要：專有的內容更少，而更多符合標準的成分。當前標簽實例的方法被調用時當前標簽的任何一個祖先的被調用時更新從父親到兒子單向傳播。相對來說，微型場景會更適合，不想要太多的外部依賴，又需要組件化數據驅動等更現代化框架的能力。 Riot.js是什么？ Riot 擁有創建現代客戶端應用的所有必需的成分： 響應式 視圖層用來創建用戶界面 用來在各獨立模塊之間進行通信的事件庫 用來管理URL和瀏覽器回...
閱讀 1480·2021-11-17 09:33
閱讀 1260·2021-10-11 10:59
閱讀 2892·2021-09-30 09:48
閱讀 1904·2021-09-30 09:47
閱讀 3023·2019-08-30 15:55
閱讀 2335·2019-08-30 15:54
閱讀 1491·2019-08-29 15:25
閱讀 1644·2019-08-29 10:57
