您现在的位置是:主页 > 技术交流 >

【fre】fre.js_一个小而美的前端 MVVM 框架

admin 2020-04-13 15:32 fre 【技术交流】 0次人已围观

简介介绍: 其实,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 ...

介绍:

其实,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" }]
  ]
}
孟文鹏博客版权所有丨如未注明 , 均为原创丨 转载请注明【fre】fre.js_一个小而美的前端 MVVM 框架