腾讯发布 Omix 1.0 - 用 JSX 或 hyperscript 创建用户界面

今天，腾讯正式开源发布 Omix 1.0， 让开发者使用 JSX 或 hyperscript 创建用户界面。

Github

功能特性

灵活的插件体系和丰富的插件生态

喜欢模板引擎、ES6模板字符串的可以使用 Omix 的API大体相同的兄弟框架 Omi，而且上面的插件 Omi 和 Omix 都可以共享使用

Omix

使用 JSX

() divh3 onclick.)

使用 hyperscript

Hello () ..) .tag('hello-tag', Hello) (e) { alert(e.target.innerHTML) .div([ ).) ]) } }

hyperscript API

.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

使用

App (evt)(evt).() divtapTap or Swipe Me.);

是不是超级简便。还在等什么，用到就是赚到，赶紧开始阅读 中文文档 或者在 Omi REPL 把玩一下！

License

This content is released under the MIT License.