为什么这个Twitter库会延迟其对象属性的赋值？

Question

Twitter小部件库公开了一个全局变量twttr.我想使用带有exports-loader的webpack动态模块化这个库.问题在于,当twttr变量立即暴露时,在同步访问变量时,其属性仍未定义.

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

现场演示

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

虽然Twitter文档表明这只是在异步加载库时才需要,但我怀疑除非包含在内,否则可以使用窗口小部件功能twttr.ready.

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

Answer 1

Twitter 小部件库不仅提供用于动态创建小部件的 API，还可以从 Twitter 的文档页面查找并初始化页面 \xe2\x80\x94 上的现有小部件：

\n\n

\n

默认情况下，widgets-js将在页面中查找标记并将基本的功能标记转换为丰富的交互式小部件。

\n

\n\n

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

\n\n

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

\n