addons怎样搜Java_Odoo 自定义Widgets 基础教程（章节2）

小咪咪 2022-10-23 03:59 22阅读 0赞

大家好，

本文将进一步解释odoo widget 的相关原理，其中首先会讲述：1. 什么是widgets 中的继承；2. 为什么有很多 init : function 语法；3. widgets 系统结构；

首先，让我们来看看结构：(来自 /addons/web/ 目录)

![0cbcfdc12b94a363da052ec90c9ed569.png][]

问题一：apps.js 是干啥的？

下面是 app.js 的结构：(说明见图)

![a42760a4946ab87ca0a6aedeab427c94.png][]

下面是 core 目录的结构：

![78263a98b9ca449ed3b6dc3189b4fee3.png][]

这里，我们来回答一下最开始的问题：1. 什么是widgets 中的继承；2. 为什么有很多 init : function 语法；3. widgets 系统结构；

问题1(解答)： 因为前端本来是没有继承的，所以，odoo 应用了 commonjs 规范(Javascript模块化编程"全球规范”)，这样我们在前端编程中，就可以开始使用继承与\_include() /\_extend()  等等。

问题2(解答)：这里首先要了解，mixin在javascript是什么。minxin可以看作是一种从别的对象”借用”功能的方法。每一个新定义的对象都有一个 prototype属性，其他的对象就可以从这里”借用”功能。这里的功能可以是一个属性，也可以是一个方法。

mixins这种借用在 javascript里非常的适用。在重用代码的时候可以使用mixins来实现继承，也可以达到类似多继承的效果。假设我们定义了这么一个对象：

var myMixins = \{

moveUp: function()\{ console.log( "move up" ); \},

moveDown: function()\{ console.log( "move down" ); \},

stop: function()\{ console.log( "stop! in the name of love!" ); \}

\};

我们可以非常容易的使用一个helper来扩展现有的对象。比如使用Underscore.js的extend()方法：

// carAnimator 构建器的一个骨架

function carAnimator()\{

this.moveLeft = function()\{

console.log( "move left" );

\};

// personAnimator构建器的一个骨架

function personAnimator()\{

this.moveRandomly = function()\{ /\*..\*/ \};

// 用我们的 Mixin拓展这些类

\_.extend( carAnimator.prototype, myMixins );

\_.extend( personAnimator.prototype, myMixins );

// 创建carAnimator 的新实例

var myAnimator = new carAnimator();

myAnimator.moveLeft();

myAnimator.moveDown();

myAnimator.stop();

// 输出:

// move left

// move down

// stop! in the name of love!

从代码可以看到，这个mixins实现的非常简单。在下一个例子中我们会使用两个构造函数：一个Car，一个Mixin。我们要做的就是使用一个自定义的argument方法来扩展Car，这样Car可以从Mixin里”借用”某些特定的方法。比如，driveForward()和driveBackword()。这次我们不使用Underscore.js。这里例子会非常清楚的展示argument方法是怎么达到”借用”效果的：

// 定义一个简单的 Car 构建器

var Car = function ( settings ) \{

this.model = settings.model || "no model provided";

this.color = settings.color || "no colour provided";

\};

// Mixin

var Mixin = function () \{\};

Mixin.prototype = \{

driveForward: function () \{

console.log( "drive forward" );

\},

driveBackward: function () \{

console.log( "drive backward" );

\},

driveSideways: function () \{

console.log( "drive sideways" );

\};

// 使用另一个方法扩展现有对象

function augment( receivingClass, givingClass ) \{

// 只提供某些方法

if ( arguments\[2\] ) \{

for ( var i = 2, len = arguments.length; i < len; i++ ) \{

receivingClass.prototype\[arguments\[i\]\] = givingClass.prototype\[arguments\[i\]\];

// 提供所有方法

else \{

for ( var methodName in givingClass.prototype ) \{

// 检查以确保接收类没有相同的名称

if ( !Object.hasOwnProperty(receivingClass.prototype, methodName) ) \{

receivingClass.prototype\[methodName\] = givingClass.prototype\[methodName\];

// 或者:

// if ( !receivingClass.prototype\[methodName\] ) \{

// receivingClass.prototype\[methodName\] = givingClass.prototype\[methodName\];

// \}

// Augment the Car constructor to include "driveForward" and "driveBackward"

augment( Car, Mixin, "driveForward", "driveBackward" );

// Create a new Car

var myCar = new Car(\{

model: "Ford Escort",

color: "blue"

\});

// 测试以确保我们现在可以访问这些方法

myCar.driveForward();

myCar.driveBackward();

// 输出:

// drive forward

// drive backward

// 我们还可以增加 Car 类来包含我们 mixin 中的所有方法

// 而不是仅仅监听某些加强( Car, Mixin );

var mySportsCar = new Car(\{

model: "Porsche",

color: "red"

\});

mySportsCar.driveSideways();

// 输出:

// drive sideways

Mixins可以减少代码的重复增加代码的复用。

问题3(解答)：

var MyWidget = Widget.extend(\{

// 用于渲染的QWeb模板的名称

template: "MyQWebTemplate",

init: function (parent) \{

this.\_super(parent);

// 渲染前要初始化的内容

\},

willStart: function () \{

// 在小部件准备就绪之前需要完成的异步工作

// 此方法应返回延迟

\},

start: function() \{

// 渲染后要制作的内容, \`this.$el\` 保持正确的值

this.$(".my\_button").click(/\* 事件绑定示例 \* /);

// 如果您有一些异步操作，最好在start()返回一个Promise对象，它代表了一个异步操作的最终完成或者失败

// 当然这很少见, and if you

// 如果您想获取一些数据，这个步骤可能需要在

// willStart 方法中完成

var promise = this.\_rpc(...);

return promise;

\});

[0cbcfdc12b94a363da052ec90c9ed569.png]: /images/20221022/d899156ef8b24f6fb4fa640265547bab.png
[a42760a4946ab87ca0a6aedeab427c94.png]: /images/20221022/e9d2fef669f14d3f94ee3f920ad7847f.png
[78263a98b9ca449ed3b6dc3189b4fee3.png]: /images/20221022/67c17f5893a84de9901ae41a16841fdd.png