跳到主要内容

使用接口的方式获取 Github 项目的目录

· 阅读需 2 分钟
1adybug
1adybug
子虚伊人

要使用 API 的方式获取 GitHub 地址中某个特定目录的内容，可以通过 GitHub 的 REST API 实现。下面是一个基本的步骤指南：

获取仓库内容：使用 GitHub REST API 的 /repos/{owner}/{repo}/contents/{path} 可以获取仓库中特定路径的内容。这里的 {owner} 是仓库拥有者的用户名，{repo} 是仓库名，而 {path} 是你想要获取内容的目录路径。

认证：对于公共仓库，你可能不需要认证就可以请求这个 API。但是，对于私有仓库，你需要使用 OAuth token 或者其他形式的认证。

解析响应：API 的响应将以 JSON 格式返回，包含目录下的文件和子目录列表。你可以解析这个 JSON 来获取你需要的信息。

示例：

假设我们想要获取 GitHub 上 octocat/Hello-World 仓库根目录下的 lib 目录的内容。使用 curl 命令，请求看起来可能像这样：

curl https://api.github.com/repos/octocat/Hello-World/contents/lib

如果需要认证，可以在请求中添加 HTTP 头 Authorization: token YOUR_TOKEN，如下所示：

curl -H "Authorization: token YOUR_TOKEN" https://api.github.com/repos/octocat/Hello-World/contents/lib
注意
  • 确保替换 YOUR_TOKEN 为你的实际 GitHub 访问令牌。
  • 如果目录很大或有很多文件，GitHub 的 API 可能会进行分页处理。这种情况下，你可能需要处理分页逻辑，通过检查响应头中的 Link 字段来获取下一页数据。
  • 为了避免过度使用 API 并受到限制，注意检查并遵守 GitHub 的速率限制政策。

通过这种方式，你可以轻松地编程访问 GitHub 上任何公开或私有仓库的目录和文件内容。

正则表达式负向前瞻

· 阅读需 1 分钟
1adybug
1adybug
子虚伊人

在正则表达式中，有时候我们需要从一个合集中去掉另一个合集（也就是差集），这时可以利用正则表达式的负向前瞻来实现：

/** 从 \w 中去除 \d */
const reg: RegExp = /[(?!\d)\w]/
提示

使用 [] 将两个集合包裹起来

在 Node.js 中为 fetch 配置代理

· 阅读需 1 分钟
1adybug
1adybug
子虚伊人

在 Node.js 中，原生的 fetch API 并不直接支持代理功能。可以使用 node-fetch 库和 https-proxy-agent 库来实现通过代理服务器发送请求的功能：

import { HttpsProxyAgent } from "https-proxy-agent"
import fetch from "node-fetch"

// 代理服务器的URL
const proxyUrl = "http://your-proxy-server:port"

// 目标URL，即你想要通过代理服务器访问的URL
const targetUrl = "http://example.com"

// 配置代理服务器
const proxyAgent = new HttpsProxyAgent(proxyUrl)

// 使用fetch发起请求，通过代理服务器访问目标URL
fetch(targetUrl, { agent: proxyAgent })
注意

与原生的 fetch 不同，node-fetch 的 response.json() 返回值类型为 Promise<unknown>

在网页中引入字体

· 阅读需 1 分钟
1adybug
1adybug
子虚伊人
@font-face {
    font-family: "AlibabaPuHuiTi";
    src: url("./fonts/AlibabaPuHuiTi-3-35-Thin.woff2") format("woff2");
    font-weight: 100;
}

@font-face {
    font-family: "AlibabaPuHuiTi";
    src: url("./fonts/AlibabaPuHuiTi-3-45-Light.woff2") format("woff2");
    font-weight: 200;
}

@font-face {
    font-family: "AlibabaPuHuiTi";
    src: url("./fonts/AlibabaPuHuiTi-3-55-Regular.woff2") format("woff2");
    font-weight: 300;
}

@font-face {
    font-family: "AlibabaPuHuiTi";
    src: url("./fonts/AlibabaPuHuiTi-3-65-Medium.woff2") format("woff2");
    font-weight: 400;
}

@font-face {
    font-family: "AlibabaPuHuiTi";
    src: url("./fonts/AlibabaPuHuiTi-3-75-SemiBold.woff2") format("woff2");
    font-weight: 500;
}

@font-face {
    font-family: "AlibabaPuHuiTi";
    src: url("./fonts/AlibabaPuHuiTi-3-85-Bold.woff2") format("woff2");
    font-weight: 600;
}

@font-face {
    font-family: "AlibabaPuHuiTi";
    src: url("./fonts/AlibabaPuHuiTi-3-95-ExtraBold.woff2") format("woff2");
    font-weight: 700;
}

@font-face {
    font-family: "AlibabaPuHuiTi";
    src: url("./fonts/AlibabaPuHuiTi-3-105-Heavy.woff2") format("woff2");
    font-weight: 800;
}

@font-face {
    font-family: "AlibabaPuHuiTi";
    src: url("./fonts/AlibabaPuHuiTi-3-115-Black.woff2") format("woff2");
    font-weight: 900;
}

处理图片错误

· 阅读需 1 分钟
1adybug
1adybug
子虚伊人

在项目中经常会使用到第三方的图床，这些图床的图片可能会出错，统一处理错误就很有必要：

window.addEventListener(
    "error",
    e => {
        const { target } = e

        // 判断是否是图片元素的错误
        if (!(target instanceof HTMLImageElement)) return

        const url = new URL(target.src)

        // 判断是否是第三方的图片
        if (url.origin === location.origin) return

        // 添加 data-error-image 属性
        target.dataset.errorImage = ""
    },
    true,
)
[data-error-image] {
    position: relative;
}

[data-error-image]::before {
    content: "视图库服务器";
    font-family: "AlibabaPuHuiTi";
    position: absolute;
    width: 100%;
    height: 50%;
    background-color: brown;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

[data-error-image]::after {
    content: "传递图片失败";
    font-family: "AlibabaPuHuiTi";
    position: absolute;
    width: 100%;
    height: 50%;
    background-color: brown;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
提示

即使后续图片加载成功了也不用担心，伪元素会被隐藏

Ant Design 与 Tailwind 的样式冲突问题

· 阅读需 1 分钟
1adybug
1adybug
子虚伊人

参考 Ant Design 官网：样式兼容

Ant Design 的 CSS-in-JS 默认通过 :where 选择器降低 CSS Selector 优先级，以减少用户升级时额外调整自定义样式的成本，不过 :where 语法的兼容性在低版本浏览器比较差。在某些场景下你如果需要支持旧版浏览器（或与 TailwindCSS 优先级冲突），你可以使用 @ant-design/cssinjs 取消默认的降权操作（请注意版本保持与 antd 一致）：

import { FC } from "react"

import { StyleProvider } from "@ant-design/cssinjs"

// `hashPriority` 默认为 `low`，配置为 `high` 后，
// 会移除 `:where` 选择器封装
const App: FC = () => (
    <StyleProvider hashPriority="high">
        <MyApp />
    </StyleProvider>
)

export default App

切换后，样式将从 :where 切换为类选择器：

:where(.css-bAMboO).ant-btn {
}

.css-bAMboO.ant-btn {
    color: #fff;
}

在 html 中实现网址跳转

· 阅读需 2 分钟
1adybug
1adybug
子虚伊人

在 HTML 中实现打开一个文件后直接跳转到另一个网址，你可以使用 <meta> 标签中的 http-equiv 属性来设置自动刷新，并在 content 属性中指定跳转到目标网址的时间间隔。通常，将时间间隔设置为 0 或很小的数值，可以实现几乎立即的跳转效果。

下面是一个示例代码，演示了如何创建一个 HTML 文件，当用户打开这个文件时，会立刻跳转到指定的网址（例如：https://www.example.com）：

<!doctype html>
<html>
    <head>
        <title>页面跳转</title>
        <meta http-equiv="refresh" content="0; url=https://www.example.com" />
    </head>
    <body>
        <p>如果您的浏览器没有自动跳转，请<a href="https://www.example.com">点击这里</a>。</p>
    </body>
</html>

在这个例子中，<meta> 标签的 content 属性包含两个部分：第一部分是跳转之前的等待时间（秒），在这里设置为 0；第二部分是目标网址，即用户将被重定向到的 URL。如果出于某种原因浏览器没有处理自动跳转（虽然这种情况很少见），<body> 部分的文本和链接为用户提供了一个手动跳转的选项。

这种方法适用于各种需要自动重定向用户的场景，如临时页面、已移动的内容提示或简单的 URL 转发

前端招聘要求

· 阅读需 1 分钟
1adybug
1adybug
子虚伊人
  1. 熟悉 JavaScript、HTML 和 CSS，了解近几年的新特性
  2. 熟练使用 Vue3/React，了解底层原理，React 优先
  3. 熟悉使用 TypeScript，了解泛型的使用
  4. 熟悉使用 Node.js，了解 Common Js 和 ES Module 的区别
  5. 熟悉使用 Ant Design/Tailwind 者优先
  6. 熟悉使用 Webpack/Vite 者优先
  7. 熟悉使用 Github 者优先