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

【本篇内容：认识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

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

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

结语

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

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

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

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

手把手带你学会Odoo OWL组件开发（5）：浅析OWL原理
[本系列内容直达:] 手把手带你学习Odoo OWL组件开发(1):认识 OWL 手把手带你学会Odoo OWL组件开发(2):OWL的使用手把手带你学会Odoo OWL组件开发(3):核心内容指南 ...
手把手带你学会Odoo OWL组件开发（4）：OWL组件
[本系列内容直达:] 手把手带你学习Odoo OWL组件开发(1):认识 OWL 手把手带你学会Odoo OWL组件开发(2):OWL的使用手把手带你学会Odoo OWL组件开发(3):核心内容指南 ...
手把手带你学会Odoo OWL组件开发（2）：OWL的使用
[本系列内容直达:] [手把手带你学习Odoo OWL组件开发(1):认识 OWL] [手把手带你学会Odoo OWL组件开发(2):OWL的使用] [手把手带你学会Odoo OWL组件开发(3):核 ...
手把手带你学习SQLMAP
本文以[黑客笔记在线dvwa靶场]中的SQL注入为例子(靶场有效期:2019年),讲解SqlMap的基础用法.靶场有效期内,聪明机智的你可以在上面试验一把,体验实战的感觉. SQL注入基本战术: 1. ...
【uni-app高级实战】手把手带你学习一个纯实战复杂项目的开发1/100
项目描述: 技术内容包括: 1.uni-app与Taro等多端框架的对比及使用场景分析 2.uni-app多端适配问题的解决方案 3.多端组件抽象封装定位人群: 已经有了uni-app基础知识,并且 ...
老齐学python的django 源代码_《跟老齐学Python:Django实战》真正的手把手“带”您学习...
全书通过不断升级改造的方式,带着读者完成了一个"极其"简单的实战项目.这里说简单是相对于那些"大牛"而言.如果您是大牛,齐老师会建议您使用谷歌或者读官方英文文档 ...
一分钟带你了解Huawei LiteOS组件开发指南
摘要:本文将基于Huawei LiteOS系统,从组件定义开始带你走进组件开发指南. 本文分享自华为云社区<一分钟带你了解Huawei LiteOS之组件开发指南>,作者: Lionlac ...
手把手带你学习微信小程序 —— 项目实战篇
微信小程序项目实战篇 WeChat-applet 1.支付宝界面展示 2.微博发帖功能实现 3.时间格式化案例 4.微信红包界面展示 5.微信消息删除案例 6.微信icon 组件 6.1 支付成功界面 ...
手把手带你学习如何在小程序、网页前端部署AI模型
通过浏览器访问网页获取信息.或进入小程序玩一些有趣的应用往往是现在互联网用户每日必不可少的一件事.能够在前端环境实现AI能力,将会为用户体验插上一对腾飞的翅膀.传统的智能化效果由于模型大小.设备机器算 ...
手把手带你分解 Vue 倒计时组件
大家好,我是漫步,今天来分享一个Vue 组件的内部,喜欢记得关注我并设为星标. 一.前言前端开发博客入职的第一个需求是跟着一位前端大佬一起完成的一个活动项目. 由于是一起开发,当然不会放过阅读大佬 ...

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

目录

什么是OWL

Odoo为什么要造OWL?

与vue和React的比较

在 Odoo中使用OWL的简单演示

结语

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

最新文章

热门文章