前端 分类

CSS

注释：/* */

位置

内部样式：写在<head>中<style>内

行内样式：写在标签的style属性中

外部样式：写在.css文件中，在<head>的<link rel="stylesheet" href="路径">导入

作用顺序：行内样式 > 内部样式 > 外部样式表（就近原则）

选择器

基本选择器

标签选择器

p{
	color: red;
}	<!-- 用于清除样式 -->
div{}

Goat_Yang2025/10/20大约 9 分钟

HTML

不分大小写、有单标签和双标签

<!-- 注释信息 -->

Goat_Yang2025/10/20大约 4 分钟

JavaScript

书写位置

内部：<body>最后，<script>内

外部：<script src=".js"></script>

注释：//,/* */

一、基础

**注意：**javascript使用小驼峰命名方式，即getElementById（第一个单词首字母小写，后面单词首字母大写）

// 输出
document.write(666,'<p>111</p>')	// 网页输出，标签可被识别
console.log(666)	// 控制台输出
alert('666')		// 弹窗

// 输入
prompt('请输入您的名字')

//确认框
confirm('确认是否打开')

// 变量
var a	// 声明符 标识符
let b='fe'	// es6新出 作用域中比var更严谨
console.log(typeof b)   //typeof查看数据类型

// 转义字符
\n换行 \t制表符 \\输出斜杠 \'输出引号

// 运算符
        // 算数运算符 + - * / ** // &
        // 逻辑运算符 &&与 ||或 !非
        // 赋值运算符 = += -= *= /=
        // 关系运算符 == > < >= <=
        // 单目运算符 ++ --自增/减
let i =1
console.log(i++)
console.log(++i)
        // 三目运算符 语法糖 双分支的快捷写法
let age = 18
alert(age>=18? '成年了' : '未成年')

Goat_Yang2025/10/20大约 11 分钟

Vue入门必备知识

1. 基础概念

Vue.js：渐进式前端框架，专注视图层（可逐步引入到项目中）。
核心思想：
- 数据驱动视图（声明式渲染）
- 组件化开发（复用、可维护）
优点：学习曲线平缓、生态完善、性能优良（尤其是 Vue 3）。
使用 ES 模块构建

2. 单文件组件结构（SFC）

Goat_Yang2025/9/11大约 5 分钟

Node.js

一、什么是Node.js

定义

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，允许开发者使用 JavaScript 进行服务器端编程

本质：并非传统意义上的框架或库，而是一个让 JavaScript 运行在服务端的平台
特点：异步非阻塞 I/O、单线程事件循环、轻量高效

核心优势

前后端语言统一：前端开发者可直接使用 JavaScript 开发服务端
异步非阻塞：适合处理高并发、I/O 密集型任务（如文件读写、网络请求）
轻量级：内存占用低，适合构建微服务和实时应用
生态丰富：npm 仓库拥有数百万开源包，开发效率高

Goat_Yang2025/6/17大约 2 分钟

构建与打包工具

一、核心概念

什么是前端构建与打包？
- 构建（Build）：指将源代码经过转换、优化、合并等一系列处理，生成可运行代码的过程，包括语法转换（如 ES6→ES5）、资源处理（图片压缩、字体转换）、代码分割等。
- 打包（Packaging）：将多个分散的模块（如 JavaScript、CSS、图片等）整合为少量文件，减少浏览器请求次数，提升加载性能。
为什么需要构建与打包工具？
- 解决技术栈复杂性：处理 ES6+、TypeScript、JSX/TSX、SASS/Less 等现代技术栈的兼容性问题。
- 优化性能：压缩代码、Tree Shaking（移除未使用代码）、代码分割（按需加载）、资源缓存等。
- 提升开发效率：自动化流程（如热更新、自动编译）、模块化管理、多环境部署（开发 / 测试 / 生产）。

Goat_Yang2025/6/17大约 5 分钟

前端工具链概述

一、工具链概述

工具链（Toolchain） 指软件开发过程中用于辅助编码、构建、测试、部署等环节的一系列工具集合。在 Node.js 开发中，工具链可提升代码质量、开发效率和项目可维护性。

核心环节：

包管理与依赖管理
代码构建与打包
代码规范与格式化
测试与调试
类型检查与静态分析
自动化部署与持续集成

Goat_Yang2025/6/17小于 1 分钟

TypeScript

fvceshiukfuejlw

Goat_Yang2025/6/17小于 1 分钟

ESM规范

一、ESM 的基本概念

ESM（ECMAScript Module）是 ECMAScript 2015（ES6）引入的官方模块化规范，旨在解决 JavaScript 长期缺乏标准化模块化方案的问题。它通过import和export关键字实现模块的导入与导出，具有静态化结构、浏览器与 Node.js 统一支持、按需加载等特性，是现代前端开发的核心基础之一。

特性

模块引用为只读视图，无法直接修改值，但引用的值可以通过其他方法修改（如使用导出对象的方法）
静态模块结构：模块依赖关系在编译时确定，便于工具进行Tree Shaking（移除未使用代码），例如 Webpack 可通过此特性优化打包体积。
单例模块：每个模块在应用中仅加载一次，多次导入指向同一实例，适合管理全局状态

Goat_Yang2025/6/17大约 3 分钟

概述

前端模块化是现代前端开发的重要理念，它将复杂的应用拆分成独立、可复用的模块，便于维护和协作。

一、为什么需要模块化

避免全局变量污染：早期 JavaScript 通过 script 标签直接引入，所有变量和函数都暴露在全局作用域，容易导致命名冲突。
代码复用与维护：模块化使代码可复用，并能独立测试和更新。
依赖管理：明确模块间的依赖关系，避免加载顺序错误。

二、模块化规范的发展

Goat_Yang2025/6/17大约 2 分钟