HTML/CSS/JS 学习笔记#

let x = 10;       // 可变，块级作用域
const y = 20;     // 不可变，块级作用域
var z = 30;       // 可变，函数作用域（已不推荐）

typeof "hello"        // "string"
typeof 42             // "number"
typeof true           // "boolean"
typeof undefined      // "undefined"
typeof null           // "object"  ← 历史遗留 bug
typeof {}             // "object"
typeof []             // "object"  ← 数组也是 object
typeof function(){}   // "function"

// 精确判断
Array.isArray([1,2])  // true
null === null         // true
Object.prototype.toString.call([])  // "[object Array]"

// 隐式转换（坑多）
"5" + 3    // "53"   字符串拼接
"5" - 3    // 2      数值减法
"5" * "2"  // 10
0 == ""    // true   ← 隐式转换导致
0 == false // true
null == undefined  // true

// 显式转换（推荐）
Number("42")   // 42
String(42)     // "42"
Boolean(0)     // false
parseInt("42px")  // 42

// 函数声明（提升）
function add(a, b) { return a + b; }

// 函数表达式（不提升）
const add = function(a, b) { return a + b; };

// 箭头函数（ES6）
const add = (a, b) => a + b;
const square = x => x * x;
const greet = () => "Hello";

// 立即执行函数 (IIFE)
(function() {
  console.log("立即执行");
})();

const obj = {
  name: "Alice",
  greet: function() {
    // 普通函数：this 指向 obj
    setTimeout(function() {
      console.log(this.name);  // undefined（this 指向 window）
    }, 100);
  },
  greetArrow: function() {
    // 箭头函数：this 继承外层
    setTimeout(() => {
      console.log(this.name);  // "Alice"
    }, 100);
  }
};

function counter() {
  let count = 0;
  return function() {
    return ++count;
  };
}

const c = counter();
c();  // 1
c();  // 2
c();  // 3
// count 变量被闭包"捕获"，外部无法直接访问，但内部函数可以读写

// 对象字面量
const user = {
  name: "Alice",
  age: 30,
  greet() { return `Hi, I'm ${this.name}`; }
};

// 属性简写（ES6）
const name = "Bob";
const obj = { name };  // 等同 { name: name }

// 计算属性名
const key = "dynamic";
const obj2 = { [key]: "value" };  // { dynamic: "value" }

// 可选链
const city = user?.address?.city;  // 安全访问嵌套属性

// 空值合并
const name = user.name ?? "Anonymous";  // null/undefined 时用默认值

function Animal(name) {
  this.name = name;
}
Animal.prototype.speak = function() {
  return `${this.name} makes a sound`;
};

function Dog(name) {
  Animal.call(this, name);  // 调用父构造函数
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.bark = function() {
  return `${this.name} barks!`;
};

const d = new Dog("Rex");
d.speak();  // "Rex makes a sound"（继承自 Animal）
d.bark();   // "Rex barks!"（自有方法）

class Animal {
  constructor(name) { this.name = name; }
  speak() { return `${this.name} makes a sound`; }
}

class Dog extends Animal {
  constructor(name) {
    super(name);  // 必须在 this 之前调用
  }
  bark() { return `${this.name} barks!`; }
}

// ① 回调地狱
getUser(id, function(user) {
  getOrders(user, function(orders) {
    getItems(orders, function(items) {
      console.log(items);
    });
  });
});

// ② Promise 链
getUser(id)
  .then(user => getOrders(user))
  .then(orders => getItems(orders))
  .then(items => console.log(items))
  .catch(err => console.error(err));

// ③ async/await（推荐）
async function loadData() {
  try {
    const user = await getUser(id);
    const orders = await getOrders(user);
    const items = await getItems(orders);
    console.log(items);
  } catch (err) {
    console.error(err);
  }
}

// 并行执行，全部完成
const [users, posts] = await Promise.all([getUsers(), getPosts()]);

// 并行执行，任一完成
const fastest = await Promise.race([fetch(url1), fetch(url2)]);

// 并行执行，全部完成（无论成功失败）
const results = await Promise.allSettled([p1, p2, p3]);
// [{status:"fulfilled", value:...}, {status:"rejected", reason:...}]

document.getElementById("id")
document.querySelector(".class")      // CSS 选择器，返回第一个
document.querySelectorAll("div p")    // 返回所有匹配

const el = document.querySelector("#title");

// 内容
el.textContent = "新标题";       // 纯文本（安全）
el.innerHTML = "<b>标题</b>";    // HTML（注意 XSS）

// 属性
el.setAttribute("data-id", "42");
el.dataset.id;  // "42"（data-* 属性）

// 样式
el.style.color = "red";
el.classList.add("active");
el.classList.remove("hidden");
el.classList.toggle("open");

// 创建与插入
const newEl = document.createElement("p");
newEl.textContent = "新段落";
el.appendChild(newEl);          // 添加子元素
el.remove();                    // 删除自身

const btn = document.querySelector("#btn");

btn.addEventListener("click", function(e) {
  console.log("被点击了", e.target);
});

// 事件委托：利用冒泡，在父元素监听
document.querySelector("#list").addEventListener("click", e => {
  if (e.target.matches("li")) {
    console.log("点击了", e.target.textContent);
  }
});

// 第三个参数：true=捕获阶段触发，false=冒泡阶段（默认）
el.addEventListener("click", handler, false);

// 阻止冒泡
e.stopPropagation();

// 阻止默认行为
e.preventDefault();

// math.js — 导出
export const PI = 3.14159;
export function add(a, b) { return a + b; }
export default function multiply(a, b) { return a * b; }

// main.js — 导入
import multiply, { PI, add } from "./math.js";
import * as math from "./math.js";  // 全部导入

// 按需加载（懒加载）
const module = await import("./heavy-module.js");
module.doSomething();

// 防抖：连续触发只执行最后一次
function debounce(fn, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

// 节流：固定频率执行
function throttle(fn, interval) {
  let last = 0;
  return function(...args) {
    const now = Date.now();
    if (now - last >= interval) {
      last = now;
      fn.apply(this, args);
    }
  };
}

// 使用：搜索输入防抖、滚动事件节流
input.addEventListener("input", debounce(search, 300));
window.addEventListener("scroll", throttle(onScroll, 100));

// GET
const res = await fetch("/api/users");
const users = await res.json();

// POST
const res = await fetch("/api/users", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "Alice" })
});
const data = await res.json();