Web Components 是一套由 W3C 提出的标准，它允许开发者自定义 HTML 标签，将其封装成可复用的组件。在多页面应用中，我们可以使用 Web Components 来提高页面的可复用性和可维护性。本文将围绕着 Web Components，介绍多页面应用的开发实践。
Web Components 简介
在介绍 Web Components 的应用前，我们先了解一下它的组成部分：Custom Elements、Shadow DOM 和 HTML Templates。
Custom Elements
Custom Elements 允许开发者创建自定义的 HTML 标签。例如，我们可以使用 custom-element 标签来创建一个新的自定义标签：
<custom-element></custom-element>
在 JavaScript 中，可以使用 window.customElements.define 方法来注册并定义这个自定义标签的行为：
class CustomElement extends HTMLElement {
constructor() {
super();
this.innerHTML = 'Hello, world!';
}
}
window.customElements.define('custom-element', CustomElement);通过上面的代码，我们将 custom-element 标签注册成一个自定义标签，并定义了它的行为，即在创建之后，它的内部 HTML 会变成 'Hello, world!'。
Shadow DOM
Shadow DOM 允许我们封装一个独立的 DOM 树，使其与页面的其他部分隔离开来。这有助于我们创建更加封装的组件，避免组件内部的样式和 JavaScript 影响到其他页面元素。
在一个自定义元素内，我们可以使用 Shadow DOM 来封装我们的样式和 HTML：
-- -------------------- ---- -------
----- ------------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
-------------------- - -
-------
- -
------ ----
-
--------
--------- ----------
--
-
-
---------------------------------------------- ---------------在上面的代码中，我们在自定义元素的 Shadow DOM 中定义了一个红色的 <p> 标签。这个 <p> 标签只能在这个自定义元素内部被访问到，对其他页面元素不会产生影响。
HTML Templates
HTML Templates 允许我们在一个页面上定义一个 HTML 模板，并在需要的时候使用它多次复制。它通过 <template> 标签进行定义：
<template id="my-template"> <p>Hello, world!</p> </template>
在 JavaScript 中，我们可以通过 document.importNode 方法来复制这个模板，并插入到 DOM 中：
const template = document.querySelector('#my-template');
const clone = document.importNode(template.content, true);
document.body.appendChild(clone);上面的代码会将 my-template 的内容复制一遍，并插入到 body 中。
SPA vs. MPA
在需要构建一个多页面应用（Multi-Page Application，MPA）时，我们通常使用传统的页面导航方式，即用户点击链接后，浏览器向服务器请求新的 HTML 页面。与之相对应的，单页面应用（Single-Page Application，SPA）使用 JavaScript 动态更新 DOM，不需要重新加载页面。
MPA 和 SPA 都有各自的优缺点。MPA 通常更适用于访问规模较大的应用，且不需要特别优化 SEO。SPA 则更适合应用程序的体验优化，因为 SPA 页面的加载速度更快，并可以提供更多的特性，如路由和前端验证。
在本文中，我们将关注于 MPA 的开发实践。
Web Components 的多页面应用实践
在多页面应用中，不同的页面可能需要有不同的自定义元素。例如，一个新闻网站的首页需要展示文章列表，而文章页面则需要展示文章内容。我们可以使用 Web Components 来封装这些自定义元素，并在需要的时候动态加载它们。
自定义元素的定义
在自定义元素的定义中，我们可以提取出我们的页面部分，作为一个独立的自定义元素。例如，在我们的新闻网站中，我们可以定义一个自定义元素 news-list，用于展示新闻列表：
-- -------------------- ---- -------
----- -------- ------- ----------- -
------------- -
--------
-- --------
------------------
-------------- -- ----------------
---------- -- -
-------------- - ---------------- -- -
-----
-------------------------
-------------------------
------
------------
---
-
-
----------------------------------------- ----------在上面的代码中，NewsList 会首先请求 /api/news 接口，获取新闻数据，并将它们展示在内部 DOM 中。
我们可以在新闻网站的首页中使用 news-list：
-- -------------------- ---- -------
------
--------
---- ---- ---
---------
-----------------------
--------
---- ------ ---
---------
------- ------------------------
-------页面的定义
在多页面应用中，我们通常会有多个页面。每个页面具有不同的内容和功能，因此，我们需要在每个页面中定义对应的自定义元素。
在新闻网站的例子中，我们可以定义一个名为 news.html 的页面，它包含了一个用于展示具体新闻的自定义元素 news-detail：
<news-detail></news-detail> <script src="news.js"></script>
在 JavaScript 文件 news.js 中，我们可以定义 NewsDetail 自定义元素：
-- -------------------- ---- -------
----- ---------- ------- ----------- -
------------- -
--------
----- -- - ------------------------
-- ---------
------------------------
-------------- -- ----------------
------------- -- -
-------------- - -
-------------------------
----------------------
-------------------------
--
---
-
-
------------------------------------------- ------------在这个例子中，我们定义了一个 NewsDetail 自定义元素，并根据它的 id 参数获取具体新闻的内容。
多页面间的切换
在多页面应用中，我们通常采用页面导航的方式进行页面间的切换。可以在每个页面中添加导航链接，让用户点击后导航到相应的页面。
在本例中，我们可以在新闻列表页面中添加导航链接，到新闻详情页面：
<div> <h2><a href="news.html?id=1">Article 1</a></h2> <p>Content of Article 1</p> </div> <div> <h2><a href="news.html?id=2">Article 2</a></h2> <p>Content of Article 2</p> </div>
在这个例子中，当用户点击链接时，浏览器会下载新的 HTML 页面，并将它渲染到页面中。在新的页面中，我们会加载 news.js，并定义用于展示文章详情的自定义元素 news-detail。
结论
在多页面应用中，使用 Web Components 可以帮助我们更好地组织代码，使其更容易维护和复用。Web Components 提供了 Custom Elements、Shadow DOM 和 HTML Templates 三个核心功能，它们共同工作，使我们能够创建独立的组件，并隔离它们的代码和样式。
在我们的实践中，我们将不同的页面封装成了独立的自定义元素，并通过页面导航进行切换。这个方法在多页面应用中非常实用，可以使我们的代码更好地组织，让维护和扩展变得更加容易。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ee383b77d675cfffd40542