补丁代码¶
有时,我们需要自定义用户界面的运行方式。许多常见的需求都通过一些支持的接口得到了覆盖。例如,所有的注册表都是良好的扩展点:字段注册表允许添加/移除专门的字段组件,或者主组件注册表允许添加应始终显示的组件。
然而,在某些情况下,这可能并不足够。在这些情况下,我们可能需要就地修改一个对象或类。为了实现这一点,Odoo 提供了实用函数 patch
。它主要用于覆盖/更新一些无法控制的组件/代码的行为。
描述¶
补丁函数位于 @web/core/utils/patch
中:
- patch(objToPatch, extension)¶
- 参数
objToPatch (
object()
) – 应被修补的对象extension (
object()
) – 一个将每个键映射到扩展的对象
- 返回
一个用于移除补丁的函数
patch
函数会就地修改objToPatch
对象(或类),并应用extension
对象中描述的所有键/值。返回一个unpatch
函数,以便在需要时稍后移除该补丁。大多数补丁操作通过使用原生的
super
关键字提供对父级值的访问(参见下面的示例)。
修补一个简单对象¶
这里是一个对象如何被修补的简单示例:
import { patch } from "@web/core/utils/patch";
const object = {
field: "a field",
fn() {
// do something
},
};
patch(object, {
fn() {
// do things
},
});
在修补函数时,我们通常希望能够访问 父
函数。为此,我们可以直接使用原生的 super
关键字:
patch(object, {
fn() {
super.fn(...arguments);
// do other things
},
});
警告
super
只能在方法中使用,而不能在函数中使用。这意味着以下结构在 JavaScript 中是无效的。
const obj = {
a: function () {
// Throws: "Uncaught SyntaxError: 'super' keyword unexpected here"
super.a();
},
b: () => {
// Throws: "Uncaught SyntaxError: 'super' keyword unexpected here"
super.b();
},
};
getter 和 setter 也受到支持:
patch(object, {
get number() {
return super.number / 2;
},
set number(value) {
super.number = value;
},
});
修补 JavaScript 类¶
patch
函数旨在与任何对象或 ES6 类一起使用。
然而,由于 JavaScript 类使用原型继承,当希望修补一个类的标准方法时,实际上需要修补 prototype
:
class MyClass {
static myStaticFn() {...}
myPrototypeFn() {...}
}
// this will patch static properties!!!
patch(MyClass, {
myStaticFn() {...},
});
// this is probably the usual case: patching a class method
patch(MyClass.prototype, {
myPrototypeFn() {...},
});
此外,JavaScript 以一种特殊的方式处理构造函数,这使得无法对其进行修补。唯一的解决方法是调用原始构造函数中的一个方法,并修补该方法代替:
class MyClass {
constructor() {
this.setup();
}
setup() {
this.number = 1;
}
}
patch(MyClass.prototype, {
setup() {
super.setup(...arguments);
this.doubleNumber = this.number * 2;
},
});
警告
无法直接修补类的 constructor
!
修补组件¶
组件由 JavaScript 类定义,因此上述所有信息仍然适用。出于这些原因,Owl 组件应使用 setup
方法,以便也能轻松进行修补(参见关于 最佳实践 的章节)。
patch(MyComponent.prototype, {
setup() {
useMyHook();
},
});
移除补丁¶
patch
函数返回其对应的对象。这在测试过程中非常有用,当我们需要在测试开始时对某部分进行打补丁,并在测试结束时取消打补丁时。
const unpatch = patch(object, { ... });
// test stuff here
unpatch();
对多个对象应用相同的补丁¶
它有可能需要将相同的补丁应用于多个对象,但由于 super
关键字的工作方式,extension
只能用于一次补丁,不能被复制/克隆(查看关键词的文档)。可以使用返回用于补丁的对象的函数来使其唯一。
const obj1 = {
method() {
doSomething();
},
};
const obj2 = {
method() {
doThings();
},
};
function createExtensionObj() {
return {
method() {
super.method();
doCommonThings();
},
};
}
patch(obj1, createExtensionObj());
patch(obj2, createExtensionObj());
警告
如果一个 extension
依赖于另一个,则应分别应用这两个扩展。不要复制/克隆扩展。
const object = {
method1() {
doSomething();
},
method2() {
doAnotherThing();
},
};
const ext1 = {
method1() {
super.method1();
doThings();
},
};
const invalid_ext2 = {
...ext1, // this will not work: super will not refer to the correct object in methods coming from ext1
method2() {
super.method2();
doOtherThings();
},
};
patch(object, invalid_ext2);
object.method1(); // throws: Uncaught TypeError: (intermediate value).method1 is not a function
const valid_ext2 = {
method2() {
super.method2();
doOtherThings();
},
};
patch(object, ext1); // first patch base extension
patch(object, valid_ext2); // then the new one
object.method1(); // works as expected