【本系列内容直达：】
手把手带你学习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的主要部分有5个：

一个虚拟的dom系统（src/blockdom）
一个组件系统（src/component）
一个模板编译器（src/compiler文件夹中）
一个小的运行时的关联(src/app)
反应系统（src/reactivity.ts）

还有一些其他的文件，但是通过这5个主要部分可以理解Owl的核心。

这是我的理解。

owl 渲染的所有内容在内部都由一个虚拟节点表示。虚拟 dom 的工作是有效地表示应用程序的当前状态，并在需要时构建实际的 DOM 表示，或者在需要时更新 DOM。

其他一些助手/较小规模的东西渲染分两个阶段进行：

虚拟渲染：这会在内存中异步生成虚拟 dom

patch：将虚拟树应用到屏幕（同步）

渲染涉及几个类：

组件
调度器
映射数据：包含一些元数据的小对象，与特定组件的渲染相关联

组件在用户界面中，可见的动态组件树中组织。每当在组件中启动渲染时：

使用Owl创建组件C并渲染的时候，
虚拟渲染阶段从组件C 开始（将异步渲染所有子组件）
将映射数据添加到调度程序中，如果映射完成，
调度程序将连续轮询每个动画帧一旦完成，
调度程序将调用任务回调，这将应用渲染上去（如果在此期间没有取消渲染）。

这个过程和和react的更类似，就是将全部的dom变化在虚拟树上循环获取后，在集体处理真实dom上的数据变化。所以，owl更喜欢xml组件的内嵌式创建，而不是分体式的先创建好相关的页面xml。

（就像官方给的，在component.js中通过，owl.utils.whenReady()的里面挂载创建的owl是不能直接在类中挂载template的模板的，也就是提前写好的那种dom，而只能是jsx的方式才能渲染。）

虚拟dom

Owl 是一个声明式组件系统：声明组件树的结构，Owl 会将其转换为命令式操作列表。这种翻译是由一个虚拟 dom 完成的。这是 Owl 的底层，大多数开发者不需要直接调用虚拟 dom 函数。

虚拟 dom 背后的主要思想是保留 DOM 的内存表示（称为虚拟节点），并且每当需要进行一些更改时，重新生成新的表示，计算新旧之间的差异，然后应用变化。

vdom导出两个函数：

h: 创建一个新的虚拟节点
patch：比较两个虚拟节点，并应用差异，更新视图。

当然owl的大部分方法源码都是在owl.js文件中的，addons\web\static\lib\owl\owl.js位置，

执行解析的部分，owl都帮你做了~

本期内容比较简单，就到此啦！下一期我们会详解API，敬请期待哦

公众号后台回复Odoo，加入Odoo技术交流群。

手把手带你学会Odoo OWL组件开发（5）：浅析OWL原理相关推荐

手把手带你学会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):核 ...
视频教程-手把手带你学会python爬虫-Python
手把手带你学会python爬虫曾在某大型公司大型互联网任职多年,在公司主要从事移动端开发.全栈开发.主要技术栈是Android.Java.Python.爬虫.Linux等等. 赵庆元 ¥99.00 ...
一分钟带你了解Huawei LiteOS组件开发指南
摘要:本文将基于Huawei LiteOS系统,从组件定义开始带你走进组件开发指南. 本文分享自华为云社区<一分钟带你了解Huawei LiteOS之组件开发指南>,作者: Lionlac ...
手把手带你分解 Vue 倒计时组件
大家好,我是漫步,今天来分享一个Vue 组件的内部,喜欢记得关注我并设为星标. 一.前言前端开发博客入职的第一个需求是跟着一位前端大佬一起完成的一个活动项目. 由于是一起开发,当然不会放过阅读大佬 ...
给我5分钟，手把手带你学会定时任务！
一. 前言最近经常有小伙伴问辉哥,咋能快速实现定时任务呀?看了一堆Quartz.XXL-Job.Elastic-Job等,看的是眼花缭乱懵懵懂懂的,有没有更简单的方式呢?来,今天辉哥手把手地带着你学 ...
MySQL实战课程---通过录像手把手带您学会当前互联网流行架构
通过本课程,可以让您学会当前互联网流行的高可用架构搭建MHA(Master High Availability),VIP机制不采用Keepalived实现(会出现脑裂),通过修改脚本实现.以及读写分离 ...
新手运营shopee不知道如何选品？手把手带你学会，成为选品达人！
shopee最近的爆火,引来了许多新手商家入驻,导致很多人都不知道如何选品,不少人都有疑问,为什么店铺经营这么久没有什么流量呢? 很重要的原因就可能使选品没有做好,店铺运营事业的开端就是选择适合自己店 ...
手把手带你学会猜数字游戏代码编写
声明:因本人为非科班转码,个人水平有限,博客中难免有不准确之处,如有读者发现,本人恳请大家积极指出,本人也想知道自己的错误在哪里.欢迎大家一起指正,共同进步. 联系方式:3146367553@qq.c ...

手把手带你学会Odoo OWL组件开发（5）：浅析OWL原理

目录

概述

虚拟dom

手把手带你学会Odoo OWL组件开发（5）：浅析OWL原理相关推荐

最新文章

热门文章