Omix使用 JSX 或 hyperscript 创建用户界面
Omix —— 使用 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 都可以共享使用
使用 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!')
])
}
}评论