跳到主要内容

原生开发

常用浏览器 API​

  • Web Speech API 语音识别接口
  • Geolocation API：获取用户地理位置
  • Canvas API：绘制图形和动画
  • Web Storage API：本地存储数据（localStorage 和 sessionStorage）
  • History API：操作浏览器历史记录
  • Notification API：显示系统通知

Fetch API​

Fetch API 是现代浏览器提供的一套用于发起网络请求的原生接口，它基于 Promise 设计，用于替代传统的 XMLHttpRequest（XHR），提供了更简洁、灵活的 API 设计和更强大的功能。

// 发起 GET 请求
fetch("https://api.example.com/data")
  .then((response) => {
    // 检查响应是否成功
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    // 解析响应数据（根据实际格式选择 json()/text()/blob() 等）
    return response.json();
  })
  .then((data) => {
    console.log("请求成功:", data);
  })
  .catch((error) => {
    console.error("请求失败:", error);
  });

// 发起 POST 请求（提交 JSON 数据）
fetch("https://api.example.com/submit", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ name: "豆包", age: 1 }),
})
  .then((response) => response.json())
  .then((data) => console.log("提交成功:", data));

// 使用 async/await 的 Fetch 请求
async function fetchWithAsync() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Fetch error:', error);
  }
}

关键参数与对象​

  • fetch(url, options)：
    • url：请求的目标地址。
    • options（可选）：配置对象，包含 method、headers、body、credentials 等参数。
  • Response 对象：
    • 常用方法：json()、text()、blob()、arrayBuffer()（解析不同格式的响应体）。
    • 常用属性：status（状态码）、ok（是否成功）、headers（响应头）。

Fetch API 的主要特点​

Fetch API 返回的是一个 Promise 对象，这意味着它支持异步操作。你可以通过 .then() 方法处理响应，通过 .catch() 方法捕获错误。

Fetch API 的错误处理机制与传统的 XMLHttpRequest 不同。fetch 只会在网络请求失败时（如网络不可用）才会触发 .catch()，而 HTTP 状态码（如 404、500）不会被视为错误。你需要通过 response.ok 或 response.status 来检查响应状态。

Fetch 高级用法：

// 请求取消
const controller = new AbortController();
const signal = controller.signal;

fetch('https://api.example.com/data', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('请求被取消');
    }
  });

// 取消请求
controller.abort();

// 文件上传
const fileInput = document.querySelector('input[type="file"]');
const formData = new FormData();
formData.append('file', fileInput.files[0]);

fetch('/upload', {
  method: 'POST',
  body: formData
});

Ajax​

Ajax（Asynchronous Javascript And XML），即是异步的 JavaScript 和 XML，Ajax 其实就是浏览器与服务器之间的一种异步通信方式

异步的 JavaScript：它可以异步地向服务器发送请求，在等待响应的过程中，不会阻塞当前页面，在这种情况下，浏览器可以做自己的事情。直到成功获取响应后，浏览器才开始处理响应数据。

XML：是前后端数据通信时传输数据的一种格式，现在已经不怎么用了，现在比较常用的是 JSON

Ajax 就是在浏览器不重新加载网页的情况下，对页面的某部分进行更新。

传统 Ajax 示例：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText));
  }
};
xhr.onerror = function() {
  console.error('请求失败');
};
xhr.send();

// POST 请求
const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/submit');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText));
  }
};
xhr.send(JSON.stringify({ name: "豆包", age: 1 }));

Ajax 与 Fetch 对比：

特性Ajax (XHR)Fetch API
返回类型事件驱动Promise
语法复杂度较高简洁
错误处理需手动检查状态码需手动检查状态码
流式响应支持支持
请求取消支持支持 (AbortController)

Intersection Observer​

交叉观察器 IntersectionObserver API 使用教程 - 阮一峰的网络日志 对于复杂功能，不太好用。

基本用法：

// 创建观察器
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('元素进入视口');
      // 执行懒加载、动画等操作
    }
  });
}, {
  threshold: 0.1 // 元素10%可见时触发
});

// 观察目标元素
const target = document.querySelector('.lazy-image');
observer.observe(target);

// 停止观察
observer.unobserve(target);

// 实际应用：图片懒加载
const imageObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      imageObserver.unobserve(img);
    }
  });
});

document.querySelectorAll('img[data-src]').forEach(img => {
  imageObserver.observe(img);
});

页面设计与组件库

Element Plus​

导航 | Element Plus

暗夜模式 https://blog.csdn.net/wanghu20150107010129/article/details/131110061

安装与使用：

npm install element-plus
import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

const app = createApp(App);
app.use(ElementPlus);

常用组件示例：

<template>
  <el-button type="primary">主要按钮</el-button>
  <el-input v-model="input" placeholder="请输入内容"></el-input>
  <el-table :data="tableData">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
  </el-table>
</template>

ant-design​

Ant Design - 企业级 UI 设计语言

安装与使用：

npm install antd
import { Button, Table, Input } from 'antd';
import 'antd/dist/reset.css';

function App() {
  return (
    <div>
      <Button type="primary">Primary Button</Button>
      <Input placeholder="Basic usage" />
    </div>
  );
}

字体​

常用网页字体 | 菜鸟教程 不要用楷体，如果用的楷体字不多，请用 Fontmin 工具，只要将用到了字体和需要生成的文字内容加入到工具中，就能生成相应的字体文件了，不用加载整个楷体库

推荐使用serif ！！

推荐字体栈：

/* 系统字体栈（推荐）*/
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
             "Helvetica Neue", Arial, "Noto Sans", sans-serif, 
             "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", 
             "Noto Color Emoji";

/* 中文字体栈 */
font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", 
             "微软雅黑", Arial, sans-serif;

/* 衬线字体 */
font-family: Georgia, "Times New Roman", serif;

/* 等宽字体 */
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;

Web 字体引入：

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* 自定义字体 */
@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2'),
       url('font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* 字体加载策略 */
}

NPM常用命令​

npm init -y # 快速初始化项目（生成package.json）
npm install <package-name> # 安装生产依赖（写入dependencies，简写：npm i <package-name>）
npm install <package-name> -D # 安装开发依赖（写入devDependencies，完整写法：--save-dev）
npm uninstall <package-name> # 卸载依赖（简写：npm un <package-name>）
npm install # 依据package.json和package-lock.json安装依赖（简写：npm i）
npm install <package-name> -g # 全局安装包（简写：npm i <package-name> -g）
npm install --legacy-peer-deps # 兼容模式安装（跳过peer依赖检查，解决版本冲突）
npm run <script-name> # 执行package.json中自定义脚本（如npm run dev）
npm update <package-name> # 更新指定依赖（不加<package-name>则更新所有）
npm cache clean --force # 清空npm缓存（解决安装异常/版本缓存问题）
npm install <package-name>@<version> # 安装指定版本依赖（解决版本兼容问题）
npm outdated # 检查项目中可更新的依赖包
npm audit # 检查依赖安全漏洞（输出漏洞详情及修复建议）
npm audit fix # 自动修复可解决的依赖安全漏洞
npm ls <package-name> # 查看指定依赖的安装版本及依赖树（简写：npm list，--depth=0仅看顶层）
npm view <package-name> # 查看指定包的远程信息（版本、依赖、发布时间等）
npm config get registry # 查看当前npm镜像源（判断是否为国内源）
npm config set registry <registry-url> # 设置npm镜像源（如淘宝源：https://registry.npmmirror.com）
npm uninstall <package-name> -g # 卸载全局安装的包（简写：npm un <package-name> -g）
npm version <type> # 更新项目版本号（type：patch/小版本 minor/次版本 major/主版本）
npm info <package-name> # 查看指定包的详细信息（同npm view，更简洁）

渲染模式核心解析​

CSR（Client-Side Rendering）是前端开发中最常见的渲染方式。在这种模式下，服务器主要负责提供静态的HTML文件（可能包含一些基本的HTML结构和JavaScript脚本），而真正的页面渲染工作则完全由客户端的浏览器来完成。

SSR（Server-Side Rendering）是一种在服务器端完成页面渲染的技术。在这种模式下，服务器接收到客户端的请求后，会先根据请求数据和模板文件生成完整的HTML页面，然后将这个页面直接发送给客户端。

SSG（Static Site Generation）是一种在构建时生成静态HTML页面的技术。在这种模式下，开发者会编写一些模板文件和数据文件，然后使用构建工具（如Hugo、Gatsby等）将这些文件转换为静态的HTML页面。这些页面可以直接部署到服务器上，而不需要服务器进行实时渲染。

编码Dleta​

第一个数据保持不变，后续的数据转换为与前一个数据的差值（delta），Delta编码依赖于数据的顺序，对于无序数据或变化剧烈的数据，压缩效果不佳。

Message Pack​

二进制的json，遵循哈夫曼编码

MessagePack：它就像 JSON。但又快又小。

PWA

网页套壳为APP 本质是用webview嵌入APP中

Median App Studio 非常方便，直接封装

Windows - HBuilderX 文档

PWA 渐进式框架​

vue 项目中使用 PWA 前言： 梳理了一下项目中的 PWA 的相关用法，下面我会正对 vue2 和 vue3 的用法进行一些教程示例， - 掘金

mainfest​

mainfest.json 配置应用基本信息

service worker​

实现缓存的关键

vue 项目实现 pwa 安装包并用 vue 安装插件,在 vue.config.js 配置 mainfest，大多数情况下，使用 GenerateSW 模式自动生成 sw

打包​

可使用套壳打包工具

用 TWA 转 APP​

Lighthouse 可以检测网络可优化性能的地方

使用 Google TWA 把 Web 移形换影成原生 App(一)作者：ICBU 王浩宇背景对于 alibaba.com 来 - 掘金

前端测试

前端模拟接口工具推荐——Apifox（mock 数据）【图解教程】_apifox 上的接口前端如何访问-CSDN 博客

测试类型与工具​

单元测试​

// Jest 示例
test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

// 异步测试
test('fetches user data', async () => {
  const data = await fetchUser(1);
  expect(data.name).toBe('John Doe');
});

端到端测试​

// Cypress 示例
describe('Login', () => {
  it('should login successfully', () => {
    cy.visit('/login');
    cy.get('#username').type('admin');
    cy.get('#password').type('password');
    cy.get('button[type="submit"]').click();
    cy.url().should('include', '/dashboard');
  });
});

MOCK​

Mock.js 使用​

// 安装：npm install mockjs
const Mock = require('mockjs');

// 定义数据模板
const data = Mock.mock({
  'list|1-10': [{
    'id|+1': 1,
    'name': '@name',
    'email': '@email',
    'date': '@datetime',
    'image': '@image("200x100")',
    'price|100-200.2': 1
  }]
});

// 拦截 Ajax 请求
Mock.mock('/api/users', 'get', {
  'users|1-10': [{
    'id|+1': 1,
    'name': '@cname',
    'age|18-60': 1
  }]
});

MSW (Mock Service Worker)​

// 安装：npm install msw --save-dev
import { rest } from 'msw';
import { setupServer } from 'msw/node';

const server = setupServer(
  rest.get('/api/user', (req, res, ctx) => {
    return res(
      ctx.status(200),
      ctx.json({ name: 'John Doe', age: 30 })
    );
  })
);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

Apifox​

Apifox 是集 API 设计、调试、文档、Mock、自动化测试于一体的协作平台。

主要功能：

  1. API 设计与管理：支持 OpenAPI、Swagger 规范
  2. 接口调试：类似 Postman 的调试功能
  3. Mock 数据：智能 Mock 和自定义规则
  4. 自动化测试：接口测试用例管理
  5. 文档生成：自动生成 API 文档

Mock 功能使用：

  1. 创建接口并定义返回数据结构
  2. 使用 Mock 语法生成动态数据： 
    {
      "name": "@name",
      "age|18-60": 1,
      "email": "@email",
      "date": "@datetime"
    }
  3. 支持智能 Mock 和自定义规则