在现代化的 SPA (Single Page Application) 应用中，为了提高用户体验，很多页面和交互操作需要异步加载数据和资源，但是这也带来了一个问题：在数据和资源加载完成前，用户需要等待，这时候需要一个专门的组件来展示加载状态，这个组件就是 Loading 组件。
本篇文章将分析 SPA 应用中 Loading 组件的实现方式，并提供相应的示例代码，旨在对前端开发者有一个深入的认识和指导意义。
Loading 组件的基本原理
Loading 组件最基本的实现方式就是利用 CSS3 的动画特性，比如使用 @keyframes 定义一组动画规则，然后在 HTML 结构上加上相应的 CSS 类名即可展示出相应的动画。
-- -------------------- ---- -------
---------- ------- -
-- -
---------- ----------
-
---- -
---------- ---------------
-
-
-------- -
------- ---- ----- --------
----------- ---- ----- --------
-------------- ----
------ ------
------- ------
---------- ------- -- ------ ---------
-<div class="loading"></div>
但是，以上代码只是一段静态的 CSS，要真正实现 Loading 组件，我们需要根据不同的业务需求来对其进行进一步封装。
Loading 组件的通用实现方式
对于通用的 Loading 组件，我们可以考虑将其封装成 Vue 组件的形式，这样可以很方便的在 SPA 应用中使用。下面是一个简单的 Loading 组件的示例代码：
-- -------------------- ---- -------
----------
---- -------------------- ---------------
---- --------------------
---- ------------------------------
---- ---------------------- --- --------
------
------
-----------
--------
------ ------- -
----- ----------
------ -
-------- -
----- --------
-------- ------
--
---- -
----- -------
-------- ---
--
--
--
---------
-------
------------- -
--------- ------
---- --
------ --
------- --
----- --
-------- -----
----------------- ------- -- -- -----
-------- -----
---------------- -------
------------ -------
-
------------ -
-------- -----
--------------- -------
---------------- -------
------------ -------
----------------- -----
-------------- ----
-------- -----
----------- - --- --- ------- -- -- ------
-
---------------- -
------- --- ----- ------- -- -- -----
----------------- -----
-------------- ----
------ -----
------- -----
---------- --------------- ---- ------ ---------
-------------- -----
-
------------ -
---------- -----
------ ------- -- -- -----
-
--------以上代码中，我们使用了 Vue 的 props 来接受组件的 visible 和 tip 两个参数，其中 visible 表示组件是否展示，tip 表示加载提示的文字。
在 CSS 中，我们使用了 Flex 布局对 Loading 组件进行了布局，使其在水平和垂直方向上都居中展示。同时，我们使用了 @keyframes 定义的动画 loading-spinner 来展示加载状态。
在 HTML 中，我们只需要使用以下方式来引入 Loading 组件：
-- -------------------- ---- -------
----------
-----
-------- --- -------
-------- -------------------- -----------------------------
------
-----------
--------
------ ------- ---- --------------------------
------ ------- -
----- ------
----------- -
-------
--
---- -- -
------ -
---------- -----
-
--
-------- -
-------- -- -
-- --------
-------------- - ----
------------------------------------ -- -
-- -------
------------- -- -
-------------- - -----
--
-
-
-
---------Loading 组件的定制化实现方式
对于不同的业务场景，我们往往需要定制化展示不同的 Loading 组件。比如，在一个音乐类的 SPA 应用中，我们可以展示一个炫酷的音乐播放器动效来替代通用的 Loading 组件。这就需要 Frontend Developer 根据业务需求来对 Loading 组件进行定制化的开发。
下面是一个音乐播放器式的 Loading 组件示例：
-- -------------------- ---- -------
----------
---- -------------------- ---------------
---- --------------------
---- ----------------------
---- -----------------------------------
---- -----------------------------------
---- ----------------------------------
---- ---------------------------------
------
---- ----------------------- --- --------
------
------
-----------
--------
------ ------- -
----- ----------
------ -
-------- -
----- --------
-------- ------
--
---- -
----- -------
-------- ---
--
--
--
---------
-------
------------- -
--------- ------
---- --
------ --
------- --
----- --
-------- -----
----------------- ------- -- -- -----
-------- -----
---------------- -------
------------ -------
-
------------ -
-------- -----
--------------- -------
---------------- -------
------------ -------
-
-------------- -
-------- -----
--------------- -------
---------------- -------
------------ -------
-------------- -----
------ ------
------- ------
--------- ---------
-
--------------------- -
------ -----
------- -----
--------- ---------
----- ----
---- ----
----------------- -----
-------------- ----
----------------- ------ -------
---------- ---------------
----------- - - ---- -----
-
--------------------- -
------ ------
------- ------
------- --- ------ -----
-------------- ----
-------- -----
---------------- -------
------------ -------
--------- ---------
-
-------------------- -
------ -----
------- ----
----------------- -----
-------------- -----
-------- -----
---------------- -------
------------ -------
--------- ---------
------- ---
----- ----
---------- ------------------- ---- ------ ---------
-
------------------- -
------ ----
----------- -----
-------- ----
----------- -------
------ -----
----------------- --------- ---- ---- -----
-------------- -----
-
------------- -
---------- -----
------ -----
-
--------以上代码中，我们定义了一个名为 loading-music 的音乐播放器式的 Loading 组件，其中包含了歌曲封面、唱针、音乐圆圈、音乐播放线和歌曲名称等元素，通过不同的 CSS3 动画来实现展示效果。
同样的，我们在 HTML 中只需要引入这个 Loading 组件，并传递相应的参数即可。
-- -------------------- ---- -------
----------
-----
---------- --- -------
-------- -------------------- ---------------------------
------
-----------
--------
------ ------- ---- --------------------------
------ ------- -
----- ------
----------- -
-------
--
---- -- -
------ -
---------- -----
-
--
-------- -
--------- -- -
-- ----------
-------------- - ----
------------------------------------- -- -
-- ---------
------------- -- -
-------------- - -----
--
-
-
-
---------总结
以上就是关于 SPA 应用中 Loading 组件的实现方式的详细解析，我们可以通过对 Loading 组件的通用实现和定制化实现来为不同的业务场景提供相应的展示效果。同时，通过对 Loading 组件开发的学习和实践，我们也可以提高自己的前端技术水平和开发能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647ac91e968c7c53b066ebca