VuePress 生态系统VuePress 生态系统
  • 主题指南
  • 默认主题
  • Hope 主题
  • Plume 主题
  • Reco 主题
  • 功能插件
  • Markdown 插件
  • 搜索插件
  • 博客插件
  • 渐进式应用插件
  • 统计分析插件
  • 搜索引擎优化插件
  • 开发插件
  • 工具插件
  • AI 插件
  • @vuepress/helper
  • English
  • 简体中文
GitHub
  • 主题指南
  • 默认主题
  • Hope 主题
  • Plume 主题
  • Reco 主题
  • 功能插件
  • Markdown 插件
  • 搜索插件
  • 博客插件
  • 渐进式应用插件
  • 统计分析插件
  • 搜索引擎优化插件
  • 开发插件
  • 工具插件
  • AI 插件
  • @vuepress/helper
  • English
  • 简体中文
GitHub
  • @vuepress/helper
    • Node

      • 打包器相关
      • 多语言相关
      • 页面相关
    • 客户端相关
    • 共享方法
    • 样式

共享方法

以下函数在 Node.js 和客户端上均可用。

这些函数在 @vuepress/helper、@vuepress/helper/client 和 @vuepress/helper/shared 中都可用。

数据相关

此方法在 MarkdownIt 插件中很有用。有些时候你可能需要在 Markdown 插件中生成组件,并将复杂的数据写入到组件属性中,一个通常做法是使用 JSON.stringify + encodeURIComponent,并在客户端 decodeURIComponent + JSON.parse。但如果内容包含很多特殊字符,转换结果会很长。

所以我们提供 encodeData 和 decodeData 来压缩和编码内容。

export const encodeData: (
  data: string,
  level: DeflateOptions['level'] = 6,
) => string

export const decodeData: (compressed: string) => string
详情
const content = `
{
  "type": "bar",
  "data": {
    "labels": ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    "datasets": [
      {
        "label": "# of Votes",
        "data": [12, 19, 3, 5, 2, 3],
        "backgroundColor": [
          "rgba(255, 99, 132, 0.2)",
          "rgba(54, 162, 235, 0.2)",
          "rgba(255, 206, 86, 0.2)",
          "rgba(75, 192, 192, 0.2)",
          "rgba(153, 102, 255, 0.2)",
          "rgba(255, 159, 64, 0.2)"
        ],
        "borderColor": [
          "rgba(255, 99, 132, 1)",
          "rgba(54, 162, 235, 1)",
          "rgba(255, 206, 86, 1)",
          "rgba(75, 192, 192, 1)",
          "rgba(153, 102, 255, 1)",
          "rgba(255, 159, 64, 1)"
        ],
        "borderWidth": 1
      }
    ]
  },
  "options": {
    "scales": {
      "y": {
        "beginAtZero": true
      }
    }
  }
}
`

const prop = encodeData(content) // "eJyNUsFOwzAMve8rrHABKZqWlg5WxAE4cARxAMHEIV1NmQhNlaaCCe3fcdKtW0sLWGpjxy/v+UV512mlcIyfhTa2hHP4GgHYVYExsEQaxqlMpZWxbwAomaAqY5izO0wZB3apKnTrIyqlP1x2bRBzl9xWplC+eWNkniF7dmw1X4nWsfgaNtwNP2kfgH6Be22x9CPUUQ8yFwEHMeMQcog4UBFuiF0kcvGWGV3l6ZVW2uw0XDCTJfIwiOjYjAhESIcn4+BoT2MLio6pP6V+EBJ6AOSZgsmUwyl9A6ATwoiZn3lYTkTkRkycnuP8TU9ENPqUxuuA9i9BmxTNPy9A/G2/F9I23wtpW++FdIwPKzW2W5Afph+WqX2NQWz313XicT7XhV3qnB5f/ejKhVTYVACrXUqUmC3zC/uERsdgTYUdVr/Qb302+gZxe7S/"

decodeData(prop) // will be the original content

// if you use `encodeURIComponent`, it will be much longer
encodeURIComponent(content) // '%0A%7B%0A%20%20%22type%22%3A%20%22bar%22%2C%0A%20%20%22data%22%3A%20%7B%0A%20%20%20%20%22labels%22%3A%20%5B%22Red%22%2C%20%22Blue%22%2C%20%22Yellow%22%2C%20%22Green%22%2C%20%22Purple%22%2C%20%22Orange%22%5D%2C%0A%20%20%20%20%22datasets%22%3A%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%22label%22%3A%20%22%23%20of%20Votes%22%2C%0A%20%20%20%20%20%20%20%20%22data%22%3A%20%5B12%2C%2019%2C%203%2C%205%2C%202%2C%203%5D%2C%0A%20%20%20%20%20%20%20%20%22backgroundColor%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%22rgba(255%2C%2099%2C%20132%2C%200.2)%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22rgba(54%2C%20162%2C%20235%2C%200.2)%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22rgba(255%2C%20206%2C%2086%2C%200.2)%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22rgba(75%2C%20192%2C%20192%2C%200.2)%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22rgba(153%2C%20102%2C%20255%2C%200.2)%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22rgba(255%2C%20159%2C%2064%2C%200.2)%22%0A%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20%22borderColor%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%22rgba(255%2C%2099%2C%20132%2C%201)%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22rgba(54%2C%20162%2C%20235%2C%201)%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22rgba(255%2C%20206%2C%2086%2C%201)%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22rgba(75%2C%20192%2C%20192%2C%201)%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22rgba(153%2C%20102%2C%20255%2C%201)%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22rgba(255%2C%20159%2C%2064%2C%201)%22%0A%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20%22borderWidth%22%3A%201%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%5D%0A%20%20%7D%2C%0A%20%20%22options%22%3A%20%7B%0A%20%20%20%20%22scales%22%3A%20%7B%0A%20%20%20%20%20%20%22y%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22beginAtZero%22%3A%20true%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A'

类型助手

  • isDef(x): 判断 x 是否定义。
  • isBoolean(x): 判断 x 是否为布尔值。
  • isString(x): 判断 x 是否为字符串。
  • isNumber(x): 判断 x 是否为数字。
  • isPlainObject(x): 判断值是否为纯对象。
  • isArray(x): 判断 x 是否为数组
  • isFunction(x): 判断 x 是否为函数。
  • isRegExp(x): 判断 x 是否为正则表达式

字符串相关

  • startsWith(a, b): 判断字符串 a 是否以指定字符串 b 开头
  • endsWith(a, b): 判断字符串 a 是否以指定字符串 b 结尾

当 a 不是字符串时返回 false

对象相关

  • keys(x): 以数组形式返回对象 x 的键

  • values(x): 以数组形式返回对象 x 的值

  • entries(x): 将对象 x 转换为键值对数组。

  • fromEntries(x): 将键值对数组 x 转换为对象。

  • deepAssign(x, y, ...): Object.assign 的深度版本。

    示例
    // or @vuepress/helper/client
    import { deepAssign } from '@vuepress/helper'
    
    const defaultOptions = {
      optionA: {
        optionA1: 'defaultOptionA1',
        optionA2: 'defaultOptionA2',
        optionA3: 'defaultOptionA3',
      },
      optionB: true,
      optionC: 'optionC',
    }
    
    const userOptions = {
      optionA: {
        optionA1: 'optionA1',
        optionA2: 'optionA2',
      },
      optionB: false,
    }
    
    deepAssign(defaultOptions, userOptions)
    // {
    //   optionA: {
    //     optionA1: "optionA1",
    //     optionA2: "optionA2",
    //     optionA3: "defaultOptionA3",
    //   },
    //   optionB: false,
    //   optionC: "optionC",
    // }

日期相关

  • getDate(x): 将输入 x 转换为日期,可以支持 Date,时间戳,日期字符串。日期字符串的支持度以环境的 Date.parse 支持度为准。当不能转换为日期时返回 null

    示例
    getDate('2021-01-01') // a Date object represents 2021-01-01
    getDate(1609459200000) // a Date object represents 2021-01-01
    getDate('2021-01-01T00:00:00.000Z') // a Date object represents 2021-01-01
    getDate('2021/01/01') // a Date object represents 2021-01-01 (might be null in some browsers)
    getDate('invalid date') // null
    getDate(undefined) // null
    getDate(-32) // null
  • dateSorter: 将可转换为日期的值从新到旧排序,不能转换为日期的值会在最后。

    示例
    const arr = [
      '2020-01-01',
      1609459200000,
      '2022-01-01T00:00:00.000Z',
      '2023/01/01',
      'invalid date',
      undefined,
      -32,
    ]
    
    arr.sort(dateSorter)
    // [
    //   '2023/01/01',
    //   '2022-01-01T00:00:00.000Z',
    //   1609459200000,
    //   '2020-01-01',
    //   'invalid date',
    //   undefined,
    //   -32,
    // ]

链接相关

  • isLinkHttp(x): x 是否是有效的 HTTP URL。
  • isLinkWithProtocol(x): x 是否是有效的带有协议的 URL。
  • isLinkExternal(x): x 是否是有效的外部 URL。
  • isLinkAbsolute(x): x 是否是有效的绝对 URL。
  • isLinkRelative(x): x 是否不是外部 URL 或绝对 URL。
  • ensureEndingSlash(x): 确保 x 以斜杠结尾。
  • ensureLeadingSlash(x): 确保 x 以斜杠开头。
  • removeEndingSlash(x): 确保 x 不以斜杠结尾。
  • removeLeadingSlash(x): 确保 x 不以斜杠开头。
在 GitHub 上编辑此页
上次更新: 2025/6/4 12:11
贡献者: Mister-Hope
上一页
客户端相关
下一页
样式