odoo16前端框架源码阅读——boot.js

2023-11-11 11:44

本文主要是介绍odoo16前端框架源码阅读——boot.js,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

odoo16前端框架源码阅读——boot.js

从名字就能看出来,这个文件是一个启动文件。 odoo前端将所有的js打包成了两个文件,一个是common.js,另一个是backend.js, 而common.js 是最先加载的

在common.js打包的js文件中最先加载的是下面的文件,看名字就就知道这是为了兼容性,应该不重要。

/* /web/static/src/legacy/js/promise_extension.js */

第二个文件就是boot.js, 这个文件非常重要,从名字就能看出来,是一个启动文件

/* /web/static/src/boot.js */

odoo自定义了一个小型的模块系统,用于管理各odoo模块中的前端代码,并自行解决各代码之间的依赖关系。相关代码在addons/web/static/src/js/boot.js中,所以这个资源文件是需要第一个加载的文件。

boot.js在启动时,会创建一个全局的变量’odoo’,该变量有几个预设的函数,用于管理每个javascript模块。每个js模块其实就是一段代码,具有名称或者可能的依赖关系。

 if (!globalThis.odoo) {globalThis.odoo = {};}var odoo = globalThis.odoo;

定义了一个全局变量odoo,这里提一下globalThis,这是为了兼容node环境和浏览器环境而创造出的js环境下的顶层对象,在浏览器环境下跟window对象是一样的。

然后定了odoo对象的一些属性和函数,最常见的就是odoo.define

 odoo.define = function () {var args = Array.prototype.slice.call(arguments);var name = typeof args[0] === "string" ? args.shift() : "__odoo_job" + jobUID++;var factory = args[args.length - 1];var deps;if (args[0] instanceof Array) {deps = args[0];} else {deps = [];factory.toString().replace(commentRegExp, "").replace(cjsRequireRegExp, function (match, dep) {deps.push(dep);});}if (!(deps instanceof Array)) {throw new Error("Dependencies should be defined by an array", deps);}if (typeof factory !== "function") {throw new Error("Factory should be defined by a function", factory);}if (typeof name !== "string") {throw new Error("Invalid name definition (should be a string", name);}if (name in factories) {throw new Error("Service " + name + " already defined");}factory.deps = deps;factories[name] = factory;let promiseResolve;const promise = new Promise((resolve) => {promiseResolve = resolve;});jobs.push({name: name,factory: factory,deps: deps,resolve: promiseResolve,promise: promise,});deps.forEach(function (dep) {jobDeps.push({ from: dep, to: name });});odoo.__DEBUG__.processJobs();};

这个函数是定义odoo前端模块的函数。它可以有两个或者三个参数

两个参数,在模块中定义依赖关系。

odoo.define('module.A', function (require) {"use strict";var A = ...;return A;});odoo.define('module.B', function (require) {"use strict";var A = require('module.A');var B = ...; // something that involves Areturn B;});

上面的odoo.define()用于标准的odoo定义前端js模块的函数,第一个参数表示这个模块的名称,如果后面没有其它地方继承此js模块,也可以不用取名。第二个参数是一个匿名函数,传入参数为require,这个函数就是实际的js业务代码。如果你想引用其它的js模块,可以通过require(‘module.A’)的语法引入。这里的require名称是固定的,不能改变。另外odoo.define()也提供了一种显式的依赖定义方法,如:

odoo.define('module.Something', ['module.A', 'module.B'], function (require) {"use strict";var A = require('module.A');var B = require('module.B');// some code});

从上面的实例中,我们可以看出odoo.define()函数有三个参数:

  • moduleName:javascript模块的名称。它应该是一个唯一的字符串。约定是odoo插件的名称,后跟一个特定的描述。例如"web.Widget"描述了在Web插件中定义的模块,该模块导出Widget类(因为首字母大写),如果名称不是唯一的,则将引发异常并将其显示在控制台中。如果你定义的时候,没有此参数,则系统会自动生成一个带时间戳的唯一名称;
  • dependencies:第二个参数是可选的。如果给出的话,它应该是一个字符串列表,每个字符串对应一个javascript模块名称。这描述了执行模块之前需要加载的依赖项。如果此处未明确给出依赖项,则模块系统将通过在函数上调用toString,然后使用正则表达式查找所有require语句,从函数中提取它们;
  • function:最后一个参数是定义模块的函数。它的返回值是模块的值,可以将其传递给需要它的其他模块。请注意,异步模块有一个小例外,下面会讲到。

在Odoo中,有可能模块在准备好之前需要执行一些工作。例如,它可以执行rpc加载一些数据。在这种情况下,模块简单地返回一个Promise。 这时,在注册模块之前模块系统将仅等待Promise完成。

参考 https://www.cnblogs.com/pythonClub/p/17305994.html

这篇关于odoo16前端框架源码阅读——boot.js的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/389821

相关文章

Go中sync.Once源码的深度讲解

《Go中sync.Once源码的深度讲解》sync.Once是Go语言标准库中的一个同步原语,用于确保某个操作只执行一次,本文将从源码出发为大家详细介绍一下sync.Once的具体使用,x希望对大家有... 目录概念简单示例源码解读总结概念sync.Once是Go语言标准库中的一个同步原语,用于确保某个操

Vue项目中Element UI组件未注册的问题原因及解决方法

《Vue项目中ElementUI组件未注册的问题原因及解决方法》在Vue项目中使用ElementUI组件库时,开发者可能会遇到一些常见问题,例如组件未正确注册导致的警告或错误,本文将详细探讨这些问题... 目录引言一、问题背景1.1 错误信息分析1.2 问题原因二、解决方法2.1 全局引入 Element

详解如何在React中执行条件渲染

《详解如何在React中执行条件渲染》在现代Web开发中,React作为一种流行的JavaScript库,为开发者提供了一种高效构建用户界面的方式,条件渲染是React中的一个关键概念,本文将深入探讨... 目录引言什么是条件渲染?基础示例使用逻辑与运算符(&&)使用条件语句列表中的条件渲染总结引言在现代

详解Vue如何使用xlsx库导出Excel文件

《详解Vue如何使用xlsx库导出Excel文件》第三方库xlsx提供了强大的功能来处理Excel文件,它可以简化导出Excel文件这个过程,本文将为大家详细介绍一下它的具体使用,需要的小伙伴可以了解... 目录1. 安装依赖2. 创建vue组件3. 解释代码在Vue.js项目中导出Excel文件,使用第三

Java实现Excel与HTML互转

《Java实现Excel与HTML互转》Excel是一种电子表格格式,而HTM则是一种用于创建网页的标记语言,虽然两者在用途上存在差异,但有时我们需要将数据从一种格式转换为另一种格式,下面我们就来看看... Excel是一种电子表格格式,广泛用于数据处理和分析,而HTM则是一种用于创建网页的标记语言。虽然两

JAVA系统中Spring Boot应用程序的配置文件application.yml使用详解

《JAVA系统中SpringBoot应用程序的配置文件application.yml使用详解》:本文主要介绍JAVA系统中SpringBoot应用程序的配置文件application.yml的... 目录文件路径文件内容解释1. Server 配置2. Spring 配置3. Logging 配置4. Ma

vue解决子组件样式覆盖问题scoped deep

《vue解决子组件样式覆盖问题scopeddeep》文章主要介绍了在Vue项目中处理全局样式和局部样式的方法,包括使用scoped属性和深度选择器(/deep/)来覆盖子组件的样式,作者建议所有组件... 目录前言scoped分析deep分析使用总结所有组件必须加scoped父组件覆盖子组件使用deep前言

VUE动态绑定class类的三种常用方式及适用场景详解

《VUE动态绑定class类的三种常用方式及适用场景详解》文章介绍了在实际开发中动态绑定class的三种常见情况及其解决方案,包括根据不同的返回值渲染不同的class样式、给模块添加基础样式以及根据设... 目录前言1.动态选择class样式(对象添加:情景一)2.动态添加一个class样式(字符串添加:情

解决mybatis-plus-boot-starter与mybatis-spring-boot-starter的错误问题

《解决mybatis-plus-boot-starter与mybatis-spring-boot-starter的错误问题》本文主要讲述了在使用MyBatis和MyBatis-Plus时遇到的绑定异常... 目录myBATis-plus-boot-starpythonter与mybatis-spring-b

Java汇编源码如何查看环境搭建

《Java汇编源码如何查看环境搭建》:本文主要介绍如何在IntelliJIDEA开发环境中搭建字节码和汇编环境,以便更好地进行代码调优和JVM学习,首先,介绍了如何配置IntelliJIDEA以方... 目录一、简介二、在IDEA开发环境中搭建汇编环境2.1 在IDEA中搭建字节码查看环境2.1.1 搭建步