mcpField
J
javascript

javascript

github.com/htlin222开发7841 次安装3 周前更新
代码仓库

关于 javascript

面向 JavaScript 和 TypeScript 开发的技能，涵盖现代代码实践、异步行为、Node.js、浏览器兼容性及模块问题，并提供常见特性与易错点的示例。

主要功能

  1. 01现代 JavaScript 模式
  2. 02TypeScript 类型指导
  3. 03异步调试与优化
  4. 04Node.js 开发模式
  5. 05浏览器兼容性指导
  6. 06常见陷阱与修正

适用场景

  1. 01处理未捕获的 Promise 或竞态条件
  2. 02将 JavaScript 代码转换为 TypeScript
  3. 03选择 Node.js 模块模式
  4. 04解决浏览器兼容性问题

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/htlin222/dotfiles --skill javascript

安装后在 Claude Code 中输入/javascript确认已加载。

详细介绍

JavaScript 开发

编写现代、整洁的 JavaScript 和 TypeScript。

适用场景

  • 编写 JavaScript/TypeScript 代码
  • 异步调试与优化
  • Node.js 开发
  • 浏览器兼容性问题
  • 模块系统相关问题

现代 JavaScript 模式

Async/Await
// Prefer async/await over promise chains
async function fetchData() {
  try {
    const response = await fetch(url);
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return await response.json();
  } catch (error) {
    console.error("Fetch failed:", error);
    throw error;
  }
}

// Parallel execution
const [users, posts] = await Promise.all([fetchUsers(), fetchPosts()]);

// Error handling for multiple promises
const results = await Promise.allSettled([task1(), task2(), task3()]);
const succeeded = results.filter((r) => r.status === "fulfilled");
解构与展开
// Object destructuring with defaults
const { name, age = 0, ...rest } = user;

// Array methods
const active = users.filter((u) => u.active).map((u) => u.name);

// Object spread for immutable updates
const updated = { ...user, name: "New Name" };
类与模块
// ES modules
export class UserService {
  #privateField; // Private field

  constructor(config) {
    this.#privateField = config.secret;
  }

  async getUser(id) {
    return await this.#fetch(`/users/${id}`);
  }
}

// Named and default exports
export { UserService };
export default UserService;

TypeScript 模式

// Interfaces over types for objects
interface User {
  id: string;
  name: string;
  email?: string;
}

// Generics
function first<T>(arr: T[]): T | undefined {
  return arr[0];
}

// Utility types
type CreateUser = Omit<User, "id">;
type ReadonlyUser = Readonly<User>;

Node.js 模式

// ESM in Node.js
import { readFile } from "fs/promises";
import { fileURLToPath } from "url";

const __dirname = fileURLToPath(new URL(".", import.meta.url));

// Streams for large files
import { createReadStream, createWriteStream } from "fs";
import { pipeline } from "stream/promises";

await pipeline(
  createReadStream("input"),
  transform,
  createWriteStream("output"),
);

常见陷阱

  • this 绑定（使用箭头函数或 .bind()）
  • 未处理的 Promise（始终使用 await 或进行处理）
  • == 与 ===（始终使用 ===）
  • 数组修改（map/filter 返回新数组，sort 会修改原数组）

示例

输入：“修复异步问题” **操作：**检查未处理的 Promise、竞态条件以及错误处理是否恰当

输入：“转换为 TypeScript” **操作：**添加类型和接口、修复类型错误、配置 tsconfig

评论

支持 Markdown