Odoo Field Widget 入坑指南（一）

       在odoo开发中，Widget扮演着极为重要的角色，它是一切前端页面渲染功能的核心。从最基础的字段渲染到高级的页面主题渲染，odoo架构中CSS样式都是通过Widget组件来进行动态加载。因此，认识并掌握Widget工作原理是非常重要的。

      本文将从一个最简单的 Widget 框架说起，以方便读者对 Widget的理解。可以看到，一个Wdiget其实就是一组文件所构成的文件包。其中，最为重要的是里面的JavaScript文件，它是执行Widget生命周期的代码核心。

        在具体介绍JavaScript 之前，让我们看一下Widget 所包含的全部代码。一般情况下，在编写Widget 时，需要有三段代码，分别是 manifest，asset 和 JavaScript 。这三段代码，在应用加载时，将被保存到odoo的启动数据库中。也就是说，odoo 将通过 manifest了解，在启动时需要执行的代码，以及此代码所附带的JavaScript库。用户在访问odoo时，这些代码将被自动被执行，并将JavaScript绑定至前端页面中。

        接下来，让我们看一下，浏览器是如何知道，JavaScript需要执行哪一段代码的。图 4 可以看到，组件名称 “key_updown” 是由 odoo.define 所进行定义的，当用户调用此组件时，浏览器将根据这一名称执行相应的JavaScript函数。

       那么，当有很多组件存在时，为提升浏览器定位速度，实现函数的快速检索，odoo前端框架构建了一个注册表。当网页中出现函数调用时，浏览器将去注册表中寻找匹配的键值，在通过键值来找到相应的函数。这样一来，整个函数的遍历效率就得到了提升。

        同时，odoo前端框架中的继承体系，使JavaScript编程变得和Python编程一样，可通过继承方式（Widget.Extend）借用以往代码，减少冗余代码堆叠。

       对于odoo实施而言，实施人员可在不掌握具体代码编写的情况下，通过配置XML，即可执行相应的组件。

       综上，编写odoo Widget的核心是：1）定义Widget名称，让XML树状结构可以遍历到相应的函数键值；2）在注册表中，添加键值匹配，以使遍历得键值可找到相应得JavaScript函数。

        注意：odoo.difine()中的变量名称，必须与注册表键值名称一致。

下面，通过一个例子具体说明。

        为方便起见，我们将选择 monetary 挂件，进行案例来分析，此挂件的作用是在指定字段上添加一个金钱符号。

      首先，我们将XML配置文件中用于定义 monetary 组件的部分与最终此所渲染出的HTML代码进行对比。可以看到，在 XML 文件中，我们仅仅是写出了此字段所需要调用得 monetary 这个组件名称，而此组件将自动所渲染出金钱符号。在渲染出的HTML代码中，可以看到，字段的<span>标签上，已被加入了 o_field_monetary 这一个新类。

        什么情况？odoo组件的作用，是给Field添加标签属性？

        让我们进一步看看这个Monetary组件的具体定义。从JavaScript代码中可以看到，其函数主要定义了以下几个变量：1）description，也就是名称; 2）className，也就是需要被加进入标签的标签属性 “o_field_monetary”；3）tagName，也就是标签的位置。

        也就是说，odoo Widget 在JavaScript中把需要添加的标签属性、标签位置及注册表中名称都进行了详细定义。实施人员在XML中配置好组件名称后，odoo将自动匹配此名称所对应的组件，并完成HTML渲染。

       综上，本文描述了odoo Widget 组件利用JavaScript进行前端HTML渲染的基础逻辑。odoo通过注册表系统，将XML文件与前端注册表进行关联，让开发人员无需都重新编写JavaScript代码，仅仅通过模板调用，即可完成字段渲染。