什么是透明贴图

• 核心作用：像「镂空剪纸」一样控制物体哪些部位透明/不透明
  
  

  （想象：给树叶模型贴图，透明部分让树叶边缘自然消失而非方形边缘）



• 技术本质：一张 黑白图片（如 PNG 带透明通道），其中：
  
  
  
  
  • 黑色区域 → 模型对应位置 完全透明（消失）
  
  
  • 白色区域 → 模型 完全不透明（显示）
  
  
  • 灰色过渡 → 半透明效果（如玻璃边缘）
  
  
  
  

示例：游戏中的铁丝网、树叶、破碎特效等镂空物体常用此技术

常见问题与解决方案

技巧：透明贴图需搭配 基础颜色贴图（map）  使用，两者共同决定最终外观

实际应用场景

实践案例一

效果如图

实现思路

通过canvas绘制内容，canvasTexture用来转换为3d纹理

    const canvas = document.createElement('canvas'),

    ctx = canvas.getContext('2d');

    canvas.width = 64;

    canvas.height = 64;

    ctx.fillStyle = '#404040';

    ctx.fillRect(0, 0, 32, 32);

    ctx.fillStyle = '#808080';

    ctx.fillRect(32, 0, 32, 32);

    ctx.fillStyle = '#c0c0c0';

    ctx.fillRect(0, 32, 32, 32);

    ctx.fillStyle = '#f0f0f0';

    ctx.fillRect(32, 32, 32, 32);

    const texture = new THREE.CanvasTexture(canvas);

这里画布大小设置为64*64，被均匀分割为4份，并填充不同的颜色

接下来创建一个立方体，为其贴上透明度贴图alphaMap，设置transparent:true这很关键

const geo = new THREE.BoxGeometry(1, 1, 1);

const material = new THREE.MeshBasicMaterial({

    color: 'deepskyblue',

    alphaMap: texture, // 透明度贴图

    transparent: true,

    opacity: 1,

    side: THREE.DoubleSide

});

如果你尝试将transparent配置改为false, 你将看到如下效果

同样我们尝试修改canvas绘制时候的填充色，来验证黑白镂空情况

ctx.fillStyle = '#000';

ctx.fillRect(0, 0, 32, 32);

ctx.fillStyle = '#000';

ctx.fillRect(32, 0, 32, 32);

ctx.fillStyle = '#000';

ctx.fillRect(0, 32, 32, 32);

ctx.fillStyle = '#fff';

ctx.fillRect(32, 32, 32, 32);

如图所示，黑色消失，白色显示保留

总结本案例需要掌握的API

CanvasTexture

这是Texture的子类，它用于将动态绘制的 2D Canvas 内容（如图表、文字、实时数据）转换为 3D 纹理，使得HTML Canvas元素可以作为纹理映射到3d物体表面

它支持实时更新，默认needsUpdate为true

应用场景

• 动态数据可视化：将实时图表（如温度曲线）映射到 3D 面板。


• 文字标签：在 3D 物体表面显示可变文字（如玩家名称）。


• 程序化纹理：通过算法生成图案（如噪波、分形）。


• 交互式绘制：用户画布涂鸦实时投射到 3D 模型（如自定义 T 恤设计）。

性能优化

• 避免频繁更新：若非必要，减少 needsUpdate=true 的调用频率。


• 合理尺寸：Canvas 尺寸建议为 2 的幂（如 256×256, 512×512），兼容纹理映射。


• 复用 Canvas：对静态内容，复用已生成的纹理而非重新创建。


• 替代方案：静态图像用 TextureLoader，视频用 VideoTexture，以降低开销。

需要注意

• 跨域限制：若 Canvas 包含外部图片，需设置 crossOrigin="anonymous"。


• 清晰度问题：高缩放比例可能导致模糊，可通过 texture.anisotropy = renderer.capabilities.getMaxAnisotropy() 改善。


• 内存管理：不再使用的纹理调用 texture.dispose() 释放资源。

实践案例二

效果如图

实现思路

从图上可以看出，立方体每个面上有多个矩形小方块，每个方块都被赋予不同的颜色，创建grid方法来实现生产多个矩形小方块

const drawMethod = {};

drawMethod.grid = (ctx, canvas, opt={} ) => {

    opt.w = opt.w || 4;

    opt.h = opt.h || 4;

    opt.colors = opt.colors || ['#404040', '#808080', '#c0c0c0', '#f0f0f0']; 

    opt.colorI = opt.colorI || []; 

    let i = 0;

    const len = opt.w * opt.h,

    sizeW = canvas.width / opt.w, // 网格宽度

    sizeH = canvas.height / opt.h;  // 网格高度



    while(i<len) {

        const x = i % opt.w,

        y = Math.floor(i / opt.w);

        ctx.fillStyle = typeof opt.colorI[i] === 'number' ? opt.colors[opt.colorI[i]] : opt.colors[i % opt.colors.length];

        ctx.fillRect(x * sizeW, y * sizeH, sizeW, sizeH);

        i++;

    }

}

实现透明贴图

const canvas = document.createElement('canvas'),

ctx = canvas.getContext('2d');

canvas.width = 64;

canvas.height = 64;

const texture = new THREE.CanvasTexture(canvas);



const geo = new THREE.BoxGeometry(1, 1, 1);

const material = new THREE.MeshBasicMaterial({

    color: 'deepskyblue',

    alphaMap: texture,

    transparent: true,

    opacity: 1,

    side: THREE.DoubleSide

});

这里要注意，canvas上并未绘制任何内容，我们将在loop循环中调用grid方法进行绘制

let frame = 0,

lt = new Date();  // 上一次时间

const maxFrame = 90, // 最大帧数90帧

fps = 20; // 每秒20帧

function loop() {

    const now = new Date(),  // 当前时间

    secs = (now - lt) / 1000, // 时间差

    per = frame / maxFrame;  // 进度

    if (secs > 1 / fps) {   // 时间差大于1/20

        const colorI = [];

        let i = 6 * 6;

        while (i--) {

            colorI.push(Math.floor(4 * Math.random()))

        }

        drawMethod.grid(ctx, canvas, {

            w: 6,

            h: 6,

            colorI: colorI

        });

        texture.needsUpdate = true;  // 更新纹理

        mesh.rotation.y = Math.PI * 2 * per;

        renderer.render(scene, camera);

        frame += fps * secs;  // 帧数累加

        frame %= maxFrame;   // 帧数取模，防止帧数溢出



        lt = now;

    }

    // 渲染场景和相机

    requestAnimationFrame( loop );

}

你可以看到这里每个面上被绘制了36个小矩形，并通过一下代码，随机填充颜色

while (i--) {

    colorI.push(Math.floor(4 * Math.random()))

}

以上就是本章的所有内容，这里并未展示完整案例代码，是希望大家能动手练一练，很多的概念，看似晦涩难懂，实则动手尝试下的话秒懂。

传统方案的痛点：代码入侵

在上一篇文章中，我们通过高阶函数实现了请求缓存功能：

const cachedFetch = memoReq(function fetchData(url) {

  return axios.get(url);

}, 3000);

这种方式虽然有效，但存在三个显著问题：

灵感来源：两大技术启示

1. Webpack的魔法注释

Webpack使用魔法注释控制代码分割：

import(/* webpackPrefetch: true */ './module.js');

这种声明式配置给了我们启示：能否用注释来控制缓存行为？

2. 装饰器设计模式

装饰器模式的核心思想是不改变原有对象的情况下动态扩展功能。在TypeScript中：

@memoCache(3000)

async function fetchData() {}

虽然当前项目可能不支持装饰器语法，但我们可以借鉴这种思想！

创新方案：魔法注释 + Vite插件

设计目标

使用对比

传统方式：

export const getStockData = memoReq(

  function getStockData(symbol) {

    return axios.get(`/api/stocks/${symbol}`);

  },

  5000

);

魔法注释方案：

/* abc-memoCache(5000) */

export function getStockData(symbol) {

  return axios.get(`/api/stocks/${symbol}`);

}

而有经验的程序猿会敏锐地发现三个深层问题：

技术实现深度解析

核心转换原理

// 转换前

/* abc-memoCache(3000) */

export function fetchData() {}



// 转换后

import { memoCache } from '@/utils/decorators';

export const fetchData = memoCache(function fetchData() {}, 3000);

完整实现代码如下（以vite插件为例）

/**

 * 转换代码中的装饰器注释为具体的函数调用，并处理超时配置。

 *

 * @param {string} code - 待处理的源代码。

 * @param {string} [prefix="aa"] - 装饰器的前缀，用于标识特定的装饰器注释。

 * @param {string} [utilsPath="@/utils"] - 导入工具函数的路径。

 * @returns {string} - 转换后的代码。

 */

export function transformMemoReq(code, prefix = "aa", utilsPath = "@/utils") {

  // 检查是否包含魔法注释模式

  const magicCommentPattern = new RegExp(`\/\*\s*${prefix}-\w+\s*\([^)]*\)\s*\*\/`);

  if (!magicCommentPattern.test(code)) {

    return code; // 如果没有找到符合模式的注释，返回原代码

  }



  let transformedCode = code;

  const importsNeeded = new Set(); // 收集需要的导入



  // 处理带超时配置的装饰器注释（带超时数字）

  const withTimeoutPattern = new RegExp(

    `\/\*\s*${prefix}-(\w+)\s*\(\s*(\d*)\s*\)\s*\*\/\s*\nexport\s+function\s+(\w+)\s*\(([^)]*)\)\s*(?::\s*[^{]+)?\s*\{([\s\S]*?)\n\}`,

    "g"

  );



  transformedCode = transformedCode.replace(

    withTimeoutPattern,

    (match, decoratorName, timeout, functionName, params, body) => {

      const timeoutValue = timeout ? parseInt(timeout, 10) : 3000; // 默认超时为3000毫秒

      const fileNameSimple = decoratorName.replace(/([A-Z].*$)/, ""); // 获取装饰器文件名



      importsNeeded.add({ fileName: fileNameSimple, functionName: decoratorName }); // 添加需要导入的函数



      // 提取类型注解（如果存在）

      const typeAnnotationMatch = match.match(/)\s*(:\s*[^{]+)/);

      const typeAnnotation = typeAnnotationMatch ? typeAnnotationMatch[1] : "";



      // 返回转换后的函数定义代码

      return `export const ${functionName} = ${decoratorName}(function ${functionName}(${params})${typeAnnotation} {${body}\n}, ${timeoutValue});`;

    }

  );



  // 处理不带超时配置的装饰器注释（无超时数字）

  const emptyTimeoutPattern = new RegExp(

    `\/\*\s*${prefix}-(\w+)\s*\(\s*\)\s*\*\/\s*\nexport\s+function\s+(\w+)\s*\(([^)]*)\)\s*(?::\s*[^{]+)?\s*\{([\s\S]*?)\n\}`,

    "g"

  );



  transformedCode = transformedCode.replace(emptyTimeoutPattern, (match, decoratorName, functionName, params, body) => {

    const fileNameSimple = decoratorName.replace(/([A-Z].*$)/, "");



    importsNeeded.add({ fileName: fileNameSimple, functionName: decoratorName });



    // 提取类型注解（如果存在）

    const typeAnnotationMatch = match.match(/)\s*(:\s*[^{]+)/);

    const typeAnnotation = typeAnnotationMatch ? typeAnnotationMatch[1] : "";



    // 返回转换后的函数定义代码，默认超时为3000毫秒

    return `export const ${functionName} = ${decoratorName}(function ${functionName}(${params})${typeAnnotation} {${body}\n}, 3000);`;

  });



  // 如果需要导入额外的函数，处理导入语句的插入

  if (importsNeeded.size > 0) {

    const lines = transformedCode.split("\n");

    let insertIndex = 0;



    // 检查是否是Vue文件

    const isVueFile = transformedCode.includes("<script");



    if (isVueFile) {

      // Vue文件导入位置逻辑...

      for (let i = 0; i < lines.length; i += 1) {

        const line = lines[i].trim();

        if (line.includes("<script")) {

          insertIndex = i + 1;

          for (let j = i + 1; j < lines.length; j += 1) {

            const scriptLine = lines[j].trim();

            if (scriptLine.startsWith("import ") || scriptLine === "") {

              insertIndex = j + 1;

            } else if (!scriptLine.startsWith("import ")) {

              break;

            }

          }

          break;

        }

      }

    } else {

      // 普通JS/TS/JSX/TSX文件导入位置逻辑...

      for (let i = 0; i < lines.length; i += 1) {

        const line = lines[i].trim();

        if (line.startsWith("import ") || line === "" || line.startsWith("interface ") || line.startsWith("type ")) {

          insertIndex = i + 1;

        } else {

          break;

        }

      }

    }



    // 按文件分组导入

    const importsByFile = {};

    importsNeeded.forEach(({ fileName, functionName }) => {

      if (!importsByFile[fileName]) {

        importsByFile[fileName] = [];

      }

      importsByFile[fileName].push(functionName);

    });



    // 生成导入语句 - 使用自定义utilsPath

    const importStatements = Object.entries(importsByFile).map(([fileName, functions]) => {

      const uniqueFunctions = [...new Set(functions)];

      return `import { ${uniqueFunctions.join(", ")} } from "${utilsPath}/${fileName}";`;

    });



    // 插入导入语句

    lines.splice(insertIndex, 0, ...importStatements);

    transformedCode = lines.join("\n");

  }



  return transformedCode; // 返回最终转换后的代码

}



/**

 * Vite 插件，支持通过魔法注释转换函数装饰器。

 *

 * @param {Object} [options={}] - 配置选项。

 * @param {string} [options.prefix="aa"] - 装饰器的前缀。

 * @param {string} [options.utilsPath="@/utils"] - 工具函数的导入路径。

 * @returns {Object} - Vite 插件对象。

 */

export function viteMemoDectoratorPlugin(options = {}) {

  const { prefix = "aa", utilsPath = "@/utils" } = options;



  return {

    name: "vite-memo-decorator", // 插件名称

    enforce: "pre", // 插件执行时机，设置为"pre"确保在编译前执行

    transform(code, id) {

      // 支持 .js, .ts, .jsx, .tsx, .vue 文件

      if (!/.(js|ts|jsx|tsx|vue)$/.test(id)) {

        return null; // 如果文件类型不支持，返回null

      }



      // 使用动态前缀检查是否需要处理该文件

      const magicCommentPattern = new RegExp(`\/\*\s*${prefix}-\w+\s*\([^)]*\)\s*\*\/`);

      if (!magicCommentPattern.test(code)) {

        return null; // 如果没有找到符合模式的注释，返回null

      }



      console.log(`🔄 Processing ${prefix}-* magic comments in: ${id}`);



      try {

        const result = transformMemoReq(code, prefix, utilsPath); // 调用转换函数



        if (result !== code) {

          console.log(`✅ Transform successful for: ${id}`);

          return {

            code: result, // 返回转换后的代码

            map: null, // 如果需要支持source map，可以在这里添加

          };

        }

      } catch (error) {

        console.error(`❌ Transform error in ${id}:`, error.message);

      }



      return null;

    },

  };

}

vite使用方式

viteMemoDectoratorPlugin({

  prefix: "abc",

}),

结语：成为解决方案的设计者

从闭包到魔法注释的演进：

在这个技术飞速发展的时代，我们牛马面临着知识爆炸，卷到没边的风气，我们只能建立更系统的技术认知体系。只会复制粘贴代码的开发者注定会陷入越忙越累的怪圈，比如最近很火的vue不想使用虚拟dom，其实我们只需要知道为什么，那是不是又多了点知识储备，因为技术迭代的速度永远快于机械记忆的速度。真正的技术能力体现在对知识本质的理解和创造性应用上——就像本文中的缓存方案，从最初的闭包实现到魔法注释优化，每一步实现都源于对多种技术思想的相融。阅读技术博客时，不能满足于解决眼前问题，更要揣摩作者的设计哲学；我们要善用AI等现代工具，但不是简单地向它索要代码，而是通过它拓展思维边界；愿我们都能超越代码搬运工的局限，成为真正的问题解决者和价值创造者。技术之路没有捷径，但有方法；没有终点，但有无尽的风景。加油吧，程序猿朋友们！！！

引言

在现代前端开发的浪潮中，CSS 的编写方式正在经历一场深刻的变革。传统的 CSS 开发模式虽然功能强大，但往往伴随着样式冲突、维护困难、代码冗余等问题。开发者需要花费大量时间在样式的命名、组织和维护上，而真正用于业务逻辑实现的时间却相对有限。

TailwindCSS 的出现，如同一股清流，为前端开发者带来了全新的开发体验。它不仅仅是一个 CSS 框架，更是一种全新的设计哲学——原子化 CSS 的完美实践。与此同时，在处理文本显示的细节问题上，诸如 -webkit-line-clamp 这样的 CSS 属性，虽然看似简单，却蕴含着深层的浏览器渲染原理。

本文将深入探讨 TailwindCSS 的核心理念、配置方法以及实际应用，同时详细解析 -webkit-line-clamp 的底层工作机制，帮助开发者更好地理解和运用这些现代前端技术。无论你是刚接触前端开发的新手，还是希望提升开发效率的资深开发者，这篇文章都将为你提供有价值的见解和实用的技巧。

TailwindCSS：原子化 CSS 的艺术

什么是原子化 CSS

原子化 CSS（Atomic CSS）是一种 CSS 架构方法，其核心思想是将样式拆分成最小的、不可再分的单元——就像化学中的原子一样。每个 CSS 类只负责一个特定的样式属性，比如 text-center 只负责文本居中，bg-blue-500 只负责设置蓝色背景。

传统的 CSS 开发模式往往采用组件化的方式，为每个 UI 组件编写独立的样式类。例如，一个按钮组件可能会有这样的 CSS：

.button {

  padding: 12px 24px;

  background-color: #3b82f6;

  color: white;

  border-radius: 6px;

  font-weight: 600;

  transition: background-color 0.2s;

}



.button:hover {

  background-color: #2563eb;

}

这种方式在小型项目中运行良好，但随着项目规模的增长，会出现以下问题：

原子化 CSS 通过将样式拆分成最小单元来解决这些问题。上面的按钮样式在 TailwindCSS 中可以这样表示：

<button class="px-6 py-3 bg-blue-500 text-white rounded-md font-semibold hover:bg-blue-600 transition-colors">

  Click me

</button>

每个类名都有明确的职责：

• px-6：左右内边距 1.5rem（24px）


• py-3：上下内边距 0.75rem（12px）


• bg-blue-500：蓝色背景


• text-white：白色文字


• rounded-md：中等圆角


• font-semibold：半粗体字重


• hover:bg-blue-600：悬停时的深蓝色背景


• transition-colors：颜色过渡动画

TailwindCSS 的核心特性

TailwindCSS 作为原子化 CSS 的杰出代表，具有以下核心特性：

1. 几乎不用写 CSS

这是 TailwindCSS 最吸引人的特性之一。在传统开发中，开发者需要在 HTML 和 CSS 文件之间频繁切换，思考类名、编写样式、处理选择器优先级等问题。而使用 TailwindCSS，大部分样式都可以直接在 HTML 中通过预定义的类名来实现。

这种方式带来的好处是显而易见的：

• 开发速度提升：无需在文件间切换，样式即写即见


• 认知负担减轻：不需要思考复杂的类名和样式组织


• 一致性保证：使用统一的设计系统，避免样式不一致

2. AI 代码生成的首选框架

在人工智能辅助编程的时代，TailwindCSS 已经成为 AI 工具生成前端代码时的首选 CSS 框架。这主要有以下几个原因：

• 语义化程度高：TailwindCSS 的类名具有很强的语义性，AI 可以更容易理解和生成


• 标准化程度高：作为业界标准，AI 模型在训练时接触了大量 TailwindCSS 代码


• 组合性强：原子化的特性使得 AI 可以灵活组合不同的样式类

当你使用 ChatGPT、Claude 或其他 AI 工具生成前端代码时，它们几乎总是会使用 TailwindCSS 来处理样式，这已经成为了一种行业默认标准。

3. 丰富的内置类名系统

TailwindCSS 提供了一套完整而系统的类名体系，涵盖了前端开发中几乎所有的样式需求：

• 布局类：flex、grid、block、inline 等


• 间距类：m-4、p-2、space-x-4 等


• 颜色类：text-red-500、bg-blue-200、border-gray-300 等


• 字体类：text-lg、font-bold、leading-tight 等


• 响应式类：md:text-xl、lg:flex、xl:grid-cols-4 等


• 状态类：hover:bg-gray-100、focus:ring-2、active:scale-95 等

这些类名都遵循一致的命名规范，学会了基本规则后，即使遇到没用过的类名也能快速理解其含义。

配置与使用

安装和配置流程

要在项目中使用 TailwindCSS，需要经过以下几个步骤：

1. 安装依赖包

npm install -D tailwindcss @vitejs/plugin-tailwindcss

这里安装了两个包：

• tailwindcss：TailwindCSS 的核心包


• @vitejs/plugin-tailwindcss：Vite 的 TailwindCSS 插件，用于在构建过程中处理 TailwindCSS

2. 生成配置文件

npx tailwindcss init

这个命令会在项目根目录生成一个 tailwind.config.js 文件：

/** @type {import('tailwindcss').Config} */

export default {

  content: [

    "./index.html",

    "./src/**/*.{js,ts,jsx,tsx}",

  ],

  theme: {

    extend: {},

  },

  plugins: [],

}

content 数组指定了 TailwindCSS 应该扫描哪些文件来查找使用的类名，这对于生产环境的样式优化非常重要。

vite.config.js 配置详解

在 Vite 项目中，需要在 vite.config.js 中配置 TailwindCSS 插件：

import { defineConfig } from 'vite'

import react from '@vitejs/plugin-react'

import tailwindcss from '@vitejs/plugin-tailwindcss'



export default defineConfig({

  plugins: [

    react(),

    tailwindcss()

  ],

})

这个配置告诉 Vite 在构建过程中使用 TailwindCSS 插件来处理 CSS 文件。插件会自动：

• 扫描指定的文件查找使用的 TailwindCSS 类名


• 生成对应的 CSS 代码


• 在生产环境中移除未使用的样式（Tree Shaking）

tailwind.css 引入方式

在项目的主 CSS 文件（通常是 src/index.css 或 src/main.css）中引入 TailwindCSS 的基础样式：

@tailwind base;

@tailwind components;

@tailwind utilities;

这三个指令分别引入了：

• base：重置样式和基础样式


• components：组件样式（可以自定义）


• utilities：工具类样式（TailwindCSS 的核心）

单位系统解析

TailwindCSS 使用了一套独特而直观的单位系统。其中最重要的概念是：1rem = 4 个单位。

这意味着：

• w-4 = width: 1rem = 16px（在默认字体大小下）


• p-2 = padding: 0.5rem = 8px


• m-8 = margin: 2rem = 32px

这套系统的设计非常巧妙：

• 易于记忆：4 的倍数关系简单直观


• 设计友好：符合设计师常用的 8px 网格系统


• 响应式友好：基于 rem 单位，能够很好地适应不同的屏幕尺寸

常用的间距对照表：

这套系统不仅适用于内外边距，也适用于宽度、高度、字体大小等其他尺寸相关的属性。

-webkit-line-clamp：文本截断的底层原理

浏览器内核基础知识

在深入了解 -webkit-line-clamp 之前，我们需要先理解浏览器内核的基本概念。浏览器内核（Browser Engine）是浏览器的核心组件，负责解析 HTML、CSS，并将网页内容渲染到屏幕上。不同的浏览器使用不同的内核，这也是为什么某些 CSS 属性需要添加特定前缀的原因。

主要浏览器内核及其前缀：

由于 WebKit 内核的广泛使用，许多实验性的 CSS 属性首先在 WebKit 中实现，并使用 -webkit- 前缀。-webkit-line-clamp 就是其中的一个典型例子。

实验性属性的概念

CSS 中的实验性属性（Experimental Properties）是指那些尚未成为正式 W3C 标准，但已经在某些浏览器中实现的功能。这些属性通常具有以下特征：

-webkit-line-clamp 正是这样一个实验性属性。它最初是为了解决移动端 WebKit 浏览器中多行文本截断的需求而设计的，虽然不是 CSS 标准的一部分，但由于其实用性，被广泛采用并逐渐得到其他浏览器的支持。

-webkit-line-clamp 深度解析

属性的工作原理

-webkit-line-clamp 是一个用于限制文本显示行数的 CSS 属性。当文本内容超过指定行数时，多余的内容会被隐藏，并在最后一行的末尾显示省略号（...）。

这个属性的工作原理涉及到浏览器的文本渲染机制：

为什么不能独自生效

这是 -webkit-line-clamp 最容易让开发者困惑的地方。单独使用这个属性是无效的，必须配合其他 CSS 属性才能正常工作。这是因为 -webkit-line-clamp 的设计初衷是作为 Flexbox 布局的一部分来工作的。

具体来说，-webkit-line-clamp 只在以下条件同时满足时才会生效：

这种设计反映了早期 WebKit 对 Flexbox 规范的实现方式。在当时，-webkit-box 是 Flexbox 的早期实现，而 -webkit-line-clamp 被设计为在这种布局模式下工作。

必需的配套属性详解

让我们详细分析每个必需的配套属性：

1. display: -webkit-box

display: -webkit-box;

这个属性将元素设置为 WebKit 的旧版 Flexbox 容器。在现代 CSS 中，我们通常使用 display: flex，但 -webkit-line-clamp 需要这个特定的值才能工作。

-webkit-box 是 2009 年 Flexbox 规范的实现，虽然已经过时，但为了兼容 -webkit-line-clamp，我们仍然需要使用它。这个值会：

• 将元素转换为块级容器


• 启用 WebKit 的 Flexbox 布局引擎


• 为 -webkit-line-clamp 提供必要的布局上下文

2. -webkit-box-orient: vertical

-webkit-box-orient: vertical;

这个属性设置 Flexbox 容器的主轴方向为垂直。在文本截断的场景中，我们需要垂直方向的布局来正确计算行数。

可选值包括：

• horizontal：水平排列（默认值）


• vertical：垂直排列


• inline-axis：沿着内联轴排列


• block-axis：沿着块轴排列

对于文本截断，我们必须使用 vertical，因为：

• 文本行是垂直堆叠的


• -webkit-line-clamp 需要在垂直方向上计算行数


• 只有在垂直布局下，行数限制才有意义

3. overflow: hidden

overflow: hidden;

这个属性隐藏超出容器边界的内容。在文本截断的场景中，它的作用是：

• 隐藏超出指定行数的文本内容


• 确保省略号正确显示在可见区域内


• 防止内容溢出影响页面布局

如果不设置 overflow: hidden，超出行数限制的文本仍然会显示，-webkit-line-clamp 就失去了意义。

完整的文本截断方案

将所有必需的属性组合起来，一个完整的文本截断方案如下：

.text-clamp {

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;

  overflow: hidden;

}

这个方案会将文本限制在 2 行内，超出的内容会被隐藏并显示省略号。

浏览器兼容性分析

虽然 -webkit-line-clamp 带有 WebKit 前缀，但实际上它的兼容性比想象中要好：

现代浏览器（除了 IE）都已经支持这个属性，使得它在实际项目中具有很高的可用性。

高级用法和注意事项

1. 响应式行数控制

可以结合媒体查询实现响应式的行数控制：

.responsive-clamp {

  display: -webkit-box;

  -webkit-box-orient: vertical;

  overflow: hidden;

  -webkit-line-clamp: 3;

}



@media (max-width: 768px) {

  .responsive-clamp {

    -webkit-line-clamp: 2;

  }

}

2. 与其他 CSS 属性的交互

-webkit-line-clamp 与某些 CSS 属性可能产生冲突：

• white-space: nowrap：会阻止文本换行，使 line-clamp 失效


• height 固定值：可能与 line-clamp 的高度计算冲突


• line-height：会影响行数的计算，需要谨慎设置

3. 性能考虑

使用 -webkit-line-clamp 时需要注意性能影响：

• 浏览器需要重新计算文本布局


• 在大量元素上使用可能影响渲染性能


• 动态改变 line-clamp 值会触发重排（reflow）

实战应用与代码示例

line-clamp 在 TailwindCSS 中的应用

TailwindCSS 内置了对 -webkit-line-clamp 的支持，提供了 line-clamp-{n} 工具类。让我们看看如何在实际项目中使用这些类。

基础使用示例

// 产品卡片组件

function ProductCard({ product }) {

  return (

    <div className="card max-w-sm">

      {/* 产品图片 */}

      <div className="relative">

        <img

          src={product.image}

          alt={product.name}

          className="w-full h-64 object-cover"

        />

        {product.isNew && (

          <span className="absolute top-2 left-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded">

            New

          </span>

        )}

      </div>

      

      {/* 产品信息 */}

      <div className="p-6">

        {/* 产品标题 - 限制1行 */}

        <h3 className="text-lg font-semibold text-gray-900 line-clamp-1 mb-2">

          {product.name}

        </h3>

        

        {/* 产品描述 - 限制2行 */}

        <p className="text-sm text-gray-600 line-clamp-2 mb-4">

          {product.description}

        </p>

        

        {/* 产品特性 - 限制3行 */}

        <div className="text-xs text-gray-500 line-clamp-3 mb-4">

          {product.features.join(' • ')}

        </div>

        

        {/* 价格和操作 */}

        <div className="flex items-center justify-between">

          <span className="text-xl font-bold text-gray-900">

            ${product.price}

          </span>

          <button className="btn-primary">

            Add to Cart

          </button>

        </div>

      </div>

    </div>

  );

}

在这个示例中，我们使用了不同的 line-clamp 值来处理不同类型的文本内容：

• line-clamp-1：产品标题保持在一行内


• line-clamp-2：产品描述限制在两行内


• line-clamp-3：产品特性列表限制在三行内

响应式文本截断

TailwindCSS 的响应式前缀可以与 line-clamp 结合使用，实现不同屏幕尺寸下的不同截断行为：

function ArticleCard({ article }) {

  return (

    <article className="card">

      <div className="p-6">

        {/* 响应式标题截断 */}

        <h2 className="text-xl font-bold text-gray-900 line-clamp-2 md:line-clamp-1 mb-3">

          {article.title}

        </h2>

        

        {/* 响应式内容截断 */}

        <p className="text-gray-600 line-clamp-3 sm:line-clamp-4 lg:line-clamp-2 mb-4">

          {article.content}

        </p>

        

        {/* 标签列表 - 移动端截断更多 */}

        <div className="text-sm text-gray-500 line-clamp-2 md:line-clamp-1">

          {article.tags.map(tag => `#${tag}`).join(' ')}

        </div>

      </div>

    </article>

  );

}

这个示例展示了如何根据屏幕尺寸调整文本截断行为：

• 移动端：标题显示2行，内容显示3行


• 平板端：标题显示1行，内容显示4行


• 桌面端：标题显示1行，内容显示2行

动态 line-clamp 控制

有时我们需要根据用户交互动态改变文本的截断行为：

import { useState } from 'react';



function ExpandableText({ text, maxLines = 3 }) {

  const [isExpanded, setIsExpanded] = useState(false);

  

  return (

    <div className="space-y-2">

      <p className={`text-gray-700 ${isExpanded ? '' : `line-clamp-${maxLines}`}`}>

        {text}

      </p>

      

      <button

        onClick={() => setIsExpanded(!isExpanded)}

        className="text-primary-600 hover:text-primary-700 text-sm font-medium"

      >

        {isExpanded ? 'Show Less' : 'Show More'}

      </button>

    </div>

  );

}



// 使用示例

function ReviewCard({ review }) {

  return (

    <div className="card p-6">

      <div className="flex items-center mb-4">

        <img

          src={review.avatar}

          alt={review.author}

          className="w-10 h-10 rounded-full mr-3"

        />

        <div>

          <h4 className="font-semibold text-gray-900">{review.author}</h4>

          <div className="flex items-center">

            {/* 星级评分 */}

            {[...Array(5)].map((_, i) => (

              <svg

                key={i}

                className={`w-4 h-4 ${i < review.rating ? 'text-yellow-400' : 'text-gray-300'} fill-current`}

                viewBox="0 0 24 24"

              >

                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />

              </svg>

            ))}

          </div>

        </div>

      </div>

      

      {/* 可展开的评论内容 */}

      <ExpandableText text={review.content} maxLines={4} />

    </div>

  );

}

这个示例展示了如何创建一个可展开的文本组件，用户可以点击按钮来显示完整内容或收起到指定行数。

最佳实践与总结

开发建议

在实际项目中使用 TailwindCSS 和 -webkit-line-clamp 时，以下最佳实践将帮助你获得更好的开发体验和项目质量：

TailwindCSS 开发最佳实践

1. 合理组织类名

虽然 TailwindCSS 鼓励在 HTML 中直接使用工具类，但过长的类名列表会影响代码可读性。建议采用以下策略：

// ❌ 避免：过长的类名列表

<div className="flex items-center justify-between p-6 bg-white rounded-lg shadow-sm border border-gray-200 hover:shadow-md transition-shadow duration-200 ease-in-out">



// ✅ 推荐：使用组件抽象

const Card = ({ children, className = "" }) => (

  <div className={`card hover:shadow-md transition-shadow ${className}`}>

    {children}

  </div>

);



// ✅ 推荐：使用 @apply 指令创建组件类

// 在 CSS 中定义

.card {

  @apply flex items-center justify-between p-6 bg-white rounded-lg shadow-sm border border-gray-200;

}

2. 建立设计系统

充分利用 TailwindCSS 的配置系统建立项目专属的设计系统：

// tailwind.config.js

module.exports = {

  theme: {

    extend: {

      // 定义项目色彩系统

      colors: {

        brand: {

          primary: '#3B82F6',

          secondary: '#10B981',

          accent: '#F59E0B',

        }

      },

      // 定义间距系统

      spacing: {

        '18': '4.5rem',

        '88': '22rem',

      },

      // 定义字体系统

      fontSize: {

        'xs': ['0.75rem', { lineHeight: '1rem' }],

        'sm': ['0.875rem', { lineHeight: '1.25rem' }],

        'base': ['1rem', { lineHeight: '1.5rem' }],

        'lg': ['1.125rem', { lineHeight: '1.75rem' }],

        'xl': ['1.25rem', { lineHeight: '1.75rem' }],

      }

    }

  }

}

3. 性能优化策略

TailwindCSS 的性能优化主要体现在生产环境的样式清理：

// tailwind.config.js

module.exports = {

  content: [

    // 精确指定扫描路径，避免不必要的文件扫描

    "./src/**/*.{js,jsx,ts,tsx}",

    "./public/index.html",

    // 如果使用了第三方组件库，也要包含其路径

    "./node_modules/@my-ui-lib/**/*.{js,jsx}",

  ],

  // 启用 JIT 模式获得更好的性能

  mode: 'jit',

}

4. 响应式设计策略

采用移动优先的设计理念，合理使用响应式前缀：

// ✅ 移动优先的响应式设计

<div className="

  grid grid-cols-1 gap-4

  sm:grid-cols-2 sm:gap-6

  md:grid-cols-3 md:gap-8

  lg:grid-cols-4

  xl:gap-10

">

  {/* 内容 */}

</div>



// ✅ 响应式文字大小

<h1 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold">

  标题

</h1>

line-clamp 使用最佳实践

1. 选择合适的截断行数

不同类型的内容需要不同的截断策略：

2. 考虑内容的语义完整性

// ✅ 好的实践：为截断的内容提供完整查看选项

function ProductDescription({ description }) {

  const [isExpanded, setIsExpanded] = useState(false);

  

  return (

    <div>

      <p className={isExpanded ? '' : 'line-clamp-3'}>

        {description}

      </p>

      {description.length > 150 && (

        <button 

          onClick={() => setIsExpanded(!isExpanded)}

          className="text-blue-600 text-sm mt-1"

        >

          {isExpanded ? '收起' : '查看更多'}

        </button>

      )}

    </div>

  );

}

3. 处理不同语言的截断

不同语言的文字密度不同，需要相应调整截断行数：

// 根据语言调整截断行数

function MultiLanguageText({ text, language }) {

  const getLineClampClass = (lang) => {

    switch (lang) {

      case 'zh': return 'line-clamp-2'; // 中文字符密度高

      case 'en': return 'line-clamp-3'; // 英文需要更多行数

      case 'ja': return 'line-clamp-2'; // 日文类似中文

      default: return 'line-clamp-3';

    }

  };

  

  return (

    <p className={`text-gray-700 ${getLineClampClass(language)}`}>

      {text}

    </p>

  );

}

性能考虑

TailwindCSS 性能优化

1. 构建时优化

TailwindCSS 在构建时会自动移除未使用的样式，但我们可以进一步优化：

// postcss.config.js

module.exports = {

  plugins: [

    require('tailwindcss'),

    require('autoprefixer'),

    // 生产环境启用 CSS 压缩

    process.env.NODE_ENV === 'production' && require('cssnano')({

      preset: 'default',

    }),

  ].filter(Boolean),

}

2. 运行时性能

避免在运行时动态生成类名，这会影响 TailwindCSS 的优化效果：

// ❌ 避免：动态类名生成

const dynamicClass = `text-${color}-500`; // 可能不会被包含在最终构建中



// ✅ 推荐：使用完整的类名

const colorClasses = {

  red: 'text-red-500',

  blue: 'text-blue-500',

  green: 'text-green-500',

};

const selectedClass = colorClasses[color];

line-clamp 性能影响

1. 重排和重绘

-webkit-line-clamp 的使用会触发浏览器的重排（reflow），在大量元素上使用时需要注意性能：

// ✅ 使用 CSS containment 优化性能

.text-container {

  contain: layout style;

  -webkit-line-clamp: 2;

  display: -webkit-box;

  -webkit-box-orient: vertical;

  overflow: hidden;

}

2. 虚拟化长列表

在处理大量带有文本截断的列表项时，考虑使用虚拟化技术：

import { FixedSizeList as List } from 'react-window';



function VirtualizedProductList({ products }) {

  const Row = ({ index, style }) => (

    <div style={style}>

      <ProductCard product={products[index]} />

    </div>

  );



  return (

    <List

      height={600}

      itemCount={products.length}

      itemSize={200}

    >

      {Row}

    </List>

  );

}

总结

TailwindCSS 和 -webkit-line-clamp 代表了现代前端开发中两个重要的技术趋势：工具化的 CSS 开发和细粒度的样式控制。

TailwindCSS 的价值在于：

-webkit-line-clamp 的意义在于：

在实际项目中，这两个技术的结合使用能够帮助开发者：

• 快速原型开发：在设计阶段快速验证界面效果


• 响应式布局：轻松适配各种设备和屏幕尺寸


• 内容管理：优雅处理动态内容的显示问题


• 性能优化：减少 CSS 体积和运行时计算

随着前端技术的不断发展，我们可以期待看到更多类似的工具和技术出现，它们将继续推动前端开发向着更高效、更标准化的方向发展。对于前端开发者而言，掌握这些现代技术不仅能提升当前的开发效率，更重要的是能够跟上技术发展的步伐，为未来的项目做好准备。

无论你是刚开始学习前端开发的新手，还是希望优化现有项目的资深开发者，TailwindCSS 和 -webkit-line-clamp 都值得你深入学习和实践。它们不仅是技术工具，更代表了现代前端开发的最佳实践和发展方向。

✨ 为什么写这篇文章？

很多前端朋友在用 React 的时候：

• 只会用 useState 做局部状态，结果项目一大就乱套。


• 不了解 useReducer 和 Context，复杂页面全靠 props 一层层传。


• 性能卡顿后，只知道用 React.memo，但为什么卡？


• useMemo和useCallback的区别 ？


• 明明只是个 Modal，结果被卡在组件层级里动弹不得，不知道可以用 Portals。

👉「在什么场景下选用哪个 API」+「如何写出最合理的 React 代码」。

🟢 1. useState：局部状态管理

🌳 场景：表单输入管理

比起枯燥的计数器，这里用表单输入做示例。

import { useState } from 'react';



export default function LoginForm() {

  const [username, setUsername] = useState('');

  const [password, setPassword] = useState('');



  const handleSubmit = e => {

    e.preventDefault();

    console.log("登录中", username, password);

  }



  return (

    <form onSubmit={handleSubmit}>

      <input value={username} onChange={e => setUsername(e.target.value)} placeholder="用户名"/>

      <input type="password" value={password} onChange={e => setPassword(e.target.value)} placeholder="密码"/>

      <button type="submit">登录</button>

    </form>

  );

}

🚀 优势

• 简单、直接


• 适用于小型、独立的状态

🟡 2. useEffect：副作用处理

🌍 场景：组件挂载时拉取远程数据

import { useEffect, useState } from 'react';



export default function UserProfile({ userId }) {

  const [user, setUser] = useState(null);



  useEffect(() => {

    fetch(`/api/user/${userId}`)

      .then(res => res.json())

      .then(data => {

         setUser(data);

      });



    return () => {

      // 组件销毁执行此回调

    };

  }, []);



  return user ? <h1>{user.name}</h1> : <p>加载中...</p>;

}

🚀 优势

• 集中管理副作用（请求、订阅、定时器、事件监听）

🔵 3. useRef & useImperativeHandle：DOM、实例方法控制

场景 1：聚焦输入框

import { useRef, useEffect } from 'react';



export default function AutoFocusInput() {

  const inputRef = useRef();



  useEffect(() => {

    inputRef.current.focus();

  }, []);



  return <input ref={inputRef} placeholder="自动聚焦" />;

}

场景 2：在父组件调用子组件的方法

import { forwardRef, useRef, useImperativeHandle } from 'react';



const FancyInput = forwardRef((props, ref) => {

  const inputRef = useRef();

  useImperativeHandle(ref, () => ({

    focus: () => inputRef.current.focus()

  }));

  return <input ref={inputRef} />;

});



export default function App() {

  const fancyRef = useRef();

  return (

    <>

      <FancyInput ref={fancyRef} />

      <button onClick={() => fancyRef.current.focus()}>父组件聚焦子组件</button>

    </>

  );

}

🧭 4. Context & useContext：解决多层级传值

场景：用户登录信息在多层组件使用

import React, { createContext, useContext } from 'react';



const UserContext = createContext();



/** 设置在 DevTools 中将显示为 User */

UserContext.displayName = 'User'



function Navbar() {

  return (

      <div>

          <UserInfo />

      </div>

  )

}



function UserInfo() {

  const user = useContext(UserContext);

  return <span>欢迎，{user.name}</span>;

}



export default function App() {

  return (

    <UserContext.Provider value={{ name: 'Zheng' }}>

      <Navbar />

    </UserContext.Provider>

  );

}

🚀 优势

• 解决「祖孙组件传值太麻烦」的问题

🔄 5. useReducer：复杂状态管理

import { useReducer } from 'react';



function reducer(state, action) {

  switch(action.type){

    case 'next':

      return { ...state, step: state.step + 1 };

    case 'prev':

      return { ...state, step: state.step - 1 };

    default:

      return state;

  }

}



export default function Wizard() {

  const [state, dispatch] = useReducer(reducer, { step: 1 });



  return (

    <>

      <h1>步骤 {state.step}</h1>

      <button onClick={() => dispatch({type: 'prev'})}>上一步</button>

      <button onClick={() => dispatch({type: 'next'})}>下一步</button>

    </>

  );

}

🆔 6. useId：避免 SSR / 并发下 ID 不一致

import { useId } from 'react';



export default function FormItem() {

  const id = useId();

  return (

    <>

      <label htmlFor={id}>姓名</label>

      <input id={id} type="text" />

    </>

  );

}

🚀 7. Portals：在根元素渲染 Modal

import { useState } from 'react';

import ReactDOM from 'react-dom';



function Modal({ onClose }) {

  return ReactDOM.createPortal(

    <div style={{ position: "fixed", top: 100, left: 100, background: "white" }}>

      <h1>这是 Modal</h1>

      <button onClick={onClose}>关闭</button>

    </div>,

    document.getElementById('root')

  );

}



export default function App() {

  const [show, setShow] = useState(false);

  return (

    <>

      <button onClick={() => setShow(true)}>打开 Modal</button>

      {show && <Modal onClose={() => setShow(false)} />}

    </>

  );

}

在上面代码中，我们将要渲染的视图作为createPortal方法的第一个参数，而第二个参数用于指定要渲染到那个DOM元素中。

尽管 portal 可以被放置在 DOM 树中的任何地方，但在任何其他方面，其行为和普通的 React 子节点行为一致。由于 portal 仍存在于 React 树， 且与 DOM 树中的位置无关，那么无论其子节点是否是 portal，像 context 这样的功能特性都是不变的。

这包含事件冒泡。一个从 portal 内部触发的事件会一直冒泡至包含 React 树的祖先，即便这些元素并不是 DOM 树中的祖先。

🔍 8. 组件渲染性能优化

🐘 之前类组件时代：shouldComponentUpdate与PureComponent

import { Component } from 'react'



export default class App extends Component {

  constructor() {

    super();

    this.state = {

      counter: 1

    }

  }

  render() {

    console.log("App 渲染了");

    return (

      <div>

        <h1>App 组件</h1>

        <div>{this.state.counter}</div>

        <button onClick={() => this.setState({

          counter : 1

        })}>+1</button>

      </div>

    )

  }

}

在上面的代码中，按钮在点击的时候仍然是设置 counter 的值为1，虽然 counter 的值没有变，整个组件仍然是重新渲染了的，显然，这一次渲染是没有必要的。

当 props 或 state 发生变化时，shouldComponentUpdate 会在渲染执行之前被调用。返回值默认为 true。首次渲染或使用 forceUpdate 方法时不会调用该方法。

下面我们来使用 shouldComponentUpdate 优化上面的示例：

import React from 'react'



/**

 * 对两个对象进行一个浅比较，看是否相等

 * obj1

 * obj2

 * 返回布尔值 true 代表两个对象相等， false 代表不相等

 */

function objectEqual(obj1, obj2) {

  for (let prop in obj1) {

    if (!Object.is(obj1[prop], obj2[prop])) {

      // 进入此 if，说明有属性值不相等

      // 只要有一个不相等，那么就应该判断两个对象不等

      return false

    }

  }

  return true

}



class PureChildCom1 extends React.Component {

  constructor(props) {

    super(props)

    this.state = {

      counter: 1,

    }

  }



  // 验证state未发生改变，是否会执行render

  onClickHandle = () => {

    this.setState({

      counter: Math.floor(Math.random() * 3 + 1),

    })

  }



  // shouldComponentUpdate 中返回 false 来跳过整个渲染过程。其包括该组件的 render 调用以及之后的操作。

  // 返回true 只要执行了setState都会重新渲染

  shouldComponentUpdate(nextProps, nextState) {

    if (

      objectEqual(this.props, nextProps) &&

      objectEqual(this.state, nextState)

    ) {

      return false

    }

    return true

  }



  render() {

    console.log('render')

    return (

      <div>

        <div>{this.state.counter}</div>

        <button onClick={this.onClickHandle}>点击</button>

      </div>

    )

  }

}



export default PureChildCom1

• PureComponent 内部做浅比较：如果 props/state 相同则跳过渲染。


• 不适用于复杂对象（如数组、对象地址未变）。

🥇 React.memo：函数组件记忆化

上面主要是优化类组件的渲染性能，那么如果是函数组件该怎么办呢？

React中为我们提供了memo高阶组件，只要 props 不变，就不重新渲染。

const Child = React.memo(function Child({name}) {

  console.log("Child 渲染");

  return <div>{name}</div>;

});

🏷 useCallback：缓存函数引用，避免触发子组件更新

import React, { useState, useCallback } from 'react';



function Child({ onClick }) {

  console.log("Child 渲染")

  return <button onClick={onClick}>点我</button>;

}



const MemoChild = React.memo(Child);



export default function App() {

  const [count, setCount] = useState(0);



  const handleClick = useCallback(() => {

    console.log("点击");

  }, []);



  return (

    <>

      <div>{count}</div>

      <button onClick={() => setCount(count+1)}>+1</button>

      <MemoChild onClick={handleClick} />

    </>

  );

}

在上面的代码中，我们对Child组件进行了memo缓存，当修改App组件中的count值的时候，不会引起Child组件更新；使用了useCallback对函数进行了缓存，当点击Child组件中的button时也不会引起父组件的更新。

🔢 useMemo：缓存计算

某些时候，组件中某些值需要根据状态进行一个二次计算（类似于 Vue 中的计算属性），由于函数组件一旦重新渲染，就会重新执行整个函数，这就导致之前的二次计算也会重新执行一次。

import React, { useState } from 'react';



function App() {

  const [count, setCount] = useState(1);

  const [val, setValue] = useState('');

  

  console.log("App render");

  // 使用useMemo缓存计算

  const getNum = useMemo(() => {

    console.log('调用了！！！！！');

    return count + 100;

  }, [count])



  return (

    <div>

      <h4>总和：{getNum()}</h4>

      <div>

        <button onClick={() => setCount(count + 1)}>+1</button>

        {/* 文本框的输入会导致整个组件重新渲染 */}

        <input value={val} onChange={event => setValue(event.target.value)} />

      </div>

    </div>

  );

}



export default App;

在上面的示例中，文本框的输入会导致整个 App 组件重新渲染，但是 count 的值是没有改变的，所以 getNum 这个函数也是没有必要重新执行的。我们使用了 useMemo 来缓存二次计算的值，并设置了依赖项 count，只有在 count 发生改变时，才会重新执行二次计算。

面试题：useMemo 和 useCallback 的区别及使用场景?

useMemo 和 useCallback 接收的参数都是一样，第一个参数为回调，第二个参数为要依赖的数据。

共同作用： 仅仅依赖数据发生变化，才会去更新缓存。

两者区别：

引言

在前端开发中，尤其是使用 Vue.js 进行开发时，我们经常需要监听数据的变化以执行相应的操作。Vue 3 提供了三种主要的方法来实现这一目标：watch、watchEffect 和 computed。虽然它们都能帮助我们监听数据变化，但各自的适用场景和工作原理有所不同。本文将详细探讨这三者的区别，并通过具体的案例进行说明。

一、Computed 属性

1.1 定义与用途

computed 是 Vue 中用于定义计算属性的方法。它允许你基于其他响应式数据创建一个新的响应式数据。这个新数据会根据其依赖的数据自动更新。

生活中的类比：

想象一下你在超市里购买商品，每个商品都有一个价格标签。当你想要知道购物车里所有商品的总价时，你可以手动计算每件商品的价格乘以其数量，然后加起来得到总价。但是如果你使用了一个智能购物车，它能够自动为你计算总价（只要你知道单价和数量），这就是 computed 的作用——它能帮你自动计算并实时更新结果。

1.2 使用示例

import { ref, computed } from 'vue';



const price = ref(10);

const quantity = ref(5);



const totalPrice = computed(() => {

    return price.value * quantity.value;

});



console.log(totalPrice.value); // 输出: 50



// 修改其中一个变量

price.value = 15;

console.log(totalPrice.value); // 输出: 75 自动更新

二、Watch 监听器

2.1 定义与用途

watch 允许你监听特定的数据源（如响应式引用或 getter 函数的结果），并在数据发生变化时执行回调函数。它可以监听单个源或多个源。

生活中的类比：

假设你现在正在做菜，你需要监控锅里的水是否沸腾。一旦水开始沸腾，你就知道是时候下饺子了。这里，“水是否沸腾”就是你要监听的数据源，而“下饺子”的动作则是监听到变化后执行的操作。

2.2 使用示例

import { ref, watch } from 'vue';



let waterBoiling = ref(false);



watch(waterBoiling, (newValue, oldValue) => {

    if (newValue === true) {

        console.log('Water is boiling, time to add the dumplings!');

    }

});



waterBoiling.value = true; // 触发监听器

2.3 监听多个来源

有时候我们需要同时监听多个数据源的变化：

watch([sourceA, sourceB], ([newSourceA, newSourceB], [oldSourceA, oldSourceB]) => {

    // 处理逻辑

});

三、WatchEffect 响应式效果

3.1 定义与用途

watchEffect 立即运行传入的函数，并响应式地追踪其内部使用的任何 reactive 数据。当这些数据更新时，该函数将再次执行。

生活中的类比：

想象你在厨房里准备晚餐，你需要时刻关注炉子上的火候以及烤箱里的温度。每当任何一个参数发生变化，你都需要相应地调整你的烹饪策略。在这里，watchEffect 就像一个智能助手，它会自动检测这些条件的变化，并即时调整你的行为。

3.2 使用示例

import { ref, watchEffect } from 'vue';



const temperature = ref(180);

const ovenStatus = ref('off');



watchEffect(() => {

    console.log(`Oven status is ${ovenStatus.value}, current temperature is ${temperature.value}`);

});



temperature.value = 200; // 自动触发重新执行

ovenStatus.value = 'on'; // 同样会触发重新执行

四、三者之间的对比

五、面试题

问题 1：请简述 computed 和 watch 的主要区别？

答案：

• computed 更适合用于需要根据其他状态派生出的新状态，并且这种派生关系是确定性的。


• watch 更适用于监听某个状态的变化，并在变化发生时执行异步操作或昂贵的计算任务。

问题 2：在什么情况下你会选择使用 watchEffect 而不是 watch？

答案：
当你希望立即执行一个副作用并且自动追踪所有被用到的状态作为依赖项时，watchEffect 是更好的选择。它简化了代码结构，因为你不需要显式声明哪些状态是你关心的。

问题 3：如何使用 watch 来监听多个状态的变化？

答案：
可以通过数组的形式传递给 watch，这样就可以同时监听多个状态的变化，并在任一状态发生变化时触发回调函数。

通过以上内容，我们对 watch、watchEffect 和 computed 在 Vue 3 中的应用有了较为全面的理解。理解这些工具的不同之处有助于我们在实际项目中做出更合适的选择。无论是构建简单的用户界面还是处理复杂的业务逻辑，正确运用这些功能都可以显著提高我们的开发效率。

为何想做一款软件

在日常的开发和学习过程中，我们常常致力于实现各种功能点，解决各种 Bug。然而，我们很少有机会去设计和制作属于自己的产品。有时，我们可能认为市面上已有众多类似产品，自己再做一款似乎没有必要；有时，我们又觉得要做的事情太多，不知从何下手。

最近，我意识到仅仅解决单点问题已没有那么吸引我。相反，如果我自己开发一款产品，它能够被其他人使用，这将是一件有意思的事情。

因此，我决定在新的一年里，根据自己熟悉的领域和过去一年的积累，尝试打造一款自己的 UML 桌面端软件。我想知道，自己是否真的能够创造出一款在日常工作中好用的工具。

目前，这个计划中的产品的许多功能点已经在开发计划中。我已经完成了最基础的技术架构，并实现了核心的绘图功能。接下来，让我们一探究竟，看看这款软件目前支持哪些功能点。

技术方案

Monorepo 项目结构

使用了 Monorepo（单一代码仓库）项目管理模式。

• 这样可以将通用类型和工具方法抽离在 types 包和 utils 包中。


• 像 graph 这样功能独立的模块也可以单独抽离成包发布。


• 通过集中管理依赖，可以更容易地确保所有项目使用相同版本的库，并且相同版本的依赖库可以只安装一次。

项目介绍:

|-- apps/                      # 包含所有应用程序的代码，每个应用程序可以有自己的目录，如draw-client。

    |-- draw-client/           # 客户端应用程序的主目录

        |-- src

        |-- package.json

        |-- tsconfig.json

|-- packages/                  # 用于存放项目中的多个包或模块，每个包可以独立开发和测试，便于代码复用和维护。

    |-- graph/                 # 包含与图表绘制相关的逻辑和组件，可能是一个通用的图表库。

        |-- src

        |-- package.json

        |-- tsconfig.json

    |-- types/                 # 存放TypeScript类型定义文件，为项目提供类型安全。

        |-- src

        |-- package.json

        |-- tsconfig.json

    |-- utils/                 # 包含工具函数和辅助代码，这些是项目中通用的功能，可以在多个地方复用。

        |-- src

        |-- package.json

        |-- tsconfig.json

|-- services/                  # 服务端代码

    |-- src

    |-- package.json

    |-- tsconfig.json

|-- .npmrc                   

|-- package.json               # 项目的配置文件，包含项目的元数据、依赖项、脚本等，是npm和pnpm管理项目的核心。

|-- pnpm-lock.yaml             # pnpm的锁定文件，确保所有开发者和构建环境中依赖的版本一致。

|-- pnpm-workspace.yaml        # 定义pnpm工作区的结构，允许在同一个仓库中管理多个包的依赖关系。        

|-- REDEME.md                  

|-- tsconfig.base.json         

|-- tsconfig.json             

|-- tsconfig.tsbuildinfo       

技术栈相关

涉及的技术架构图如下：

• draw-client 相关技术栈

• services 相关技术栈

软件操作流程说明

为了深入理解软件开发的流程，我们将通过两个具体的案例来阐述图形的创建、展示以及动态变化的过程。

创建图形流程

在本节中，我们将详细介绍如何使用我们的图形库来创建图形元素。通过序列图可以了解到一个最简单的图形创建的完整流程如下：

撤销操作

在软件开发中，撤销操作是一个常见的需求，它允许用户撤销之前的某些操作，恢复到之前的状态。本节将探讨如何在图形编辑器中实现撤销功能。

当我们想要回退某一个步骤时，流程如下：

规划

目前软件开发还是处于一个初步的阶段，还有很多有趣的功能需要开发。并且软件开发需要大量的时间，我会逐步去开发相关的功能。这不仅是一个技术实现的过程，更是一个不断学习和成长的过程。我计划在以下几个关键领域深入挖掘：

当然我会也在开发的过程中记录分享到掘金社区，如果有人想要体验和参与的也是非常欢迎！如果对你有帮助感谢点赞关注，可以私信我一起讨论下独立开发相关的话题。

前言

React-native中高亮文本实现方案，rn中文本高亮并不像h5那样，匹配正则，直接添加标签实现，rn中一般是循环实现了。一般是一段文本，拆分出关键词，然后关键词高亮。

简单实现

const markKeywords = (text, highlight) => {

    if (!text || !highlight) return { value: [text], highlight: [] }

    

    for (let index = 0; index < highlight.length; index++) {

        const reg = new RegExp(highlight[index], 'g');

        text = text.replace(reg, `**${highlight[index]}**`)

    }

    

    return {

        markKeywordList: text.split('**').filter(item => item),

        hightList: highlight.map(item => item)

    }

} 

上面可以拆分出可以循环的文本，和要高亮的文本。

特殊情况

const title = 'haorooms前端博文章高亮测试一下'

const highLightWords = ['前端博文', '文章高亮']

因为打上星号标记的原因，文章高亮 在被标记成 前端博文 章高亮 后，并不能被 文章高亮 匹配，而且即使能匹配也不能把 前端博文章高亮 拆成 前端博文 、文章高亮，如果能拆成 前端博文章高亮 就好了。

function sort(letter, substr) {

  letter = letter.toLocaleUpperCase()

  substr = substr.toLocaleUpperCase()

  var pos = letter.indexOf(substr)

  var positions = []

  while(pos > -1) {

     positions.push(pos)

     pos = letter.indexOf(substr, pos + 1)

  }



  return positions.map(item => ([item, item + substr.length]))

}



// 高亮词第一次遍历索引

function format (text, hight) {

  var arr = []

  // hight.push(hight.reduce((prev, curr) => prev+curr), '')

  hight.forEach((item, index) => {

    arr.push(sort(text, item))

  })



  return arr.reduce((acc, val) => acc.concat(val), []);

}



// 合并索引区间

var merge = function(intervals) {

  const n = intervals.length;



  if (n <= 1) {

      return intervals;

  }



  intervals.sort((a, b) => a[0] - b[0]);



  let refs = [];

  refs.unshift([intervals[0][0], intervals[0][1]]);



  for (let i = 1; i < n; i++) {

      let ref = refs[0];



      if (intervals[i][0] < ref[1]) {

          ref[1] = Math.max(ref[1], intervals[i][1]);

      } else {

          refs.unshift([intervals[i][0], intervals[i][1]]);

      }

  }



  return refs.sort((a,b) => a[0] - b[0]);

}



function getHightLightWord (text, hight) {

  var bj = merge(format(text, hight))

  const c = text.split('')

  var bjindex = 0

  try {

    bj.forEach((item, index) => {

      item.forEach((_item, _index) => {

          c.splice(_item + bjindex, 0, '**')

          bjindex+=1

      })

    })

  } catch (error) {

  }

  return c.join('').split('**')

}



export const markKeywords = (text, keyword) => {



  if (!text || !keyword || keyword.length === 0 ) {

    return { value: [text], keyword: [] }

  }

  if (Array.isArray(keyword)) {

    keyword = keyword.filter(item => item)

  }

  let obj = { value: [text], keyword };

  obj = {

    value: getHightLightWord(text, keyword).filter((item) => item),

    keyword: keyword.map((item) => item),

  };

  return obj;

};

述方法中我们先使用了下标匹配的方式，得到一个下标值的映射，然后通过区间合并的方式把连着的词做合并处理，最后再用合并后的下标值映射去打 ** 标记即可。

简单组件封装

function TextHighLight(props) {

    const { title = '', highLightWords = [] } = props

    const { numberOfLines, ellipsizeMode } = props

    const { style } = props

    

    const { markKeywordList, hightList } = markKeywords(title, highLightWords)

    

    return <Text

            numberOfLines={numberOfLines}

            ellipsizeMode={ellipsizeMode}

            style={style}

        >

            {

                markKeywordList ?

                    markKeywordList.map((item,index) => (

                        (hightList && hightList.some(i => (i.toLocaleUpperCase().includes(item) || i.toLowerCase().includes(item))))

                            ? <Text key={index} style={{ color: '#FF6300' }}>{item}</Text>

                            : item

                    ))

                    : null

            }

        </Text>

}

 npm (Node Package Manager)

概述

npm 是 Node.js 的官方包管理器，也是全球使用最广泛的 JavaScript 包管理工具。它用于管理 JavaScript 项目的依赖包，可以通过命令行来安装、更新、卸载依赖包。

特点

• Node.js 官方默认包管理器。支持全局和本地安装模式


• 通过 package.json 和 package-lock.json 管理依赖版本，可以在 package.json 中定义各种脚本命令

常用命令

npm install [package]       # 安装包

npm uninstall [package]     # 卸载包

npm update [package]        # 更新包

npm init                    # 初始化项目

npm run [script]            # 运行脚本

npm publish                 # 发布包

依赖管理方式

npm 使用平铺的 node_modules 结构，会导致依赖重复和幽灵依赖问题（phantom dependencies）。这种管理方式导致npm在处理在处理大量依赖时速度会很慢

cnpm (China npm)

特点

• 镜像加速：使用淘宝的 npm 镜像，下载速度更快


• 兼容 npm：命令与 npm 基本一致，学习成本低


• 安装简单：可以通过 npm 直接安装 cnpm

概述

cnpm 是阿里巴巴团队开发的 npm 命令行工具，基于淘宝镜像 registry.npmmirror.com，用于解决国内访问 npm 官方源缓慢的问题。

特点

• 镜像加速：使用淘宝的 npm 镜像，下载速度更快


• 兼容 npm：命令与 npm 基本一致，学习成本低


• 安装简单：可以通过 npm 直接安装 cnpm

本质是和npm一样，只是为了迎合国内的网络环境，更改了依赖包的下载地址，让下载速度更快

pnpm (## Performant npm)

概述

pnpm 是一个新兴的、高性能的包管理工具，最大的特点是使用硬链接（hard link）来复用依赖文件，极大节省磁盘空间和提升安装速度。

特点

• 高效存储:多个项目可以共享同一版本的依赖，节省磁盘空间


• 磁盘空间优化：通过硬链接共享依赖，显著节省了磁盘空间。


• 强制封闭依赖：避免隐式依赖，提高了依赖管理的可靠性。


• 速度更快，兼容性更好：安装速度比 npm 和 yarn 更快，兼容 npm 的工作流和 package.json

依赖管理方式

pnpm (Performant npm) 的依赖管理方式与传统包管理器(npm/yarn)有本质区别，其核心基于内容可寻址存储和符号链接技术。

• 内容可寻址存储 (Content-addressable storage)

pnpm 将所有依赖包存储在全局的 ~/.pnpm-store 目录中(默认位置)，存储结构基于包内容的哈希值而非包名称。这意味着： 1. 相同内容的包只会存储一次 2.不同项目可以共享完全相同的依赖版本3.通过哈希值精确验证包完整性

• 符号链接 (Symbolic links) 结构

举例解释就是

 场景假设：你有 100 个项目，每个项目都用到了相同的 lodash 库

1. npm：每个项目都自己带一本书

• npm 的方式：
  
  
  
  
  • 每个项目都有一本完整的 lodash，即使内容一模一样。
  
  
  • 结果：你的硬盘上存了 100 本相同的书（100 份 lodash 副本），占用大量空间。
  
  
  • 更新问题：如果 lodash 发布新版本，哪怕只改了一行代码，npm 也会重新下载整本书，而不是只更新变化的部分。
  
  
  
  

2. pnpm：所有项目共享同一本书

• pnpm 的方式：
  
  
  
  
  • 统一存储：所有版本的 lodash 都存放在一个中央仓库（类似“云端书库”）。
  
  
  • 按需链接：每个项目只是“链接”到这本书，而不是复制一份。
  
  
  • 版本更新优化：如果 lodash 新版本只改了一个文件，pnpm 只存储这个变化的文件，而不是整个新版本。
  
  
  
  

点赞 + 关注 + 收藏 = 学会了

在 p5.js 中，arc() 函数用于绘制圆弧，它是创建各种圆形图形和动画的基础。圆弧本质上是椭圆的一部分，由中心点、宽度、高度、起始角度和结束角度等参数定义。通过灵活运用 arc() 函数可以轻松创建饼图、仪表盘、时钟等常见 UI 组件，以及各种创意图形效果。

arc() 的基础语法

基础语法

arc() 函数的完整语法如下：

arc(x, y, w, h, start, stop, [mode], [detail])

核心参数解释：

• x, y：圆弧所在椭圆的中心点坐标


• w, h：椭圆的宽度和高度，如果两者相等，则绘制的是圆形的一部分


• start, stop：圆弧的起始角度和结束角度，默认以弧度（radians）为单位

可选参数：

• mode：定义圆弧的填充样式，可选值为OPEN（开放式半圆）、CHORD（封闭式半圆）或PIE（闭合饼图）


• detail：仅在 WebGL 模式下使用，指定组成圆弧周长的顶点数量，默认值为 25

角度单位与转换

在 p5.js 中，角度可以使用弧度或角度两种单位表示：

• 默认单位是弧度：0 弧度指向正右方（3 点钟方向），正角度按顺时针方向增加


• 使用角度单位：可以通过 angleMode(DEGREES) 函数将角度单位设置为角度

两种单位之间的转换关系：

• 360 度 = 2π 弧度


• 180 度 = π 弧度


• 90 度 = π/2 弧度

p5.js 提供了两个辅助函数用于单位转换：

• radians(degrees)：将角度转换为弧度


• degrees(radians)：将弧度转换为角度

举个例子（基础示例）

举个例子讲解一下如何使用 arc() 函数绘制不同角度的圆弧。

function setup() {

  createCanvas(400, 400);

  angleMode(DEGREES); // 使用角度单位

}



function draw() {

  background(220);

  

  // 绘制不同角度的圆弧

  arc(100, 100, 100, 100, 0, 90); // 90度圆弧

  arc(250, 100, 100, 100, 0, 180); // 180度圆弧

  arc(100, 250, 100, 100, 0, 270); // 270度圆弧

  arc(250, 250, 100, 100, 0, 360); // 360度圆弧（整圆）

}

这段代码会在画布上绘制四个不同角度的圆弧，从 90 度到 360 度不等。注意，当角度为 360 度时，实际上绘制的是一个完整的圆形。

三种圆弧模式：OPEN、CHORD 与 PIE

arc() 函数的第七个参数mode决定了圆弧的填充方式，有三种可选值：

• OPEN（默认值）：仅绘制圆弧本身，不填充任何区域


• CHORD：绘制圆弧并连接两端点形成闭合的半圆形区域


• PIE：绘制圆弧并连接两端点与中心点形成闭合的扇形区域

这三种模式不需要手动定义，p5.js 已经在全局范围内定义好了这些常量。

举个例子：

function setup() {

  createCanvas(400, 200);

  angleMode(DEGREES);

}



function draw() {

  background(220);

  

  // 绘制不同模式的圆弧

  arc(100, 100, 100, 100, 0, 270, OPEN);

  arc(220, 100, 100, 100, 0, 270, CHORD);

  arc(340, 100, 100, 100, 0, 270, PIE);

}

这段代码会在画布上绘制三个 270 度的圆弧，分别展示 OPEN、CHORD 和 PIE 三种模式的效果。可以明显看到，OPEN 模式只绘制弧线，CHORD 模式连接两端点形成闭合区域，而 PIE 模式则从两端点连接到中心点形成扇形。

如何选择合适的模式

选择圆弧模式时，应考虑以下因素：

• 视觉效果需求：需要纯弧线效果时选择 OPEN，需要闭合区域时选择 CHORD 或 PIE


• 应用场景：饼图通常使用 PIE 模式，仪表盘可能使用 CHORD 模式，而简单装饰线条可能使用 OPEN 模式


• 填充与描边需求：不同模式对填充和描边的处理方式不同，需要根据设计需求选择

值得注意的是，arc() 函数绘制的默认是填充的扇形区域。如果想要获取纯圆弧（没有填充区域），可以使用 noFill() 函数拒绝 arc() 函数的填充。

做几个小demo玩玩

简易数字时钟

在这个示例中，我将使用 arc() 函数创建一个简单的数字时钟，显示当前的小时、分钟和秒数。

let hours, minutes, seconds;



function setup() {

  createCanvas(400, 400);

  angleMode(DEGREES); // 使用角度单位

}



function draw() {

  background(220);

  

  // 获取当前时间

  let now = new Date();

  hours = now.getHours();

  minutes = now.getMinutes();

  seconds = now.getSeconds();



  // 绘制时钟边框

  stroke(0);

  strokeWeight(2);

  noFill();

  arc(width/2, height/2, 300, 300, 0, 360);



  // 绘制小时刻度

  strokeWeight(2);

  for (let i = 0; i < 12; i++) {

    let angle = 90 - i * 30;

    let x1 = width/2 + 140 * cos(radians(angle));

    let y1 = height/2 + 140 * sin(radians(angle));

    let x2 = width/2 + 160 * cos(radians(angle));

    let y2 = height/2 + 160 * sin(radians(angle));

    line(x1, y1, x2, y2);

  }



  // 绘制分钟刻度

  strokeWeight(1);

  for (let i = 0; i < 60; i++) {

    let angle = 90 - i * 6;

    let x1 = width/2 + 150 * cos(radians(angle));

    let y1 = height/2 + 150 * sin(radians(angle));

    let x2 = width/2 + 160 * cos(radians(angle));

    let y2 = height/2 + 160 * sin(radians(angle));

    line(x1, y1, x2, y2);

  }



  // 绘制小时指针

  let hourAngle = 90 - (hours % 12) * 30 - minutes * 0.5;

  let hourLength = 80;

  let hx = width/2 + hourLength * cos(radians(hourAngle));

  let hy = height/2 + hourLength * sin(radians(hourAngle));

  line(width/2, height/2, hx, hy);



  // 绘制分钟指针

  let minuteAngle = 90 - minutes * 6;

  let minuteLength = 120;

  let mx = width/2 + minuteLength * cos(radians(minuteAngle));

  let my = height/2 + minuteLength * sin(radians(minuteAngle));

  line(width/2, height/2, mx, my);



  // 绘制秒针

  stroke(255, 0, 0);

  let secondAngle = 90 - seconds * 6;

  let secondLength = 140;

  let sx = width/2 + secondLength * cos(radians(secondAngle));

  let sy = height/2 + secondLength * sin(radians(secondAngle));

  line(width/2, height/2, sx, sy);

  

  // 显示当前时间文本

  noStroke();

  fill(0);

  textSize(24);

  text(hours + ":" + nf(minutes, 2, 0) + ":" + nf(seconds, 2, 0), 50, 50);

}

关键点解析：

饼图

在这个示例中，我将创建一个简单的饼图，展示不同类别数据的比例。

let data = [30, 10, 45, 35, 60, 38, 75, 67]; // 示例数据

let total = 0;

let lastAngle = 0;



function setup() {

  createCanvas(720, 400);

  angleMode(DEGREES); // 使用角度单位

  noStroke(); // 不绘制边框

  total = data.reduce((a, b) => a + b, 0); // 计算数据总和

}



function draw() {

  background(100);

  pieChart(300, data); // 调用饼图绘制函数

}



function pieChart(diameter, data) {

  lastAngle = 0; // 重置起始角度

  for (let i = 0; i < data.length; i++) {

    // 设置圆弧的灰度值，map函数将数据映射到0-255的灰度范围

    let gray = map(i, 0, data.length, 0, 255);

    fill(gray);

    

    // 计算当前数据点的角度范围

    let startAngle = lastAngle;

    let endAngle = lastAngle + (data[i] / total) * 360;

    

    // 绘制圆弧

    arc(

      width / 2,

      height / 2,

      diameter,

      diameter,

      startAngle,

      endAngle,

      PIE // 使用PIE模式创建扇形

    );

    

    lastAngle = endAngle; // 更新起始角度为下一个数据点做准备

  }

}

关键点解析：

这个饼图示例可以通过添加标签、交互效果或动态数据更新来进一步增强功能。

描边效果

在 p5.js 中，我们可以通过以下函数定制圆弧的描边效果：

• stroke(color)：设置描边颜色


• strokeWeight(weight)：设置描边宽度


• strokeCap(cap)：设置描边端点样式（可选值：BUTT, ROUND, SQUARE）


• strokeJoin(join)：设置描边转角样式（可选值：MITER, ROUND, BEVEL）

以下示例展示了如何定制圆弧的描边效果：

function setup() {

  createCanvas(400, 200);

  angleMode(DEGREES);

}



function draw() {

  background(220);

  

  // 示例1：粗红色描边

  stroke(255, 0, 0);

  strokeWeight(10);

  arc(100, 100, 100, 100, 0, 270);

  

  // 示例2：带圆角端点的描边

  stroke(0, 255, 0);

  strokeWeight(10);

  strokeCap(ROUND);

  arc(220, 100, 100, 100, 0, 270);

  

  // 示例3：带阴影效果的描边

  stroke(0, 0, 255);

  strokeWeight(15);

  strokeCap(SQUARE);

  arc(340, 100, 100, 100, 0, 270);

  

  // 恢复默认设置

  noStroke();

}

关键点解析：

填充效果

在 p5.js 中，我们可以通过以下函数定制圆弧的填充效果：

• fill(color)：设置填充颜色


• noFill()：禁用填充效果


• colorMode(mode)：设置颜色模式（RGB、HSB 等）


• alpha()：设置颜色透明度

以下示例展示了如何定制圆弧的填充效果：

function setup() {

  createCanvas(400, 200);

  angleMode(DEGREES);

  colorMode(HSB, 360, 100, 100); // 使用HSB颜色模式

}



function draw() {

  background(220);

  

  // 示例1：单色填充

  fill(120, 100, 100); // 绿色

  arc(100, 100, 100, 100, 0, 270);

  

  // 示例2：渐变填充

  noFill();

  stroke(0, 0, 100);

  strokeWeight(10);

  for (let i = 0; i < 360; i += 10) {

    fill(i, 100, 100);

    arc(220, 100, 100, 100, i, i+10);

  }

  

  // 示例3：透明填充

  fill(240, 100, 100, 50); // 半透明蓝色

  arc(340, 100, 100, 100, 0, 270);

  

  // 恢复默认设置

  noFill();

  stroke();

}

关键点解析：

旋转圆弧

在 p5.js 中创建圆弧动画非常简单，主要通过以下方法实现：

• **draw()**函数：每秒自动执行约 60 次，用于更新动画帧


• 变量控制：使用变量控制圆弧的参数（如位置、大小、角度等）


• frameRate(fps)：设置动画帧率（可选）


• millis()：获取当前时间（毫秒），用于精确控制动画时间

圆弧动画效果示例：

let angle = 0;



function setup() {

  createCanvas(400, 400);

  angleMode(DEGREES);

}



function draw() {

  background(220);

  

  // 绘制旋转的红色圆弧

  stroke(255, 0, 0);

  strokeWeight(10);

  arc(width/2, height/2, 300, 300, angle, angle + 90);

  

  // 更新角度值，实现旋转效果

  angle += 2; // 调整这个值可以改变旋转速度

  

  // 恢复默认设置

  noStroke();

}

关键点解析：

弧度与角度的转换技巧

在 p5.js 中，arc()函数默认使用弧度作为角度单位，但我们通常更习惯使用角度。以下是一些转换技巧：

• 角度转弧度：使用 radians(degrees) 函数将角度转换为弧度


• 弧度转角度：使用 degrees(radians) 函数将弧度转换为角度


• 设置角度单位：使用 angleMode(DEGREES) 函数将全局角度单位设置为角度，这样 arc() 函数就可以直接使用角度值


• 常见角度值：记住一些常用角度的弧度值，如 90 度 = PI/2，180 度 = PI，270 度 = 3PI/2，360 度 = 2PI

圆弧绘制的常见问题与解决方案

在使用 arc() 函数时，可能会遇到以下问题：

以上就是本文的全部内容啦，如果想了解更多 p5.js 的玩法可以关注 《P5.js中文教程》

点赞 + 关注 + 收藏 = 学会了

前言

还在手动重复写 margin: 0; padding: 0;？还在为兼容性疯狂加 -webkit- 前缀？大厂前端早已不用原始 CSS 硬刚了！Stylus 作为一款现代化 CSS 预处理器，让你写样式像写 JavaScript 一样爽快。

Stylus：高效的CSS预处理器

基本特性

Stylus是一种CSS预处理器，提供了许多CSS不具备的高级功能：

// 定义变量

$background_color = rgba(255, 255, 255, 0.95)



.wrapper

  background $background_color

  box-shadow 0 0 0 10px rgba(0, 0, 0, 0.1)

优势与使用场景

1. 变量支持：避免重复值，便于主题切换
2. 嵌套规则：更清晰的DOM结构表示
3. 混合(Mixins) ：复用样式块
4. 函数与运算：动态计算样式值
5. 简洁语法：可选的花括号、分号和冒号

编译与使用

安装Stylus后，可以通过命令行编译.styl文件：

npm install -g stylus

stylus -w common.styl -o common.css

1. 第一个语句是用来安装stylus的直接运行就好
2. 第二个语句是你编译common.styl文件时使用的，也就是你写CSS代码时使用的，因为浏览器并不能直接编译.styl文件，所以你要先将.styl文件编译成.css文件，也就是用上面给的那个命令，注意要自己切换成自己的.styl文件名，后面的css名可以随便取一个自己想要的

插件的使用

我们要想使用stylus，除了要全局安装之外还要下载一下下面的这个插件。

我们要先进入插件市场，然后搜索stylus，点击我选择的那个插件点击安装即可

案例实战

先看效果，再上代码，最后在分析考点易错点

效果

下面是我们实现的一个简单的效果界面图

代码

$background_color = rgba(255, 255, 255, 0.95)



html 

    box-sizing border-box

    min-height 100vh

    display flex

    flex-direction column

    justify-content center

    align-items center

    text-align center

    background url('http://wes.io/hx9M/oh-la-la.jpg') center no-repeat

    background-size cover



* 

    box-sizing border-box



.wrapper

    padding 20px

    min-width 350px   

    background $background_color

    box-shadow 0 0 0 10px rgba(0, 0, 0, 0.1)

    h2 

        text-align center

        margin 0

        font-weight 200





body 

    color pink



.plates

    margin 0

    padding 0

    text-align left

    list-style: none

    li      

        border-bottom 1px solid rgba(0, 0, 0, 0.2)

        padding 10px 0px 

        display flex

    label 

        flex 1

        cursor pointer

    input

        display none





.add-items

    margin-top 20px

    input 

        padding 10px 

        outline 0

        border 1px solid rgba(0, 0, 0, 0.1)

        

我们可以看到.styl文件不用去写:和{}了，而且可以直接层叠样式

当我们运行stylus -w common.styl -o common.css命令时，它会实时的将common.styl文件编译成common.css，你可以根据自己的需求来编写，让我们看看它帮我写好的common.css文件吧

html {

  box-sizing: border-box;

  min-height: 100vh;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-align: center;

  background: url("http://wes.io/hx9M/oh-la-la.jpg") center no-repeat;

  background-size: cover;

}

* {

  box-sizing: border-box;

}

.wrapper {

  padding: 20px;

  min-width: 350px;

  background: rgba(255,255,255,0.95);

  box-shadow: 0 0 0 10px rgba(0,0,0,0.1);

}

.wrapper h2 {

  text-align: center;

  margin: 0;

  font-weight: 200;

}

body {

  color: #ffc0cb;

}

.plates {

  margin: 0;

  padding: 0;

  text-align: left;

  list-style: none;

}

.plates li {

  border-bottom: 1px solid rgba(0,0,0,0.2);

  padding: 10px 0px;

  display: flex;

}

.plates label {

  flex: 1;

  cursor: pointer;

}

.plates input {

  display: none;

}

.add-items {

  margin-top: 20px;

}

.add-items input {

  padding: 10px;

  outline: 0;

  border: 1px solid rgba(0,0,0,0.1);

}

// 获取DOM元素

// 获取添加项目的表单元素

const addItems = document.querySelector('.add-items');

// 获取显示项目列表的元素

const itemsList = document.querySelector('.plates');

// 从本地存储获取项目数据，如果没有则初始化为空数组

let items = JSON.parse(localStorage.getItem('tapasItems')) || [];



// 添加新项目函数

function addItem(e) {

  // 阻止表单默认提交行为

  e.preventDefault();

  // 获取输入框中的文本值

  const text = this.querySelector('[name=item]').value;

  // 创建新项目对象

  const item = {

    text,        // 项目文本

    done: false  // 完成状态初始为false

  };

  // 将新项目添加到数组中

  items.push(item);

  // 更新列表显示

  populateList(items, itemsList);

  // 将更新后的数组保存到本地存储

  localStorage.setItem('tapasItems', JSON.stringify(items));

  // 重置表单

  this.reset();

}



// 渲染项目列表函数

function populateList(plates = [], platesList) {

  // 使用map方法将数组转换为HTML字符串

  platesList.innerHTML = plates.map((plate, i) => {

    return `

      


        

        ${i} id="item${i}" ${plate.done ? 'checked' : ''}>

        

        ${i}">${plate.text}

      


    `;

  }).join(''); // 将数组转换为字符串

}



// 切换项目完成状态函数

function toggleDone(e) {

  // 如果点击的不是input元素则直接返回

  if (!e.target.matches('input')) return;

  // 获取被点击元素的data-index属性值

  const el = e.target;

  const index = el.dataset.index;

  // 切换项目的完成状态

  items[index].done = !items[index].done;

  // 更新本地存储

  localStorage.setItem('tapasItems', JSON.stringify(items));

  // 重新渲染列表

  populateList(items, itemsList);

}



// 添加事件监听器

// 表单提交事件 - 添加新项目

addItems.addEventListener('submit', addItem);

// 列表点击事件 - 切换项目完成状态

itemsList.addEventListener('click', toggleDone);



// 初始化加载 - 页面加载时渲染已有项目

populateList(items, itemsList);

html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover">

    <title>Documenttitle>

    <link rel="stylesheet" href="./common.css">

head>

<body>

    <div class="wrapper">

        <h2>Local TAPASh2>

        <p>请添加您的TAPASp>

        <ul class="plates">

            <li>Loading Tapas ...li>

        ul>

        <form action="" class="add-items">

            <input 

                type="text"

                placeholder="Item Name"

                required  -- 让输入框变成必须填写 -->

                name="item"

            >

            <input type="submit" value="+ Add Item">

        form>

    div>



    <script src="./common.js">



    script>

body>

html>

分析考点易错点

1. Stylus 变量 $background_color

考点：

• Stylus 中变量的定义和使用
• RGBA 颜色值的表示方法

答案：

• $background_color = rgba(255, 255, 255, 0.95) 定义了一个半透明白色背景变量
• 在 Stylus 中，变量名可以包含 $ 符号，但不是必须的
• 可以直接在样式中引用变量，如 background $background_color

易错点：

• 忘记变量名前加 $（虽然 Stylus 允许不加，但加了更清晰）
• RGBA 值写错格式，如漏掉 alpha 通道或使用错误范围值
• 变量作用域问题（Stylus 变量有作用域概念）