服务 api 片段的工作原理

Question

我正在将一个网站集成到 Facebook Pixel，虽然我知道我只能将代码片段放在页面的头部，但我很想了解这个代码片段的工作原理。类似的模式发生在其他服务中：

< 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>

我不明白它是如何被调用的，每个参数的含义是什么，这个函数应该做什么 return。

Answer 1

它正在创建一个名为 fbq 的对象并将其附加到 window。它还在页面上添加了一个脚本标签。该脚本标记链接到 connect.facebook.net url。我认为 fbq 的作用更大，因为此时 fbq 看起来非常稀疏。

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

服务 api 片段的工作原理

How services api snippets works

javascript

typescript

reactjs

facebook-pixel