前端工程化
前端工程化前端工程化 = 用工具把”源代码”（.vue 组件、ES Module、TS、SCSS 等）转换成浏览器能直接运行的、优化后的产物。 它的核心三件套是：模块化（ES Module）+ 包管理（npm）+ 构建工具（Vite）。对 Java 程序员来说，这套东西就相当于 Maven/Gradle 的角色——管理依赖、编译打包、提供构建流程。 一、为什么需要工程化 问题 例子 工程化解决 模块化 import a from "./a.js" 把多个模块打包合并 转译 .vue 文件、TypeScript、SCSS 编译成浏览器认识的 HTML/CSS/JS 依赖管理 用了 Vue、axios 等库 npm 统一安装管理 优化 未使用代码、大文件 压缩、tree-shaking 二、模块化 ES Module（重点）1. 导出 export1234// utils.jsexport default function add(a, b) { return a + b; }...
AJAX
AJAXAJAX（Asynchronous JavaScript And XML）的核心思想：浏览器用 JS 异步地发 HTTP 请求，拿到数据后局部更新页面，不刷新整页。 这一篇完整覆盖 AJAX 的整套知识：Promise（异步基础）→ XMLHttpRequest（经典实现）→ fetch（现代原生）→ async/await（优雅写法）→ axios（最常用库）。 Java 对照：axios ≈ 后端的 RestTemplate / OkHttp / HttpClient；Promise ≈ CompletableFuture。 一、AJAX 概述1. 为什么需要异步12345678910// 同步（阻塞）：请求期间页面卡死console.log("1");同步请求(); // 假设要等 3 秒console.log("2");// 异步（不阻塞）console.log("1");异步请求(() => console.log("2")); ...
进阶知识点补充
进阶知识点补充这一篇是收尾的进阶补充，把之前零散或没深入的知识点集中讲透：原型与原型链、深浅拷贝、防抖/节流、Symbol、迭代器与生成器，以及严格模式、柯里化、类型判断、逻辑赋值运算符、Proxy 等。 一、原型与原型链（深入）1. 核心关系（基础回顾）123456789function Person(name) { this.name = name;}Person.prototype.say = function () { console.log(this.name);};const p = new Person("Tom");p.say(); // "Tom" 三条关键等式（原型链的本质）： 123p.__proto__ === Person.prototype; // true（实例 → 原型对象）Person.prototype.__proto__ === Object.prototype; // true（原型对象 → Obje...
BOM
BOMBOM（Browser Object Model，浏览器对象模型）是浏览器提供的、用来操作浏览器本身的对象集合，window 是它的顶层对象。 这一篇讲 BOM 的重要对象：window、location、history、navigator、screen，以及本地存储 localStorage / sessionStorage（重点）。 一、window 对象window 是全局对象，所有全局变量和全局函数都是 window 的属性和方法。 123var name = "Tom";console.log(window.name); // "Tom"（全局变量挂在 window 上）console.log(window === window.window); // true 1. 常用方法1234567alert("提示框"); // 弹窗提示confirm("确定吗？"); // 确认框，返回 true / falseprompt("请输入&qu...
事件
事件事件是用户与页面交互的桥梁：点击、输入、滚动、按键都会触发事件，JS 通过监听事件来响应用户操作。 这一篇讲事件的注册与解绑、事件类型、事件对象、事件流（冒泡/捕获）、事件委托。其中事件流和事件委托是重点，也是 JS 与 Java GUI（如 Swing 的监听器）最大的差异。 一、注册与解绑事件1. 三种注册方式12<!-- 方式一：HTML 属性（不推荐，结构和逻辑混在一起） --><button onclick="alert('hi')">按钮</button> 12345678910// 方式二：DOM 属性（同一事件只能绑一个，后写覆盖前写）btn.onclick = function () { console.log("点击"); };// 方式三：addEventListener（推荐，可绑多个，按顺序执行）btn.addEventListener("click", function () { con...
DOM 基础与节点操作
DOM 基础与节点操作DOM（Document Object Model，文档对象模型）是浏览器把 HTML 解析成的一棵节点树，JS 通过 document 对象操作这棵树，就能动态改变页面内容。 这一篇把 DOM 的基础操作合并讲完：获取元素、操作内容、操作属性与样式、节点关系、增删节点、表单操作。这是 DOM 的地基，后面所有交互都建立在它之上。 一、DOM 概念123456<!DOCTYPE html><html><body> <div id="box">hello</div></body></html> 浏览器会把它解析成一棵节点树：document → html → body → div，每个标签都是一个”节点（元素节点）”。 二、获取元素12345678910// 1. 按 id（返回单个元素，不存在返回 null）document.getElementById("box");// 2. 按标签名 / 类名（返回动态 HTMLColle...
对象与常用内置 API
对象与常用内置 API这一篇分两块：对象（JS 的核心数据载体，与 Java 的”类”差异很大）和常用内置 API（String、Number/Math、Date、JSON、定时器、console、正则等日常工具箱）。 其中原型与 class、Date 的月份从 0 开始、JSON 序列化的坑是重点差异；Array、Set/Map 的方法已在第 2 篇覆盖，本篇不再重复。 一、对象基础1. 对象字面量与属性访问123456789const user = { name: "Tom", age: 18, "full-name": "Tom Hanks" // 含特殊字符的键要加引号};user.name; // 点访问user["name"]; // 方括号访问（键是变量时用这个）user["full-name"]; // 特殊键必须用方括号 与 Java 的差异：Java 要 new 类，JS 直接用...
函数
函数函数是 JavaScript 最核心的概念，也是与 Java 差异最大的部分。最根本的一点：JS 的函数是一等公民——函数是”值”，可以赋给变量、当参数传、当返回值返回；并且 this 是运行时动态绑定的，与 Java 的 this 含义完全不同。 这一篇覆盖函数从基础到进阶的全部常用知识点：函数声明/表达式、默认参数、rest 参数、箭头函数、IIFE、闭包、this、回调与高阶函数、call/apply/bind。 一、差异总览 维度 Java JavaScript 函数地位 方法，属于类 一等公民，是值 定义方式 返回值 方法名(参数) {} 声明式 / 表达式 / 箭头函数 返回类型 / 参数类型 必须声明 无类型声明 重载 支持 不支持（后定义覆盖前面的） 参数个数 固定（可变参数除外） 随意，多传少传都行 this 指向当前实例 运行时动态绑定 默认参数 无（靠重载） 支持 (a = 1) 二、函数基础1. 定义与调用（与 Java 对照）12...
流程控制、数组与集合
流程控制、数组与集合这一篇讲 JS 的流程控制（if / switch / 异常）、循环（for / while / for…in / for…of）、数组、Set 与 Map，以及各类遍历方式。 其中 for...in、for...of、数组的高阶方法（map/filter/reduce）是 JS 与 Java 差异最大的部分；if、for、switch 等基础语法与 Java 几乎一致，只做对照。 阅读方式：与 Java 相同的语法简单带过，重点看「差异」和「⚠️ 坑点」。 一、流程控制1. if / else if / else（与 Java 相同）1234567if (a > 0) { // ...} else if (a === 0) { // ...} else { // ...} 唯一差异：条件表达式不强制是 boolean，JS 会用 truthy/falsy 自动判断（0、"...
变量、数据类型与运算符
变量、数据类型与运算符这一篇把 JS 基础语法中的字面量与变量、数据类型、类型转换、运算符一口气讲完。JavaScript 是动态类型 + 弱类型语言：变量无类型前缀、类型运行期确定、运算时会自动隐式转换——这正是它与 Java 差异最集中的地方，也是坑最多的地方。 阅读方式：与 Java 相通的部分只做对照不展开，重点看「差异」和「⚠️ 坑点」。 一、差异总览 维度 Java JavaScript 类型系统 静态类型，编译期确定 动态类型，运行期确定 变量声明 int x = 1; let x = 1;（无类型前缀） 基本类型 8 种基本类型 7 种原始类型 空值 只有 null null 和 undefined 相等比较 ==（基本类型比值，引用比地址） == 和 === 两种 隐式转换 基本没有 到处都有 逻辑运算 &&/` 二、字面量与变量1. 字面量（literal）字面量就是直接写在代码里的值，Java 和 JS 概念相同，只是写法略有差异。 1234567891011121314151...
