Omix 1.0
今天,騰訊正式開源釋出 Omix 1.0, 讓開發者使用 JSX 或 hyperscript 建立使用者介面。
功能特性
- 超級快的速度, 點選這裡體驗一下
- 超小的尺寸, 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 同時支援兩種方式。下面稍微對比一下兩者的使用差異:
// 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.