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"); |