Webpack
随着项目越来越复杂，我们会使用 ES6 模块将代码拆分到多个文件中，并引入许多第三方库。这会导致浏览器需要发起大量的 HTTP 请求来加载这些零散的文件，严重影响页面性能。 **打包工具 (Bundler)** 正是为了解决这个问题而生。它是一个构建工具，能够将我们项目中所有散落的 JavaScript 模块、CSS...
2025
162 posts
JavaScript 实现 Tic Tac Toe (2)
我们把 displayController 单独作为一个模块。这个模块完成了视图的工作、并提前做好一些绑定工作。 我们可以把一些固定的、不依赖特定情况的 DOM 操作先写好，这样就不需要在主文件 `script. js` 中写重复的代码了，主文件只需要负责把这些模块初始化、连接好即可。 我们把需要做绑定的组件传进来作为参数： ```javascript function...
npm 包管理器
npm 是 JavaScript **包管理器 (Package Manager)**。它主要由两部分组成： 1. **一个在线仓库 (Registry)**：一个巨大的、公开的数据库，存储了海量的、可重用的 JavaScript 代码包（Packages）。这些包可以是小型的辅助函数库（如 `lodash`），也可以是完整的前端框架（如 `React`, `Vue`）。 2...
JavaScript 实现 Tic Tac Toe (1)
> 第一部分主要讲解井字棋游戏初始化的一些东西，之后会讲一些技术性的东西。 下面我们通过实现一个简单的井字棋游戏来系统梳理一下前面的一些知识。 我们写一个最简单的 HTML 和 CSS： ```html <. doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport"...
发布——订阅模式
> 在实现 [TicTacToe](https://www. theodinproject...
js-module
在 ES6 模块出现之前，如果在 HTML 中引入多个 JavaScript 文件，它们会共享同一个全局作用域。这会导致变量命名冲突和不可预期的行为。 ```html <. html --> <script src="one...
JavaScript Class
在 ES6 之前，我们使用构造函数和原型链来实现对象的创建和继承。ES6 引入了 `class` 关键字，它提供了一种更清晰、更简洁的语法。 > Class 的底层实现仍然是基于原型继承。因此，`class` 被称为“语法糖”。 **构造函数 vs. Class 写法对比：** ```javascript // 传统构造函数写法 function Player(name, marker)...
闭包
JavaScript 有如下的作用域： - **全局作用域 (Global Scope)**: 在所有函数和代码块 `{}` 外面定义的变量，在代码的任何地方都可以被访问。 > 过度使用全局变量会造成“全局污染”。 - **函数作用域 (Function Scope)**: 使用 `var` 在一个函数内部声明的变量，它的“地盘”就是整个函数。 - **块级作用域 (Block...
container-design
Write your blog post content here. This is a new blog post...
Grid
CSS Grid 布局是一个强大的**二维 (2D)** 布局系统，意味着它可以同时处理**行和列**。与 Flexbox（一维）不同，Grid 允许我们在两个维度上对齐项目，是专门为解决复杂的网页布局问题而设计的。 Grid 由以下组件组成： - **Grid 容器 (Grid Container)**：应用了 `display: grid;` 的父元素。 - **Grid 项目...