AngularJS 实现 SPA 时如何兼容 IE8
Vue.js, React.js, AngularJS 等前端框架的出现，让前端的开发效率大大提高，并且实现了单页应用（Single-Page Application，以下称 SPA）的概念。SPA 的优点可谓是显而易见的，但是 IE8 以下的版本并不支持 HTML5 相关的一些属性和方法，如 HTML5 中新增的视频、音频、canvas 等标签，以及 History API。当然，还有 AngularJS 中使用到的一些 api。本文将介绍 SPA 中如何兼容 IE8，以 AngularJS 为例。
首先，针对 IE8 中不支持的 HTML5 标签我们可以通过 Modernizr 来判断浏览器是否支持该标签，如下：
-- -------------------- ---- -------
---- ---------- ---
--------- -----
----- ----------
------
----- ----------------
---------------- ------------
------- -----------------------------------------------------------------
------- ------------------------------------------------------------------
-------
----- ---------------
------ ------------------------ ---------------- ----------- ------------ -----------------
---- ------------------------
------ ---- ------- ---- --- ------- ----- ------
------
------- ----------------------
-------
-------在 Modernizr 加载完毕后，我们可以使用 Modernizr 对象中的属性来判断浏览器是否支持特定的 HTML5 API。
在 AngularJS 程序中，IE8 中不支持的 API 会出现在跨浏览器兼容性问题中。常见的有 event.target、event.currentTarget、event.preventDefault()、Array.indexOf()、String.trim() 、Object.keys() 等。
针对 Array.indexOf()、String.trim()、Object.keys() 我们可以使用如下的 polyfill：
-- -------------------- ---- -------
-- -------- --- ---------------
-- -------------------------- -
----------------------- - -------- ----- ---------- -
-- ---------- --- ----- -
--------- - --
- ---- -- ---------- - -- -
--------- - ----------- ----------- - -----------
- ---- -
--------- - ------------------- ----------- - ---
-
--- ---- - - ---------- - - ------------ - - -- ---- -
-- -------- --- ---- -
------ --
-
-
------ ---
--
-
-- -------- --- -------------
-- ------------------------ -
--------------------- - -------- -- -
------ -------------------------- ----
--
-
-- -------- --- -------------
-- -------------- -
----------- - --------- -- -
---- --------
--- -------------- - --------------------------------
-------------- - --- --------- ---- ------------------------------------
--------- - -
-----------
-----------------
----------
-----------------
----------------
-----------------------
-------------
--
--------------- - -----------------
------ -------- ----- -
-- ------- --- --- -------- -- ------- --- --- ---------- -- --- --- ------ -
----- --- ---------------------- ------ -- -------------
-
--- ------ - --- ----- --
--- ----- -- ---- -
-- ------------------------- ------ -
------------------
-
-
-- ---------------- -
--- -- - -- - - ---------------- ---- -
-- ------------------------- -------------- -
--------------------------
-
-
-
------ -------
--
-----
-但是，这些 polyfill 可能会增加应用体积，影响速度，所以我们要尽可能的减少它们的引用。一般情况下，我们只需要在针对具体问题时再引用即可，这样就可以减少体积的影响了。
对于 IE8 中不支持的各种事件和 API，我们可以通过一个叫做 es5-shim 的库来解决。es5-shim 是一个由多位数前端大牛开发的 JavaScript 库，它可以将各种新的 JavaScript 标准方法（ES5 标准）实现在 IE 浏览器上，这样我们就能够在 IE 浏览器上愉快地使用这些新的 JavaScript 标准方法了。它包括 array.forEach(), Array.indexOf(), Object.create(), Object.defineProperty(), Function.prototype.bind(), JSON.parse(), JSON.stringify() 等。
以下为 es5-shim 的引用：
-- -------------------- ---- -------
---- ---------- ---
--------- -----
----- ----------
------
----- ----------------
---------------- ------------
------- -----------------------------------------------------------------
------- ----------------------------------------------------------------
-------
----- ---------------
---- -----------------------
-- -------------------
------- -----------------------------------
------
------- ----------------------
-------
-------在上面的例子中，我们在 index.html 文件的头部引入了 es5-shim。需要执行的函数我们可以参考 es5-shim 的官方文档，然后按需使用。
针对 IE8 不支持 History API 的问题，我们需引用一个名为 html5shiv.min.js 的 polyfill 库，对于 AngularJS 应用的路由，默认情况下，只支持 HTML5 标准的 History API，如果你的应用需要兼容到 IE8 及以下版本的浏览器，需要引用 html5shiv.min.js 库。
-- -------------------- ---- -------
---- ---------- ---
--------- -----
----- ----------
------
----- ----------------
---------------- ------------
------- -----------------------------------------------------------------
------- -- -- ---
------- ------------------------------------------------------------
------------
-------
----- ---------------
---- -----------------------
-- ----------------------
-- -------------------- ------
---- --------------
------
------- ----------------------
-------
-------在上面的例子中，我们在 index.html 文件的头部使用了条件注释，对 IE8 及其以下浏览器，加载了 html5shiv.min.js。
当然，以上方法都只是在尽量减少不支持 API 对代码的影响，但是可能并不能解决所有的兼容性问题，所以我们还需要在其他方面继续学习、总结和优化，来减少不必要的兼容问题。
最后，提供一个 AngularJS 实现的 SPA 兼容 IE8 及以上版本的完整代码 (主要是 router 和 controller 的定义)
-- -------------------- ---- -------
-- ------
----------------------- ------------
---------------- ---------------- ------------------ -
--------------
-------------- -
------------ ------------
----------- ----------
--
--------------- -
------------ -------------
----------- -----------
--
------------
----------- -------
---
-----------------------------
-------- -----
------------ -----
---
--
----------------------- -------- -------- ---------- ------ -
------------ - ----- ------
----------------------
----------------- ------ -
----------- - -----
--
--------------- -- -
------------------- -- ----- ---- --------
---
--------------- - -------- -- -
----------- -------- ----------
--
--
------------------------ -------- -------- ---------- ------ -
------------ - ------ ----
-----------------------
----------------- ------ -
----------- - -----
--
--------------- -- -
------------------- -- ----- ----- --------
---
--------------- - -------- -- -
----------- -------- ----------
--
---参考资料：
- https://modernizr.com/docs
- https://github.com/es-shims/es5-shim
- https://docs.angularjs.org/api/ngRoute/service/$route
- https://docs.angularjs.org/api/ng/provider/$locationProvider
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f39808f6b2d6eab3cf0c0e