成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Fre：又一個(gè)小而美的前端MVVM框架

nanfeiyan / 2783人閱讀

摘要：，大家好，好久不賤呢最近因?yàn)榭戳艘恍┑男≌f，整個(gè)人都比較致郁就在昨天，我用了一天的時(shí)間寫了，又一個(gè)小而美的前端框架可能你覺得，有了和，沒必要再寫一個(gè)了我覺得我還是想想辦法尋找一下它的存在感吧先看的組件化方案最先看到的應(yīng)該是。

halo，大家好，好久不賤呢！

最近因?yàn)榭戳艘恍?be 的小說，整個(gè)人都比較致郁::>_<::

就在昨天，我用了一天的時(shí)間寫了 fre，又一個(gè)小而美的前端MVMM框架

可能你覺得，有了 vue 和 react，沒必要再寫一個(gè)了::>_<::我覺得我還是想想辦法尋找一下它的存在感吧

先看 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 的組件化方案

最先看到的應(yīng)該是 hooks。

雖然和 react 的 hooks 并不一樣，fre 的 hooks 是通過 Proxy 劫持實(shí)現(xiàn)的，react 是通過兩個(gè)數(shù)組對應(yīng)實(shí)現(xiàn)的。

沒錯(cuò)，fre 就是因?yàn)橛辛?hooks 才寫的，hooks 使得 function 具有了狀態(tài)，其實(shí)是另一種組件化方案。

市面上常見的組件化方案：

react 的方案，class + extend + hoc + render props，依靠 JSX
vue 的方案，模板引擎，依靠 vue-loader
angular 的方案，（我也不知道是啥，沒研究，但是應(yīng)該可以將 web-components 歸類到這里）
以上，可以說，各大框架實(shí)現(xiàn)組件化的方式各不相同，react 和 vue 都需要 babel，而 web-components 雖然瀏覽器原生支持，但是它自帶的局限也很多（如 scoped css，直接剝奪了 css 復(fù)用的能力）

所以 fre 吸取長處，使用了新的方案：

fre 的方案，function + tagged template +JSX（可選）

沒錯(cuò)，雖然換了個(gè)英文名，但是它就是 ES6 原生支持的 模板字符串 (⊙o⊙)…

tagged template 的模板方案

我一直在尋找能夠運(yùn)行于瀏覽器的某種寫法，web-components 已經(jīng)否了，tagged template 是最好的選擇

沒想到，tagged template 不僅僅能夠接近 JSX 的開發(fā)體驗(yàn)，還有很多驚喜：

html 標(biāo)準(zhǔn)，如

這種簡寫，總之各種的 html5 的寫法都是可以的
隔離 js，通過兩個(gè)反引號，就再也不用擔(dān)心 calss 和 className
當(dāng)然，它最重要的還是，無需編譯

瀏覽器直接運(yùn)行會有什么好處呢？

它可以讓后端語言和jq一樣來使用 fre，卻具備了組件化、響應(yīng)式數(shù)據(jù)驅(qū)動(dòng)dom
我曾經(jīng)說過，大家都在寫前端框架，各種的 react-like、vue-like，迷你化、先進(jìn)化……

但是無法解決痛點(diǎn)。

前端框架的痛點(diǎn)其實(shí)很多，比如SSR

SSR 很多限制，并不是 webpack 配置多麻煩，而是它的限制喪失了很多可能。

首當(dāng)其沖就是使得除 node 以外的語言僅憑自身的能力無法同構(gòu)。

所以我寫 fre，從某個(gè)角度上，也是為了其他后端語言。

Proxy 和 vdom diff 的數(shù)據(jù)更新方案

這個(gè)議題也被討論很久啦，也就是數(shù)據(jù)更新的方案，通常也有很多種

angular ，臟檢查（沒研究，不曉得到底是 ng1 還是 ng2）
vue ，對象劫持+vdom diff，vue2 Object.defineproperty
react，vdom diff
san，set（xxx，xxx）
我個(gè)人，因?yàn)榫捅容^專注 vue 和 react，所以也比較推薦對象劫持+vdom diff 的

所以 fre 也是如此，通過 Proxy 實(shí)現(xiàn)的劫持，劫持會觸發(fā) rerender，進(jìn)行 vdom diff

這塊內(nèi)容，只能說個(gè)人喜歡，各種方案都可以，看作者個(gè)人吧

這里順便一提 diff

其實(shí) diff 算法實(shí)現(xiàn)蠻多的，大致有兩種：

react 主導(dǎo)的，兩套 vdom 進(jìn)行比對，生成 patches，打到真實(shí) dom 上
preact 主導(dǎo)的，一套 vdom 直接和 真實(shí)dom 比對，直接操作 真實(shí) dom
fre 選擇的是前者，因?yàn)?有了 proxy，其實(shí) vdom 可有可無，充其量只是一層抽象而已，那既然抽象它，就應(yīng)該和 react 一樣抽的徹底點(diǎn)，之后對 diff 的優(yōu)化，就只是兩個(gè)對象的事兒了

呼~望天，寫了這么多::>_<::

最后放上 github 地址，歡迎試用 與 star！

https://github.com/132yse/fre

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/100078.html

相關(guān)文章

  • Fre：又一個(gè)小而美的前端MVVM框架

    摘要：，大家好，好久不賤呢最近因?yàn)榭戳艘恍┑男≌f，整個(gè)人都比較致郁就在昨天，我用了一天的時(shí)間寫了，又一個(gè)小而美的前端框架可能你覺得，有了和，沒必要再寫一個(gè)了我覺得我還是想想辦法尋找一下它的存在感吧先看的組件化方案最先看到的應(yīng)該是。 halo，大家好，好久不賤呢！ 最近因?yàn)榭戳艘恍?be 的小說，整個(gè)人都比較致郁::>__+ {state.count--}}>- ...

    LittleLiByte 評論0 收藏0

  • 小而美的框架—hyperapp

    摘要：寫在最后總體來說，是一個(gè)小而美的框架，值得我們來折騰一下，以上均為本人理解，如有錯(cuò)誤還請指出，不勝感激一個(gè)硬廣我所在團(tuán)隊(duì)工作地點(diǎn)在北京求大量前端社招實(shí)習(xí)，有意者可發(fā)簡歷至 寫在前面 沒錯(cuò)，又是一個(gè)新的前端框架，hyperapp非常的小，僅僅1kb，當(dāng)然學(xué)習(xí)起來也是非常的簡單，可以說是1分鐘入門。聲明式：HyperApp 的設(shè)計(jì)基于Elm Architecture（這也意味著組件更多的是...

    haitiancoder 評論0 收藏0

  • react.js,angular.js,vue.js學(xué)習(xí)哪個(gè)好？

    摘要：好好打基礎(chǔ)，然后多嘗試不同風(fēng)格的框架，因?yàn)橹挥袊L試過后才能理解比如徐飛提到的各種權(quán)衡，也只有嘗試過后才能知道哪個(gè)能真正提升自己的開發(fā)效率。 今天看了幾篇關(guān)于這三個(gè)主流框架的PK，如標(biāo)題：react.js,angular.js,vue.js學(xué)習(xí)哪個(gè)好？相信每個(gè)人都有這種問題。 現(xiàn)在的前端框架層出不窮，作為前端開發(fā)者何去何從？fackbook的react.js盛世火熱，react nati...

    Towers 評論0 收藏0

  • Riot.js——一個(gè)小而美的JS框架

    摘要：專有的內(nèi)容更少，而更多符合標(biāo)準(zhǔn)的成分。當(dāng)前標(biāo)簽實(shí)例的方法被調(diào)用時(shí)當(dāng)前標(biāo)簽的任何一個(gè)祖先的被調(diào)用時(shí)更新從父親到兒子單向傳播。相對來說，微型場景會更適合，不想要太多的外部依賴，又需要組件化數(shù)據(jù)驅(qū)動(dòng)等更現(xiàn)代化框架的能力。 Riot.js是什么？ Riot 擁有創(chuàng)建現(xiàn)代客戶端應(yīng)用的所有必需的成分： 響應(yīng)式 視圖層用來創(chuàng)建用戶界面 用來在各獨(dú)立模塊之間進(jìn)行通信的事件庫 用來管理URL和瀏覽器回...

    nemo 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<