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

àì夳堔傛蜴生んèń 2023-10-01 21:36 2阅读 0赞

【**本系列内容直达**：】  
[手把手带你学习Odoo OWL组件开发（1）：认识 OWL][Odoo OWL_1_ OWL]  
[手把手带你学会Odoo OWL组件开发（2）：OWL的使用][Odoo OWL_2_OWL]  
[手把手带你学会Odoo OWL组件开发（3）：核心内容指南][Odoo OWL_3]  
[手把手带你学会Odoo OWL组件开发（4）：OWL组件][Odoo OWL_4_OWL]  
[手把手带你学会Odoo OWL组件开发（5）：浅析OWL原理][Odoo OWL_5_OWL]  
[手把手带你学会Odoo OWL组件开发（6）：API][Odoo OWL_6_API]  
[手把手带你学会Odoo OWL组件开发（7）：OWL项目实战使用][Odoo OWL_7_OWL]

--------------------

【**本篇内容：认识OWL**】

#### 目录 ####

*  什么是OWL
 *  Odoo为什么要造OWL?
 *  与vue和React的比较
 *  在 Odoo中使用OWL的简单演示
 *  结语

在讲解Odoo OWL组件开发之前，我们先来认识一下Odoo 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][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、第一步

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

这里是挂载在odoo上执行

2、第二步，

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

<table> 
 <tbody> 
  <tr> 
   <td>&lt;template id="assets_end" inherit_id="web.assets_backend"&gt;<br>&lt;xpath expr="." position="after"&gt; &lt;script src="/my_library/static/src/js/component.js" type="text/javascript" /&gt; &lt;/xpath&gt;&lt;/template&gt;</td> 
  </tr> 
 </tbody> 
</table>

3、第三步

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

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

4、就会在全局的body中创建一个 owl的xml元素，页面效果如下

![fa8f92ae1d66f14fd25b611bc45f9e8b.png][]

--------------------

## 结语 ##

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

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

***公众号搜索神州数码云基地，后台回复Odoo，加入Odoo技术交流群。***

[Odoo OWL_1_ OWL]: https://blog.csdn.net/CBGCampus/article/details/124170828
[Odoo OWL_2_OWL]: https://blog.csdn.net/CBGCampus/article/details/124430411
[Odoo OWL_3]: https://blog.csdn.net/CBGCampus/article/details/124473175
[Odoo OWL_4_OWL]: https://blog.csdn.net/CBGCampus/article/details/124746966
[Odoo OWL_5_OWL]: https://blog.csdn.net/CBGCampus/article/details/124880542
[Odoo OWL_6_API]: https://blog.csdn.net/CBGCampus/article/details/124997628?spm=1001.2014.3001.5501
[Odoo OWL_7_OWL]: https://blog.csdn.net/CBGCampus/article/details/125444970
[Odoo]: https://link.zhihu.com/?target=https%3A//www.odoo.com/
[https_github.com_odoo_owl]: https://link.zhihu.com/?target=https%3A//github.com/odoo/owl
[fa8f92ae1d66f14fd25b611bc45f9e8b.png]: https://img-blog.csdnimg.cn/img_convert/fa8f92ae1d66f14fd25b611bc45f9e8b.png