个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我想为 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 Analytics:
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 使用哪些设计模式来创建此代码片段？他们内部工作如何？您能给我一个基本结构，以便我可以用我想要的功能填充它吗？
最佳答案
Google Analytics(adn Intercom)的 IIFE 基本上是他们编写适用于所有浏览器的脚本加载器的最短方法。
如果我们完整地写出速记，结构就会变得更容易阅读:
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 示例基本上执行相同的操作。
因此该脚本首先保证窗口对象上存在正确的名称。如果 google Analytics 对象已经存在，它将被使用，否则它将成为将数据保存在数组中的函数。这可以防止多次添加脚本，因此如果另一个插件也尝试加载相同的脚本，它们将共享其 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 脚本。它也是以相同的风格编写的，因此需要几个小时才能重写它并替换所有简写，因此我会尝试寻找该脚本的带注释的非缩小源(如果它在某处可用)。
关于javascript - Google Analytics 或 Intercom 等片段使用哪种设计模式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56186677/
25
4
0
关闭。这个问题需要更多focused .它目前不接受答案。 想改善这个问题吗？更新问题，使其仅关注一个问题 editing this post . 4年前关闭。 Improve this questi
.NET 框架:4.5.1 我在 Blend for visual studio 2015 中遇到一个奇怪的错误，我找不到它的来源。 如果我在 VS 中打开我的 WPF 解决方案，它会加载并运行良好。
我经常遇到这样的问题，与 Hierarchical RESTful URL design 非常相似 假设该服务仅提供用户上传文档。 POST, GET /accounts PUT, DELETE /a
在 Rails 应用程序中，我使用 devise 来管理我的用户，而我用来销毁 session 的链接不再有效。它正在工作，现在我添加了事件管理员，但没有。 我的链接是 :delete, :clas
我已经坚持了超过 24 小时，试图按照此处发布的其他解决方案进行操作，但我无法使其正常工作。我是 Rails 新手，需要帮助! 我想让我的/users/edit 页面正常工作，以便我可以简单地更改用户
Devise 在以下情况下不会使用户超时: 用户登录，关闭选项卡，然后在超时 + X 分钟内重新访问该 URL。用户仍处于登录状态。 如果选项卡已打开并且稍后刷新/单击，则超时可以正常工作。这意味着
我想使用这样的 slider 我希望该 slider 根据提供给它的值进行相应调整。到目前为止，我只能应用具有渐变效果的背景，但无法获得这种效果。请通过提供样式代码来帮助我。
您应该为每种方法创建一个请求/响应对象，还是应该为每个服务创建一个？ 如果我在所有方法中使用它，我的服务请求对象中将只有 5 个不同的东西，因为我对几乎所有方法使用相同的输入。 响应对象将只有一个字典
我正在尝试在 REST 中对实体的附件进行建模。假设一个缺陷实体可以附加多个附件。每个附件都有描述和一些其他属性(上次修改时间、文件大小...)。附件本身是任何格式的文件(jpeg、doc ...)
我有以下表格: Blogs { BlogName } BlogPosts { BlogName, PostTitle } 博客文章同时建模一个实体和一个关系，根据 6nf(根据第三个宣言)这是无效的。
如果 A 类与 B、C 和 D 类中的每一个都有唯一的交互，那么交互的代码应该在 A 中还是在 B、C 和 D 中？ 我正在编写一个小游戏，其中许多对象可以与其他对象进行独特的交互。例如，EMP点击
关于如何记住我与 Omniauth 一起工作似乎有些困惑。 根据这个wiki ，您需要在 OmniauthCallbacksController 中包含以下内容: remember_me(user)
设计问题: 使用 非线程安全 组件(集合，API，...)在/带有 多线程成分 ... 例子 : 组件 1 :多线程套接字服务器谁向消息处理程序发送消息... 组件 2 :非线程安全 消息处理程序 谁
我们目前正在设计一个 RESTful 应用程序。我们决定使用 XML 作为我们的基本表示。 我有以下关于在 XML 中设计/建模应用程序数据的问题。 在 XML 中进行数据建模的方法有哪些？从头开始然
我正在设计一个新的 XSD 来从业务合作伙伴那里获取积分信息。对于每笔交易，合作伙伴必须提供至少一种积分类型的积分值。我有以下几点:
设计支持多个版本的 API 的最佳方法是什么。我如何确保即使我的数据架构发生更改(微小更改)，我的 api 的使用者也不会受到影响？任何引用架构、指南都非常有用。 最佳答案 Mark Nottingh
关闭。这个问题是opinion-based 。目前不接受答案。 想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 已关闭 4 年前。 Improv
我想用 php 创建一个网站，其工作方式与 https://www.bitcoins.lc/ 相同。确实，就每个页面上具有相同布局但内容会随着您更改链接/页面而改变而言，我如何在 php 中使用lay
我有一个关于编写 Swing UI 的问题。如果我想制作一个带有某些选项的软件，例如在第一个框架上，我有三个按钮(新建、选项、退出)。 现在，如果用户单击新按钮，我想将框架中的整个内容更改为其他内容。
我正在尝试找出并学习将应用程序拥有的一堆Docker容器移至Kubernetes的模式和最佳实践。诸如Pod设计，服务，部署之类的东西。例如，我可以创建一个其中包含单个Web和应用程序容器的Pod，但
我是一名优秀的程序员,十分优秀！