Open and modern framework for building user interfaces.
- Omi 的 Github 地址 https://github.com/AlloyTeam/omi
- 如果想体验一下 Omi 框架，可以访问 Omi Playground
- 如果想使用 Omi 框架或者开发完善 Omi 框架，可以访问 Omi 使用文档
- 如果你想获得更佳的阅读体验，可以访问 Docs Website
- 如果你懒得搭建项目脚手架，可以试试 omi-cli
- 如果你有 Omi 相关的问题可以 New issue
- 如果想更加方便的交流关于 Omi 的一切可以加入 QQ 的 Omi 交流群 (256426170)
特性
- 超小的尺寸，7 kb (gzip)
- 局部 CSS，HTML+ Scoped CSS + JS 组成可复用的组件。不用担心组件的 CSS 会污染组件外的,Omi 会帮你处理好一切
- 更自由的更新，每个组件都有 update 方法，自由选择时机进行更新。你也可以和 obajs 或者 mobx 一起使用来实现自动更新。
- 模板引擎可替换，开发者可以重写 Omi.template 方法来使用任意模板引擎
- 完全面向对象，函数式和面向对象各有优劣，Omi 使用完全的面向对象的方式来构建 Web 程序。
- ES6+ 和 ES5 都可以，Omi 提供了 ES6+和 ES5 的两种开发方案。你可以自有选择你喜爱的方式。
通过 npm 安装
|
1 2 |
npm install omi |
Hello World
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
class Hello extends Omi.Component { constructor(data) { super(data); } style () { return ` <style> h1{ cursor:pointer; } </style> `; } handleClick(target, evt){ alert(target.innerHTML); } render() { return ` <div> <h1 onclick="handleClick(this, event)">Hello ,{{name}}!</h1> </div> `; } } Omi.render(new Hello({ name : "Omi" }),"body"); |
你可以使用 Omi.makeHTML 来生成组件标签用于嵌套。
|
1 2 |
Omi.makeHTML('Hello', Hello); |
那么你就在其他组件中使用，并且通过 data-*的方式可以给组件传参，如：
|
1 2 3 4 5 6 7 8 9 10 11 |
... render() { return ` <div> <div>Test</div> <Hello data-name="Omi" /> </div> `; } ... |
注意，style 方法里面 return 包裹的<style></style> 不是必须的。主要是方便识别成 jsx 文件时候有 css 语法高亮。
你可以使用 webpack + babel，在 webpack 配置的 module 设置 babel-loader，立马就能使用 ES6+来编写你的 web 程序。
当然 Omi 没有抛弃 ES5 的用户，你可以使用 ES5 的方式编写 Omi。
ES5 方式
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
var Hello = Omi.create("Hello", { style: function () { return "<style>h1{ cursor:pointer }</style>"; }, handleClick: function (dom) { alert(dom.innerHTML) }, render: function () { return ' <div><h1 onclick="handleClick(this, event)">Hello ,{{name}}!</h1></div>' } }); var Test = Omi.create("Test", { render: function () { return '<div>\ <div>Test</div>\ <Hello data-name="Omi" />\ </div>' } }); Omi.render(new Test(),'#test'); |
和 ES6+的方式不同的是，不再需要 makeHTML 来制作标签用于嵌套，因为 Omi.create 的第一个参数的名称就是标签名。
加入 Omi 吧！
Github: https://github.com/AlloyTeam/omi
I need you.
zuoyifeng 2017 年 8 月 30 日
兼容会好吗？这个兼容性浏览器支持程度是怎样的
合肥seo 2017 年 3 月 13 日
怎么评论全是广告 ！
湖南物流总部 2017 年 2 月 25 日
不错，感谢分享。
张聪 2017 年 2 月 20 日
感觉和 React 很像
TAT.dnt 2017 年 2 月 21 日
omi 是完全面向对象设计，react 是函数式。详细看： http://alloyteam.github.io/omi/website/docs.html#Omi 的理念
小小雨 2017 年 2 月 15 日
大神。。 请问下 transformjs 与安卓最新版微信浏览器是不是有冲突 结合使用 alloy-finger 会卡死。 抱歉在这下面闻。。 新框架会持续关注的 学习中。。。
TAT.dnt 2017 年 2 月 15 日
嗯。加群，收集下版本截图反馈 X5 团队~~
极乐科技 2017 年 2 月 14 日
不错~请问能转载到我们的专栏【https://zhuanlan.zhihu.com/dreawer】吗？会注明来源的！
TAT.dnt 2017 年 2 月 14 日
可以~~
极乐科技 2017 年 2 月 15 日
谢谢~
开发者头条 2017 年 2 月 13 日
感谢分享！已推荐到《开发者头条》：https://toutiao.io/posts/seyv1f 欢迎点赞支持！欢迎订阅《小道消息》https://toutiao.io/subjects/146415
meepo 2017 年 2 月 13 日
在 JS 里写 css 的体验有点差，而且 less 编译是个问题。这个有没有好的解决办法？
刘志伟 2017 年 2 月 11 日
这个真心不错啊！！
徐志伟 2017 年 2 月 9 日
这个很赞，顶