腾讯发布 Omix 1.0 - 用 JSX 或 hyperscript 创建用户界面

腾讯发布 Omix 1.0 – 用 JSX 或 hyperscript 创建用户界面

《腾讯发布 Omix 1.0 - 用 JSX 或 hyperscript 创建用户界面》

今天,腾讯正式开源发布 Omix 1.0, 让开发者使用 JSX 或 hyperscript 创建用户界面。

功能特性

  • 超级快的速度, 点击这里体验一下
  • 超小的尺寸, 7 KB (gzip)
  • 良好的兼容性 IE8
  • 内置支持JSX 和 hyperscript
  • 支持局部 CSS, 不用费尽心思去想选择器了,让CSS更加简单
  • 更自由的更新,每个组件都有 update 方法,可以自由选择最佳更新的时机,也可和第三方库集成实现双向绑定,退可以自己手动更新。进可攻退可守
  • 灵活的插件体系和丰富的插件生态

  • 喜欢模板引擎、ES6模板字符串的可以使用 Omix 的API大体相同的兄弟框架 Omi,而且上面的插件 Omi 和 Omix 都可以共享使用

Omix

使用 JSX

class Hello extends Omi.Component {
    render() {
        return <div> Hello {this.data.name}!</div>
    }
}

Omi.tag('hello', Hello)

class App extends Omi.Component {
    install() {
        this.name = 'Omi'
    }

    handleClick(e) {
        this.name = 'Omix' 
        this.update()
    }

    style() {
        return `h3{
                color:red;
                cursor: pointer;
            }`
    }

    render() {
        return <div>
                <hello name={this.name}></hello>
                <h3 onclick={this.handleClick.bind(this)}>Scoped css and event test! click me!</h3>
            </div>
    }
}

Omi.render(new App(), '#container')

使用 hyperscript

const $ = Omi.tags

class Hello extends Omi.Component {
    render() {
        return $.div( 'Hello' + this.data.name+'!')
    }
}

Omi.tag('hello-tag', Hello)

class App extends Omi.Component {
    handleClick(e) {
        alert(e.target.innerHTML)
    }

    render() {
        return $.div([
                $.HelloTag({name: 'Omi'}),
                $.h3({onclick: this.handleClick}, 'scoped css and event test! click me!')
            ])
    }
}

hyperscript API

const $ = Omi.tags
$.tagName(selector)
$.tagName(attrs)
$.tagName(children)
$.tagName(attrs, children)
$.tagName(selector, children)
$.tagName(selector, attrs, children)

JSX vs hyperscript

海外有大量的工程师觉得的 hyperscript 比 JSX 要更加简洁和方便,但是我们团队内部喜欢 JSX 和 hyperscript 一半一半。但是没有关系 Omix 同时支持两种方式。下面稍微对比一下两者的使用差异:

// JSX
<ul id="bestest-menu">
  {items.map( item =>
    <li class="item" {...attrs(item.id)}>{item.title}</li>
  )}
</ul>

vs

// hyperscript-helpers
$.ul('#bestest-menu', items.map( item =>
  $.li('.item', attrs(item.id), item.title))
);
// JSX
<MyList>{items.map(item => 
    <MyItem id={item.id} title={item.title} />
)}</MyList>

vs

// hyperscript-helpers
$.MyList(items.map(item => 
    $.MyItem(item.id, item.title)
))
<MyComponent someProp={{x: 1, y: 2}}/>

vs

$.MyComponent({x: 1, y: 2})

插件举例

Omix 对插件体系进行了升级,使用方便比从前更加简便,这里拿 omi-finger 作为例子, omi-finger 是 Omi的AlloyFinger插件,让你轻松在Omi项目里支持各种触摸事件和手势:

通过npm安装

npm install omi-finger

使用

import Omi from 'omix';
import 'omi-finger';

class App extends Omi.Component {
    handleTap(evt){
        this.refs.touchArea.innerHTML+='<br/>Tap';
    }

    handleSwipe(evt){
        this.refs.touchArea.innerHTML+='<br/>Swipe-'+ evt.direction;
    }

    render() {
        return  <div>
                <div omi-finger ref="touchArea" tap="handleTap"  swipe="handleSwipe" >
                    Tap or Swipe Me!
                </div>
            </div>
    }
}

Omi.render(new App(),"#container");

是不是超级简便。还在等什么,用到就是赚到,赶紧开始阅读 中文文档 或者在 Omi REPL 把玩一下!

License

This content is released under the MIT License.

    原文作者:dntzhang
    原文地址: https://segmentfault.com/a/1190000010569531
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞