ODOO OWL Framework介绍

　　2020年10月，odoo14版本发布了，随之正式带来了OWL这一全新框架，它具备hooks钩子，交互反应状态与并行模式等特征。

　　OWL英文全称是Odoo Web Library，整个框架很小（~<20kbgzip），旨在作为odoo web的UI基础。Owl 是现代化的web框架，主要用Typescript, 吸取了React、Vue等t框架的优秀理念，主要具备如下主要特性：

　　声明性组件系统，

　　基于hooks钩子的反应系统，

　　并发模式，

　　前端路由；

　　Owl 的components使用ES6定义, 使用QWeb模板, 基于virtual DOM, 与hooks很好的集成, 以异步方式呈现。很明显，ODOO的卓越发展，使得官方为了在web方面拥抱先进，不惜自己重新打造一个适合odoo的全新框架。对于广大的odoo开发者来说，要深入odoo，就必须拥抱OWL框架。

　　来看下owl的例子代码：

const { Component, useState, mount } = owl;
const { xml } = owl.tags;

class Counter extends Component {
  static template = xml`
    <button t-on-click="state.value++">
      Click Me! [<t t-esc="state.value"/>]
    </button>`;

  state = useState({ value: 0 });
}

class App extends Component {
  static template = xml`
    <div>
      <span>Hello Owl</span>
      <Counter />
    </div>`;

  static components = { Counter };
}

mount(App, { target: document.body });

　　上面代码中，可以看到counter组件使用useState hook进行反馈。同时代码通过xml helper定义了格内联模板。当然，大多数情况下，我们可以将模板单独定义。

　　更多owl方面的内容，可以点击 OWL官方技术站点访问了解。

秒客网

ODOO OWL Framework介绍

相关文章