大家好，

此次，我们主要讲解 Odoo 中的Widgets。

网上、论坛里很多提及Widget的文章，但很少说Odoo自定义Widget 是如何实现的，这一直是大家所苦恼的地方。本章，将对Odoo中的Widget 进行基础讲解。

首先， Widget【挂件】产生的目的，是为了方便后端开发人员在不熟悉JavaScripts 的情况下，能快速地实现前端视图展示。

我们来看看Widget 所在的目录：

/addons/web/src/static/src/js/core/widget.js

其次，要理解Widget 原理，就是通过js把现有视图或者DOM一类对象进行渲染。所有代码都在前端！就是说，视图是通过客户端来渲染完成的！

这里最核心的一段代码：

var Widget = core.Class.extend(mixins.PropertiesMixin, ServicesMixin,{ 

.......定义各种方法.......

}

方法说明及解释如下：

init: function (parent)
构造部件并设置父节点；

*父节点的意义在于将当前实例绑定到给定的小部件实例。可以为空。当通过调用destroy方法时，当此挂件实例将被摧毁。

willStart: function ()
方法在“初始化 init”和“开始”之间调用。执行渲染和启动方法所需的异步调用。

destroy: function ()
摧毁当此挂件实例

appendTo: function (target)
渲染当前的小部件并将其附加到给定的jQuery对象或控件上。
target 为jQuery对象或控件实例。

prependTo: function (target) {},
渲染当前的小部件并将其预置到给定的jQuery对象或控件上。
target 为jQuery对象或控件实例。
append()和prepend()的作用（区别）

append()用于在被选元素的结尾插入元素。
prepend()用于在被选元素的开头插入元素。

看下面的HTML代码

<div id="test">
  <p>a</p>
</div>

使用 append( ) 和 prepend( )添加元素

$(document).ready(function(){
    $("#test").append("<p>b</p>") //使用append()添加 b 段落
    $("#test").prepend("<p>c</p>") //使用 prepend()添加 c 段落
})

效果如下

<div id="test">
<p>c</p>
<p>a</p>
<p>b</p>
</div>

insertAfter: function (target) { },

insertAfter()函数用于将所有匹配元素插入到指定元素之后的位置：

<p>段落文本1<span></span></p>
<p>段落文本2<span></span></p>

<!--以上是jQuery代码执行前的html内容-->
<script type="text/javascript">
$('<!--插入到p元素之后的位置-->').insertAfter( "p" );
// 其返回值就是匹配插入内容(两个注释元素'<!--插入到p元素之后的位置-->')的jQuery对象
</script>
<!--以下是jQuery代码执行后的html内容-->

<p>段落文本1<span></span></p><!--插入到p元素之后的位置-->
<p>段落文本2<span></span></p><!--插入到p元素之后的位置-->

insertBefore: function (target) { }

insertBefore()函数用于将所有匹配元素插入到指定元素之前的位置：

<p>段落文本1<span></span></p>
<p>段落文本2<span></span></p>

<!--以上是jQuery代码执行前的html内容-->
<script type="text/javascript">
$('<!--插入到p元素之前的位置-->').insertBefore( "p" );
// 其返回值就是匹配插入内容(两个注释元素'<!--插入到p元素之前的位置-->')的jQuery对象
</script>
<!--以下是jQuery代码执行后的html内容-->

<!--插入到p元素之前的位置--><p>段落文本1<span></span></p>
<!--插入到p元素之前的位置--><p>段落文本2<span></span></p>

attachTo: function (target) { }
将当前挂件附加到DOM元素上
【这也是odoo field中添加 widgets 后，可以对字段进行渲染的核心】

var self = this;
        this.setElement(target.$el || target);
        return this.willStart().then(function () {
            return self.start();
        });

replace: function (target) {}
渲染当前窗口挂件并替换给定的jQuery对象

start: function () {}

此方法一般是在渲染完成后调用。主要用于绑定动作，执行异步操作，调用动作等。

一般来说，此方法应该返回一个可以传递到$.when()的对象来通知调用方这个小挂件已经初始化

renderElement: function () {},
replaceElement: function ($el) { }
setElement: function (element) {}

大同小异，最后三种方法留给大家去探索。