文档章节

Odoo 自定义Widgets 基础教程(章节2)

openerp
 openerp
发布于 05/27 12:45
字数 1082
阅读 19
收藏 0

大家好,

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

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

openerphk

问题一:apps.js 是干啥的?

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

下面是 core 目录的结构:

 

这里,我们来回答一下最开始的问题: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.jsextend()方法:

// 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;
           }
       });

 

© 著作权归作者所有

openerp
粉丝 1
博文 6
码字总数 5938
作品 0
成都
其他
私信 提问
Odoo 自定义Widgets 基础教程(章节1)

大家好, 此次,我们主要讲解 Odoo 中的Widgets。 网上、论坛里很多提及Widget的文章,但很少说Odoo自定义Widget 是如何实现的,这一直是大家所苦恼的地方。本章,将对Odoo中的Widget 进行基...

asdasasas
2018/07/11
0
0
Odoo开发文档-教程-主题教程

Odoo崇尚自由,基于自身需求,设计者拥有更长足的自由,而用户拥有任意定制的自由。 准备好创建您自己的主题了吗?好的,这里是一些开始前您必须要了解的内容。这个教程是创建一个Odoo主题的...

临江仙卜算子
2018/08/14
0
0
Canvas 上制作在线绘图应用的核心基础文件--Visor.js

Visor.core.js 基于jQuery的,在Canvas上制作在线绘图应用的核心基础文件. 它支持鼠标的拖拽移动,伸缩,旋转和各种事件,该文件里定义了两个基础对象 widgets 和 presenter。 1、widgets对象是...

沧海-ZHA
2017/03/07
336
0
tony zhou/Visor.js

#Visor.js Visor.core.js 基于JQUERY的,在Canvas上制作在线绘图应用的核心基础文件. 它支持鼠标的拖拽移动,伸缩,旋转和各种事件,该文件里定义了两个基础对象 widgets 和 presenter。 1、wid...

tony zhou
2017/03/07
0
0
安装Odoo(翻译)

翻译者注: 翻译本文的目的是为了安装Odoo 9.0。本文所描述的安装CentOS为7.x,请注意。本人测试了Aliyun CentOS 7.2的RPM安装过程。 正文 这里有若干方式安装Odoo,或者不完整安装依赖的用户...

抢小孩糖吃
2016/08/16
92
2

没有更多内容

加载失败,请刷新页面

加载更多

火焰图(flame graph)是性能分析利器

Perf命令 Perf 命令(performance的简写)是 Linux 系统原生提供的性能分析工具,返回 CPU 正在执行的函数名以及调用栈(stack)。 通常,它的执行频率是 99Hz(每秒99次),如果99次都返回同一个...

呼呼南风
1分钟前
0
0
 好程序员大数据知识点精讲 大数据之Linux

好程序员大数据知识点精讲 大数据之Linux -Linux是什么? Linux是一套作业系统,不是应用程序Linux的基本思想有两点:第一,一切都是文件;第二,每个软件都有确定的用途。 Shell——命令行解...

好程序员IT
5分钟前
0
0
mysql 多行结合

select a1.email as email ,a1.bg ,IFNULL(a1.bg, a2.bg) from ( select * from test01 where sdate = '2019-09-11' ) a1 LEFT join (select * from test01 where sdate = '2019-09-10') a2 ......

昏鸦
7分钟前
0
0
Netflix Eureka 续约 & 更新注册表信息

Eureka Client 要定期的向 Eureka Server 发送心跳请求以保持续约的状态。 也需要定期的从 Eureka Server 获取服务注册表数据,并将服务注册表数据缓存在客户端实例内。 Eureka Client 续约 ...

BryceLoski
10分钟前
1
0
IT兄弟连 Java语法教程 Java开发环境 JVM、JRE、JDK

要想开发Java程序,就需要知道什么是JVM、JRE以及JDK。JVM是运行Java程序的核心,JRE是支持Java程序运行的环境,而JDK是Java开发的核心,下面我们分别具体介绍它们以及它们之间的关系。 1.J...

老码农的一亩三分地
19分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部