一、什么是 HTML 页面组件化
HTML 页面组件化是将页面拆分成独立的、可复用的组件，以提高开发效率和代码的可维护性。组件化可以按照 UI 视图界面划分，方便根据不同功能需求进行组合和复用。那么，什么是 HTML 页面组件化呢？HTML 页面组件化是指将页面拆分成多个独立的组件，每个组件都包含模板（HTML）、样式（CSS）和逻辑（JS），可以独立运行和维护。这些组件可以根据需要进行组合和复用，提高开发效率和代码的可维护性。组件化可以按照 UI 视图界面划分，方便根据不同功能需求进行组合和复用。
例如，可以将页面的头部、导航栏、侧边栏、内容区域等分别拆分成独立的组件，然后根据不同的页面需求进行组合。这样可以避免重复开发，提高开发效率，同时也方便维护和修改。一个完整的具备功能的 UI 组件的构成，有结构（structure）、表现（presentation）和行为（behavior）这三个方面。结构包括经 HTML 组织后的网页内容以及 CSS 的布局类样式；表现包括 CSS 中的非布局类样式以及图标、图片等；行为包括可在 JS 中运行的事件系统以及进行逻辑处理的函数和对象方法。
从一个 UI 组件的内部是否还包含其他 UI 组件这个角度来看，分为“原子组件”和“复合组件”两类。“原子组件”是不可再分的 UI 组件，如按钮组件、图标组件等；“复合组件”则是由一个以上的原子组件所构成的，如导航菜单组件、选项卡组件等。根据 UI 组件的通用性，可分为“通用组件”和“专用组件”。“通用组件”是能够满足大部分常规场景的 UI 组件，通常作为“组件库”整体打包发布；“专用组件”是为了解决某些特殊场景需求而存在的，一般单独发包。
按照 UI 组件所起到的作用，大概可划分为以下几类：组件继承不像面向对象编程中的继承那样是行为的复用，这里所说的“继承”是指表现的复用，并且还能够“多重继承”。引入“虚拟组件”的概念，它是几个主题风格属性的集合。例如，输入框组件、下拉列表组件等都属于表单控件，它们都继承自“表单控件”这个虚拟组件。在现代前端开发中，HTML 的结构基本是动态生成的，并且强依赖于 React、Vue 这类没有统一标准的 JS 库/框架。
另外，还存在着像 WXML、AXML 这类平台限定的视图结构描述语言。由于写法不一致，这就使页面内容结构变得不那么稳定。一般来说，离用户越近的东西越容易发生改变。在网站、应用中离用户最近的是 GUI，而在 GUI 中离用户最近的则是主题风格，这是对用户来说最直观的东西。主题风格会随着 GUI 设计人员的审美和想法而改变，所以它是最易变的。而 UI 组件的视觉结构和交互逻辑是最不易变的，且无论是交互模式还是触发事件都是可枚举的。
HTML 页面组件化是一种将页面拆分成独立的、可复用的组件的开发方式，可以提高开发效率和代码的可维护性。在进行 HTML 页面组件化开发时，需要考虑组件的构成、分类以及易变性等因素，以便更好地实现组件的复用和维护。