odoo javascript参考(一)

本文档介绍了 Odoo Javascript 框架，这个框架不算是个大的框架，但它很通用。因为它基本上是一台将声明式接口描述转化为实时应用程序的机器，能够与数据库中的每个模型和记录进行交互。甚至可以用web client去修改web client的接口。
一、概述
Javascript 框架旨在处理三个主要用例：
web client:本地web程序，可以浏览和编辑业务数据，它是单页面程序（只加载一次，以后则只在需要的时候更新页面上的数据和内容）
网站：Odoo的公共部门. 允许一个未注册的用户查看网页内容，购物或执行许多操作. 带有控制器和一些javascript的各种路由。
销售点: 特殊的单网页应用程序。
web client
单页面应用程序。
简而言之, webClient, WebClient实例是整个用户界面的根组件。它的职责是协调各种类型的子组件,并提供服务，例如RPCS，本地存储等。
在运行时, 它管理url：它与web客户端状态保持同步
这意味着当一个用户在用ODOO工作的时候，WEB CLIENT类（包括动作管理器）事实上创建和释放许多子组件，状态是调试动态的，并且每个widget会被随时释放。
web client JS代码概述
在这里,我们快速浏览，代码在 web/static/src/js 模块中.关健部分：
boot.js: 系统模块. 会被预调用.
core/: 底层代码. 尤其是, 它包括类系统，widget 系统, 并发应用程序, 和其他一些类或功能.
chrome/: 在这个目录中, 有大型的widgets，它们构成了用户大部分的界面。
chrome/abstract_web_client.js 和 chrome/web_client.js: 它们一起，定义了 WebClient widget, 是web client的根widget.
chrome/action_manager.js: 这是将动作转换为小部件的代码 (例如看板或form视图)
chrome/search_X.js 构成了SEARCH视图，all these files define the search view (它不是web client端的视图。)
fields: 所有主要的视图字段 widget在这里定义
views: 本地视图
如果一个文件没有被加载或修改该如何处理？
好多原因造成文件没有被完整加载，可以按下面方法操作：
1）当服务已经运行，不确定asset是否被修改，可以重启服务重新加载。
2）检查控制台（F12）看是否有明显的错误
3）试着用console.log() 看文件是否被加载
4）当在DEBUG模式下，when in any debug mode, 有一个选择在DEBUG管理菜单中， (bug icon)强制服务去更新assets文件.
5）使用debug=assets模式.
最后, 最实用的方法,对一个开发者开说 ，加参重启服务 –dev=all 。 这将激活文件观察程序选项, 在必要时自动置asset失效. 注意在WINDOWS下效果不佳.
注意刷新页面以及保存你的代码文件。
加载JAVASCRIPT代码
大型应用程序通常被分解成较小的文件, 然后把它们连接在一起. 它们之间需要关联. 有两种方法可以在文件间共享代码:
1）模块依赖。
2）使用import/export
类系统
创建一个子类：
主要机制是使用extend方法（这或多或少相当于ES6类中的extend）

var Class = require('web.Class');

var Animal = Class.extend({
    init: function () {
        this.x = 0;
        this.hunger = 0;
    },
    move: function () {
        this.x = this.x + 1;
        this.hunger = this.hunger + 1;
    },
    eat: function () {
        this.hunger = 0;
    },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在这个例子中, init 功能即 constructor.它将被调用当一个实例在创建的时候. 使用NEW关键字创建实例。
继承
继承一个已经存在的类非常实用. 可以轻松地使用父类的方法. 当一个方法被调用, 框架将秘密地将一个特别的方法: _super 绑定到父方法. 可以通过使用 this._super 去调用父级方法.

var Animal = require('web.Animal');

var Dog = Animal.extend({
    move: function () {
        this.bark();
        this._super.apply(this, arguments);
    },
    bark: function () {
        console.log('woof');
    },
});

var dog = new Dog();
dog.move()
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Mixins
odoo类系统不支持多重继承，但对于那些需要共享某些行为的情况，我们有一个mixin系统：extend方法实际上可以接受任意数量的参数，并将所有参数组合到新类中。

var Animal = require('web.Animal');
var DanceMixin = {
    dance: function () {
        console.log('dancing...');
    },
};

var Hamster = Animal.extend(DanceMixin, {
    sleep: function () {
        console.log('sleeping');
    },
});
1
2
3
4
5
6
7
8
9
10
11
12

在这个例子中，Hamster类是Animal的子类，但它也混合了DanceMimin在里面。
修改一个已经存在的类
这种情况交不常见，但我们有时需要去修改另外一个类。目标是建立一种机制去改变类的所有特征或当前实例。这个目标可以通过include方法实现。

var Hamster = require('web.Hamster');

Hamster.include({
    sleep: function () {
        this._super.apply(this, arguments);//
        console.log('zzzz');
    },
});
1
2
3
4
5
6
7
8

这显然是一个危险的操作，应小心操作. 但是根据Odoo的结构，有时需要在一个插件中修改在另一个插件中定义的小部件/类。注意，它将修改类的所有实例，即使它们已经创建。

Widgets
widget类是一个关于用户界面非常重要的组成部分，差不多界面的每个部分都是一个widget，它通过web.Widget创建，代码在web.Widget里。
长话短说，Widget class包含的功能有：

parent/child relationships between widgets (PropertiesMixin)
小部件之间的父/子关系（PropertiesMixin）

extensive lifecycle management with safety features (e.g. automatically destroying children widgets during the destruction of a parent)
具有安全功能的广泛生命周期管理（例如，在销毁父窗口期间自动销毁子窗口小部件）

automatic rendering with qweb
用qwb自动渲染

various utility functions to help interacting with the outside environment.
帮助与外部环境交互的各种实用功能
计数器widget例子:

var Widget = require('web.Widget');
var Counter = Widget.extend({
    template: 'some.template',
    events: {
        'click button': '_onClick',
    },
    init: function (parent, value) {
        this._super(parent);
        this.count = value;
    },
    _onClick: function () {
        this.count++;
        this.$('.val').text(this.count);
    },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在这个例子中，需要的模板：

<div t-name="some.template">
    <span class="val"><t t-esc="widget.count"/></span>
    <button>Increment</button>
</div>
1
2
3
4

这样用：
// Create the instance
var counter = new Counter(this, 4);
// Render and insert into DOM
counter.appendTo(“.some-div”);
该示例演示了小部件类的一些功能，包括事件系统、模板系统、具有初始父参数的构造函数。
Widget 生命周期
像许多组件系统一样, widget类具有一个良好的生命周期. 如: init 被调用, 然后 willStart, 再进行渲染, 再启动直到最终销毁.

**Widget.init(parent)**初始化
是constructor. 它支持初始化widget的初始功能。可以重写以从小部件的创建者/父对象获取更多参数.

参数
parent (Widget()) –他是新部件的父部件，用于处理自动销毁和事件传播. 如果没有可以置空。
Widget.willStart() 预启动
当一个widget被创建被加入到DOM上时，willStart这个方法会被框架调用,它是个钩子并返回一个promise。JS框架将等待这一promise完成，然后再继续渲染步骤
注意，此时，Widget还没有一个DOM根元素，willStart钩子通常处理一些异步操作，如从服务中获取数据
Rendering 渲染
这个步骤会被框架自动执行. 框架会检查widget上是否定义了模板. 如果是, 则渲染相应模板.如果没有,系统将读取 tagName 关键字并建立一个对应的DOM元素，渲染完成时，我们将结果设置为widget的$el属性. 然后, 绑定相应事件.

**Widget.start()**启动
当渲染完成，框架自动调用start方法，这对于执行一些专门的后期渲染工作非常有用，完成时返回一个promise
Returns promise

**Widget.destroy()**销毁
这是widget生命周期的最后一步. 执行的操作：1、从组件库移除widget，解绑所有的事件。
当小部件的父部件被销毁时自动调用，如果小部件没有父部件，或者如果小部件被删除但其父部件仍然存在，则必须显式调用

注意：willStart和start方法不是必须调用的.一个widget被创建（init方法被自动调用），销毁时（销毁方法被调用）。