本节书摘来自异步社区《第三方JavaScript编程》一书中的第1章，第1.2节，作者：[美] Ben Vinegar Anton Kovalyov著，更多章节内容可以访问云栖社区“异步社区”公众号查看
1.2 第三方JavaScript的用法
我们已经确切知道了第三方JavaScript是在某个网站上被执行的代码，这就使得第三方代码能够访问到网站的HTML元素和JavaScript上下文。因此，我们可以通过多种方式操作目标页面，例如在文档对象模型（DOM）中创建新的元素、插入自定义的样式表、注册浏览器事件以捕获用户行为。在绝大多数情况下，如同使用JavaScript操作自己的网站或者应用一样，第三方脚本可以执行同样的操作，不同的是，第三方脚本操作的是他人的网站。
拥有了远程操作Web页面的能力，依然会有这样的问题：它擅长做什么？在这部分，我们会看到一些第三方脚本真实的应用案例。
- 内嵌微件——内嵌在发布者网站上的小型交互式应用。
- 统计分析——收集访客在发布者网站上的交互数据。
- Web服务API封装——开发同外部Web服务通信的客户端应用。
这并非一份完整的列表，但是你可以清晰地看到第三方JavaScript能够做什么。接下来我们会深入介绍第一项：内嵌微件。
1.2.1 嵌入式微件
第三方脚本中最常见的使用案例莫过于内嵌微件（通常是第三方微件）了。这些微件都是典型的小型、交互式应用，在发布者的网站上呈现并提供访问，但是这是从另一组单独的服务器加载和提交资源的。随着复杂程度不同微件千变万化；可以简单到作为图形显示您所处地理位置的天气情况，也可以复杂到一个功能完备的即时通信客户端。
微件使得网站发布者能够轻而易举地将应用嵌入到他们的Web页面中。通常它们安装简单，往往只需要网站发布者在他们的Web页面中插入一小段HTML代码即可。因为这些微件完全基于JavaScript，所以不需要发布者在他们的服务器上安装或者维护任何软件，这就意味着使用微件只需要很低的维护成本。
有些企业应用甚至完全建立在微件开发、分发的基础上。如之前我们提到的Disqus，Disqus开发了一个评论微件，如图1.3所示，用来为博客、在线出版物和其他网站提供评论功能。他们的产品几乎完全由第三方JavaScript驱动，通过JavaScript代码从服务端获取评论数据，将评论渲染为HTML展示在页面上，并且捕获其他评论者输入的表单数据。换句话说，这一切都是由JavaScript完成的。将它安装在网站上只需要一段共计5行的HTML代码片段。
Disqus是一个仅能够在分发形式下使用的产品案例，你需要访问一个发布者的网站来使用它。但是微件并非都是这样的独立产品。它们往往作为更大、更传统的一方，独立于Web应用的“便携式”扩展。
例如，Google Maps，可以称得上是网络上最受欢迎的地图应用。Google Maps还提供了汽车导航、公共交通、卫星影像，甚至还有选定位置的街景图片。
不可思议的是，这些神奇的功能都可以通过一个微件实现。网站发布者可以从Google Maps网站上获取一些简单的JavaScript代码片段，通过这些代码就可以将地图应用嵌入在他们自己的Web页面上。在此基础之上，Google公司还为发布者提供了一些公共函数以便修改地图的内容。
让我们来看一下，使用Google Maps（见程序清单1.2）将一个交互式地图嵌入在你的Web页面上是多么简单吧！这段代码示例首先通过一个简单的
程序清单1.2 初始化Google Maps微件
大功告成了，大约用10行代码就完成了这样强大的功能！
以上是两个嵌入式微件的例子。实际上，在页面上嵌入任何应用的想法都是可行的。就我自己而言，我遇到过各种各样的微件：内容管理的微件，实时播放视频的微件，让你同客服人员实时交流的微件等。只要你能想到的，就能把它嵌入进来。
1.2.2 分析和统计
第三方JavaScript并非完全用作创建内嵌式微件，还有其他的重要用途，可以不涉及图形、交互式Web页面元素。通常它们在页面上默默地处理信息，用户并不知道它们的存在。最常见的使用案例就是统计和数据收集。
JavaScript最强大的特性之一就是它可以让开发者捕获和响应页面上发生的用户事件。例如，你可以通过JavaScript来响应一个网站访问者的鼠标移动和（或者）鼠标点击。第三方脚本也并不例外：它们也可以监听到浏览器的事件，并捕获访问者与页面发生的交互数据。从而可以跟踪一个访问者在页面上的停留时长，他们阅读网页时看到的内容，以及他们离开页面的去向。JavaScript代码可以捕获到几十种浏览器事件，从中你可以得到数百种不同的组合。
1．被动型脚本
Crazy Egg（一家互联网初创公司），就是通过这种方式使用第三方脚本的案例之一。他们的统计产品能够将用户在Web页面上的行为进行可视化展示，如图1.4所示。Crazy Egg通过在网站插入一个脚本来捕获访客的鼠标和滚动事件，从而获取这些数据。这些数据被提交回Crazy Egg的服务器，这些步骤都在同一个脚本中完成。最终Crazy Egg生成的可视化数据能够帮助网站发布者确定网站的哪些部分访问比较频繁，哪些部分被忽略了。发布者通过这些信息可以改进他们的Web设计并且优化网站内容。
Crazy Egg的第三方脚本被认为是一个被动的脚本：它同页面没有任何交互，只是为发布者的网站记录统计数据。发布者只需要在页面上引入脚本，其余的事情就可以自动完成了。
2．主动型脚本
并非所有统计脚本的行为都是被动的。Mixpanel是一家分析公司，它们的产品跟踪发布者自定义的用户行为，从而形成与网站访客或者应用程序用户有关的数据统计。不是通用的Web统计，如页面访问量或者访客数，Mixpanel是由发布者自己定义想要跟踪的关键应用程序事件。比如“用户点击注册按钮”，或者“用户播放视频”。发布者需要写些简单的JavaScript代码（见程序清单1.3），当识别到动作发生时，调用Mixpanel第三方脚本提供的跟踪方法注册事件。然后Mixpanel会将这些数据组装成有趣的漏斗统计来帮助解决像这样的问题：“用户在升级产品之前执行了哪些步骤？”
程序清单1.3 通过Mixpanel JS API跟踪用户注册
同Crazy Egg不同的是，Mixpanel的服务需要发布者进行一些前期的开发工作，定义和触发事件。好处就是，发布者可以围绕着用户行为收集自定义的数据，并且解决用户行为相关的问题。
关于Mixpanel使用第三方脚本还有一些其他有趣的事情。实际上，Mixpanel提供了一些客户端的函数来同他们的Web服务API（一组服务器的HTTP接口，包括跟踪和汇报事件）通信。这是一个实用的案例，可以扩展到任意数量的不同的服务。让我们更深入地了解第三方脚本吧！
1.2.3 Web服务API封装
你可能之前对它们并不熟悉，Web服务API是HTTP服务器的接口，可以为程序提供Web服务的访问支持。不像服务端应用那样向浏览器返回HTML，这些接口针对计算机程序的请求予以响应并返回结构化数据——往往是JSON或者XML格式。这里的应用程序可以是桌面应用，也可以是服务端应用，还可以是在浏览器里执行的一个Web页面上的JavaScript代码。
在浏览器里执行的JavaScript代码——是我们尤为感兴趣的。Web服务API的提供者可以在他们的平台上为开发者提供构建好的第三方脚本，从而简化客户端对他们API的访问。我们习惯上称这些脚本为Web服务API封装，因为它们将Web服务的API功能逻辑封装成了高效的JavaScript库。
1．例子：FACEBOOK GRAPH API
这有什么用呢？我们来看一个例子。假设有一个名叫Jill的独立Web开发者，他厌倦了*职业者的生活，想要寻找一份全职工作。为了更好地引起潜在雇主的注意，他决定做一个非常棒的在线简历，放在他的个人网站上。这份简历大部分内容都是静态的——用于展示他的技能和他先前的工作经验，甚至还提到他喜欢在月光下划皮划艇。
为了证明他的Web开发实力，Jill决定在他的简历上加入一些动态的元素。而且他已经有绝妙的主意。倘若潜在雇主看到Jill的在线简历，就会看到他们自己是否同Jill有共同的好友或者熟人，如图1.5所示。这样做不仅能够证明自己的技能，而且共同的好友还可能是一块敲门砖。
为了实现他的动态简历，Jill使用了Facebook的Graph API。这是Facebook的一个Web服务API，可以使软件应用能够访问或者修改Facebook的在线用户数据（当然需要有相应的权限）。Facebook也有一个JavaScript库提供了同API通信的方法。通过这个库，Jill就可以通过客户端代码在他简历上获取并且展示同访问者共同的好友。图1.6展示了客户端同两个服务器之间发生的事件顺序。
程序清单1.4列出了他在简历上实现这个功能的代码。为了让代码更简洁，这个例子使用了jQuery，一个能够简化DOM操作的JavaScript库。
程序清单1.4 通过Facebook Graph API获取并展示共同的好友
Jill通过很少的客户端JavaScript代码，就在他的简历中嵌入了一些强大的功能。有了这些令人印象深刻的功能，相信他找到一个*的软件开发工作应该没什么问题。
2．客户端API访问的好处
值得一提的是，这个例子不用客户端JavaScript也能实现。不同的是，Jill需要通过服务端应用调用Facebook Graph API查询需要的数据并渲染为HTML代码返回给浏览器。这样一来，浏览器从Jill的服务器下载HTML代码并将结果展现给用户，并没有借助JavaScript代码。
但是，最好还是让网站访问者在浏览器中执行这些工作，有如下原因。
代码在浏览器中执行而不在服务端执行，可以为服务器节省带宽和CPU。
更快——服务端的实现需要在展示内容前等待Facebook的API返回。
有些网站是纯静态的，因此客户端JavaScript对他们而言是唯一能够访问Web服务API的方式。我们刚刚提到的例子可能会被认为是一个很好的使用案例，但这可能只是其中一个应用。Facebook只是Web服务的API提供者之一，实际情况是，有众多流行的API，可以获得不同的数据或者使用不同的功能。除了像Facebook、Twitter、LinkedIn这样的社交应用之外，还有像Blogger和Wordpress这样的发布平台，或者像Google和Bing这样的搜索应用，都不同程度上通过API提供了自己数据的访问。
许多Web服务都提供API。但并非所有Web服务都会额外提供一个JavaScript库供客户端访问。这点很重要，因为在浏览器中JavaScript是一个最大的开发平台：每个网站，每个浏览器都支持。如果你或者你的团队在开发或者维护一个Web服务API，并且希望能将其尽可能的集成，你应该自己为开发人员提供一个客户端的API封装，我们将在后面详细讨论。