前端页面的三个逻辑层

前端页面分为三个逻辑层面：

结构层、样式层、 行为层，三者分别承担不同的职能、并且相互配合，共同构建出用户页面。

---

1. 结构层

• 定义：负责页面的语义化内容架构、信息组织。
• 技术实现：主要通过HTML进行实现。
• 核心功能：定义页面内容的语义化结构、结构之间的层级关系，为样式层和行为层提供挂载基础。

2. 样式层

• 定义：负责页面的视觉呈现和布局效果。
• 技术实现：主要通过CSS和一些预处理器（Sacc、Less等）。
• 核心功能：处理页面元素的视觉样式、盒子模型的布局效果、响应式自适应等工作。

3.行为层

• 定义：负责页面的交互逻辑和动态功能。
• 技术实现：主要通过javaScript实现，结合框架（React、Vue）或库（jQuery）。
• 核心功能：处理页面中的用户交互逻辑、数据动态处理、路由和动画效果等。

---

理想情况下：三层应该是解耦实现的（例如：Vue中<template> <style> <script>分别对应三个逻辑层面）。
因为清晰的逻辑层面划分是前端工程化的基础，也是理解复杂前端架构（MVVM、微前端）的核心切入点。