大家好，

此次，我們主要講解 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) {}

大同小異，最後三種方法留給大家去探索。