本节书摘来自异步社区《第三方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代码所面临的问题。作为回报,我们将会告诉你如何解决这些问题。

《第三方JavaScript编程》——1.4 第三方开发的挑战相关推荐

  1. 第三方JavaScript的用法

    我们已经确切知道了第三方JavaScript是在某个网站上被执行的代码,这就使得第三方代码能够访问到网站的HTML元素和JavaScript上下文.因此,我们可以通过多种方式操作目标页面,例如在文档对 ...

  2. [译] Vue.js 优雅地集成第三方 JavaScript

    原文地址:Sliding In And Out Of Vue.js 原文作者:Kevin Ball 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m- 译者:Luca ...

  3. rails 自定义主键_带有Rails 6 Webpacker和turbolink的自定义和第三方javascript指南

    rails 自定义主键 Ihave recently had the pleasure of updating our app from Rails 4 to Rails 6. Though it i ...

  4. 《JavaScript设计与开发新思维》——1.7 JavaScript编程目标

    本节书摘来自异步社区<JavaScript设计与开发新思维>一书中的第1章,第1.7节,作者:[美]Larry Ullman著,更多章节内容可以访问云栖社区"异步社区" ...

  5. 基于第三方开源库的OPC服务器开发指南(2)——LightOPC的编译及部署

    基于第三方开源库的OPC服务器开发指南(2)--LightOPC的编译及部署 前文已经说过,OPC基于微软的DCOM技术,所以开发OPC服务器我们要做的事情就是开发一个基于DCOM的EXE文件.一个代 ...

  6. 全方位地介绍JavaScript开发中的各个主题《JavaScript编程全解》(好书分享更新中)

    JavaScript编程全解 作者: [日]井上诚一郎 / [日]土江拓郎 / [日]滨边将太 出版社: 人民邮电出版社 译者: 陈筱烟 内容简介  · · · · · · 本书全方位地介绍了Java ...

  7. Vue引入第三方JavaScript库和如何创建自己的Vue插件

    一 第三方JavaScript库 前言 .vue文件 中不解析 script标签引入js文件,只能用 import 引入 有两种用法: 1.import a from '-/a' 2.import ' ...

  8. 《JavaScript编程实战》

    <JavaScript编程实战> 基本信息 原书名:JavaScript programming: pushing the limits 作者: (美)Jon Raasch 译者: 吴海星 ...

  9. javascript编程题_如何开始使用JavaScript进行竞争性编程

    javascript编程题 by Priyabrata Biswas 通过Priyabrata Biswas 如何开始使用JavaScript进行竞争性编程 (How to get started w ...

  10. IEC61131, IEC61499图形可视化,PLC图形可视化,PLC组态,VBScript和JavaScript脚本,解决方案源代码, 开发平台100% VC++源码2018!

    IEC61131, IEC61499图形可视化,PLC图形可视化,PLC组态,VBScript和JavaScript脚本,解决方案源代码, 开发平台100% VC++源码2018! -- 全球领先. ...

最新文章

  1. Selenium(3)
  2. Lua基础之字符串(string)
  3. 汇哲科技-9月1日国盟CISA每日一题
  4. VS code配置c环境
  5. nexus搭建和迁移
  6. 操作系统 —— 磁盘
  7. java 缓存 30秒后失效_如何处理缓存失效、缓存穿透、缓存并发等问题
  8. Primefaces Spring和Hibernate集成示例教程
  9. Redis面试之传统五大数据类型的落地应用详解
  10. 名字作诗,增添你的印象分
  11. java 水晶按钮_C#中水晶按钮的程序生成
  12. C - 小型Basic编译器问题
  13. dumprep.exe
  14. 常用函数+星期+月份+缩写+四季
  15. TypeScript:Aho–Corasick算法实现敏感词过滤
  16. C#模拟鼠标操作以及键盘输入
  17. python爬取天猫,python如何爬取天猫店铺商品链接?
  18. matlab对于图像压缩,Matlab的图像压缩技术
  19. 百胜软件黄飞:携手阿里云,用双中台驱动新零售...
  20. 【乐逍遥网站设计】90年代的网页设计有哪些变化?

热门文章

  1. 21、方法的-、+符号
  2. JavaScript引用类型之Array数组的concat()和push()方法的区别
  3. junit4同一时候測试多个測试类
  4. HTRAN 2.4终极使用
  5. Oracle中INSTR函数,及在DB2、Sybase中与Instr函数功能相同的函数
  6. 各种学习网站博客汇总(持续添加中。。。)
  7. JAVA-JVM调优标志
  8. Android 的开源项目的网址
  9. Entity Framework Plus
  10. CentOS更改yum源