编辑“︁JavaScript浏览器兼容性”︁

{{DISPLAYTITLE:JavaScript浏览器兼容性}}  
{{Note|本页面适用于初学者及需要了解JavaScript浏览器兼容性的开发者。}}  

== 简介 ==  
'''JavaScript浏览器兼容性'''（Browser Compatibility）指同一段JavaScript代码在不同浏览器或浏览器版本中能否正常运行并产生一致的行为。由于浏览器厂商对ECMAScript标准（JavaScript的规范）的实现存在差异，以及不同浏览器对DOM、CSSOM和Web API的支持程度不同，开发者必须处理这些兼容性问题以确保用户体验的一致性。  

== 为什么需要关注兼容性？ ==  
* '''用户群体多样性'''：用户可能使用Chrome、Firefox、Safari、Edge或旧版IE等浏览器。  
* '''标准实现差异'''：例如，某些ES6+语法（如`let`、`const`）在旧版浏览器中不被支持。  
* '''API支持差异'''：如`fetch` API在IE中不可用，而`XMLHttpRequest`是更通用的替代方案。  

== 兼容性问题的常见类型 ==  
=== 1. JavaScript语法支持 ===  
不同浏览器对ECMAScript新特性的支持程度不同。例如：  
* IE11不支持箭头函数（`=>`）。  
* Safari 9不支持`const`和`let`。  

{{Code|lang=javascript|title=语法兼容性问题示例|  
<syntaxhighlight lang="javascript">  
// 在IE11中会报错  
const greet = () => console.log("Hello");  
greet();  
</syntaxhighlight>  
}}  

=== 2. DOM API差异 ===  
某些DOM方法在不同浏览器中的行为可能不同。例如：  
* `document.getElementById`在早期IE中可能返回不匹配大小写的元素。  
* `addEventListener`在IE8及以下版本不可用（需用`attachEvent`）。  

{{Code|lang=javascript|title=DOM事件监听兼容性处理|  
<syntaxhighlight lang="javascript">  
// 跨浏览器事件监听  
function addEvent(element, event, handler) {  
  if (element.addEventListener) {  
    element.addEventListener(event, handler);  
  } else if (element.attachEvent) {  
    element.attachEvent('on' + event, handler);  
  } else {  
    element['on' + event] = handler;  
  }  
}  
</syntaxhighlight>  
}}  

=== 3. CSSOM与样式操作 ===  
JavaScript动态修改样式时，某些属性名可能需要浏览器前缀：  
* `transform`在旧版浏览器中需写为`-webkit-transform`或`-ms-transform`。  

== 检测浏览器兼容性 ==  
=== 1. 使用`canIUse`数据库 ===  
[//caniuse.com Can I Use]是最流行的兼容性查询工具，可检查特定API或语法的支持情况。  

=== 2. 特性检测（Feature Detection） ===  
通过代码判断当前浏览器是否支持某功能：  
<syntaxhighlight lang="javascript">  
if (typeof fetch !== 'undefined') {  
  // 支持fetch API  
} else {  
  // 回退到XMLHttpRequest  
}  
</syntaxhighlight>  

=== 3. 用户代理嗅探（不推荐） ===  
通过`navigator.userAgent`检测浏览器类型，但此方法易被伪造且维护困难。  

== 解决兼容性问题的工具 ==  
=== 1. Polyfill ===  
Polyfill是用于模拟新API的代码库，例如：  
* `core-js`：提供ES5+功能的Polyfill。  
* `fetch` Polyfill：在旧浏览器中实现`fetch`功能。  

{{Code|lang=html|title=使用Polyfill示例|  
<syntaxhighlight lang="html">  
<!-- 加载core-js Polyfill -->  
<script src="https://cdn.jsdelivr.net/npm/core-js@3.0.0-bundle/minified.js"></script>  
</syntaxhighlight>  
}}  

=== 2. Transpiler（转译器） ===  
将新语法转换为旧浏览器支持的语法，常用工具：  
* Babel：将ES6+代码转译为ES5。  

{{Code|lang=javascript|title=Babel转译前（ES6）与转译后（ES5）|  
<syntaxhighlight lang="javascript">  
// 转译前  
const square = (x) => x * x;  

// 转译后  
var square = function(x) { return x * x; };  
</syntaxhighlight>  
}}  

=== 3. 构建工具集成 ===  
Webpack、Rollup等工具可集成Babel和Polyfill自动处理兼容性。  

== 实际案例 ==  
=== 案例1：兼容IE的AJAX请求 ===  
<syntaxhighlight lang="javascript">  
function makeRequest(url) {  
  if (window.fetch) {  
    fetch(url).then(response => console.log(response));  
  } else {  
    var xhr = new XMLHttpRequest();  
    xhr.open('GET', url);  
    xhr.onload = function() { console.log(xhr.response); };  
    xhr.send();  
  }  
}  
</syntaxhighlight>  

=== 案例2：动态加载Polyfill ===  
<syntaxhighlight lang="html">  
<script>  
  if (!Array.prototype.includes) {  
    document.write('<script src="includes-polyfill.js"><\/script>');  
  }  
</script>  
</syntaxhighlight>  

== 兼容性策略总结 ==  
<mermaid>  
flowchart TD  
  A[编写代码] --> B{是否需要兼容旧浏览器?}  
  B -->|是| C[使用Babel转译 + Polyfill]  
  B -->|否| D[直接使用现代语法]  
  C --> E[测试主要浏览器]  
  D --> E  
</mermaid>  

== 数学公式示例（可选） ==  
若需计算兼容性覆盖率，可使用以下公式：  
<math>  
\text{覆盖率} = \frac{\text{支持该特性的浏览器用户数}}{\text{总用户数}} \times 100\%  
</math>  

== 参见 ==  
* [[JavaScript特性检测]]  
* [[ECMAScript版本差异]]  

{{Stub|如需扩展更多Polyfill示例或构建工具配置，请补充内容。}}

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript工具与环境]]