手把手带你学习Odoo OWL组件开发（1）：认识 OWL

什么是OWL

OWL（Odoo Web Library）是一个由 Odoo为其产品构建的小型 (gzip压缩后<20kb) 前端UI框架，它是一个用 Typescript 编写的，以简单且连贯的方式从 React 和 Vue 中吸取最佳编程思想的现代架构。

OWL是从Odoo14版本开始集成到Odoo中的。OWL设计用于高度动态的应用：

• 基于XML：模板基于XML格式，这可以创建出有趣的应用。例如，可以在数据库中进行存储并使用xpath动态修改。

• 浏览器中进行模板编译：这可能并不适合所有应用，但如果需要在浏览器中动态生成用户界面，就非常强大了。例如，通用的表单视图组件可以通过一个XML视图对每个模型生成具体的表单用户界面。

• 不依赖node：不能使用基于npm的标准web工具。系统更安全。

  
  

OWL主要特点是：

• 声明式渲染

• 类似于 Vue 的插值表达

• 生命周期

• 组件化

• 异步渲染

• 类继承与拓展(可以更方便的拓展原有组件)

注意：因为OWL组件是通过ES6类等进行定义，一些ES6的语法在部分老的浏览器中会有问题。因此在使用OWL时，请确保浏览器的版本如Chrome版本在51版本后或者Firefox浏览器53版本后。

快速链接：目前owl的官方介绍及相关官方文档都在github上 https://github.com/odoo/owl

Odoo为什么要造OWL?

在市场日新月异且用户追求不同的UI体验的今天，前端框架多种多样，像Vue、React和Angular等优秀的前端框架设计，在使用上的相关资源都很丰富，为什么odoo要自己造轮子呢？

官方是这样回答的 ：

Odoo 非常模块化，因为odoo的集中性模块化的原因，例如Odoo的核心部分在运行之前不知道将加载/执行哪些文件或者 UI 的状态是什么，因此Odoo不能依赖标准的构建工具链。此外，Odoo 的核心部分需要非常通，Odoo 并不是真正的具有用户界面的应用程序，它是一个生成动态用户界面的应用程序，而且大多数框架都不能胜任这项任务。

在战略上：odoo为什么不适用市面上已有的框架Vue和React？因为目前的开源框架在做出更多的更新和方向变化时，更新的内容和方向与odoo本身的方向有歧义或是无意义的，且一个能控制的相适应的适配的新框架Owl会更符合odoo的需要。

框架上：odoo的模式渲染是通过继承和扩展的方式完成的，这个有他独特的优势

社区上：Vue和React的社区有很多的资源和插件，但是也是因为这些插件，在依赖相关上,odoo是不需要这些相关插件的，如vue中vuex，React中的JSX

模板上：odoo使用的xml模板语法，而目前主流的框架是都不使用xml的，强行使用会很混乱，虽然xml是有很多他诱人的地方，xpath动态修改等(小知识：excel 是可以转成xml的)

编译上：odoo是想最后编译渲染js的，且模板是存储在数据库的，所以odoo是依赖xml的xpath的

综上所述，这些大的小的问题汇聚起来，使用现有的前端框架并不能适用于odoo。

与vue和React的比较

模板差异：Vue的模板语句是需要提前写好的，React则是通过Jsx的方式通过预编译的方式去完成的，而OWL使用了XMl标签助手，可以在类中定义，也可以提前在xml中写好。

异步渲染：在React和Vue中是没有异步钩子函数的，但是在OWL中是有的：

• willStart（在组件开始渲染之前）

• willUpdateProps（在设置新道具之前）

  
  

但是这也是有风险的，及异步没有接收到返回则页面渲染是有问题的，但是也是很强大的，异步加载文件等。

组件传参：在组件传值上和数据反应上，OWL和Vue的模式一样，而不是用setState方式来改变渲染，prop的方式接受父组件传值，用eventBus方式传值，不足之处是，没有vuex的数据处理中心，这个也是OWL以后可能会加的东西吧。

组件使用开发：目前Vue和React的社区组件库都是十分强大的，而Owl因为是Odoo的前端框架，在社区的开源组件和组件开发上有很多的难点，OWl的组件需要适应odoo中模块开发的模式，上手度和组件单独性上有一定的难点，当然继承扩展也是可以实现的。

**类组件：**React正在远离类组件，React认为类对开发人员造成了一定的混乱；Odoo认为类和继承是重要的工具，具有继承性的通用组件之间共享代码是Odoo构建其Web客户端的方式，它通常是一个非常简单且合适的解决方案，最重要的是架构决策。此外，Odoo还具有类外组件的另一种特定用途，类的每个方法都为插件提供了扩展点。这可能不是一个干净的体系结构模式，但这是一个务实的决定，可以很好地服务于Odoo，有时用Monkey Patch类来增加外部行为，有点像mixin。

在 Odoo中使用OWL的简单演示

在认识了OWL概况后，在学习之前，我们一起来做一个基础的简单演示。

js全构建方式，

你需要在你自己的模块项目中创建一个component.js文件 我这里项目模块是xc_addons, 路径如下/xc_addons/static/src/js/component.js，

代码如下：

1、第一步

odoo.define('my.component', function (require) {
"use strict"; // 在这里放第3步中的代码});

这里是挂载在odoo上执行

2、第二步，

在你项目的js引入xml文件中引入/xc_addons/views/templates.xml

<template id="assets_end" inherit_id="web.assets_backend">
<xpath expr="." position="after"> <script src="/my_library/static/src/js/component.js" type="text/javascript" /> </xpath></template>

3、第三步

在第1步添加的component.js 文件中定义OWL工具类

const { Component, Store } = owl;
const { xml } = owl.tags;const { whenReady } = owl.utils;const { useRef, useDispatch, useState, useStore } = owl.hooks;//定义原型类，class MyComponent extends Component { static template = xml` <div class="bg-info text-center p-2"> <b> Welcome to Odoo </b> <i class="fa fa-close p-1 float-right" style="cursor: pointer;" t-on-click="onRemove"> </i> </div>` onRemove(ev) { this.destroy(); }}//初始化页面数据，展示数据owl.utils.whenReady().then(() => { const app = new MyComponent(); app.mount(document.body); });

结语

为了与Odoo的运行方式兼容，OWL也具有非常强大的并发模式，同时又非常简单。从上面的例子也能看出来OWL还是很清晰的，大家赶紧动手试试吧！

今天的内容之后我们会陆续的推出关于OWL组件开发的系列的系统教程，敬请期待~！