前端语言知识串讲｜青训营前端语言知识串讲：前端三剑客HTML、CSS、JavaScript，以及MVC、MVVM 和

前端语言的基本能力

基础的前端三剑客HTML、CSS、JavaScript

HTML（超文本标记语言） ： HTML 是 Web 页面的基础结构。它用于描述网页的内容和结构。HTML 使用一系列标记（称为标签）来定义页面元素，如标题、段落、列表、图片和链接等。浏览器解析 HTML 代码，并根据标签的语义来显示页面内容。HTML 为网页提供了基本的骨架，使浏览器能够呈现文本、图像和其他媒体。

CSS（级联样式表） ： CSS 用于描述 HTML 元素的外观和布局。CSS 允许我们定义如何显示 HTML 元素，例如字体、颜色、大小、间距等。通过使用 CSS，我们可以将样式与 HTML 结构分离，使得网站的设计和维护更加简便。CSS 还允许我们根据不同的设备和屏幕尺寸应用不同的样式(媒体查询)，以实现响应式设计。

JavaScript： JavaScript 是一种脚本语言，用于在浏览器中增加交互性和动态效果。它允许我们编写脚本来处理用户操作，例如点击按钮、输入表单、拖动元素等。通过使用 JavaScript，我们也可以操作 HTML 和 CSS，动态更改页面内容和样式，从而提供丰富的用户体验。JavaScript 也可以与服务器进行通信，以便在不刷新整个页面的情况下获取或提交数据（例如，通过 AJAX）。

MVC & MVVM & MVP

HTML5 Web Component

HTML5 的 Web Component 是一种基于标准 Web 技术实现的组件化开发模型，它由三个技术规范组成：Custom Elements、Shadow DOM 和 HTML Templates。

Custom Elements 允许开发者自定义 HTML 元素，可以通过 JavaScript API 来创建、注册和使用自定义元素。这样，开发者就可以将多个 HTML 元素封装为一个独立的组件，并在 Web 页面中进行复用。Custom Elements 还提供了一些生命周期方法和事件，可以让开发者控制自定义元素的创建和销毁过程。

Shadow DOM 允许开发者创建一个独立的、封装的 DOM 树，用于包含和隔离组件内部的 HTML 结构、CSS 样式和 JavaScript 行为。这样，开发者就可以将组件内部的实现细节隐藏起来，避免与外部页面的 HTML、CSS 和 JavaScript 冲突。Shadow DOM 还提供了一些 API，可以让开发者更加方便地控制组件内部的样式和行为。

HTML Templates 允许开发者将 HTML 片段封装为一个可重用的模板，并在 Web 页面中进行复用。HTML Templates 还支持使用 JavaScript API 来动态生成和填充模板内容，以适应不同的使用场景。

代码示例

<!-- 定义一个自定义元素 my-button，使用 Shadow DOM 封装组件内部的样式和行为 -->
<template id="my-button-template">
  <style>
    button {
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 3px;
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
    }
    button:hover {
      background-color: #0069d9;
    }
  </style>
  <button>Click me!</button>
</template>

<!-- 在页面中使用自定义元素 my-button -->
<my-button></my-button>

// 定义一个 MyButton 类，继承自 HTMLButtonElement，用于创建自定义元素
class MyButton extends HTMLButtonElement {
  constructor() {
    super();

    // 创建 Shadow DOM，并将模板内容插入其中
    const shadow = this.attachShadow({ mode: 'open' });
    const template = document.getElementById('my-button-template');
    const clone = template.content.cloneNode(true);
    shadow.appendChild(clone);

    // 绑定按钮的点击事件
    const button = shadow.querySelector('button');
    button.addEventListener('click', () => {
      console.log('Button clicked!');
    });
  }
}

// 将 MyButton 注册为自定义元素
customElements.define('my-button', MyButton, { extends: 'button' });

MVC、MVVM 和 MVP 是三种常见的前端架构设计模式。

MVC 是 Model-View-Controller（模型-视图-控制器）的缩写。它是一种分层设计模式，通过将应用程序分为三个组件：模型（Model）、视图（View）和控制器（Controller），实现了应用程序逻辑和界面之间的分离。模型表示应用程序的数据和业务逻辑，视图表示用户界面，控制器负责协调模型和视图之间的通信。

MVVM 是 Model-View-ViewModel（模型-视图-视图模型）的缩写。它是一种基于数据绑定的设计模式，通过将应用程序分为三个组件：模型（Model）、视图（View）和视图模型（ViewModel），实现了数据的双向绑定。模型表示应用程序的数据和业务逻辑，视图表示用户界面，视图模型负责将模型数据绑定到视图上，并处理用户输入的数据。

MVP 是 Model-View-Presenter（模型-视图-表示器）的缩写。它是一种基于事件驱动的设计模式，通过将应用程序分为三个组件：模型（Model）、视图（View）和表示器（Presenter），实现了应用程序逻辑和界面之间的分离。模型表示应用程序的数据和业务逻辑，视图表示用户界面，表示器负责协调模型和视图之间的通信，并响应用户的事件。

前端语言知识串讲｜ 青训营

前端语言的基本能力

MVC & MVVM & MVP

HTML5 Web Component

代码示例

前端语言知识串讲｜青训营