feat(docs): enhance frontend engineering content and component styling
- Register frontend engineering demo components in theme index - Update AssetFingerprintDemo Vue imports and cleanup - Revise "finding great idea" content from numbered list to prose format - Expand web basics appendix with ECMAScript and TypeScript explanations - Improve SummaryCard component styling with enhanced gradients and spacing - Simplify BuildPipelineDemo and DependencyGraphDemo components for clarity
This commit is contained in:
sanbuphy
File diff suppressed because it is too large
Load Diff
@@ -212,7 +212,79 @@ h1 {
|
||||
|
||||
---
|
||||
|
||||
## 3. JavaScript：为什么页面需要“思考”？
|
||||
## 3. JavaScript：为什么页面需要"思考"？
|
||||
|
||||
### 3.0 JavaScript 和 ECMAScript 是什么关系？
|
||||
|
||||
你可能听说过 **ECMAScript** 这个词，它和 JavaScript 是什么关系？
|
||||
|
||||
简单来说：**ECMAScript 是标准，JavaScript 是实现。**
|
||||
|
||||
打个比方：
|
||||
- **ECMAScript** 就像"普通话标准规范"，定义了语法规则
|
||||
- **JavaScript** 就像"实际说的普通话"，是浏览器真正运行的语言
|
||||
|
||||
为什么会有两个名字？这有一段历史：
|
||||
|
||||
- 1995 年，网景公司创造了 JavaScript
|
||||
- 1996 年，微软推出了 JScript（和 JavaScript 类似但不完全一样）
|
||||
- 为了避免各家浏览器"方言"不统一，1997 年 ECMA 国际组织制定了标准，命名为 ECMAScript
|
||||
|
||||
**所以**：所有浏览器都遵循 ECMAScript 标准，但大家习惯叫它 JavaScript。你写的是 JavaScript，它遵循的是 ECMAScript 规范。
|
||||
|
||||
**版本演进是什么意思？**
|
||||
|
||||
JavaScript 这门语言不是一成不变的，它在不断"升级"。就像手机系统从 iOS 14 升级到 iOS 15、iOS 16 一样，JavaScript 也有自己的"版本号"，这些版本号就是 **ES 标准**。
|
||||
|
||||
每个新版本都会增加新功能、新语法，让开发者写代码更方便。但浏览器需要时间来"学会"这些新语法——就像老手机可能装不了新系统一样，老浏览器也不支持新语法。
|
||||
|
||||
**关键版本一览**：
|
||||
|
||||
| 版本 | 发布年份 | 重要特性 | 浏览器支持 |
|
||||
|------|----------|----------|------------|
|
||||
| **ES5** | 2009 | `strict mode`、`JSON`、`Array.map/filter/reduce` | 所有浏览器 ✅ |
|
||||
| **ES6/ES2015** | 2015 | `let/const`、箭头函数、`class`、**ES 模块**、`Promise` | 现代浏览器 ✅ |
|
||||
| **ES2016** | 2016 | `includes()`、指数运算符 `**` | 现代浏览器 ✅ |
|
||||
| **ES2017** | 2017 | `async/await`、`Object.entries()` | 现代浏览器 ✅ |
|
||||
| **ES2020** | 2020 | 可选链 `?.`、空值合并 `??`、`BigInt` | 现代浏览器 ✅ |
|
||||
| **ES2022** | 2022 | 顶层 `await`、`at()`、私有字段 `#` | 较新浏览器 |
|
||||
| **ES2024** | 2024 | `Object.groupBy()`、`Promise.withResolvers()` | 最新浏览器 |
|
||||
|
||||
> 💡 **实用建议**：现代浏览器已经支持大部分 ES6+ 特性。如果你需要兼容老浏览器（如 IE），可以用 Babel 等工具把新语法"翻译"成老语法。
|
||||
|
||||
### 3.0.1 TypeScript 和 JavaScript 是什么关系？
|
||||
|
||||
你可能还听说过 **TypeScript（TS）**，它和 JavaScript 又是什么关系？
|
||||
|
||||
**一句话概括：TypeScript = JavaScript + 类型系统。**
|
||||
|
||||
| 对比项 | JavaScript | TypeScript |
|
||||
|--------|------------|------------|
|
||||
| **类型系统** | 动态类型（运行时才知道类型） | 静态类型（写代码时就知道类型） |
|
||||
| **编译** | 不需要编译，浏览器直接运行 | 需要编译成 JavaScript 才能运行 |
|
||||
| **错误检查** | 运行时才发现错误 | 写代码时就能发现错误 |
|
||||
| **学习曲线** | 入门简单 | 需要学习类型语法 |
|
||||
| **适用场景** | 小型项目、快速原型 | 大型项目、团队协作 |
|
||||
|
||||
**代码对比**：
|
||||
|
||||
```javascript
|
||||
// JavaScript - 动态类型，变量可以随便变
|
||||
let name = "张三"
|
||||
name = 123 // 不报错，但可能出问题
|
||||
```
|
||||
|
||||
```typescript
|
||||
// TypeScript - 静态类型，类型写死了
|
||||
let name: string = "张三"
|
||||
name = 123 // 编译时报错：不能把数字赋给字符串
|
||||
```
|
||||
|
||||
**为什么大型项目偏爱 TypeScript？**
|
||||
|
||||
想象你在团队里开发一个复杂系统，代码几万行。JavaScript 的灵活性在这里变成了"灾难"——你不知道这个函数期望接收什么类型的参数，也不知道它返回什么。TypeScript 强制你写清楚类型，就像给代码加了"说明书"，IDE 也能给你更好的提示。
|
||||
|
||||
> 💡 **建议**：初学者先学 JavaScript，打好基础后再学 TypeScript。现代前端框架（Vue 3、React）都强烈推荐使用 TypeScript。
|
||||
|
||||
### 3.1 没有 JS 会怎样？
|
||||
|
||||
@@ -406,14 +478,18 @@ graph TD
|
||||
|
||||
## 7. 名词速查表 (Glossary)
|
||||
|
||||
| 名词 | 全称 | 解释 |
|
||||
| :------------- | :------------------------ | :--------------------------------- |
|
||||
| **HTML** | HyperText Markup Language | 用标签描述网页结构与语义。 |
|
||||
| **CSS** | Cascading Style Sheets | 控制颜色、布局、动效的样式语言。 |
|
||||
| **JavaScript** | JavaScript | 让页面具备逻辑与交互的脚本语言。 |
|
||||
| **DOM** | Document Object Model | 用对象树表示页面，可被 JS 读写。 |
|
||||
| **Flexbox** | Flexible Box Layout | 一种一维布局方案，易于对齐与分布。 |
|
||||
| **Box Model** | CSS Box Model | 元素从内容到外边距的层层盒子。 |
|
||||
| 名词 | 全称 | 解释 |
|
||||
| :--------------- | :------------------------ | :--------------------------------------- |
|
||||
| **HTML** | HyperText Markup Language | 用标签描述网页结构与语义。 |
|
||||
| **CSS** | Cascading Style Sheets | 控制颜色、布局、动效的样式语言。 |
|
||||
| **JavaScript** | JavaScript | 让页面具备逻辑与交互的脚本语言。 |
|
||||
| **ECMAScript** | ECMAScript | JavaScript 的语言标准规范，定义语法规则。 |
|
||||
| **ES 标准** | ECMAScript Standard | JavaScript 的版本号，如 ES5、ES6、ES2024。 |
|
||||
| **ES 模块** | ES Modules | ECMAScript 的官方模块化方案（import/export）。 |
|
||||
| **TypeScript** | TypeScript | JavaScript 的超集，增加了静态类型系统。 |
|
||||
| **DOM** | Document Object Model | 用对象树表示页面，可被 JS 读写。 |
|
||||
| **Flexbox** | Flexible Box Layout | 一种一维布局方案，易于对齐与分布。 |
|
||||
| **Box Model** | CSS Box Model | 元素从内容到外边距的层层盒子。 |
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -229,73 +229,48 @@ const duration = '约 <strong>3 小时</strong>'
|
||||
|
||||
他学习了产品经理常用的 5 步判断法（详细内容见附录A）：
|
||||
|
||||
#### 第一步：用户验证
|
||||
1. **第一步：直接和真实用户聊天，了解他们现在的做法**
|
||||
|
||||
找到 10 个目标用户，问他们"你现在怎么解决这个问题？"
|
||||
找到 10 个目标用户。问他们："你现在怎么解决这个问题？" 如果用户已经在用某种方法，说明问题确实存在。如果用户说不需要解决，那可能不是真需求。
|
||||
|
||||
#### 第二步：替代方案分析
|
||||
2. **第二步：分析用户现有的替代方案，找出你的优势**
|
||||
|
||||
用户现在用什么方法解决这个问题？你的产品比现有方案好在哪里？
|
||||
用户现在可能用其他产品、Excel、靠记忆，或者忍受着不解决。你需要弄清楚这些方案有什么缺点。你的产品要比它们好很多，用户才愿意换。
|
||||
|
||||
#### 第三步：付费意愿测试
|
||||
3. **第三步：测试用户是否愿意为你的产品付钱**
|
||||
|
||||
预售或定金。愿意付定金的用户比例：
|
||||
- **> 10%**：需求真实，值得投入
|
||||
- **5-10%**：需求存在，但需要打磨
|
||||
- **< 5%**：需求不成立，或产品概念有问题
|
||||
做预售或收定金。统计愿意付定金的用户比例（越早赚上钱说明需求越正确）：
|
||||
- 超过 10%：需求真实，值得投入
|
||||
- 5% 到 10%：需求存在，但需要打磨
|
||||
- 低于 5%：需求可能不成立
|
||||
|
||||
#### 第四步：市场规模估算
|
||||
4. **第四步：估算这个市场有多大，能不能赚钱**
|
||||
|
||||
目标用户数量 × 付费意愿 × 客单价
|
||||
计算三个数字：目标用户总数 × 付费意愿 × 客单价。相乘后得到市场规模。如果市场太小，可能不值得做。
|
||||
|
||||
#### 第五步：竞争壁垒思考
|
||||
5. **第五步：思考你的产品有什么护城河，防止别人抄袭**
|
||||
|
||||
技术壁垒？网络效应？品牌？成本优势？
|
||||
考虑这些壁垒：技术难度、网络效应、品牌、成本优势。这些能帮你长期保持竞争力。
|
||||
|
||||
::: tip 关键指标
|
||||
**本幕小结：小明的收获**
|
||||
|
||||
愿意付定金的用户比例：
|
||||
- **> 10%**：需求真实，值得投入
|
||||
- **5-10%**：需求存在，但需要打磨
|
||||
- **< 5%**：需求不成立，或产品概念有问题
|
||||
1. **真需求的标准**
|
||||
- 最重要的标准是用户愿意付费。
|
||||
- 用户愿意为此改变行为。
|
||||
- 没有解决方案时，用户会有很大损失。
|
||||
|
||||
:::
|
||||
2. **避开假需求**
|
||||
- 痒点不是痛点，不能当成真需求。
|
||||
- 市场太小，很难支撑商业模式。
|
||||
- 方案比问题还复杂，用户会放弃。
|
||||
|
||||
<SummaryCard
|
||||
title="本幕小结：小明的收获"
|
||||
:sections="[
|
||||
{
|
||||
number: '1',
|
||||
title: '真需求的标准',
|
||||
items: [
|
||||
'用户愿意为之付费（最重要的标准）',
|
||||
'用户愿意为之改变行为',
|
||||
'没有解决方案时用户会损失很大'
|
||||
]
|
||||
},
|
||||
{
|
||||
number: '2',
|
||||
title: '避开假需求',
|
||||
items: [
|
||||
'解决伪痛点（痒点而非痛点）',
|
||||
'市场规模太小，无法支撑商业模式',
|
||||
'解决方案比问题还复杂'
|
||||
]
|
||||
},
|
||||
{
|
||||
number: '3',
|
||||
title: '优先级排序',
|
||||
items: [
|
||||
'痛点 > 爽点 > 痒点'
|
||||
]
|
||||
}
|
||||
]"
|
||||
:outputs="[
|
||||
'理解了什么是真需求',
|
||||
'掌握了需求的三层分类（痛点、爽点、痒点）',
|
||||
'学会了5步判断法验证需求真伪'
|
||||
]"
|
||||
/>
|
||||
3. **优先级排序**
|
||||
- 真正的优先级是：痛点 > 爽点 > 痒点。
|
||||
|
||||
**本幕输出**
|
||||
- 我理解了什么是真需求。
|
||||
- 我掌握了需求的三层分类：痛点、爽点、痒点。
|
||||
- 我学会了用 5 步判断法验证需求真伪。
|
||||
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user