《第三方JavaScript编程》——1.4 第三方开发的挑战

简介: 不幸的是,这些挑战仅仅是冰山一角。第三方JavaScript的开发充满了陷阱,说到底,Web浏览器并非为嵌入式应用而生,也没有过多考虑第三方代码。浏览器日趋完善,且会引入一些新的特性,可以减轻一些第三方开发的负担,但仍旧是一场艰苦的战斗,且兼容旧的浏览器通常是任何类型的分布式应用都需要考虑的问题。

本节书摘来自异步社区《第三方JavaScript编程》一书中的第1章,第1.4节,作者:[美] Ben Vinegar Anton Kovalyov著,更多章节内容可以访问云栖社区“异步社区”公众号查看

1.4 第三方开发的挑战

你已经了解了第三方JavaScript是编写高度分发应用的一种强大方式。但是编写在其他人网站上执行的脚本,同传统的JavaScript编程相比有一系列独特的挑战。具体而言,你的代码将在一个完全不受控制、一个不同域的DOM环境中执行。这意味着你必须面对一些难以预料的复杂情况,比如未知的网页上下文,一个同其他第一方、第三方脚本共享的JavaScript环境,甚至浏览器的一些限制。我们快速的浏览一下涉及的挑战。

1.4.1 未知的上下文
当一个发布者在他们的Web页面中引入你的第三方JavaScript,通常你很少知道它被放置的上下文。你的脚本可能会被诸多不同文档声明,不同DOM布局的页面引入,而且应当在这些页面中都能正常工作。

你不得不考虑发布者可能在他们页面顶部的

标签中引入你的脚本,也可能会在底部引入。发布者也可能会在iframe中加载你的应用,也可能在一个标签完全废弃的页面中加载;在HTML5中,部分是可选的,而且并非所有浏览器都会在内部自动生成。如果你的脚本在查询或者操作DOM的时候用到了这些核心的元素,就会陷入麻烦了。

如果你在开发一个嵌入式微件,显示适当的样式也是一个需要被关注的问题。微件将被放置在一个浅色背景还是深色背景的Web页面中?你希望你的微件继承样式并“融入”发布者的页面设计吗?你希望你的微件在所有上下文中看起来都是一致的吗?如果发布者页面的HTML格式错误会出现什么情况,导致页面的渲染使用怪异模式吗?解决这些问题都需要精心编写CSS。我们会在后续的章节中给出这些问题的解决方案。

1.4.2 共享环境
对于一个给定的Web环境,只有一个全局变量的命名空间被页面上执行的每一段代码所共享。你不仅要注意不能让你的全局变量胡乱修改命名空间,也要明白其他脚本,可能是同你一样的第三方应用,也能够修改你可能依赖的标准的对象和原型。

例如,全局的JSON对象。在现代浏览器中,这是一个原生的浏览器对象,可以极快地解析和序列化JSON(JavaScript对象表示方法)。不幸的是,它可以很容易地被任何人修改。如果你的应用依赖于这个对象的正常工作,并且它被其他代码改为了不兼容的方式,你的应用可能会产生不正确的结果甚至崩溃。

下面的示例代码演示了使用简单的变量赋值修改全局的JSON对象。
screenshot
你自己可能会这么想,“为什么会有人这么做?”Web开发者往往加载他们自己的JSON方法来支持旧的浏览器没有提供的本地方法。但是有些这样的库不兼容。例如,很流行的Prototype JavaScript库在旧版本提供的JSON方法同原生方法相比,在处理undefined值时的输出并不相同,如下。
screenshot
JSON对象只是浏览器原生对象可以被客户端代码改变的一个例子;还有数百种其他的对象。在本书中,我们会寻找恢复或者简单避免这些对象的解决方法。

同样,DOM是另外一个你不得不担心的全局应用程序命名空间。对于一个给定的Web页面而言,只有一个DOM树,并且它是被当前页面上运行的所有应用所共享。这就要求你操作它的时候要格外注意。任何插入到DOM的新元素需要同现有的元素和平共存,并且不干扰其他查询DOM的脚本执行。同样,如果范围不当,你的DOM查询也可能会意外的选择到不属于你的元素。反之亦然,如果你没有认真地选择唯一的ID和类名,其他应用也可能不经意间会查询到你的元素。

因为你的代码同其他脚本同属于相同的执行环境,安全性也是要考虑的。不仅要防止你的用户使用不当,还需要考虑页面上的其他脚本,甚至发布者也是一个潜在的威胁。例如,如果你在为一个大型的、受欢迎的服务编写微件或者脚本(像一个社交网站),发布者或许会有很浓厚的兴趣去尝试在他们的页面上做一个假的交互界面。

1.4.3 浏览器限制
如果一个未知的文档上下文,多个全局命名空间,以及额外的安全问题还不够糟糕,Web浏览器禁止某些行为经常会影响到第三方脚本。例如,AJAX已然成为Web开发人员无刷新获取和提交数据的一个主要工具。但是Web浏览器的同源策略限制了XMLHttpRequest跨域进行通信,如图1.9所示。如果你正在编写第三方脚本,且需要同你的域所在的应用进行数据通信,那么你就不得不通过其他方式实现了。
screenshot
同样,Web浏览器通常也会限制应用程序读写第三方Cookies。如此一来,你的用户将无法“登录”你的应用或者记住后续请求的动作。根据应用的复杂度,无法读写第三方Cookies可能是一个真正的障碍。

不幸的是,这些挑战仅仅是冰山一角。第三方JavaScript的开发充满了陷阱,说到底,Web浏览器并非为嵌入式应用而生,也没有过多考虑第三方代码。浏览器日趋完善,且会引入一些新的特性,可以减轻一些第三方开发的负担,但仍旧是一场艰苦的战斗,且兼容旧的浏览器通常是任何类型的分布式应用都需要考虑的问题。

但是不必担心。你购买了本书,已经做了一个很好的决定,它包含了第三方JavaScript代码所面临的问题。作为回报,我们将会告诉你如何解决这些问题。

相关文章
|
2天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
【8月更文挑战第29天】Node.js,一个基于Chrome V8引擎的JavaScript运行环境,以其非阻塞I/O模型和事件驱动机制,在后端开发领域赢得了广泛关注。本文将从基本概念入手,通过实例讲解Node.js在后端开发中的应用,并分享一些实用的编程技巧。无论你是前端开发者还是后端新手,这篇文章都将为你打开一扇探索Node.js的大门。
|
1天前
|
JavaScript 开发者 UED
Vue.js 错误处理与调试:跟上技术潮流,摆脱开发困扰,成为代码大神不是梦!
【8月更文挑战第30天】在 Vue.js 开发中,错误处理与调试至关重要。本文将对比 Vue 的全局错误捕获机制 `Vue.config.errorHandler` 和组件内 `watch` 监听数据变化的方式,并介绍 Vue 开发者工具、控制台打印 (`console.log`) 以及代码断点 (`debugger`) 等调试方法。此外,还将探讨如何通过自定义错误页面提升用户体验。通过这些技巧的对比,帮助开发者灵活选择适合的策略,确保应用稳定性和开发效率。
|
1天前
|
JavaScript 前端开发 API
全栈开发革命来临!Vue.js与Node.js联手,打造前后端无缝对接的奇迹之作!
【8月更文挑战第30天】在Web开发领域,前后端分离与协作至关重要。Vue.js以其轻量级和易用性深受前端开发者喜爱,而Node.js则以高性能和事件驱动特性在后端领域崭露头角。二者结合开启了全栈开发新篇章,通过RESTful API或GraphQL实现高效稳定通信。本文以示例说明如何使用Vue.js和Node.js构建全栈应用,从前端Vue组件到后端Express服务器,展示了数据获取与展示的全过程。这种组合提供了一种高效简洁的全栈开发方案,使开发者能更专注于业务逻辑实现。
|
1天前
|
JavaScript 前端开发 开发者
哇塞!Vue.js 与 Web Components 携手,掀起前端组件复用风暴,震撼你的开发世界!
【8月更文挑战第30天】这段内容介绍了Vue.js和Web Components在前端开发中的优势及二者结合的可能性。Vue.js提供高效简洁的组件化开发,单个组件包含模板、脚本和样式,方便构建复杂用户界面。Web Components作为新兴技术标准,利用自定义元素、Shadow DOM等技术创建封装性强的自定义HTML元素,实现跨框架复用。结合二者,不仅增强了Web Components的逻辑和交互功能,还实现了Vue.js组件在不同框架中的复用,提高了开发效率和可维护性。未来前端开发中,这种结合将大有可为。
|
1天前
|
JavaScript 前端开发 UED
揭秘Vue.js高效开发:Vue Router如何让单页面应用路由管理变得如此简单?
【8月更文挑战第30天】随着Web应用复杂性的增加,单页面应用(SPA)因出色的用户体验和高效的页面加载性能而备受青睐。Vue.js凭借简洁的语法和灵活的组件系统成为构建SPA的热门选择,其官方路由管理器Vue Router则简化了路由管理。本文通过实战示例介绍如何利用Vue Router实现高效的SPA路由管理,包括命名路由、动态路由及其核心优势。
|
1天前
|
存储 JavaScript 前端开发
【Vue.js的神秘力量】一键解锁:如何让Bootstrap和Vuex成为你的开发超能力?
【8月更文挑战第30天】Vue.js是一个轻量且灵活的JavaScript框架,易于上手且功能强大。为提高开发效率和应用交互性,常需集成第三方库。本文介绍如何在Vue.js项目中集成Bootstrap和Vuex,及其它常见第三方库。Bootstrap提供响应式设计和预制组件,通过安装插件和引入CSS/JS即可集成;Vuex作为官方状态管理库,通过安装并创建store来管理组件状态。此外,Vue.js还可轻松集成Axios和Vue Router等库,提升HTTP请求和页面路由功能。合理选择和集成第三方库能显著提升开发效率,但需保持代码可维护性和可读性。
|
2天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
【8月更文挑战第29天】在数字化时代的浪潮中,后端开发如同一座桥梁,连接着用户与数据的无限可能。本文将引领你探索Node.js的奥秘,从基础概念到实战应用,一步步揭示如何在数据与服务器之间架设这座桥梁。我们将通过实际代码示例,展示如何利用Node.js进行高效的后端开发,让你轻松掌握这一技术,开启后端开发的新篇章。
|
2天前
|
Web App开发 JavaScript 前端开发
探索Node.js后端开发之旅深入浅出Python装饰器
【8月更文挑战第29天】在数字化时代,掌握一门后端编程语言变得尤为重要。Node.js作为一种基于JavaScript的服务端平台,因其高性能、轻量级的特性而广受欢迎。本文将引导读者了解Node.js的基本概念、核心模块以及如何利用它来构建一个简易的Web服务器。通过本文的学习,你将获得使用Node.js进行后端开发的初步技能,并理解其在现代Web开发中的应用价值。
|
2天前
|
JavaScript 前端开发 开发者
深入浅出Node.js后端开发
【8月更文挑战第29天】在这篇文章中,我们将探索Node.js的强大功能以及它如何改变后端开发的面貌。通过简明的语言和生动的比喻,本文旨在将复杂的后端概念变得易于理解。无论你是初学者还是有一定经验的开发者,这篇文章都将带给你新的视角和深入的理解。
|
2天前
|
存储 Web App开发 JavaScript
深入浅出Node.js后端开发
【8月更文挑战第29天】本文将带你领略Node.js的魅力,从基础概念到实际应用,一步步构建你的第一个后端项目。我们将深入探讨Node.js的核心特性、事件驱动和非阻塞I/O模型,并通过实际代码示例,展示如何利用Node.js进行高效的后端开发。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供宝贵的知识和技能,让你在后端开发的旅途中更加游刃有余。
下一篇
云函数