Omi 是什么？

2019-06-11 本文已影响7人全栈弄潮儿

Omi (读音 /ˈomɪ/，类似于欧米) 是下一代前端框架，基于 Web Components 设计，支持 PC Web、移动 H5 和小程序开发(One framework. Mobile & desktop & mini program)。

Omi looks really neat! 　　　　— Jason Miller (Creator of Preact)

*I really like the trend towards "frameworks" that:

"export default class WeElement extends HTMLElement {..}"

This one, Omi, is from Tencent.*
　　　　— Dion Almaer

一个 HTML 完全上手

下面这个页面不需要任何构建工具就可以执行:

<script src="https://unpkg.com/omi"></script>
<script>
  const { define, WeElement, html, render } = Omi

  define('my-counter', class extends WeElement {
    install() {
      this.data.count = 1
      this.sub = this.sub.bind(this)
      this.add = this.add.bind(this)
    }

    sub() {
      this.data.count--
      this.update()
    }

    add() {
      this.data.count++
      this.update()
    }

    render() {
      return html`
        <div>
          <button onClick=${this.sub}>-</button>
          <span>${this.data.count}</span>
          <button onClick=${this.add}>+</button>
        </div>
        `}
  })

  render(html`<my-counter />`, 'body')
</script>

通过上面脚本的执行，你已经定义好了一个自定义标签，可以不使用 render 方法，直接使用 my-counter 标签：

<body>
  <my-counter></my-counter>
</body>

点击这里看执行结果

你可以使用 JSX 和 ES2015+ 来书写自定义元素:

import { render, WeElement, define } from 'omi'

define('my-counter', class extends WeElement {
  data = {
    count: 1
  }

  static css = `
    span{
        color: red;
    }`

  sub = () => {
    this.data.count--
    this.update()
  }

  add = () => {
    this.data.count++
    this.update()
  }

  render() {
    return (
      <div>
        <button onClick={this.sub}>-</button>
        <span>{this.data.count}</span>
        <button onClick={this.add}>+</button>
      </div>
    )
  }
})

render(<my-counter />, 'body')

看上面高亮的部分，可以给组件加样式，比如上面的 span 的作用域仅仅在组件内部，不会污染别的组件。到现在你已经成功入门 Omi 了！你学会了:

为组件添加结构，如上面使用 JSX 书写结构
为组件添加行为，如上面的 onClick 绑定事件
为组件添加样式，如上面的 static css
渲染组件到 body，当然也可以把组件渲染到任意其他组件

github地址

更多angular1/2/4/5、ionic1/2/3、react、vue、微信小程序、nodejs等技术文章、视频教程和开源项目，请关注微信公众号——全栈弄潮儿。

image

脑筋急转弯：

image

生活小窍门

image

Omi 是什么？

一个 HTML 完全上手

猜你喜欢

热点阅读