Fre：又一个小而美的前端MVVM框架

nanfeiyan 发布于2019-08-23 14:06 / 2751人阅读

摘要：，大家好，好久不贱呢最近因为看了一些的小说，整个人都比较致郁就在昨天，我用了一天的时间写了，又一个小而美的前端框架可能你觉得，有了和，没必要再写一个了我觉得我还是想想办法寻找一下它的存在感吧先看的组件化方案最先看到的应该是。

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 标准，如

这种简写，总之各种的 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！

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100078.html

Fre：又一个小而美的前端MVVM框架

摘要：，大家好，好久不贱呢最近因为看了一些的小说，整个人都比较致郁就在昨天，我用了一天的时间写了，又一个小而美的前端框架可能你觉得，有了和，没必要再写一个了我觉得我还是想想办法寻找一下它的存在感吧先看的组件化方案最先看到的应该是。 halo，大家好，好久不贱呢！最近因为看了一些 be 的小说，整个人都比较致郁::>__+ {state.count--}}>- ...

LittleLiByte 2019-08-02 16:07 评论0 收藏0
小而美的框架—hyperapp

摘要：写在最后总体来说，是一个小而美的框架，值得我们来折腾一下，以上均为本人理解，如有错误还请指出，不胜感激一个硬广我所在团队工作地点在北京求大量前端社招实习，有意者可发简历至写在前面没错，又是一个新的前端框架，hyperapp非常的小，仅仅1kb，当然学习起来也是非常的简单，可以说是1分钟入门。声明式：HyperApp 的设计基于Elm Architecture（这也意味着组件更多的是...

haitiancoder 2019-08-21 16:50 评论0 收藏0
react.js,angular.js,vue.js学习哪个好？

摘要：好好打基础，然后多尝试不同风格的框架，因为只有尝试过后才能理解比如徐飞提到的各种权衡，也只有尝试过后才能知道哪个能真正提升自己的开发效率。今天看了几篇关于这三个主流框架的PK，如标题：react.js,angular.js,vue.js学习哪个好？相信每个人都有这种问题。现在的前端框架层出不穷，作为前端开发者何去何从？fackbook的react.js盛世火热，react nati...

Towers 2019-08-21 16:19 评论0 收藏0
Riot.js——一个小而美的JS框架

摘要：专有的内容更少，而更多符合标准的成分。当前标签实例的方法被调用时当前标签的任何一个祖先的被调用时更新从父亲到儿子单向传播。相对来说，微型场景会更适合，不想要太多的外部依赖，又需要组件化数据驱动等更现代化框架的能力。 Riot.js是什么？ Riot 拥有创建现代客户端应用的所有必需的成分：响应式视图层用来创建用户界面用来在各独立模块之间进行通信的事件库用来管理URL和浏览器回...

nemo 2019-08-01 18:27 评论0 收藏0