Google Analytics 或 Intercom 等片段使用了哪种设计模式？

Question

我想为 Google Analytics 和 Intercom 创建一个微笑片段：

对讲示例 https://developers.intercom.com/installing-intercom/docs/basic-javascript

//Set your APP_ID
var APP_ID = "APP_ID";

window.intercomSettings = {
    app_id: APP_ID
  };
(function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',w.intercomSettings);}else{var d=document;var i=function(){i.c(arguments);};i.q=[];i.c=function(args){i.q.push(args);};w.Intercom=i;var l=function(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/' + APP_ID;var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);};if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})();

或Google分析：


Adding analytics.js to Your Site
The analytics.js library is a JavaScript library for measuring how users interact with your website. This document explains how to add analytics.js to your site.

The JavaScript measurement snippet
Adding the following code (known as the "JavaScript measurement snippet") to your site's templates is the easiest way to get started using analytics.js.

The code should be added near the top of the <head> tag and before any other script or CSS tags, and the string 'GA_MEASUREMENT_ID' should be replaced with the property ID (also called the "measurement ID") of the Google Analytics property you wish to work with.

Tip: If you do not know your property ID, you can use the Account Explorer to find it.
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

Intercom 和 Google 使用了哪些设计模式来创建此片段？他们在内部是如何工作的？你能给我一个基本结构，这样我就可以用我想要的功能填充它吗？

Answer 1

google 分析（adn Intercom）的 IIFE 基本上只是他们编写适用于所有浏览器的脚本加载器的最短方式。

如果我们把 shorthand 写完整，结构会变得更容易阅读：

window.GoogleAnalyticsObject = 'ga';
window.ga = window.ga || function() {
    window.ga.q = window.ga.q || [];
    window.ga.q.push( arguments );
},
window.ga.l = 1 * new Date();
var a = document.createElement( 'script' );
var m = document.getElementsByTagName( 'script' );
a.async = true;
a.src = 'https://www.google-analytics.com/analytics.js';
m.parenNode.insertBefore( a, m );

window.ga('create', 'UA-XXXXX-Y', 'auto');
window.ga('send', 'pageview');

Intercom 示例基本上也是如此。

所以这个脚本首先保证 window 对象上存在正确的名称。如果 google 分析对象已经存在，它将被使用，否则它将成为将数据保存在数组中的函数。这可以防止脚本被多次添加，因此如果另一个插件也尝试加载相同的脚本，他们将共享他们的 GA 实例。

然后脚本创建一个新的脚本标签并将其配置为实际 google 分析脚本的 url。将新创建的脚本标签添加到页面后，它将加载实际的 analytics.js 脚本。

虽然我没有查看 analytics.js 的细节，但我很确定它会解压或合并我们创建的 window.ga 对象并将其替换为实际分析脚本。

所以总而言之，这是一种写 <script src="https://www.google-analytics.com/analytics.js"> 的奇特方式，它可以在旧浏览器上运行，并且如果多个脚本加载到单个浏览器上，将确保我们不会有多个脚本实例互相争斗页。

analytics.js 脚本和对讲小部件脚本的实际内部工作不包含在这些加载程序脚本中，所以我不打算详细说明它们是如何工作的，那应该是一个不同的问题显示实际 analytics.js 脚本的代码行。

编辑：

window.ga = window.ga || function() {

这一行确保 window.ga 是一个函数。为简单起见，我们假设它是 ga 尚不存在的页面。

所以当我们调用 ga('create', 'UA-XXXXX-Y', 'auto'); 和 ga('send', 'pageview'); 时，我们运行以下语句：

    window.ga.q = window.ga.q || [];
    window.ga.q.push( arguments );

window.ga.q = window.ga.q || []; 确保 window.ga.q 是一个数组。然后 window.ga.q.push( arguments ); 将参数推送给它。

因此在加载分析脚本之前调用 ga('create', 'UA-XXXXX-Y', 'auto'); 和 ga('send', 'pageview'); 结果如下：

window.ga.q = [
  [ 'create', 'UA-XXXXX-Y', 'auto' ],
  [ 'send', 'pageview' ]
];

记住，window.ga是一个函数，但函数也是javascript中的一种对象。所以我们可以将属性 q 添加到函数中，就像 window.ga 是一个对象一样，函数仍然有效。

加载分析脚本后，它将查看 window.ga.q 数组和运行所有这些命令。

问题是，查看analytics.js脚本。它也是用相同的风格编写的，所以用替换的所有 shorthand 重写它需要几个小时，所以我会尝试寻找该脚本的带注释的 non-minified 源代码（如果可用）某处。

Google Analytics 或 Intercom 等片段使用了哪种设计模式？

Which design pattern is used for Snippets like Google Analytics or Intercom?

javascript

google-analytics

intercom