fly63前端网

www.fly63.com

首页文章资源工具教程 栏目
  • 关于我们
  • 网站投稿
  • 赞助一下
搜索

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具,网友无需注册和下载安装即可使用

点击查看

关闭

提交网站

fre.js
分享
复制链接
新浪微博
QQ 好友

扫一扫分享

网站地址:https://fre.js.org
GitHub:https://github.com/132yse/fre
网站描述:一个小而美的前端 MVVM 框架

介绍:

其实,free 是一部动漫名,也是我最喜欢的番没有之一,haru 是我儿子! 


安装:

yarn add fre -S


使用:

import{ observe, html, mount } from './src'

function counter() {
  const data = observe({
    count: 0
  })

  return html`
    <div>
      <h1>${data.count}</h1>
      <button onclick=${() => {data.count++}}>+</button>
      <button onclick=${() => {data.count--}}>-</button>
    </div> 
  `
}

mount(html`<${counter} />`, document.body)


Proxy:

const data = observe({
  count: 0
})

会生成一个全递归的 Proxy 对象,会自动去observe,data 更新会自动触发 rerender,这个更新是准确


fre 提供 JSX-like 的 tagged template 语法,浏览器原生支持,无需编译

建议根据场景选择,webpack 下 JSX 比较合适,浏览器环境肯定要 tagged template(如后端语言的模板引擎)

html`
  <div>
    <h1>${data.count}</h1>
    <button onclick=${() => {data.count++}}>+</button>
    <button onclick=${() => {data.count--}}>-</button>
  </div> 
`

和 jsx 一样,最终会被转换成 h 函数,进而生成 vdom tree

性能不会差,可以粗略理解为 vue 的 compile 过程,如果使用 jsx ,将直接省略这个过程


hooks api

其实这里应该叫做functionalCompoent比较合适,一种新的组件化方案。如下,fre 和 vue、react 不同,fre 的组件是无自身状态、可复用的标记代码块

只有根组件拥有全局状态,但这不妨碍你进行多次 render 创造多个根组件

import{ mount, html, observe } from 'fre'

function counter() {
  const data = observe({
    count: 0
  })

  return html`
    <div>
      ${html`<${count} count=${data.count} />`}
      <button onclick=${() => {data.count++}}>+</button>
      <button onclick=${() => {data.count--}}>-</button>
    </div> 
  `
}

function count(props){
  return html`
    <h1>${props.count}</h1>
  `
}

mount(html`<${counter} />`, document.body)


JSX

默认也对外暴露了 h 函数,可以选用 JSX

import { h } from 'fre'


webpack 需配置:

{
  "plugins": [
    ["transform-react-jsx", { "pragma":"Fre.h" }]
  ]
}


链接: https://fly63.com/nav/1177

more>>
相关栏目
react
Facebook开发的一款高效、灵活、声明式设计的JS库
官网GitHub
AngularJS
Google推出有条理,可维护,易编程的MVVM框架
官网GitHub
backbone
提供:模型、集合、视图,开发重量级的javascript应用的框架
官网GitHub
jquery
一个快速、简洁的JavaScript代码库
官网GitHub
zepto.js
一个轻量级的针对现代高级浏览器的JavaScript库
官网GitHub
Ember
JavaScript MVC框架,它用来创建复杂的Web应用程序,消除了样板
官网GitHub
nw.js
轻量级桌面应用开发的捷径
官网GitHub
socket.io
一个WebSocket库,包括了客户端的js和服务器端的nodejs
官网GitHub
petite-vue
vue的可替代发行版,针对渐进式增强进行了优化
点击进入GitHub
ocLazyLoad
AngularJS 的延迟加载(惰性加载)模块和组件
官网GitHub
weui.js
WeUI 的轻量级 js 封装
点击进入GitHub
Qatrix
一款超轻量级JS框架
点击进入GitHub
Mootools
大部分浏览器原生对象做了扩展
官网GitHub
enyo.js
强调模块化和封装的Js应用程序框架
点击进入GitHub
workbox
谷歌推进的 web 应用新模型,将网站升级成 PWA
官网GitHub
Senna.js
快速单页应用程序引擎
官网GitHub

手机预览