javascript - 为什么这个 Twitter 库会延迟其对象属性的分配？

Question

The Twitter widget library公开一个全局变量 twttr。我想使用 webpack 和 exports-loader 动态地模块化这个库。问题是，虽然立即公开了 twttr 变量，但在同步访问它时它的属性仍然未定义。

console.log(twttr.widgets); // undefined 
setTimeout(function() {
  console.log(twttr); // now defined
});

Live Demo

因此，var twttr = require('exports?twttr!./path/to/twitter') 将返回一个实际上尚未准备好使用的对象。

虽然 Twitter 文档建议只有在异步加载库时才需要这样做，但我怀疑除非包装在 twttr.ready 中才能使用小部件函数。

至少 webpack 提供了一种更好的方式来加载库和访问 twttr。我怀疑奇怪的行为是由于这个脚本来自模块系统不存在且 SRP 被忽略的时代。尽管如此，我还是很好奇开发人员做了什么导致了这种行为，我试图阅读经过美化、缩小的源代码的尝试被证明是愚蠢的。

Answer 1

Twitter 小部件库不仅提供用于动态创建小部件的 API，还可以查找和初始化页面上的现有小部件 — 来自 Twitter 的 documentation page :

By default, widgets-js will find mark-up in a page and convert basic, functional mark-up into rich interactive widgets.

为此，它必须扫描 DOM 并将匹配的节点替换为 iframe-s，其标记是从 Twitter 请求的(本质上是异步任务)。

我想，作者认为现有小部件的初始化可能需要时间，因此打算完全异步进行。现在，当库在页面上搜索尚未初始化的小部件并更新它们时，允许开发人员动态添加新小部件可能会导致一些并发问题。例如，很容易想象请求的重复:库初始化程序可以找到 API 添加的小部件并尝试初始化它，而 API 已经向 Twitter 发送了请求 iframe 的代码。 “我们如何防止这种情况发生？”的最简单答案将在库处理现有小部件时对客户端隐藏 API。