探索 Odoo 前端源码

最新推荐文章于 2024-08-21 17:15:00 发布

原创

最新推荐文章于 2024-08-21 17:15:00 发布 · 1.3k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#前端

今天我们要深入探索一段 Odoo 前端源码。这段代码看似简单，却隐藏着 Odoo 应用高效运行的秘密。我们一起来解读这段源码，了解它在 Odoo 中的作用，并教你如何正确使用它。准备好了吗？让我们开始这段奇妙之旅吧！

/** @odoo-module **/

import { registry } from "./core/registry";
import { templates } from "./core/assets";
import { App, EventBus } from "@odoo/owl";
import { _t } from "@web/core/l10n/translation";

导入模块：让我们认识一下这些好朋友

**registry**：服务注册表，负责管理所有服务的名册。
**templates**：存放各种模板的小仓库。
**App, EventBus**：来自 OWL 框架的两位大咖，负责创建应用和管理事件。
**_t**：翻译函数，能让你的应用多语言切换如同切换频道一样简单。

这些模块就像是 Odoo 应用的基石，有了它们，代码结构更加清晰，功能也更为强大。

// -----------------------------------------------------------------------------
// Types
// -----------------------------------------------------------------------------

/**
 * @typedef {Object} OdooEnv
 * @property {import("services").Services} services
 * @property {EventBus} bus
 * @property {string} debug
 * @property {(str: string) => string} _t
 * @property {boolean} [isSmall]
 */

类型定义：给大家介绍一下我们的环境

定义了一个 OdooEnv 类型，描述了环境对象的结构。这个对象包含服务、事件总线、调试信息和翻译函数等属性。让我们的代码有了更好的类型检查和代码提示，就像有了导航仪一样，写代码不迷路。

// -----------------------------------------------------------------------------
// makeEnv
// -----------------------------------------------------------------------------

/**
 * Return a value Odoo Env object
 *
 * @returns {OdooEnv}
 */
export function makeEnv() {
    return {
        bus: new EventBus(),
        services: {},
        debug: odoo.debug,
        get isSmall() {
            throw new Error("UI service not initialized!");
        },
    };
}

创建环境函数：开启魔法之门

makeEnv 函数创建并返回一个环境对象：

**bus: new EventBus()**：创建一个新的事件总线实例，有了它，事件管理更轻松。
**services: {}**：初始化一个空的服务对象，用于存储各种服务。
**debug: odoo.debug**：从全局 odoo 对象中获取调试信息，让你调试时有如神助。
**get isSmall()**：定义一个未初始化的 isSmall 属性，调用时抛出错误，提醒你 UI 服务还没初始化。

这就像是一个魔法门，一打开，整个环境就创建好了，接下来就是施展魔法的时刻。

// -----------------------------------------------------------------------------
// Service Launcher
// -----------------------------------------------------------------------------

const serviceRegistry = registry.category("services");

export const SERVICES_METADATA = {};
let startServicesPromise = null;

服务启动器：让服务活起来

**serviceRegistry**：获取服务注册表的 "services" 类别，就像一个服务的大本营。
**SERVICES_METADATA**：存储服务的元数据，记录每个服务的小档案。
**startServicesPromise**：用于管理服务启动的 Promise 对象，确保服务启动有序进行。

/**
 * Start all services registered in the service registry, while making sure
 * each service dependencies are properly fulfilled.
 *
 * @param {OdooEnv} env
 * @returns {Promise<void>}
 */
export async function startServices(env) {
    await Promise.resolve();

    const toStart = new Set();
    serviceRegistry.addEventListener("UPDATE", async (ev) => {
        await Promise.resolve();
        const { operation, key: name, value: service } = ev.detail;
        if (operation === "delete") {
            return;
        }
        if (toStart.size) {
            const namedService = Object.assign(Object.create(service), { name });
            toStart.add(namedService);
        } else {
            await _startServices(env, toStart);
        }
    });
    await _startServices(env, toStart);
}

启动服务函数：发动引擎

startServices 函数用于启动所有注册的服务：

**await Promise.resolve()**：确保所有同步代码执行完毕，等一等，不急。
**const toStart = new Set()**：创建一个集合，用于存储需要启动的服务，集合里的服务整装待发。
**serviceRegistry.addEventListener("UPDATE", async (ev) => {...})**：为服务注册表添加事件监听器，当服务更新时触发，新的服务来啦！
**const { operation, key: name, value: service } = ev.detail**：获取事件的详细信息，知道服务的来龙去脉。
**if (operation === "delete") { return; }**：如果操作是删除，不处理。
**const namedService = Object.assign(Object.create(service), { name });**：创建一个包含名称的服务实例，让服务有名字有身份。
**toStart.add(namedService);**：将服务添加到待启动集合，准备好要启动了。
**await _startServices(env, toStart);**：启动服务，正式发动引擎。

async function _startServices(env, toStart) {
    if (startServicesPromise) {
        return startServicesPromise.then(() => _startServices(env, toStart));
    }
    const services = env.services;
    for (const [name, service] of serviceRegistry.getEntries()) {
        if (!(name in services)) {

最低0.47元/天解锁文章