Web 应用的开发过程中，我们经常需要构建可扩展的组件，以便于在不同的页面和应用中重复使用。传统的开发方式往往需要编写大量的 JavaScript 和 HTML 代码，而这些代码往往难以复用和维护。为了解决这个问题，我们可以使用 Custom Elements 和 Model-View-ViewModel（MVVM）架构来构建可扩展的 Web 应用。
Custom Elements
Custom Elements 是 Web Components 规范的一部分，它允许我们创建自定义的 HTML 元素，并将其封装在一个独立的组件中。使用 Custom Elements，我们可以创建具有自定义行为和样式的 HTML 元素，这些元素可以像普通的 HTML 元素一样使用和组合。
创建 Custom Elements
要创建一个 Custom Element，我们需要使用 window.customElements.define 方法，该方法接受两个参数：元素名称和元素类。元素名称必须是一个连字符分隔的小写字符串，例如 my-element。元素类必须继承自 HTMLElement 类，并实现 connectedCallback 和 disconnectedCallback 方法。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-- -------------------
-
------------------- -
-- ------------
-
---------------------- -
-- -----------
-
-
------------------------------------------ -----------使用 Custom Elements
创建完 Custom Element 后，我们可以像使用普通的 HTML 元素一样使用它。例如：
<my-element></my-element>
我们还可以为 Custom Element 添加属性和事件，例如：
<my-element foo="bar" on-click="handleClick"></my-element>
在元素类中，我们可以通过 this.getAttribute('foo') 方法获取属性值，通过 this.dispatchEvent(new Event('click')) 方法触发事件。
Model-View-ViewModel
Model-View-ViewModel 是一种常用的前端架构模式，它将应用程序分为三个部分：模型（Model）、视图（View）和视图模型（ViewModel）。模型表示应用程序的数据和业务逻辑，视图表示应用程序的用户界面，视图模型则是连接模型和视图的桥梁。
MVVM 架构
在 MVVM 架构中，视图模型负责将模型中的数据转换为视图中的数据，同时也负责将视图中的事件转换为模型中的操作。视图模型通常由 JavaScript 类实现，它们可以使用观察者模式来监听模型中的数据变化和视图中的事件。
-- -------------------- ---- -------
----- --------- -
------------------ ----- -
---------- - ------
--------- - -----
-----------------------------
----------------------------------- -----------------------------
-
-------- -
----- ---- - ---------------------
----- --------- - ---------------------
----------------------------
-
------------------ -
----- ---- - -------------------------
-------------------------
-
--------------- -
-- ----------------
-
-使用 MVVM 架构
使用 MVVM 架构可以将应用程序分为三个部分，使得每个部分都可以独立开发、测试和维护。例如，在一个购物车应用程序中，我们可以将购物车数据封装在一个模型中，将购物车列表视图封装在一个视图中，将购物车逻辑封装在一个视图模型中。
-- -------------------- ---- -------
----- --------- -
------------- -
---------- - ---
-
------------- -
----------------------
-----------------------
-
----------------- -
------------------------ ---
-----------------------
-
--------- -
------ -----------
-
------------- -
---------- - -----
-----------------------
-
--------------------- -
-- -----
-
------------------------ -
-- -----
-
----------------- -
-- -----
-
-
----- -------- -
-------------------- -
------------ - --------
-
----------------- -
-- ----
-
-------------- -
-- --------
-
-
----- ------------- -
------------------ ----- -
---------- - ------
--------- - -----
-----------------------------
----------------------------------- -----------------------------
-
-------- -
----- ---- - ---------------------
----- --------- - ---------------------
----------------------------
-
------------------ -
----- ---- - -------------------------
-------------------------
-
--------------- -
-- ----------------
-
-
----- --------- - --- ------------
----- -------- - --- ------------------------------------------
----- ------------- - --- ------------------------ ----------构建可扩展的 Web 应用
使用 Custom Elements 和 MVVM 架构可以使我们更容易构建可扩展的 Web 应用。我们可以将应用程序的不同部分封装在不同的 Custom Element 中，使用 MVVM 架构来连接它们。这样，我们就可以在不同的页面和应用中重复使用这些组件，同时也可以更方便地维护和扩展应用程序。
例如，在一个电商应用程序中，我们可以将商品列表封装在一个 Custom Element 中，将购物车列表封装在另一个 Custom Element 中，然后使用 MVVM 架构来连接它们。这样，我们就可以在不同的页面和应用中重复使用这些组件，同时也可以更方便地维护和扩展应用程序。
<product-list></product-list> <cart-list></cart-list>
-- -------------------- ---- -------
----- ---------------- -
------------- -
------------- - ---
-
------------- -
------ --------------
-
--------------------- -
------------- - ---------
-
-
----- --------------- -
-------------------- -
------------ - --------
-
----------------- -
-- ----
-
-------------- -
-- --------
-
-
----- -------------------- -
------------------ ----- -
---------- - ------
--------- - -----
----------------------------------- -----------------------------
-
------------------ -
-- --------
-
-
----- ------------- -
------------- -
---------- - ---
-
------------- -
----------------------
-
----------------- -
------------------------ ---
-
---------- -
------ -----------
-
--------------- -
---------- - ------
-
-
----- ------------ -
-------------------- -
------------ - --------
-
----------------- -
-- ----
-
-------------- -
-- --------
-
-
----- ----------------- -
------------------ ----- -
---------- - ------
--------- - -----
-----------------------------
----------------------------------- -----------------------------
-
-------- -
----- ----- - ----------------------
----- --------- - ----------------------
----------------------------
-
------------------ -
----- ---- - -------------------------
----------------------------------
-
---------------- -
-- ----------------
-
-
-------------------------------------------- ----- ------- ----------- -
------------- -
--------
---------- - --- -------------------
--------- - --- ----------------------
-------------- - --- -------------------------------- -----------
-
---
----------------------------------------- ----- ------- ----------- -
------------- -
--------
---------- - --- ----------------
--------- - --- -------------------
-------------- - --- ----------------------------- -----------
-
---总结
使用 Custom Elements 和 MVVM 架构可以使我们更容易构建可扩展的 Web 应用。我们可以将应用程序的不同部分封装在不同的 Custom Element 中，使用 MVVM 架构来连接它们。这样，我们就可以在不同的页面和应用中重复使用这些组件，同时也可以更方便地维护和扩展应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/656019bad2f5e1655da48767