服务 api 片段的工作原理

Question

我正在将一个网站集成到 Facebook Pixel，虽然我知道我只能将 sn-p 放在页面的头部，但我有兴趣了解这个 sn-p 的工作原理。类似的模式也发生在其他服务中：

< script >
  ! function(f, b, e, v, n, t, s) {
    if (f.fbq) return;
    n = f.fbq = function() {
      n.callMethod ?
        n.callMethod.apply(n, arguments) : n.queue.push(arguments)
    };
    if (!f._fbq) f._fbq = n;
    n.push = n;
    n.loaded = !0;
    n.version = '2.0';
    n.queue = [];
    t = b.createElement(e);
    t.async = !0;
    t.src = v;
    s = b.getElementsByTagName(e)[0];
    s.parentNode.insertBefore(t, s)
  }(window, document, 'script',
    'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '{your-pixel-id-goes-here}');
fbq('track', 'PageView'); 
< /script> 
< noscript >
  <
  img height = "1"
width = "1"
style = "display:none"
src = "https://www.facebook.com/tr?id={your-pixel-id-goes-here}&ev=PageView&noscript=1" / >
< /noscript>

我不明白它是如何被调用的，每个参数是什么意思，这个函数应该返回什么。

Answer 1

它正在创建一个名为 fbq 的对象并将其附加到窗口。它还在页面上预先添加了一个脚本标记。该脚本标签链接到 connect.facebook.net 网址。我认为这对 fbq 有更多作用，因为此时 fbq 看起来很稀疏。

sn-p 本身是一个IIFE。它声明一个函数，然后立即调用它。该函数接受参数f, b, e, v, n, t, s，这很可爱，但不能帮助任何人理解代码。当它调用函数时，它会将window 传递给f，document 传递给b，"script" 传递给e，并将url 传递给v。其他参数未填充。 n、t 和 s 都在 sn-p 内部分配。将它们作为函数参数可以让作者避免使用var n = ...，这仅在尝试优化每个可能的字节时才有用。当作者将事物分配为!0 时，可以看到另一个大小优化，即true，但字符数减半。