Odoo 自定义Widgets 基础教程（章节1）
大家好，
此次，我们主要讲解 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) {}
大同小异，最后三种方法留给大家去探索。