07.前端框架入门

发表于 2025-11-24

1. 为什么需要前端框架？

1.1 传统开发的痛点

还记得我们之前用原生JavaScript做的待办事项应用吗？代码是这样的：

// 获取元素
const input = document.getElementById('todoInput');
const list = document.getElementById('todoList');
let todos = [];

// 添加待办事项
function addTodo() {
    const text = input.value;
    todos.push(text);
    input.value = '';
    renderTodos();  // 手动更新界面
}

// 渲染列表（需要手动操作DOM）
function renderTodos() {
    list.innerHTML = '';  // 清空列表
    todos.forEach(todo => {
        const li = document.createElement('li');
        li.textContent = todo;
        list.appendChild(li);
    });
}

问题：

需要手动操作DOM（创建元素、更新元素）
数据和界面不同步（数据变了，界面不会自动更新）
代码重复（每次都要写createElement、appendChild）

💡 核心问题：
原生JavaScript需要手动管理数据和界面的同步，代码复杂、容易出错。

阅读全文 »

06.浏览器存储与跨域

发表于 2025-11-24

1. 为什么需要浏览器存储？

1.1 问题的出现：数据丢失

还记得我们之前做的待办事项应用吗？每次刷新页面，数据就消失了！

生活类比：
想象你在纸上写待办事项：

写完后，纸放在桌子上
一阵风吹来，纸被吹走了
问题：数据丢失了！

网页的困境：

用户在网页上输入数据
刷新页面 → 数据消失
问题：用户体验很差！

💡 核心问题：
网页需要保存数据，让用户下次打开时还能看到。

阅读全文 »

05.现代JavaScript

发表于 2025-11-24

1. 为什么需要现代JavaScript？

1.1 从"回调地狱"到"优雅异步"

还记得我们在第四章学的JavaScript基础吗？我们已经学会了DOM操作、事件监听、表单验证。但是，当我们需要处理异步操作（如获取数据、读取文件）时，传统JavaScript会遇到大麻烦。

生活类比：
想象你要做三件事：

煮饭（需要20分钟）
炒菜（需要10分钟）
洗碗（需要5分钟）

传统方式（回调地狱）：

// 煮饭
cookRice(function() {
    // 炒菜
    cookDish(function() {
        // 洗碗
        washDishes(function() {
            console.log('全部完成！');
            // 如果还有更多步骤，代码会越来越深，像"地狱"一样
        });
    });
});

现代方式（async/await）：

async function makeDinner() {
    await cookRice();      // 等待煮饭完成
    await cookDish();      // 等待炒菜完成
    await washDishes();    // 等待洗碗完成
    console.log('全部完成！');
}

💡 关键理解：
现代JavaScript让异步代码看起来像同步代码，更易读、更易维护。

阅读全文 »

04.JavaScript基础

发表于 2025-11-18 更新于 2025-11-24

1. JavaScript是什么？为什么需要它？

1.1 从"静态"到"动态"：HTML、CSS与JavaScript的关系

还记得我们之前学的HTML和CSS吗？

HTML = 网页的"骨架"（结构）
CSS = 网页的"皮肤"（样式）
JavaScript = 网页的"大脑"（行为）

实际例子：

只有HTML+CSS的网页（静态，不能交互）：

1 2	<button>点击我</button> <!-- 点击按钮，什么都不会发生 -->

加上JavaScript后的网页（动态，可以交互）：

<button id="myButton">点击我</button>
<script>
    document.getElementById('myButton').addEventListener('click', function() {
        alert('按钮被点击了！');
    });
</script>