作者：女女的家_747 | 来源：互联网 | 2023-10-09 20:07
今天，腾讯正式开源发布Omix1.0，让开发者使用JSX或hyperscript创建用户界面。Github功能特性超级快的速度,点击这里体验一下超小的尺寸,7KB(gzip)良好
今天，腾讯正式开源发布 Omix 1.0， 让开发者使用 JSX 或 hyperscript 创建用户界面。
功能特性
使用 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
$.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
$.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+='
Tap';
}
handleSwipe(evt){
this.refs.touchArea.innerHTML+='
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 把玩一下！
京公网安备 11010802041100号