修复JavaScript跨浏览器兼容性问题

如果您是Web开发人员并且偏头痛，那可能是因为跨浏览器兼容性.

在所有主要的网络技术中，没有其他技术像JavaScript一样被证明可以跨浏览器兼容. 尽管纯HTML和CSS有了进步js浏览器兼容问题，但没有纯HTML和CSS，您将无法轻松构建Web应用程序或网站.

在本文中，我们将研究JavaScript跨浏览器兼容性问题以及如何解决它们. 在开始讨论实际主题之前，重要的是研究JavaScript的基础和演变.

潜入JavaScript

在过去的十年中，随着各种设备（台式设备，智能手机，平板电脑等）的出现，网络发展发生了迅速的变化. 用于Internet访问的Web浏览器的数量也在增加. 这对设计人员和开发人员构成了不同的挑战，因为不同的浏览器可以以不同的方式解释CSS和HTML代码. 其背后的原因是每个浏览器都有一个唯一的呈现引擎，该引擎负责以不同于其他浏览器的方式呈现Web元素. CSS，HTML和JavaScript是逐步增强的三层. 渐进增强是一种用于创建与浏览器兼容的Web应用程序的技术，其优先级最高的是核心网页，而其他复杂的附件和功能仍然是次要的. 在1990年代引入JavaScript时，由于每个浏览器开发公司都有自己的脚本实现，因此存在主要的跨浏览器兼容性问题，主要是为了赢得市场支配地位. 尽管现在没有此类问题，但是与JavaScript有关的跨浏览器兼容性问题仍然引起开发人员的噩梦.

当开发人员使用不支持较旧浏览器的网页功能，使用错误的DOCTYPE或使用不完整/错误的浏览器嗅探代码实现时，将发生JavaScript代码问题. 除非实现用于处理JavaScript（或其他脚本语言）的标准机制，否则JavaScript的跨浏览器兼容性问题将继续存在. 让我们看看这些跨浏览器与JavaScript的兼容性问题，并了解修复它们的机制.

常见的JavaScript问题

在研究JavaScript的跨浏览器兼容性问题之前，我们必须首先了解一些常见的JavaScript问题. 假定您已经了解JavaScript并具有实现JavaScript的经验.

内存泄漏是开发人员面临的常见问题之一. 内存泄漏只是意味着不再使用该应用程序以前使用的内存. 但是，由于某些原因（例如，对全局变量，DOM引用等的错误处理）；分配的内存将不会返回到“空闲”内存池. 内存泄漏的一些常见原因是对全局变量和DOM引用的不正确处理. “ Chrome分析工具”可用于内存分析和识别内存泄漏. 以下是Chrome内存分析的示例快照.

JavaScript按照在文档中出现的顺序执行代码. 因此，仅在加载代码时引用该代码就变得很重要. 如果在加载代码之前引用了该代码，则该代码将导致错误. 与其他语言不同，如果将“错误数量的参数”传递给JavaScript中的函数，则不会引发任何错误. 如果这些参数是可选的，则您的代码将无问题地执行. 在函数中使用这些参数可能会导致问题，不使用它们会更改函数. 建议使用统一的命名约定来轻松识别此类问题. 相等运算符是JavaScript的基础，但必须精确使用它们. “赋值/等于运算符”（=）和“严格等于运算符”（==）之间是有区别的. 这些主要用于条件语句，并且不小心使用=而不是==可能会导致功能问题. 要查看这些愚蠢且代价高昂的错误，需要进行彻底的代码演练. 根据变量的作用域（局部和全局）使用变量. 确保对不同类型的变量使用一致的命名约定，以便于维护代码. 确保您的源代码没有任何语法问题. 在JavaScript中添加DOM元素被认为是一项昂贵的操作. 在某些情况下，您需要连续添加DOM元素，但这不是一个好习惯. 在这种情况下，您可以使用文档片段，因为它具有出色的效率和性能. JavaScript数组中的起始索引为0而不是1. 如果要创建包含10个元素的数组js浏览器兼容问题，则应声明索引为9而不是10的数组. 引用超出范围的数组元素将导致错误. 在同步操作中实现耗时的任务可能会降低网页/ Web应用程序的性能. 确保将逻辑移至异步操作，以便不使用CPU. 由于该操作本质上是异步的，因此在使用该操作中使用的变量时必须小心，因为它们可能无法反映最新值（因为异步操作可能仍在执行中）. 建议开发人员使用Promise返回具有异步操作完成状态（成功/失败）的对象. 示例代码承诺如下:

不正确使用“内部循环功能”将导致该功能被中断. 跨浏览器常见的JavaScript问题

到目前为止，我们已经研究了一些基本的JavaScript问题. 让我们看一下解决这些问题的一些机制:

图书馆使用

许多浏览器可能不支持许多库（本机和第三方）. 在使用库之前，建议您从浏览器支持，功能支持等方面进行全面分析. 您还应该检查库的“开发历史记录”，因为应该很少进行更新. 库，一旦您使用该库，它就不会更新！

使用用户代理和浏览器嗅探

每个浏览器都有一个用户代理字符串，用于标识用户用来访问您的网站/ Web应用程序的浏览器. 开发人员使用浏览器嗅探代码根据所使用的浏览器来调整UI / UX功能. 下面提到一些常见的用户代理字符串.

开发人员可以使用navigator.userAgent.indexOf（'user-agent'），其中user-agent是用户代理字符串（在上表中提到）. 以下是代码的快照，开发人员可以根据浏览器的类型提出功能.

JavaScript功能的功能检测

在处理错误和无法识别的功能时，JavaScript不被视为HTML和CSS. 当遇到语法使用不正确，花括号或分号缺失等情况时，JavaScript肯定会发送错误信号.

许多新功能是在ECMAScript 6（ES6）/ ECMAScript Next标准下实现的，许多旧的浏览器不支持这些功能. 例如，

承诺我们前面讨论的对象不适用于较旧的浏览器. “类型化数组”是另一个示例. “箭头功能”是ES6中引入的非常有用的功能，它提供了一种简洁的方法来用JavaScript编写函数. 箭头函数中的上下文是静态定义的. 现代JavaScript开发人员广泛使用此功能，但是较旧的浏览器/较旧版本的浏览器（例如IE，Firefox，Chrome等）不支持此功能. Safari浏览器不支持“箭头功能”.

那么，如何确保JavaScript功能在旧版浏览器上无缝连接？解决方案是验证旧浏览器是否支持所使用的功能. 您可以使用caniuse之类的资源来验证相同的内容. 只需键入功能名称即可显示支持该功能的浏览器版本. 例如，以下是“箭头功能”的情况. 红色条目表示不支持该功能.

根据您的目标受众，您应该支持所有最新的浏览器和某些较旧的浏览器（取决于您最初的市场调查）. 您可以查看这些网络分析工具，这些工具可以帮助您更好地了解客户. 您还可以选择条件执行，以便在用户使用旧浏览器时始终有一个后备机制. 许多较旧的浏览器不支持WebRTC（视频会议），Maps API等. 在下面的示例中，我们使用Geolocation API；

导航器对象的geolocation属性用于此目的. 如果浏览器不支持Maps API，则会为用户提供使用静态地图的选项（作为后备选项）.

开发人员只需导入许多JavaScript库即可使用其功能. 使用的好处是开发人员不再需要从头开始编写所有代码，因为该库已经支持这些功能.

JavaScript转堆

如果您想支持较旧的浏览器，但又不想使用浏览器嗅探，功能检测等功能，则可用的便捷选项称为“转换”. 简而言之，转换有助于将可能使用最新ES6 / ECMAScript功能的JavaScript代码转换为可以在较旧的浏览器上运行的代码.

您可以使用流行的JavaScript转换工具，例如Babel，只需在左侧输入最新的JavaScript代码，然后在右侧输出转换后的代码.

填充

类似于增强功能并缩短开发时间的第三方库，polyfill还包含可在项目中使用的第三方JavaScript文件. 但是，使polyfill与库不同的原因是polyfill可以提供根本不存在的功能. 例如，您可以使用polyfill支持WebRTC /

Promise /其他基于ES6的功能，只需使用该功能的等效polyfill.

您可以检查此列表，其中包含有关等效于JavaScript功能的polyfill的详细信息. 让我们来看一个例子. 下面显示的是代码段. 我们使用polyfill支持startsWith ES6中引入的功能.

解决常见的JavaScript问题

JavaScript调试器

断点通常用于调试目的. 当达到断点时，将暂停执行. 开发人员可以查看各种详细信息，例如调用堆栈，监视变量，内存信息等. 当遇到关键字Word时，JavaScript具有关键字调试器，并且JavaScript代码的执行停止. 这类似于在代码中插入断点.

或者，您可以使用传统的调试方法通过JavaScript控制台在Chrome中调试代码.

浏览器开发人员工具

浏览器开发人员工具可用于删除JavaScript代码中的警告和错误. 这对于调试代码也很有用，因为开发人员可以在代码的特定位置插入断点.

如果使用的是Chrome或Firefox，只需在加载代码后右键单击窗口，然后单击“检查元素”. 浏览器开发人员工具还具有“调试器选项卡”，开发人员可以在其中插入断点，检查调用堆栈，添加变量以监视窗口等.

以下是Firefox浏览器中内置的开发人员工具的快照.

开发人员还可以在开发阶段使用控制台API来打印日志. 建议出于不同目的使用不同类型的控制台日志. 例如，

console.log（）可用于调试，如果要声明，可使用console.assert（），并且在错误方案中可以使用console.error（）.

代码编辑器插件

有许多带有内置和可下载的linter插件的编辑器，可用于更正JavaScript代码中的警告和错误. Atom是一种流行的开源IDE，带有用于插入代码的插件. 开发人员可以安装lint，jslint和linter-jshint插件来提示其源代码. 这些插件将在开发窗口底部的单独面板中的代码中发出警告和错误. 以下是Atom IDE的快照，该快照在源代码中显示警告. 可以从此处下载Atom IDE.

短毛绒

Linters用于确保代码质量更好，正确对齐以及代码中没有错误. 无论JavaScript文件的大小如何，JavaScript Llinter都可以帮助保持代码质量. 可以根据不同级别的错误/警告报告来定制短绒. JSHint和ESLint是JavaScript中广泛使用的短毛绒.

解决一般的JavaScript问题

除了我们到目前为止讨论的JavaScript问题之外，开发人员还需要解决许多常规问题.

一些常见问题是:

变量，函数名称等的大小写/拼写错误. 许多经验丰富的开发人员不小心使用了内置函数，但其​​大小写/拼写错误. 例如，可以使用getElementByClassName（）代替getElementsByClassName（）. 在执行代码审查时，审查者应确保ret​​urn语句后没有代码，因为这些代码是多余的（或不可访问的）. 对象不同于普通分配. 您需要检查对象的成员名称是否用逗号（，）分隔，以及成员名称是否用冒号（:)分隔. 尽管这是一个非常基本的练习，但请检查分号（;）的使用位置是否正确. JavaScript开发最佳实践

以下是JavaScript开发的一些最佳做法:

始终在顶部声明. 遵循变量，函数等的正确命名约定. 在代码中始终使用注释. 使用var关键字声明局部变量. 变量总是被初始化. 不要声明字符串，数字或布尔对象. 在switch ... case语句中始终有一个默认的case. 仔细看看=和==运算符的用法. 确保在正确的位置使用它们. 仔细看看=和==运算符的用法. 确保在正确的位置使用它们. 将脚本放在页面底部. 解决跨浏览器兼容性问题的JavaScript框架

众所周知，您的Web应用程序或网站将具有跨浏览器兼容性问题，无论其大小或复杂程度如何. 从上面提到的观点可以看出，当JavaScript使用不当时，跨浏览器兼容性问题可能会被放大. 但这并不意味着您应该避免使用JavaScript！

有多个JS框架可促进跨浏览器兼容网站的开发. 一些最著名的是:

React.jsAngularVue.jsIonicEmber.js这些框架有助于解决JavaScript的跨浏览器兼容性问题. 他们还可以帮助开发人员创建与不同浏览器（Google Chrome，Mozilla Firefox，Safari等）兼容的单页应用程序.

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-193053-1.html