10

我一直在剖析以下代码片段，它用于异步加载Segment.io分析包装脚本：

// Create a queue, but don't obliterate an existing one!
var analytics = analytics || [];

// Define a method that will asynchronously load analytics.js from our CDN.
analytics.load = function(apiKey) {

    // Create an async script element for analytics.js.
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.async = true;
    script.src = ('https:' === document.location.protocol ? 'https://' : 'http://') +
                  'd2dq2ahtl5zl1z.cloudfront.net/analytics.js/v1/' + apiKey + '/analytics.min.js';

    // Find the first script element on the page and insert our script next to it.
    var firstScript = document.getElementsByTagName('script')[0];
    firstScript.parentNode.insertBefore(script, firstScript);

    // Define a factory that generates wrapper methods to push arrays of
    // arguments onto our `analytics` queue, where the first element of the arrays
    // is always the name of the analytics.js method itself (eg. `track`).
    var methodFactory = function (type) {
        return function () {
            analytics.push([type].concat(Array.prototype.slice.call(arguments, 0)));
        };
    };

    // Loop through analytics.js' methods and generate a wrapper method for each.
    var methods = ['identify', 'track', 'trackLink', 'trackForm', 'trackClick',
                   'trackSubmit', 'pageview', 'ab', 'alias', 'ready'];

    for (var i = 0; i < methods.length; i++) {
        analytics[methods[i]] = methodFactory(methods[i]);
    }
};

// Load analytics.js with your API key, which will automatically load all of the
// analytics integrations you've turned on for your account. Boosh!
analytics.load('MYAPIKEY');

它的注释很好，我可以看到它在做什么，但是当涉及到函数时我很困惑，它会methodFactory在主analytics.js脚本加载到全局analytics数组之前推送任何方法调用的详细信息（方法名称和参数）。

这一切都很好，但是如果/当主脚本确实加载时，它似乎只是覆盖了全局analytics变量（请参见此处的最后一行），因此所有数据都将丢失。

我看到这如何通过存根不存在的方法来防止网页中的脚本错误，但我不明白为什么存根不能只返回一个空函数：

var methods = ['identify', 'track', 'trackLink', 'trackForm', 'trackClick',
               'trackSubmit', 'pageview', 'ab', 'alias', 'ready'];

for (var i = 0; i < methods.length; i++) {
    lib[methods[i]] = function () { };
}

我错过了什么？请帮我理解！

4

1 回答 1

28

Ian，Segment.io 的联合创始人——我实际上并没有编写代码，Calvin 做了，但我可以告诉你它在做什么。

你是对的，这methodFactory是对方法进行存根，以便它们在脚本加载之前可用，这意味着人们可以analytics.track在不将这些调用包装在ifor调用中的情况下ready()调用。

但是这些方法实际上比“哑”存根更好，因为它们保存了被调用的方法，因此我们可以稍后重播这些操作。就是这部分：

analytics.push([type].concat(Array.prototype.slice.call(arguments, 0)));

为了使其更具可读性：

var methodFactory = function (method) {
    return function () {
        var args = Array.prototype.slice.call(arguments, 0);
        var newArgs = [method].concat(args);
        analytics.push(newArgs);
    };
};

它附加了被调用方法的名称，这意味着如果 I analytics.identify('userId')，我们的队列实际上会得到一个如下所示的数组：

['identify', 'userId']

然后，当我们的库加载时，它会卸载所有排队的调用并将它们重播到实际方法（现在可用）中，以便仍然保留加载之前记录的所有数据。这是关键部分，因为我们不想在库有机会加载之前丢弃发生的任何调用。看起来像这样：

// Loop through the interim analytics queue and reapply the calls to their
// proper analytics.js method.
while (window.analytics.length > 0) {
    var item = window.analytics.shift();
    var method = item.shift();
    if (analytics[method]) analytics[method].apply(analytics, item);
}

analytics在那个时候是一个局部变量，在我们完成重放之后，我们用局部替换全局analytics（这是真正的交易）。

希望这是有道理的。我们实际上将在我们的博客上发布一个关于 3rd-party Javascript 的所有小技巧的系列文章，所以您可能很快就会了解它！

于 2013-02-19T19:09:47.800 回答