muliminty note

JavaScript 知识体系范式

5分钟阅读

JavaScript 知识体系范式（标准化架构）

一、核心范式框架

graph TD
A[JavaScript知识体系] --> B[文法层]
A --> C[语义层]
A --> D[运行时层]

B --> B1[词法]
B --> B2[语法]

C --> C1[静态语义]
C --> C2[动态语义]

D --> D1[类型系统]
D --> D2[执行模型]
D --> D3[内存管理]

二、分层标准定义

  1. ​​文法层（Syntax）​​

    • 词法单元
      • 字符集/编码
      • Token分类（关键字/标识符/字面量等）
      • 词法上下文（ASI规则等）
    • 语法结构
      • 表达式语法
      • 语句结构
      • 模块语法

  2. ​​语义层（Semantics）​​

    类型检查时机示例概念
    静态语义编译时TDZ/变量提升/类型注解
    动态语义运行时原型链/this绑定/类型转换

  3. ​​运行时层（Runtime）​​

    flowchart LR
R[Runtime] --> T[类型系统]
R --> E[执行模型]
R --> M[内存管理]

T --> T1[原始类型]
T --> T2[对象类型]
T --> T3[类型转换]

E --> E1[调用栈]
E --> E2[事件循环]
E --> E3[作用域链]

M --> M1[GC机制]
M --> M2[闭包存储]
M --> M3[内存泄漏]

三、知识点文件管理Demo

js-knowledge/
├── 文法层/
│   ├── 词法/
│   │   ├── 标识符规则.md
│   │   ├── 字面量/
│   │   │   ├── 模板字符串.md
│   │   │   └── 正则表达式.md
│   │   └── 运算符优先级表.json
│   └── 语法/
│       ├── 语句/
│       │   ├── for...of迭代.md
│       │   └── try...catch.md
│       └── 模块/
│           ├── import映射.md
│           └── 动态导入.md
│
├── 语义层/
│   ├── 静态语义/
│   │   ├── 作用域链图示.drawio
│   │   └── 类型推断案例.ts
│   └── 动态语义/
│       ├── 原型链/
│       │   ├── class继承.md
│       │   └── __proto__图示.png
│       └── this绑定/
│           ├── 箭头函数对比.js
│           └── apply-call-bind.md
│
└── 运行时层/
    ├── 类型系统/
    │   ├── 原始类型/
    │   │   ├── BigInt特性.md
    │   │   └── Symbol唯一性.md
    │   └── 类型检测/
    │       ├── typeof局限.md
    │       └── instanceof原理.md
    ├── 执行模型/
    │   ├── 事件循环/
    │   │   ├── 任务队列模型.png
    │   │   └── 微任务执行时机.md
    │   └── 作用域/
    │       ├── 闭包案例.js
    │       └── 块级作用域.md
    └── 内存管理/
        ├── GC算法/
        │   ├── 标记清除.md
        │   └── 分代回收.md
        └── 内存分析/
            ├── 快照对比工具.md
            └── 常见泄漏模式.md

四、维护规范

  1. ​​文件命名标准​​

    • 概念定义：概念名.md（如闭包.md）
    • 对比类：概念1_vs_概念2.md（如call_apply_bind对比.md）
    • 图示类：功能-描述.扩展名（如原型链-继承关系.drawio）

  2. ​**​内容模板示例

# [标题：概念名称]
## 所属层级
`文法层/语法/语句`

## 核心特征
- 语法形式：`[代码示例]`
- 编译时行为：`[如变量提升等]`
- 运行时行为：`[如执行顺序等]`

## 典型场景
```javascript
// 示例代码（需注释说明关键点）

边界情况

  1. 与[相似概念]的区别
  2. 严格模式下的变化

相关规范

  • [ECMAScript标准条款]
  • [兼容性表格]

#### 五、验证工具
1. 架构完整性检查表：
   - [ ] 新特性可明确归入某一层级
   - [ ] 每个叶节点有具体技术点对应
   - [ ] 层间交互有明确文档说明（如文法到运行时的转换）

2. 示例验证：
   ```mermaid
   flowchart LR
   TopLevelAwait --> 文法层/语法/模块
   TopLevelAwait --> 运行时/执行模型/微任务

该范式体系通过：

  1. 横向分层保证逻辑完备性
  2. 纵向细分维持可扩展性
  3. 文件化管理实现知识沉淀
  4. 标准化模板确保信息质量

关系图谱