【Odoo16前端源码分析】xml模板的加载

一、模板内容的来源

情况A，组件类的template属性，比如ActionContainer.template

/* odoo/addons/web/static/src/webclient/actions/action_container.js */export class ActionContainer extends Component {setup() {..}
}
..
ActionContainer.template = xml`<t t-name="web.ActionContainer"><div class="o_action_manager"><t t-if="info.Component" t-component="info.Component" className="'o_action'" t-props="info.componentProps" t-key="info.id"/></div></t>`;

情况B，组件类的同名xml文件，比如webclient.xml

<!-- /* odoo/addons/web/static/src/webclient/webclient.xml */ --><?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve"><t t-name="web.WebClient" owl="1"><t t-if="!state.fullscreen"><NavBar/></t><ActionContainer/><MainComponentsContainer/></t></templates>

二、存放模板内容的变量

情况A，存放在owl.js文件中的globalTemplates变量中

/* odoo/addons/web/static/lib/owl/owl.js */const globalTemplates = {};
function xml(...args) {const name = `__template__${xml.nextId++}`;const value = String.raw(...args);globalTemplates[name] = value;return name;
}
xml.nextId = 1;

情况B，通过app.addTemplates方法，将xml保存在TemplateSet的rawTemplates中，步骤如下

1 将各种xml文件打包到一个字符串templates中，然后调用loadXML方法处理templates

/* web.assets_backend.bundle.xml文件是由后台动态打包生成的 *//********************************************  Templates                               ********************************************/
odoo.define('web.assets_backend.bundle.xml', function(require) {'use strict';const {loadXML} = require('@web/core/assets');const templates = `<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
// xml文件的内容，做了省略处理
..
<t t-name="web.WebClient" owl="1"><t t-if="!state.fullscreen"><NavBar/></t><ActionContainer/><MainComponentsContainer/></t>
..
</templates>`;return loadXML(templates);
});

 2 设置app实例变量（注意：这里的app就是全局开始创建的唯一app实例）

/* odoo/addons/web/static/src/start.js */export async function startWebClient(Webclient) {..setLoadXmlDefaultApp(app);..
}

3 loadXML方法将templates中的xml文本，按照t-name属性提取出来，以key/value形式保存

/* odoo/addons/web/static/src/core/assets.js */let defaultApp;
/*** Loads the given xml template.** @param {string} xml the string defining the templates* @param {App} [app=defaultApp] optional owl App instance (default value*      can be changed with setLoadXmlDefaultApp method)* @returns {Promise<true>} resolved when the template xml has been loaded*/
export const _loadXML = (assets.loadXML = function loadXML(xml, app = defaultApp) {const doc = new DOMParser().parseFromString(xml, "text/xml");if (doc.querySelector("parsererror")) {throw doc.querySelector("parsererror div").textContent.split(":")[0];}for (const element of doc.querySelectorAll("templates > [t-name][owl]")) {element.removeAttribute("owl");const name = element.getAttribute("t-name");const previous = templates.querySelector(`[t-name="${name}"]`);if (previous) {console.debug("Override template: " + name);previous.replaceWith(element);} else {templates.documentElement.appendChild(element);}}if (app || defaultApp) {console.debug("Add templates in Owl app.");app.addTemplates(templates, app || defaultApp);} else {console.debug("Add templates on window Owl container.");}
});
/*** Update the default app to load templates.** @param {App} app owl App instance*/
export function setLoadXmlDefaultApp(app) {defaultApp = app;
}

三、将globalTemplates作为原型来创建this.rawTemplates属性，所以以后通过rawTemplates就能访问globalTemplates（前提是rawTemplates中没有要访问的属性时，才会访问globalTemplates，这是JS的原型链原理）

/* odoo/addons/web/static/lib/owl/owl.js */class TemplateSet {constructor(config = {}) {this.rawTemplates = Object.create(globalTemplates);this.templates = {};..if (config.templates) {this.addTemplates(config.templates);}}..
}

因为App继承TemplateSet，并且App没有定义rawTemplates属性，所以app.addTemplates操作的是TemplateSet的rawTemplates

四、后面其他功能通过app.rawTemplates获取需要的模板