Question

我正在构建一个应该异步加载的javascript小部件。

问题是页面上可能有多个这样的小部件，并且应该通过{}向它发送一个选项数组来初始化小部件。

实现这一目标的最佳方法是什么？我听说简单地设置onload或onreadystatechange并不适用于所有浏览器。

我已经查看了digg小部件，但我无法理解他们正在做什么，有人可以看看吗？

以下是他们的一些代码：

(function () {
var s, s1, diggWidget = {
    id: "digg-widget-1282651415272",
    width: 300,
    display: "tabbed"
};
if (window.DiggWidget) {
    if (typeof DiggWidget == 'function') {
        new DiggWidget(diggWidget);
    } else {
        DiggWidget.push(diggWidget);
    }
} else {
    DiggWidget = [diggWidget];
    s = document.createElement('SCRIPT');
    s.type = 'text/javascript';
    s.async = true;
    s.src = 'http://widgets.digg.com/widgets.js';
    s1 = document.getElementsByTagName('SCRIPT')[0];
    s1.parentNode.insertBefore(s, s1);
}
})();

因此，如果DiggWidget已经可用（由于多个实例而早先加载），如果DiggWidget是一个函数，它会生成一个新的小部件，否则DiggWidget将用作数组并将当前设置推送到它。

首先，为什么DiggWidget会成为一个功能？

如果窗口小部件是唯一的（或第一个），则异步添加脚本标记，不定义回调。

然后，看看widgets.js他们这样做：

在顶部：

(function () {
var A;
if (window.DiggWidget) {
    if (typeof DiggWidget != "function") {
        A = DiggWidget
    } else {
        return
    }
}

在底部：

    if (A) {
    while (A.length) {
        new DiggWidget(A.shift())
    }
}

现在我不太明白这一点。 DiggWidget（数组）可用于.js吗？这是一个匿名函数。所以，如果我两次包含这样的脚本，DiggWidget不会每次都成为新的实例吗？

或者我完全错了吗？对不起如果是的话如果有更好的方法来回调多个脚本实例，请告诉我们。

Answer 1

首先，为什么DiggWidget会成为一个功能？

当异步脚本加载并执行

时，它将成为一个函数

DiggWidget（数组）是否可用于.js

是的，window.DiggWidget是全局的，因此该脚本可以使用。

小部件的工作方式非常简单。

如果尚未加载DiggWidget脚本，则window.DiggWidget将不是一个函数。最初它将是一个未定义的变量，所以else阻止

} else {
    DiggWidget = [diggWidget];

执行并将其定义为数组。从现在开始直到加载小部件脚本，它将被定义为数组。

现在，直到DiggWidget脚本异步加载为止，继续将所有初始化对象{..}推送到同名的数组window.DiggWidget。

当加载脚本时，在它超过全局DiggWidget变量之前，它会看到该数组中的对象，并将其安全地记录在其他地方。然后接管DiggWidget名称，遍历每个对象，并为每个对象初始化小部件。

这是用注释注释的完整嵌入代码。

用户代码

(function () {
var s, s1, diggWidget = {
    id: "digg-widget-1282651415272",
    width: 300,
    display: "tabbed"
};
// either the external widget script has already loaded, or there is more than
// one widget to be embedded on the page, and the previous widget's embed code
// defined this variable
if (window.DiggWidget) {
    // the external widget script has been loaded asynchronously 
    // because DiggWidget is a function. Can directly create a new object.
    if (typeof DiggWidget == 'function') {
        new DiggWidget(diggWidget);
    }
    // a previous widget's embed code defined this global array. Remember the
    // widgets initialization settings for when the external script loads.
    else {
        DiggWidget.push(diggWidget);
    }
}
// the external widget script has not loaded yet and
// this is the first widget ever to be embedded on the page
else {
    // DiggWidget does not exist at this point. So make it an array
    // and store the first widget's config object in it
    DiggWidget = [diggWidget];
    s = document.createElement('SCRIPT');
    s.type = 'text/javascript';
    s.async = true;
    s.src = 'http://widgets.digg.com/widgets.js';
    s1 = document.getElementsByTagName('SCRIPT')[0];
    s1.parentNode.insertBefore(s, s1);
}
})();

小部件代码（在顶部）

(function () {
var A;
// global DiggWiget is defined. it will either be an array if 
// the widget code hasn't loaded yet, or a function if it has
if (window.DiggWidget) {
    // it's an array, so keep that array somewhere safe
    // because we are gonna take over the DiggWidget variable purdy soon
    if (typeof DiggWidget != "function") {
        A = DiggWidget
    }
    // window.DiggWidget must be a function
    // there is no widget to initialize, just return
    else {
        return
    }
}

（在底部）

    // A is the array of widget settings we backed up a little earlier
    if (A) {
    // loop through each config object and create the actual
    // widget object
    while (A.length) {
        new DiggWidget(A.shift())
    }
}

异步加载javascript - 如何进行回调？

1 个答案:

用户代码

小部件代码（在顶部）

（在底部）