第一章：前端基础重温

在前端开发的世界中，技术更新迭代非常快。虽然你已经具备了两年的前端开发经验，但重温一些关键技术仍然是很有必要的。本章将重点讲解 Ajax、Node.js、Webpack、Git 等技术，帮助你更深入地理解它们的工作原理以及在实际项目中的应用。

Ajax

Ajax（Asynchronous JavaScript and XML）是一种用于创建异步网页应用的技术，它允许网页在不重新加载页面的情况下与服务器交换数据。利用 Ajax，我们可以提高用户体验，让网页更加动态和响应式。

示例：使用原生 Ajax 发送 GET 请求

function ajaxGet(url, callback) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        callback(null, xhr.responseText);
      } else {
        callback(new Error('Request failed: ' + xhr.status), null);
      }
    }
  };
  xhr.send();
}

// 调用示例
ajaxGet('https://jsonplaceholder.typicode.com/posts/1', function (err, data) {
  if (err) {
    console.error(err);
  } else {
    console.log(JSON.parse(data));
  }
});

在这个示例中，我们定义了一个 ajaxGet 函数，它通过 XMLHttpRequest 对象向指定的 URL 发送 GET 请求，并将响应数据通过回调返回。

Node.js

Node.js 是一个基于事件驱动、非阻塞 I/O 模型的 JavaScript 运行环境。它使得 JavaScript 可以在服务器端运行，适合用于开发高并发的网络应用。

示例：创建一个简单的 Node.js 服务器

const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World\n');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

上述代码创建了一个简单的 HTTP 服务器。当访问 http://localhost:3000 时，服务器会返回 "Hello World"。

Webpack

Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。它可以将模块及其依赖关系打包成静态资源，优化前端应用的加载速度。

示例：基本的 Webpack 配置

首先安装 Webpack 和相关依赖：

npm install --save-dev webpack webpack-cli

然后创建一个简单的 webpack.config.js 文件：

const path = require('path');

module.exports = {
  entry: './src/index.js', // 入口文件
  output: {
    filename: 'bundle.js', // 输出文件
    path: path.resolve(__dirname, 'dist'), // 输出目录
  },
  mode: 'development', // 开发模式
};

在 src/index.js 中可以写一些简单的 JavaScript 代码，例如：

console.log("Hello Webpack!");

然后在命令行中运行 Webpack：

npx webpack

Webpack 会将 src/index.js 中的代码打包到 dist/bundle.js 中。

Git

Git 是一个分布式版本控制系统，可以有效地进行版本管理。理解 Git 的基本操作非常重要，特别是在团队开发中。

常用 Git 命令

1. 初始化仓库：git init
2. 添加文件到暂存区：git add . 或 git add <file>
3. 提交更改：git commit -m "commit message"
4. 查看状态：git status
5. 查看提交历史：git log

通过这些基本的命令，你可以轻松地管理你的代码版本。

总结

在本章中，我们回顾了 Ajax、Node.js、Webpack 和 Git 这几项前端开发的重要技术。无论是在开发新项目还是维护旧项目，掌握这些技术都是非常必要的。随着你的经验增长，你可以尝试更复杂的应用和功能，持续提升自己的前端开发技能。