owl.utils 常用函数

目录

一、whenReady: 当 DOM 准备好时执行代码

二、oadJS: 加载脚本文件

三、loadFile: 加载文件（对模板有用）

四、escape: 清理字符串

五、debounce: 限制函数调用率

六、shallowEqual: 浅对象比较

---

owl学习

一、whenReady: 当 DOM 准备好时执行代码

当 DOM 准备好时，该函数whenReady返回已Promise解析（如果尚未准备好，则直接解析）。如果使用回调作为参数调用，它会在 DOM 准备好（或直接）后立即执行它。
l

Promise.all([loadFile("templates.xml"), owl.utils.whenReady()]).then(function ([templates]) {
  const qweb = new owl.QWeb({ templates });
  const env = { qweb };
  await mount(App, { env, target: document.body });
});

或者：

owl.utils.whenReady(function () {
  const qweb = new owl.QWeb();
  const env = { qweb };
  await mount(App, { env, target: document.body });
});

二、oadJS: 加载脚本文件

   loadJS获取 javascript 资源的 url（字符串）并加载它（通过在文档头部添加脚本标签）。它返回一个承诺，因此调用者可以在它准备好时做出正确的反应。此外，它很聪明：它维护以前加载（或当前正在加载）的 url 列表，并防止做两次工作。

例如，它对于延迟加载外部库很有用：

class MyComponent extends owl.Component {
  willStart() {
    return owl.utils.loadJS("/static/libs/someLib.js");
  }
}

三、loadFile: 加载文件（对模板有用）

    loadFile是获取文件的辅助函数。它只是执行一个GET请求并在一个 Promise 中返回结果字符串。此功能的初始用例是加载模板文件。此函数将文件的内容作为字符串返回。它不会添加script标签或任何其他作用。例如：

 async function makeEnv() {
  const templates = await owl.utils.loadFile("templates.xml");
  const qweb = new owl.QWeb({ templates });
  return { qweb };
}

四、escape: 清理字符串

有时，我们需要在用户界面中显示动态数据（例如用户生成的数据）。如果这是通过QWeb模板完成的，则不是问题：

    < div >< t  t-esc = " user.data " /></ div >

该QWeb引擎将创建一个div节点，并添加的内容user.data 字符串作为文本节点，因此Web浏览器不会分析它为HTML。但是，如果使用这样的一些 javascript 代码完成此操作，则可能会出现问题：

class BadComponent extends Component {
  // some template with a ref to a div
  // some code ...

  mounted() {
    this.divRef.el.innerHTML = this.state.value;
  }
}

在这种情况下， div的内容将被解析为 html，这可能会引起其它的行为。为了解决这个问题，该escape函数将简单地将字符串转换为相同字符串的转义版本，浏览器将正确显示该字符串，但不会将其解析为 html（例如，"<ok>"转义为字符串：）"<ok>"。因此，可以通过以下更改来修复上面的错误示例：

this.divRef.el.innerHTML = owl.utils.escape(this.state.value);

五、debounce: 限制函数调用率

debounce当我们想要限制某些功能/动作的执行次数时，该功能很有用。例如，这对于防止人们双击按钮可能很有用。

它需要三个参数：

• func (function)：这是将被速率限制的函数
• wait (number): 这是我们想要用来限制函数的毫秒数 func
• immediate(optional, boolean, default=false): 如果immediate为true，函数将立即触发（区间前沿）。如果为 false，则函数将在最后（后沿）触发。

它返回一个函数。例如：

const debounce = owl.utils.debounce;
window.addEventListener("mousemove", debounce(doSomething, 100));

六、shallowEqual: 浅对象比较

此函数检查两个对象是否为每个键分配了相同的值：

shallowEqual({ a: 1, b: 2 }, { a: 1, b: 2 }); // true
shallowEqual({ a: 1, b: 2 }, { a: 1, b: 3 }); // false

但是，出于性能原因，它假定两个对象具有相同的键。如果我们处于无法保证这一点的情况下，以下代码将起作用：

const completeShallowEqual = (a, b) => shallowEqual(a, b) && shallowEqual(b, a);