mcpField
C
coding-javascript

coding-javascript

github.com/alphaonedev开发53 次安装
代码仓库

关于 coding-javascript

coding-javascript 是帮助 OpenClaw 处理现代 JavaScript 编码任务的技能，重点面向浏览器开发。内容涵盖 DOM、异步代码、生成器、WeakRef、Proxy 和现代语言模式。

主要功能

  1. 01操作 DOM 元素
  2. 02使用 fetch 和 async/await
  3. 03使用生成器
  4. 04通过 WeakRef 管理引用
  5. 05通过 Proxy 定制行为
  6. 06应用现代 JavaScript 模式

适用场景

  1. 01构建交互式浏览器应用
  2. 02发起 API 请求并处理响应
  3. 03使用生成器处理值
  4. 04通过 Proxy 校验对象变更

安装

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

$npx skills add https://github.com/alphaonedev/openclaw-graph --skill coding-javascript

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

详细介绍

coding-javascript

用途

此技能可帮助 OpenClaw 使用 ES2024 特性处理 JavaScript 编码任务，重点关注现代浏览器开发，例如 DOM 操作、异步操作和高级模式。

使用时机

当用户需要前端 JavaScript 方面的帮助时，请使用此技能，例如构建交互式 Web 应用、处理 API 请求，或使用 WeakRef 实现高效的内存管理。对于涉及 Promise、生成器或 ES6+ 环境中的 Proxy 的任务，尤其是在浏览器环境中，也可使用此技能。

主要功能

  • 使用 querySelector 和事件监听器操作 DOM 元素。
  • 使用 fetch API、Promise 和 async/await 处理异步代码。
  • 使用生成器处理迭代过程，例如在循环中逐个生成值。
  • 使用 WeakRef 管理内存，创建有利于垃圾回收的引用。
  • 使用 Proxy 实现自定义对象行为，例如拦截属性访问。
  • 应用现代模式，例如模块、箭头函数和解构。

使用模式

若要调用此技能，请在 OpenClaw 命令中的用户查询前加上 "use coding-javascript"，例如 "openclaw use coding-javascript and write a fetch function"。生成代码时，请提供具体输入，例如变量名称或 API 端点。如有需要，请明确指定 ES2024 特性，例如 "generate code using WeakRef"。可以通过串联技能进行集成，例如 "use coding-javascript then coding-web for full-stack advice"。部署前，请在浏览器控制台中测试输出。

常用命令/API

使用 OpenClaw CLI 激活：openclaw run coding-javascript --query="explain promises"。JavaScript 相关用法：

  • Fetch API：使用 fetch('https://api.example.com/data', { method: 'GET' }) 发送请求；使用 .then(response => response.json()) 处理响应。
  • Promise：使用 .then() 和 .catch() 链式处理，例如 new Promise(resolve => resolve('data')).then(data => console.log(data))。
  • 生成器：使用 function* gen() { yield 1; yield 2; } 定义，并使用 for (let value of gen()) { console.log(value); } 进行迭代。
  • WeakRef：使用 new WeakRef(object) 创建，并通过 .deref() 取消引用；如果对象已被垃圾回收，可能会得到 null。
  • Proxy：使用 new Proxy(target, { get: (target, prop) => console.log(prop) }) 设置代理，以拦截访问。 配置格式：技能输入使用 JSON，例如在 OpenClaw 配置中使用 { "feature": "promises", "example": true }。如果涉及外部 API，请在脚本中通过环境变量设置身份验证，例如 $JAVASCRIPT_API_KEY。

集成说明

将此技能加入多技能工作流，即可与 OpenClaw 集成，例如 "openclaw chain coding-javascript and coding-css"。对于浏览器环境，请确保代码能在 Chrome 或 Node.js v14+ 等现代引擎中运行。使用环境变量存储密钥，例如 export $FETCH_API_KEY，并在代码中通过 process.env.FETCH_API_KEY 引用。为避免冲突，请明确指定版本，例如 "use ES2024 only"。测试时，请将代码封装在模块中：import { fetch } from 'whatwg-fetch';。

错误处理

始终使用 try-catch 块包装异步代码，例如：

try {
  await fetch('url').then(res => res.json());
} catch (error) {
  console.error('Fetch failed:', error.message);
}

对于 Promise，请使用 .catch()：promise.then(data => process(data)).catch(err => logError(err))。对于生成器，请在循环中使用 try-catch 处理迭代错误。对于 Proxy，请在处理程序中捕获错误，例如 new Proxy({}, { get: (target, prop) => { if (!target[prop]) throw new Error('Property not found'); } })。请检查 WeakRef 是否有效：if (weakRef.deref() !== undefined) { useObject(); }。在 OpenClaw 中，使用 openclaw log --skill=coding-javascript --error=details 记录错误。

具体使用示例

  1. 获取并显示用户数据：使用 openclaw use coding-javascript and generate: const userId = 1; fetch(https://api.example.com/users/${userId}`).then(res => res.json()).then(data => console.log(data.name));`。
  2. 使用 Proxy 进行验证：调用 openclaw use coding-javascript and code: const handler = { set: (obj, prop, value) => { if (prop === 'age' && value < 18) throw Error('Underage'); obj[prop] = value; } }; const proxy = new Proxy({}, handler); proxy.age = 16; // Throws error。

图谱关系

  • 相关项：coding-python（用于跨语言比较）、coding-web（用于前端集成）。
  • 依赖项：general-coding（用于基础语法）、async-patterns（用于 Promise 处理）。
  • 冲突项：legacy-javascript（侧重 ES5）。

评论

支持 Markdown