騰訊發佈 Omix 1.0 - 用 JSX 或 hyperscript 建立用戶界面

時間 2019-11-29

標籤騰訊發佈 omix 1.0 jsx hyperscript 建立用戶界面欄目騰訊简体版

原文原文鏈接

Omix 1.0

https://user-gold-cdn.xitu.io/2017/8/8/bbe2ce1c1e7e925005df0f1cc8938374

今天，騰訊正式開源發佈 Omix 1.0，讓開發者使用 JSX 或 hyperscript 建立用戶界面。css

Github

功能特性

超級快的速度, 點擊這裏體驗一下
超小的尺寸, 7 KB (gzip)
良好的兼容性 IE8
內置支持JSX 和 hyperscript
支持局部 CSS, 不用費盡心思去想選擇器了，讓CSS更加簡單
更自由的更新，每一個組件都有 update 方法，能夠自由選擇最佳更新的時機，也可和第三方庫集成實現雙向綁定，退能夠本身手動更新。進可攻退可守
靈活的插件體系和豐富的插件生態
- omi-router : Omi專屬的官方Router插件.
- omi-finger Omi的AlloyFinger插件，支持各類觸摸事件和手勢
- omi-transform Omi的transformjs插件，快速方便地設置DOM的CSS3 Transform屬性
- omi-touch Omi的AlloyTouch插件，Omi項目的觸摸運動解決方案（支持觸摸滾動、旋轉、翻頁、選擇等等）
喜歡模板引擎、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 同時支持兩種方式。下面稍微對比一下二者的使用差別:git

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

vsgithub

// 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>複製代碼

vsnpm

// hyperscript-helpers
$.MyList(items.map(item => 
    $.MyItem(item.id, item.title)
))複製代碼

<MyComponent someProp={{x: 1, y: 2}}/>複製代碼

vsapi

$.MyComponent({x: 1, y: 2})複製代碼

插件舉例

Omix 對插件體系進行了升級，使用方便比從前更加簡便，這裏拿 omi-finger 做爲例子, omi-finger 是 Omi的AlloyFinger插件，讓你輕鬆在Omi項目裏支持各類觸摸事件和手勢:bash

經過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");複製代碼