name	techquery-style
description	TechQuery 代码风格 Skill — 基于 GitHub 用户 TechQuery 的代码风格提炼，用于审查和规范 JavaScript 全栈代码风格。

TechQuery 代码风格 Skill

基于 GitHub 用户 TechQuery 的代码风格提炼。

身份背景

GitHub: https://github.com/TechQuery
名字: South Drifter
简介: Web/JavaScript full-stack developer
数据: 417 followers | 45 仓库

代表作品

项目	⭐	描述
Puppeteer-IE	73	无头 IE NodeJS API
iQuery.js	11	jQuery 兼容 API
DataScheme	9	ECMAScript Decorator 数据模型
StarMap	10	熷图交互式动画

代码风格特征

1. 目录结构

project/
├── source/          # 源代码
│   ├── index.js     # 模块入口
│   ├── AJAX/        # 按功能模块划分
│   ├── DOM/
│   ├── CSS/
│   ├── event/
│   └── utility/
├── test/            # 测试文件（与 source 结构对应）
├── dist/            # 构建产物
├── build/           # 构建配置
└── package.json

2. 命名规范

类型	规范	示例
类名	PascalCase	`Browser`, `Model`, `Class`
方法名	camelCase	`newPage`, `valueOf`, `setPrivate`
私有成员	双下划线前缀	`__key__`, `__private__`
常量/Symbol	Symbol 或下划线	`Symbol('Model observer')`
文件名	小写 + 短横线	`puppeteer-ie`, `data-scheme`

3. 类与继承

使用 extend 方法实现类式继承：

Class.extend = function (sub, Static, proto) {
    // 复制静态属性
    for (var key in this)
        if (this.hasOwnProperty(key)) sub[key] = this[key];

    // 合并原型
    sub.prototype = Object.create(this.prototype);
    sub.prototype.constructor = sub;

    return sub;
};

抽象类检查：

constructor() {
    if (super().constructor === Model)
        throw TypeError('Model() is an Abstract Class');
}

4. 装饰器模式

使用 ECMAScript Decorator：

// 装饰器：为 setter 自动生成 getter
export function mapGetter({ elements }) {
    elements.forEach(({ key, placement, descriptor }) => {
        if ((placement === 'prototype') && descriptor.set && !descriptor.get)
            descriptor.get = function () {
                return this.get(key);
            };
    });
}

// 使用
@mapGetter
export default class User extends Model {
    @is(Email, '')
    set email(value) { this.set('email', value); }
}

5. 观察者模式

// 观察值变化
observe(keyHandler) {
    const map = this[model_observer];
    for (let key in keyHandler)
        (map[key] = map[key] || []).push(keyHandler[key]);
}

// 取消观察
unobserve(keyHandler) {
    const map = this[model_observer];
    for (let key in keyHandler)
        if (map[key]) {
            const index = map[key].indexOf(keyHandler[key]);
            if (index > -1) map[key].splice(index, 1);
        }
}

6. JSDoc 注释

/**
 * A Browser is created when Puppeteer connects to a Internet Explorer instance
 *
 * @class
 * @extends EventEmitter
 */
class Browser extends EventEmitter {
    /**
     * @return {Promise<Page>}
     */
    async newPage() { ... }

    /**
     * Closes Internet Explorer and all of its pages
     *
     * @return {Promise}
     */
    close() { ... }
}

7. 私有成员封装

// 使用双下划线约定
setPrivate: safeWrap(function (key, value, config) {
    key = (key === 'length') || Number.isInteger(+key) ?
        key : ('__' + key + '__');

    Object.defineProperty(this, key, {
        value: value,
        writable: true,
        ...config
    });
});

// 使用 Symbol
const model_observer = Symbol('Model observer');
this[model_observer] = {};

8. 错误处理

// 友好的错误信息
throw TypeError(
    'Abstract class ' + _class_ + " can't be instantiated"
);

// 带 key 的错误传播
catch (error) {
    error.key = key;
    throw error;
}

9. 异步处理

// Promise 返回
async newPage() {
    const page = new Page(this.headless);
    this._page.push(page);
    return page;
}

// Promise.all 并行处理
close() {
    return Promise.all([...this._page].map(() =>
        this._page.shift().close()
    ));
}

10. 技术栈偏好

ES 新特性：Decorator、Async/Await、Symbol、Proxy、Iterator
模块化：AMD（早期）、ES Module（现代）
构建工具：Babel、amd-bundle
测试：Mocha + Should.js
文档：JSDoc
代码规范：Prettier

Prompt 模板

当需要按照 TechQuery 风格编写代码时，使用以下 prompt：

按照 TechQuery 的代码风格编写：

1. 目录结构：source/、test/、dist/、build/ 分层
2. 命名：类名 PascalCase、方法 camelCase、私有成员 __前缀__
3. 类式继承：使用 extend 方法
4. 装饰器：使用 ECMAScript Decorator
5. 观察者模式：observe/unobserve 方法
6. JSDoc 注释：详细说明参数和返回值
7. 错误处理：友好的错误信息
8. 异步：Promise + async/await
9. 偏好 ES 新特性：Decorator、Symbol、Iterator

参考项目

Evolution Experiences

This skill has accumulated 1 evolution experience (1 body).

Top Experiences

[ev_5f540152] (score=0.65) ## 抽象类检查实现方式

Type	Count	Details
Troubleshooting	1	→ evolution/troubleshooting.md

Last updated: 2026-05-02T02:20:11+00:00

name	techquery-style
description	TechQuery 代码风格 Skill — 基于 GitHub 用户 TechQuery 的代码风格提炼，用于审查和规范 JavaScript 全栈代码风格。