muliminty note

00-笔记整理方案!

8分钟阅读

如果按照 文法、语义 和 运行时 的层次进行整理，那么前端知识体系就可以分为以下几个大的模块。每个模块的内容会逐层展开，帮助你更好地理解从语法到行为的全过程，并且在整理过程中也能方便地通过 Obsidian 的笔记结构进行连接和扩展。

一、文法（Grammar）

文法是编程语言的基础，定义了程序的结构和语法规则。在前端开发中，文法主要包括语言的词法和语法部分。

1.1 词法（Lexical）

  • 直接量：例如数字（123）、字符串（"hello"）、布尔值（true、false）、null、undefined。

  • 关键字：如 let、const、function、if、for、return 等，语言的保留字。

  • 标识符：如变量名、函数名、类名、属性名等用户定义的名称。

  • 运算符：如算术运算符（+、-、*、/）、比较运算符（===、==、<、>）等。

1.2 语法（Syntactic）

  • 表达式（Expression）：如算术表达式（a + b）、逻辑表达式（a && b）、赋值表达式（x = 10）。

  • 语句（Statement）：如条件语句（if、switch）、循环语句（for、while）、异常语句（try、catch）。

  • 函数（Function）：函数声明、函数表达式、箭头函数等。

  • 对象（Object）：对象字面量、类声明、对象属性和方法。

  • 模块（Module）：模块的导入（import）和导出（export）语法。

1.3 文法与类型系统（Grammar & Type System）

  • 基本类型：如 string、number、boolean、null、undefined、symbol。

  • 引用类型：如 object、array、function。

  • 类型转换：隐式类型转换（强制转换）和显式类型转换（Number()、String() 等）。

二、语义（Semantics）

语义描述的是程序语言的逻辑含义，即它告诉我们在什么情况下，程序中的代码会产生什么行为。

2.1 作用域（Scope）

  • 全局作用域：JavaScript 的全局执行环境，通常是 window 或 global 对象。

  • 函数作用域：每个函数都有自己的作用域，可以通过函数内的变量访问外部变量。

  • 块级作用域：由 let 和 const 声明的变量具有块级作用域。

2.2 闭包（Closure）

  • 定义：闭包是函数和其作用域链的组合，可以访问其外部函数的变量，即使外部函数已经执行完毕。

  • 应用场景：私有变量、回调函数、事件监听等。

2.3 原型链（Prototype Chain）

  • 原型：每个对象都有一个 prototype 属性，指向它的原型对象。

  • 继承：通过原型链，JavaScript 对象可以继承其原型对象的属性和方法。

  • 原型链查找：JavaScript 引擎会沿着原型链查找属性或方法。

2.4 异步编程（Asynchronous Programming）

  • 回调函数：函数作为参数传递给另一个函数，执行完成后回调。

  • Promise：通过 then 和 catch 处理异步操作，替代回调函数。

  • async/await：基于 Promise 的语法糖，提供了更清晰的异步代码书写方式。

2.5 事件模型（Event Model）

  • 事件流：事件的捕获、目标和冒泡阶段。

  • 事件委托：通过父元素监听子元素的事件，优化性能。

  • 事件处理程序：如何在事件发生时处理 DOM 事件，如点击、输入等。

三、运行时（Runtime）

运行时描述的是程序在执行过程中的行为和运行环境。它涉及到程序如何在计算机上执行、如何与内存交互、如何处理异步任务等。

3.1 执行上下文（Execution Context）

  • 全局执行上下文：浏览器或 Node.js 中的全局环境，包含了全局对象（window 或 global）和全局作用域。

  • 函数执行上下文：每次函数调用时，都会创建一个新的执行上下文，包含函数的参数、变量、this 等信息。

  • 调用栈（Call Stack）：JavaScript 的执行机制是单线程的，函数调用按照栈的顺序执行。

3.2 内存管理（Memory Management）

  • 堆与栈：栈用于存储基础数据类型和引用类型的指针，堆用于存储对象和数组。

  • 垃圾回收（Garbage Collection）：自动回收不再使用的内存，使用标记清除算法。

3.3 事件循环（Event Loop）

  • 宏任务与微任务：JavaScript 中的异步任务分为宏任务（如 setTimeout）和微任务（如 Promise）。

  • 执行顺序：JavaScript 会按顺序执行宏任务和微任务，先执行所有微任务，再执行宏任务。

3.4 类型系统（Type System）

  • 基本类型：包括 undefined、null、boolean、number、string 和 symbol。

  • 引用类型：包括 object、array、function 等。

  • 自动类型转换：JavaScript 中的隐式类型转换，如字符串与数字之间的转换。

3.5 性能优化（Performance Optimization）

  • 防抖与节流：优化频繁触发的事件（如 scroll、resize）。

  • 懒加载与按需加载：延迟加载不必要的资源，减少初始加载时间。

  • 代码分割：将代码拆分成多个小模块，按需加载，优化页面加载性能。

四、如何在 Obsidian 中整理这个体系？

使用 Obsidian 构建文法、语义和运行时的知识体系时，可以将每个部分作为独立的笔记或文件夹来组织。每个层次之间的知识点可以通过双向链接（例如 [[闭包]]、[[异步编程]]）建立联系，形成一个有机的知识网络。

结构示例：

前端知识体系/
│
├── 文法/
│   ├── 词法.md
│   ├── 语法.md
│   └── 类型系统.md
│
├── 语义/
│   ├── 作用域.md
│   ├── 闭包.md
│   ├── 原型链.md
│   ├── 异步编程.md
│   └── 事件模型.md
│
└── 运行时/
    ├── 执行上下文.md
    ├── 内存管理.md
    ├── 事件循环.md
    ├── 类型系统.md
    └── 性能优化.md

在每个文件中，你可以：

  • 创建详细的内容，例如具体的概念、例子、代码片段等。

  • 使用双向链接连接相关的知识点，帮助自己在学习时迅速跳转到相关的部分。

  • 标签管理：为每个笔记添加标签（如 #基础、#进阶、#性能），方便后续筛选和查询。

总结

通过 文法、语义 和 运行时 的层次划分，前端知识体系变得清晰且系统，帮助学习者从基础的语言规则，到深层次的行为逻辑，再到实际的运行机制逐步深入理解。在 Obsidian 中，利用文件夹结构、双向链接和图谱视图，可以轻松管理和扩展这一知识体系，使其不断随着新技术、新概念的发展而得到完善。

关系图谱