开源中国

我们不支持 IE 10 及以下版本浏览器

It appears you’re using an unsupported browser

为了获得更好的浏览体验,我们强烈建议您使用较新版本的 Chrome、 Firefox、 Safari 等,或者升级到最新版本的IE浏览器。 如果您使用的是 IE 11 或以上版本,请关闭“兼容性视图”。
Omix首页、文档和下载 - 使用 JSX 或 hyperscript 创建用户界面 - 开源中国社区
Float_left Icon_close
全部项目分类
我要评价
MIT
JavaScript 查看源码»
跨平台
dntzhang
分享
收藏
1 人收藏
收录时间:2017-08-08
Omix 详细介绍

Omix —— 使用 JSX 或 hyperscript 创建用户界面。

功能特性

  • 超级快的速度, 点击这里体验一下

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

  • 良好的兼容性 IE8

  • 内置支持JSX 和 hyperscript

  • 支持局部 CSS, 不用费尽心思去想选择器了,让CSS更加简单

  • 更自由的更新,每个组件都有 update 方法,可以自由选择最佳更新的时机,也可和第三方库集成实现双向绑定,退可以自己手动更新。进可攻退可守

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

  • 喜欢模板引擎、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!')
	        ])
    }
}
Omix

选择将代码托管在码云
你还在等什么

可能是中国最大最好的代码托管平台


大家对 Omix 的评论 (全部 0 条评论)
{{repayCom.userName}}
顶部