跳转至

前端常识

参考资料

HTML

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>标题</title>
    <link
      href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One"
      rel="stylesheet" />
    <link
      href="https://fonts.googleapis.com/css?family=ZCOOL+KuaiLe"
      rel="stylesheet" />
    <link href="style.css" rel="stylesheet" />
  </head>

  <body>
    <!-- 内容 -->
  </body>
</html>

CSS

  • 选择器 .classname/标签名/通配符/... {属性: 值; 属性: 值;}
  • 属性: 尺寸 / 背景 / 颜色 / 文本 / 布局 / 过渡 / 变换 / 动画
  • 选择器后加 :name 伪类选择器 (某个状态下, 如光标悬浮)
  • 加 ::name 伪元素选择器 (为标签添加元素, 如对号 / 只选中第一行)

根据你的要求, 我整理了一份简洁、备忘录式的 JS/TS 速查笔记去掉了冗余描述, 在保留你原始内容的基础上, 补充了 AI 编程中高频出现且容易混淆的“精髓”语法

JS

  • DOM: 文档对象模型, querySelector 获取标签转为 JS 对象, addEventListener 监听事件
  • 箭头函数: (参数) => 返回值 或 (参数) => { 语句 }, 简洁定义, 且不绑定自己的 this
  • 解构赋值: const { a, b } = obj 或 const [x, y] = arr, 常用提取变量
  • 展开/剩余操作符: ...obj 用于克隆或合并对象/数组
  • 模块范式:
    • ESM: export/import, import { a } (部分导入), import a (默认导入), import * as a (全导入)
    • CJS: module.exports 导出, require() 导入 (常用于 Node.js)
  • Promise 异步:
    • new Promise((resolve, reject) => { ... })
    • .then() 成功回调, .catch() 异常处理, 链式调用
    • async / await: Promise 的同步写法, await 必须在 async 函数内
  • Proxy: 代理拦截对象操作 (如 get/set), 是 Vue 等框架实现响应式的核心
  • 链式调用/空值处理: obj?.prop (可选链, 对象为空不报错), val ?? 'default' (空值合并, 仅当 null/undefined 时取默认值)

TS

  • 基本类型: string, number, boolean, any (跳过检查), unknown (安全版 any)
  • 结构定义: interface 或 type 用于定义对象的形状 (键值对类型)
  • 组合类型: 联合类型 string | number (满足其一), 交叉类型 A & B (同时满足)
  • 可选与只读: prop? 表示可选, readonly 表示不可修改
  • 数组与元组: number[] (数字数组), [string, number] (固定长度及类型的结构体)
  • 类型断言: value as string 或 <string>value, 强制告知编译器变量的实际类型
  • 泛型: <T> 类型占位符, 运行/调用时才确定具体类型, 增加代码复用性
  • 函数特性: 参数类型, 返回值类型, 函数重载 (同名函数不同参数)
  • 类与修饰符: public, private (私有), protected (受保护), extends (继承)
  • 装饰器: @Decorator, 用于注解或修改类及成员的行为 (常见于后端或框架底层)

网络请求

  • ajax 依赖库对象, 指定请求方式 / 地址 / 参数 / 回调函数 (响应事件)
  • axios 封装的 ajax, async 一个函数, await 请求, 进行操作
    • 拦截器 (面向切面) 可以统一操作请求
  • fetch 基于 promise 的异步请求 fetch(url).then(res=>res.json()).then(data=>console.log(data))

VUE 3

  • createApp(App).mount('#app')
  • 响应式系统
    • ref(initValue): 针对基本类型 (数字/字符串), JS 中修改/读取必须加 .value, 模版中自动解包 (不用加)
    • reactive(obj): 针对对象/数组, JS 中不需要加 .value, 直接读写
  • 生命周期, onMounted(() => {}) (组件挂载后), onUnmounted (卸载后)
  • 计算与侦听
    • computed(() => result): 只有依赖变化时才重新计算, 有缓存
    • watch(source, (newVal, oldVal) => {}): 监控数据变化执行副作用 (如请求 API)
  • 模版指令
    • {{ var }}: 插值显示
    • :prop="val" (v-bind): 动态绑定属性
    • @event="fun" (v-on): 绑定事件
    • v-model="var": 双向绑定 (输入框值与变量同步)
    • v-if="bool" / v-else: 条件渲染 (真则存在, 假则移除 DOM)
    • v-for="(item, index) in list" :key="item.id": 循环渲染

VUE 3 组件化

  • 单文件组件: .vue 文件包含 <template> (结构), <script setup> (逻辑), <style scoped> (样式)
  • 父传子:
    • 子组件: const props = defineProps({ msg: String }) 或 TS写法 defineProps<{ msg: string }>()
    • 父组件: <Child msg="hello" />
  • 子传父:
    • 子组件: const emit = defineEmits(['change']) -> 调用 emit('change', data)
    • 父组件: <Child @change="handleUpdate" />
  • 插槽:
    • 子组件: <slot /> 占位
    • 父组件: 在子组件标签内部填充 HTML 内容

VUE Router

  • 监听 URL 变化, 切换页面组件
  • 核心组件
    • <router-link to="/path">: 跳转链接 (类似 <a> 标签)
    • <router-view />: 路由出口, 页面组件会显示在这里
  • JS 操作:
    • const router = useRouter(): 拿到路由实例, 执行跳转 router.push('/home')
    • const route = useRoute(): 拿到当前信息, 获取参数 route.params.id 或 route.query.keyword

Pinia

  • 定义
    • defineStore('id', () => { ... }): 内部写法和 <script setup> 一样
    • ref 是 state (数据)
    • computed 是 getters (计算数据)
    • function 是 actions (修改方法)
  • 使用 Store:
    • const store = useUserStore()
    • 直接读写: store.count++
    • 解构注意: 直接 const { count } = store 会丢失响应式, 需用 storeToRefs(store)

React

  • 组件写法
    • Vue: <template> + <script setup>
    • React: function App() { return ( <div> HTML写在这里 </div> ) } + export default
  • JSX
    • HTML 中插入变量: 使用 {} (Vue 是 {{}} 和 :)
    • class 属性写为 className (因为 class 是 JS 关键字)
    • 必须只有一个根节点 (或使用 <> ... </> 空标签包裹)
  • 状态
    • 写法: const [count, setCount] = useState(0)
    • 精髓: React 数据是不可变的
    • 区别: 绝不能写 count++必须调用 setCount(newVal) 才能触发更新
  • 副作用
    • 写法: useEffect(() => { 逻辑 }, [依赖数组])
    • [] 空数组: 等同于 onMounted (只执行一次)
    • [count]: 等同于 watch(count) (依赖变化时执行)
    • return () => {}: 等同于 onUnmounted (清理副作用)

React 生态

  • React Router
  • 状态管理
    • Zustand 类比 Pinia
      • 写法几乎一样: create((set) => ({ count: 0, inc: () => set(...) }))

包管理器

fvm

  • node 版本管理器

npm

  • node 包管理器

corepack

  • node 自带的包管理器管理器
  • corepack enable 启用

pnpm

yarn

bun

其他工具

Vite

  • pnpm create vite@latest

格式化与检查

  • Biome

客户端

Tauri

  • 前端负责 UI 交互, 后端负责系统级操作 (文件 / 网络 / 硬件), 两者通过 IPC 桥接
  • 前端调后端
    • 前端: import { invoke } from '@tauri-apps/api/core'
    • 调用: await invoke('command_name', { key: value }) 返回 Promise
  • 后端接前端
    • 位置: src-tauri/src/lib.rs 或 main.rs
    • 定义: #[tauri::command] 宏修饰函数 fn command_name(key: String) -> String { ... }
    • 注册: 必须在 Builder 中添加 .invoke_handler(tauri::generate_handler![command_name])
  • 事件
    • 后端主动推: app.emit("event_name", payload)
    • 前端被动收: import { listen } from '@tauri-apps/api/event', listen('event_name', (e) => { ... })
  • 常用能力与权限
    • API: fs (读写文件), dialog (原生打开/保存弹窗), shell (执行命令/打开浏览器), http (绕过 CORS 的请求)
    • 安全配置: 必须在 src-tauri/capabilities 中显式开启相应 API 的权限 , 否则静默失败