Omix使用 JSX 或 hyperscript 創(chuàng)建用戶界面

Omix —— 使用 JSX 或 hyperscript 創(chuàng)建用戶界面。

功能特性

• 超級(jí)快的速度, 點(diǎn)擊這里體驗(yàn)一下

• 超小的尺寸, 7 KB (gzip)

• 良好的兼容性 IE8

• 內(nèi)置支持JSX 和 hyperscript

• 支持局部 CSS, 不用費(fèi)盡心思去想選擇器了，讓CSS更加簡單

• 更自由的更新，每個(gè)組件都有 update 方法，可以自由選擇最佳更新的時(shí)機(jī)，也可和第三方庫集成實(shí)現(xiàn)雙向綁定，退可以自己手動(dòng)更新。進(jìn)可攻退可守

• 靈活的插件體系和豐富的插件生態(tài)

  • omi-router : Omi專屬的官方Router插件.

  • omi-finger Omi的AlloyFinger插件，支持各種觸摸事件和手勢

  • omi-transform Omi的transformjs插件，快速方便地設(shè)置DOM的CSS3 Transform屬性

  • omi-touch Omi的AlloyTouch插件，Omi項(xiàng)目的觸摸運(yùn)動(dòng)解決方案（支持觸摸滾動(dòng)、旋轉(zhuǎn)、翻頁、選擇等等）

• 喜歡模板引擎、ES6模板字符串的可以使用 Omix 的API大體相同的兄弟框架 Omi，而且上面的插件 Omi 和 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!')
	        ])
    }
}