数往知来：一次浏览器兼容工作中的知识点分析

Posted 云前端

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了数往知来：一次浏览器兼容工作中的知识点分析相关的知识，希望对你有一定的参考价值。

在这个机器学习和人工智能遍地的年代，前端开发中的PC端浏览器兼容问题显得已经不是那么时髦和迫切了；刨去某些面向传统行业或网银支付等领域还不得不面对这个具体的问题外，大部分网站和移动端应用似乎可以潇洒的回避了；兼容工作的重点已经从几年前的样式统一转变为在PC端和移动端对新特性的支持和妥协，除了能更好更全面的满足用户，开发者了解优雅降级的兼容化思路，也是可以普遍应用在各项工作中的


开车！

开车！

开车！


项目构成


本次用来分析的项目，其package.json中的依赖大致如下：

"dependencies": {
    "bootstrap": "^3.3.7",
    "draft-js": "^0.10.1",
    "draftjs-to-html": "^0.7.4",
    "element-dataset": "^2.2.6",
    "form-serialize": "^0.7.1",
    "html-to-draftjs": "0.1.0-beta14",
    "immutable": "~3.7.4",
    "lodash": "^4.17.4",
    "mobx": "^3.1.9",
    "mobx-react": "^4.1.5",
    "moment": "^2.18.1",
    "react": "^15.6.1",
    "react-bootstrap": "^0.30.8",
    "react-datetime": "^2.8.9",
    "react-dom": "^15.6.1",
    "react-draft-wysiwyg": "^1.10.7",
    "react-router-dom": "^4.1.0",
    "native-promise-only": "^0.8.1",
    "whatwg-fetch": "^2.0.3"
}

显然，这是一个bootstrap样式的后台单页应用，用react实现了组件化、用mobx管理状态、引入了fetch等promise异步工具，并且使用了一些日期选择和富文本编辑器插件等第三方库 

--- 感觉上IE就悬乎乎哒ㄟ( ▔, ▔ )ㄏ

数往知来：一次浏览器兼容工作中的知识点分析

目标用户

该产品为 toB 形态，主要面对部分可控的目标用户，大部分可以在指导下使用较新的chrome浏览器，但不排除一些用户使用firefox甚至IE的情况，所以针对该项目的主要目标就是让低版本IE用户处于“大部分特性可用、鼓励升级到chrome”的状况下，而不是回避甚至放弃这部分需求

兼容原则

  • 尽量不影响chrome等其他主流的浏览器

  • 最大化的尝试兼容已有功能

  • 对实在无法实现的功能降级处理

  • 对IE向下兼容到9(xp下可升级的最高版本)

顺藤摸瓜

这里我们以兼容后的index.html入口文件为切入点，梳理本次兼容过程的脉络：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9,edge">
<title><%= htmlWebpackPlugin.options.title %></title>
<!--[if lte IE 9]>
<script ></script>
<script ></script>
<script ></script>
<script ></script>
<script ></script>
<script ></script>
<script ></script>
<script ></script>
<script ></script>
<script>
window.__defineGetter__(
    'history', 
    function(){
        return History
    }
);
</script>
<![endif]-->
<script>
(function() {
var _isIE = /Trident\/(\d+)/i.exec(navigator.userAgent);
var _gteIE10 = _isIE && parseInt(_isIE[1])>5;
if (_gteIE10) {
    var s = document.createElement('script');
    document.head.appendChild(s);
    s.src = "CDN/es6-shim.min.js";
};
}())
</script>
</head>
<body>
    <!--[if lte IE 9]>
    <div id="oldIENoticeBox">
        您的浏览器过于老旧，
        请使用<a href="...">最新版chrome浏览器</a>
    </div>
    <![endif]-->
    <div id="root"></div>
</body>
</html>

使用X-UA-Compatible

“有时候需要限制Windows Internet Explorer在解析某个网页时使用特定的文档模式。使用X-UA-Compatible头部属性，可以让用户就像使用旧版本IE一样查看当前网页” -- MSDN