单页应用（SPA）已经成为现代 Web 开发的一种趋势。它能够极大地提高用户体验，提高页面加载速度，我们可以使用 Vue、Angular、React 等前端框架/库快速建立 SPA 应用。在本文中，我们将介绍如何使用原生 JavaScript 实现 SPA 路由切换，不使用 Vue 或其他前端库，只使用 AJAX 实现页面无刷新切换。
SPA 简介
SPA优点：
- 用户体验好，页面切换无刷新感知
- 加载速度快，只需加载一次html，局部刷新数据
- 可维护性好，结构清晰，易于模块化开发
缺点：
- SEO不友好，搜索引擎检索难度大
- 对浏览器的运行性能要求较大
- 初次加载时间相对较长，对网络要求高
原生JS实现SPA基础
- history API控制地址栏和历史记录
- XMLHttpRequest实现Ajax异步数据获取
- DOM操作实现数据变化和页面重绘
-- -------------------- ---- -------
-- ------- ------- -----------
----- -------
--------------
----------- - --
--------------- - --
------------ - --
----------------- - ---------------------
------------- - ----
---------------- - ----
-----------
-
-------
------------------------------- ------------------------ ------
----------------------------------- - -- -
----------------- -- -------------------
---------------------
------
------------- - -----
---------------- - -----
-
-- ------
------------------------------------- ------------------------ ------
-
----------- ----------
----------------- - -------- -- ------------
-
----------
-------------------- --- --------------- -- ---------------
------------- - ----
---------------- - ----
----------------- - -------------------
------------------------------------
--------------- - -----------------
------------------------------
-
-
-----------------
----------------- -- -------
--------------- - -------------------------------
------------------------------
-
-------
------------- - ----
---------------- - ----
--------------------
----------------- - ----------------- - - - - - -----------------
--------------- - -------------------------------
-------------------------------
--------------
-
----------
------------- - ----
---------------- - ----
-------------------
----------------- - ----------------- -- ------------------- - ------------------- - - - -----------------
--------------- - -------------------------------
------------------------------
-------------
-
-
-- ------- ----------
------
---- ------------------
----
------ -------------------------
------ ----------------------------
------ ------------------------------
-----
---- --------------------------
------
-------
-- ------- ------
----- -----
-----------------------
-------------- - ---------
------------- - ----
-----------
-
----- -------
----- -------------------
-------------
----- ------------------
-
----- ---------
--- ---- - ----- --------------
------------------------ - ----
-
----- ----------
----
--- ---- - -------------
--- -------- - ----- --------------------
--- -------- - --- ------------------------------------- ------------
--- -------- - ---------------------------------
-----------------------------------
--- ----------------- - -----------------------------
--- ----------- - ---------------------------------------------------
--------------------------- - -----------
---- - --------------------------- ------------
------ ----
----------
----- -
-
-
----- ----------------
----
--- --- - -----------------
--- -------- - ----- ----------
--- ---- - ----- ---------------
------ ----
----------
----- -
-
-
-------------
------ ----
-
--------------- -
-------------- -
-
总结
本文介绍了如何使用原生 JavaScript 实现 SPA 路由切换，不使用 Vue 或其他前端库，只使用 AJAX 实现页面无刷新切换。我们通过对 history API 和 XMLHttpRequest 实现 AJAX 异步获取数据，再通过 DOM 操作来完成数据变化和页面重绘，实现了 SPA 的核心功能。这个项目的实现方法可以帮助初学者掌握 SPA 的基础知识，更好地理解前端框架/库所基于的理念和思路，提高自身的编程水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654f56827d4982a6eb84bb10