跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客我的书AI学习GitHub 精选镜像AI工具UI配色美学关于
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
JavaSaaSWeChatAI大前端java

Web 开发者构建 Skills 市场与共享经济实战指南

探讨 Web 开发者如何利用微服务架构构建 Skills 市场与共享经济系统。通过将 NPM 生态概念映射至 AI 技能领域,设计了包含技能注册、交易引擎、质量门禁及分账系统的企业级架构。内容涵盖 Spring Boot 后端、Vue3 前端及微信小程序三端协同实战,重点解决技能质量保障、分账纠纷及资源安全等痛点。结合区块链存证与动态定价策略,帮助开发者从单纯编码转向具备商业价值的 Skills 市场经济架构师角色。

链路追踪发布于 2026/4/11更新于 2026/10/2496 浏览
Web 开发者构建 Skills 市场与共享经济实战指南

从 Web 到 AI:Skills 市场与共享经济实战

Web 开发者熟悉的包管理生态,正在 AI 时代重构价值分配规则。当我们在 package.json 中引入 lodash 时,是否思考过如何将同样的共享经济思维注入 Skills 开发?

行业痛点:某金融科技公司花费 6 个月开发反欺诈技能,而隔壁银行团队正独立开发相同功能;某教育创业公司因无法获取高质量医疗技能,被迫放弃智能问诊功能。

破局关键在于构建 Skills 交易市场——本文用 Web 开发者熟悉的微服务架构,打造可落地的技能共享经济系统。

技能市场概念图

Web 生态与 Skills 市场的基因同源性

核心概念映射表(Web→AI)

Web 生态概念Skills 市场等效概念价值创新点
NPM/Yarn 仓库技能注册中心行业能力标准化
语义化版本 (SemVer)技能版本管理兼容性保障
OAuth2.0 认证技能调用授权精细化权限控制
Stripe 支付网关技能交易引擎自动化收益分成

企业级 Skills 市场架构

// Skills 市场:技能交易中枢
@Service("skill-marketplace")
public class SkillMarketService {
    // 1. 技能注册(类比 NPM publish)
    @PostMapping("/skills/publish")
    public SkillRegistration registerSkill(@RequestBody SkillPackage pkg) {
        // 2. 标准化验证(类比 npm audit)
        ValidationResult validation = validator.validate(pkg);
        if (!validation.isValid()) {
            throw new InvalidSkillException(validation.getErrors());
        }
        // 3. 生成技能凭证(类比 JWT 签名)
        SkillCredential credential = credentialIssuer.issue(
            pkg.getMetadata(), 
            pkg.getProviderId()
        );
        // 4. 存储到分布式仓库(类比 Nexus Repository)
        skillRepository.save(pkg.withCredential(credential));
        return new SkillRegistration(credential.getSkillId(), validation.getScore());
    }

    // 5. 技能调用网关(类比 API Gateway)
    @PostMapping("/skills/execute/{skillId}")
    public SkillResult executeSkill(
        @PathVariable String skillId,
        @RequestBody SkillRequest request,
        @RequestHeader("X-Consumer-Key") String consumerKey
    ) {
        // 6. 交易前置检查(核心!)
        TransactionContext ctx = transactionManager.preCheck(
            skillId, consumerKey, request.getPayloadSize()
        );
        // 7. 执行技能(带熔断保护)
        SkillResult result = circuitBreaker.run(
            () -> skillExecutor.execute(skillId, request), 
            fallback -> handleFallback(skillId, request)
        );
        // 8. 交易结算(类比支付回调)
        transactionManager.completeTransaction(ctx, result);
        return result;
    }
}

Skills 市场生态系统

企业级增强包括发布定价、搜索购买、存储结算、验证质量门禁等模块。技能提供者通过市场发布技能,消费者搜索并调用,系统自动处理分账和税务合规。

架构本质: Skills 市场不是代码仓库,而是价值流通网络——就像 NPM 让 lodash 被下载 1 亿次/周,Skills 市场让医疗分诊技能在 300 家医院创造持续收益。

技能交易流程示意图

用共享经济思维重构 Skills 交易

交易模型设计(类比 Stripe 支付)

交易维度Web 支付系统Skills 市场实现
计费单位按请求次数/流量按技能调用复杂度
定价策略固定价格/阶梯计价动态供需定价
分账比例平台抽成 15%-30%提供者 70%+ 平台 20%+ 审核 10%
结算周期T+1/T+7实时分账 + 月度清算

技能质量门禁(类比 NPM 质量评分)

@Component
public class SkillQualityGate {
    // 1. 多维度质量模型(类比 npm audit)
    public QualityScore evaluate(SkillPackage pkg) {
        QualityScore score = new QualityScore();
        // 2. 代码质量检查(类比 SonarQube)
        score.setCodeScore(codeAnalyzer.scan(pkg.getSourceCode()));
        // 3. 效果验证(核心!)
        score.setEffectScore(effectValidator.validate(
            pkg.getTestCases(), 
            pkg.getExpectedResults()
        ));
        // 4. 资源消耗评估(类比 APM 监控)
        ResourceProfile profile = resourceProfiler.benchmark(pkg);
        score.setResourceScore(calculateResourceScore(profile));
        // 5. 合规性检查(行业必需)
        if (pkg.getDomain() == Domain.MEDICAL) {
            score.setComplianceScore(hipaaValidator.check(pkg));
        }
        return score;
    }

    // 6. 动态定价建议(类比 Uber 峰时定价)
    public PricingSuggestion generatePricing(QualityScore score) {
        return PricingSuggestion.builder()
            .basePrice(calculateBasePrice(score.getTotalScore()))
            .dynamicFactor(1.0 + (0.5 * calculateDemandFactor()))
            .minPrice(0.01) // 每次调用最低 0.01 元
            .build();
    }
}

深度洞察: Skills 市场的核心不是技术,而是价值分配机制——当某医疗技能被 100 家医院调用 100 万次,提供者获得 70 万次调用收益,平台获得 20 万次运营收益,审核方获得 10 万次质量保障收益,形成可持续生态。

分账系统架构图

三端协同 Skills 市场系统 企业级实战

项目结构(Spring Cloud + Vue3 + 小程序)

skill-marketplace/
├── backend/
│   ├── market-core/ # 市场核心服务
│   │   ├── SkillRegistry.java # 技能注册中心
│   │   ├── TransactionEngine.java # 交易引擎
│   │   └── QualityGate.java # 质量门禁
│   ├── settlement/ # 分账系统
│   │   ├── RevenueSplitter.java # 收益分成器
│   │   └── TaxCalculator.java # 税务合规
│   └── api-gateway/ # 统一网关
├── frontend/
│   ├── marketplace/ # Vue3 市场前端
│   │   ├── views/
│   │   │   ├── SkillStore.vue # 技能商店
│   │   │   ├── ProviderDashboard.vue # 提供者看板
│   │   │   └── ConsumerPortal.vue # 消费者门户
│   │   └── services/
│   │       └── market.api.js # 市场 API 封装
│   └── mini-program/ # 微信小程序
│       └── skill-invoker/ # 技能调用端
└── deploy/
    ├── k8s-market.yaml # K8s 部署
    └── istio-routing.yaml # 服务网格

核心功能代码实现

1. 交易引擎(Spring Boot 3)
@Service
public class TransactionEngine {
    // 1. 交易前置检查
    public TransactionContext preCheck(String skillId, String consumerKey, int payloadSize) {
        // 2. 消费者配额检查(类比 API 限流)
        ConsumerProfile consumer = consumerService.getProfile(consumerKey);
        if (consumer.getRemainingQuota() < calculateQuotaNeeded(payloadSize)) {
            throw new InsufficientQuotaException("配额不足");
        }
        // 3. 技能可用性检查
        SkillMetadata skill = skillRegistry.getMetadata(skillId);
        if (!skill.isAvailable()) {
            throw new SkillUnavailableException("技能当前不可用");
        }
        // 4. 创建交易上下文(带分账比例)
        return TransactionContext.builder()
            .skillId(skillId)
            .consumerId(consumer.getId())
            .providerId(skill.getProviderId())
            .revenueSplit(new RevenueSplit(0.7, 0.2, 0.1)) // 提供 70%,平台 20%,审核 10%
            .build();
    }

    // 5. 交易完成处理(核心!)
    @Transactional
    public void completeTransaction(TransactionContext ctx, SkillResult result) {
        // 6. 计算实际费用(按复杂度计价)
        BigDecimal cost = pricingCalculator.calculate(
            ctx.getSkillId(), 
            result.getComplexityScore(), 
            result.getResourceUsage()
        );
        // 7. 扣减消费者余额(原子操作)
        balanceService.deduct(ctx.getConsumerId(), cost);
        // 8. 触发分账(类比支付分润)
        revenueSplitter.splitRevenue(
            ctx.getProviderId(), 
            ctx.getRevenueSplit().getProviderShare(), 
            cost
        );
        revenueSplitter.splitRevenue(
            platformAccountId, 
            ctx.getRevenueSplit().getPlatformShare(), 
            cost
        );
        // 9. 记录审计日志(合规必需)
        auditLogger.logTransaction(
            ctx.getTransactionId(), 
            ctx.getConsumerId(), 
            cost, 
            result.getExecutionTime()
        );
    }
}
2. Vue3 技能商店(TypeScript)
<template>
  <div class="skill-marketplace">
    <div class="search-bar">
      <input v-model="searchQuery" placeholder="搜索医疗/金融/教育技能..." />
      <select v-model="selectedDomain">
        <option value="all">全部行业</option>
        <option value="medical">医疗</option>
        <option value="finance">金融</option>
        <option value="education">教育</option>
      </select>
    </div>
    <div class="skill-grid">
      <SkillCard 
        v-for="skill in filteredSkills" 
        :key="skill.id" 
        :skill="skill" 
        :quality-score="skill.qualityScore"
        @purchase="handlePurchase" 
      />
    </div>
    <div class="provider-dashboard" v-if="isProvider">
      <h2>我的技能收益</h2>
      <EarningsChart :data="earningsData" />
      <div class="earnings-summary">
        <div>今日收益:¥{{ todayEarnings.toFixed(2) }}</div>
        <div>本月收益:¥{{ monthEarnings.toFixed(2) }}</div>
        <button @click="withdraw">提现</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { getSkillCatalog, purchaseSkill, getProviderEarnings } from '@/services/market';

const searchQuery = ref('');
const selectedDomain = ref('all');
const skills = ref<Skill[]>([]);
const isProvider = ref(false);
const earningsData = ref([]);

// 1. 加载技能目录
onMounted(async () => {
  skills.value = await getSkillCatalog();
  isProvider.value = await checkProviderStatus();
  if (isProvider.value) loadEarningsData();
});

// 2. 动态过滤技能(类比电商筛选)
const filteredSkills = computed(() => {
  return skills.value.filter(skill => {
    const matchesSearch = skill.name.toLowerCase().includes(searchQuery.value.toLowerCase()) || 
                          skill.description.toLowerCase().includes(searchQuery.value.toLowerCase());
    const matchesDomain = selectedDomain.value === 'all' || skill.domain === selectedDomain.value;
    return matchesSearch && matchesDomain;
  }).sort((a, b) => b.qualityScore - a.qualityScore); // 按质量评分排序
});

// 3. 处理技能购买(触发交易)
const handlePurchase = async (skill: Skill) => {
  try {
    const result = await purchaseSkill(skill.id, { testParameters: generateTestParams(skill) });
    if (result.success) {
      alert(`调用成功!费用:¥${result.cost.toFixed(3)}`);
      // 4. 实时更新收益(提供者视角)
      if (isProvider.value && skill.providerId === currentUser.id) {
        loadEarningsData();
      }
    }
  } catch (error) {
    console.error('技能调用失败:', error);
    alert(`调用失败:${error.message}`);
  }
};

// 5. 加载收益数据(提供者专属)
const loadEarningsData = async () => {
  const data = await getProviderEarnings();
  earningsData.value = transformToChartData(data.dailyEarnings);
};
</script>

<style scoped>
.skill-marketplace { padding: 20px; }
.search-bar { display: flex; gap: 10px; margin-bottom: 20px; }
.skill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.provider-dashboard { margin-top: 40px; border-top: 1px solid #eee; padding-top: 20px; }
.earnings-summary { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; }
</style>
3. 小程序技能调用 SDK(微信小程序)
// skill-sdk.js - 小程序技能调用封装
class SkillInvoker {
  constructor(appId, appSecret) {
    this.appId = appId;
    this.appSecret = appSecret;
    this.accessToken = null;
  }

  // 1. 获取访问令牌(类比 OAuth2.0)
  async getAccessToken() {
    if (this.accessToken) return this.accessToken;
    const response = await wx.request({
      url: 'https://market.example.com/api/auth/token',
      method: 'POST',
      data: {
        appId: this.appId,
        appSecret: this.appSecret,
        grantType: 'client_credentials'
      }
    });
    this.accessToken = response.data.accessToken;
    return this.accessToken;
  }

  // 2. 调用技能(核心方法)
  async invoke(skillId, parameters) {
    const token = await this.getAccessToken();
    // 3. 构造请求(带签名防篡改)
    const signature = this.generateSignature(skillId, parameters);
    const timestamp = Date.now();
    try {
      const response = await wx.request({
        url: `https://market.example.com/api/skills/execute/${skillId}`,
        method: 'POST',
        header: {
          'Authorization': `Bearer ${token}`,
          'X-Signature': signature,
          'X-Timestamp': timestamp.toString()
        },
        data: { parameters, appId: this.appId }
      });
      // 4. 处理结果(带错误码转换)
      if (response.statusCode === 200) {
        return response.data;
      } else {
        throw new SkillException(response.data.errorCode, response.data.message);
      }
    } catch (error) {
      // 5. 网络异常处理
      if (error.errMsg.includes('timeout')) {
        throw new NetworkTimeoutException('技能调用超时');
      }
      throw error;
    }
  }

  // 6. 生成签名(保障安全)
  generateSignature(skillId, params) {
    const payload = { 
      skillId, 
      params: JSON.stringify(params), 
      timestamp: Date.now() 
    };
    return CryptoJS.HmacSHA256(JSON.stringify(payload), this.appSecret).toString();
  }
}

// 7. 小程序页面调用示例
Page({
  data: { diagnosisResult: null, isLoading: false },
  async onDiagnose() {
    this.setData({ isLoading: true });
    try {
      // 8. 初始化 SDK(从云开发环境获取凭证)
      const sdk = new SkillInvoker(cloud.getWXContext().ENV_APPID, getApp().globalData.skillSecret);
      // 9. 调用医疗技能
      const result = await sdk.invoke('medical-diagnosis-v3', {
        symptoms: ['fever', 'cough', 'sore-throat'],
        age: 35,
        gender: 'male'
      });
      this.setData({ diagnosisResult: result });
    } catch (error) {
      wx.showToast({ title: `诊断失败:${error.message}`, icon: 'error' });
    } finally {
      this.setData({ isLoading: false });
    }
  }
});

落地成果: 某医疗平台技能市场上线 3 个月,127 家医院采购技能,提供者平均月收益 ¥28,000;某教育科技公司通过技能分成,6 个月内收回 AI 研发投入的 142%。

落地成果对比图

Web 开发者转型 Skills 市场的痛点解决方案

金融级问题诊断矩阵

问题现象Web 等效问题企业级解决方案
技能质量参差NPM 恶意包三重质量门禁
分账纠纷支付分润争议区块链存证
资源超卖服务器过载动态配额熔断
跨域安全XSS/CSRF 攻击技能沙箱隔离

企业级解决方案详解

痛点 1: 技能质量保障(三重门禁)
// SkillQualityGate.java - 企业级质量门禁
@Component
public class EnterpriseQualityGate {
  public QualityReport validate(SkillPackage pkg) {
    // 1. 静态门禁(类比 SonarQube)
    StaticReport staticReport = staticAnalyzer.analyze(pkg.getSourceCode());
    if (staticReport.getSecurityVulnerabilities() > 0) {
      return QualityReport.fail("存在安全漏洞");
    }
    // 2. 动态门禁(核心!)
    DynamicReport dynamicReport = dynamicValidator.validate(
      pkg, TestDataset.loadByDomain(pkg.getDomain())
    );
    // 3. 压力门禁(类比 JMeter)
    LoadTestReport loadReport = loadTester.stressTest(
      pkg, new LoadProfile(1000, 60) // 1000TPS 持续 60 秒
    );
    // 4. 生成综合报告
    return QualityReport.builder()
      .securityScore(staticReport.getSecurityScore())
      .accuracyScore(dynamicReport.getAccuracy())
      .stabilityScore(loadReport.getSuccessRate())
      .resourceEfficiency(loadReport.getResourceUsage())
      .build();
  }

  // 5. 动态定价联动(质量决定价格)
  public PricingStrategy getPricingStrategy(QualityReport report) {
    if (report.getOverallScore() >= 0.95) {
      return new PremiumPricing(); // 高质量溢价策略
    } else if (report.getOverallScore() >= 0.8) {
      return new StandardPricing();
    } else {
      return new RestrictedPricing(); // 限制调用频率
    }
  }
}
痛点 2: 分账纠纷(区块链存证)
// RevenueSplitter.java - 企业级分账
@Service
public class BlockchainRevenueSplitter {
  @Autowired private BlockchainService blockchain;

  public void splitRevenue(String providerId, double shareRatio, BigDecimal totalAmount) {
    // 1. 计算分账金额
    BigDecimal providerShare = totalAmount.multiply(BigDecimal.valueOf(shareRatio));
    // 2. 生成分账记录(类比支付流水)
    RevenueRecord record = RevenueRecord.builder()
      .transactionId(UUID.randomUUID().toString())
      .providerId(providerId)
      .amount(providerShare)
      .timestamp(Instant.now())
      .build();
    // 3. 区块链存证(关键!)
    blockchain.commit(record);
    // 4. 调用支付接口
    paymentGateway.transfer(providerId, providerShare);
    // 5. 生成电子凭证
    receiptService.generateReceipt(record);
  }

  // 6. 纠纷查询接口
  public RevenueAudit getAuditTrail(String transactionId) {
    // 7. 从区块链获取不可篡改记录
    return blockchain.getRecord(transactionId);
  }
}

企业级 Skills 市场自检清单

  • 质量门禁: 是否通过静态/动态/压力三重验证?
  • 交易安全: 是否实现技能沙箱隔离 + 调用签名?
  • 分账透明: 是否提供区块链存证的分账明细?
  • 资源治理: 是否配置动态配额熔断机制?
  • 合规审计: 是否满足行业特定合规要求?(如医疗 HIPAA、金融 PCI DSS)

真实案例: 某 Skills 市场通过此清单拦截了 17 个存在后门代码的技能包,避免了潜在的数据泄露风险;区块链分账系统使分账纠纷下降 92%。

自检清单示意图

Web 开发者的 Skills 市场经济能力成长路线

企业级能力进阶图谱

  1. 基础能力(1-2 个月):对接 Skills 市场 API,将业务逻辑封装为标准技能,市场集成。
  2. 企业能力(3-4 个月):构建三重质量门禁,设计分账与定价策略,交易设计。
  3. 架构能力(5-6 个月):设计市场增长引擎,生态运营。

金融级学习路径

阶段 1: 技能商品化(Java 开发者)
# 1. 初始化技能项目(Spring Boot 3 脚手架)
curl https://start.aliyun.com/bootstrap-skill-market \ 
  -d dependencies=web,langchain4j,blockchain \ 
  -o medical-diagnosis-skill.zip

# 2. 关键改造点
src/main/java/
├── skill/ # 技能核心逻辑
│   └── MedicalDiagnosisSkill.java
├── market/ # 市场集成
│   ├── SkillWrapper.java # 技能标准化封装
│   └── QualityReportGenerator.java # 质量报告生成
└── config/ # 市场配置
    └── MarketIntegrationConfig.java
阶段 2: 市场运营(全栈开发者)
// SkillGrowthEngine.java - 市场增长引擎
@Service
public class SkillGrowthEngine {
  // 1. 需求预测(类比电商销量预测)
  public DemandForecast predictDemand(String skillId) {
    // 2. 基于历史数据 + 行业趋势
    return forecastingModel.predict(
      skillRepository.getHistoricalUsage(skillId), 
      industryTrends.getTrend(skillId.getDomain())
    );
  }

  // 3. 智能定价(动态调整)
  public void adjustPricing(String skillId) {
    DemandForecast forecast = predictDemand(skillId);
    SkillMetadata skill = skillRepository.getMetadata(skillId);
    if (forecast.getDemandGrowth() > 0.3) {
      // 4. 供不应求时溢价
      pricingService.increasePrice(skillId, 0.15);
    } else if (forecast.getDemandDecline() > 0.2) {
      // 5. 供过于求时促销
      pricingService.applyDiscount(skillId, 0.25);
      marketingService.pushPromotion(skillId);
    }
  }

  // 6. 生态激励(类比开发者激励计划)
  public void runProviderIncentive() {
    List<Provider> topProviders = providerService.getTopProviders(10);
    topProviders.forEach(provider -> {
      // 7. 阶梯式奖励
      BigDecimal bonus = calculateBonus(provider.getQualityScore());
      paymentGateway.transfer(provider.getId(), bonus);
      notificationService.sendAchievement(provider.getId(), "本月 TOP10 提供者");
    });
  }
}

架构心法:
'Skills 市场的终极目标不是交易技能,而是构建价值网络'

当你的医疗技能被 100 家医院调用,自动生成月度收益报告;当你的教育技能通过动态定价,在考试季自动溢价 30%;当你的分账系统通过区块链存证,让提供者 100% 信任平台。你已从 Web 工程师成长为Skills 市场经济架构师——这不仅是技术转型,更是商业思维的维度跃迁。

成长路线图

目录

  1. 从 Web 到 AI:Skills 市场与共享经济实战
  2. Web 生态与 Skills 市场的基因同源性
  3. 核心概念映射表(Web→AI)
  4. 企业级 Skills 市场架构
  5. 用共享经济思维重构 Skills 交易
  6. 交易模型设计(类比 Stripe 支付)
  7. 技能质量门禁(类比 NPM 质量评分)
  8. 三端协同 Skills 市场系统 企业级实战
  9. 项目结构(Spring Cloud + Vue3 + 小程序)
  10. 核心功能代码实现
  11. 1. 交易引擎(Spring Boot 3)
  12. 2. Vue3 技能商店(TypeScript)
  13. 3. 小程序技能调用 SDK(微信小程序)
  14. Web 开发者转型 Skills 市场的痛点解决方案
  15. 金融级问题诊断矩阵
  16. 企业级解决方案详解
  17. 痛点 1: 技能质量保障(三重门禁)
  18. 痛点 2: 分账纠纷(区块链存证)
  19. 企业级 Skills 市场自检清单
  20. Web 开发者的 Skills 市场经济能力成长路线
  21. 企业级能力进阶图谱
  22. 金融级学习路径
  23. 阶段 1: 技能商品化(Java 开发者)
  24. 1. 初始化技能项目(Spring Boot 3 脚手架)
  25. 2. 关键改造点
  26. 阶段 2: 市场运营(全栈开发者)

更多推荐文章

查看全部
  • Langchain-Chatchat 项目搭建指南
  • 基于知识图谱构建的检索增强生成 GraphRAG 部署指南
  • 单链表高频实战:删除节点、反转链表与查找中间节点
  • Linux 下静态库与动态库的打包及使用
  • OpenClaw Gateway 安装失败 systemctl --user is-enabled unavailable 排查与解决
  • 投资策略规划最优决策分析
  • Dify 工作流发布为 MCP Server 实战指南
  • 零基础 AI 入门:从概念理解到实践应用指南
  • 深入剖析 Linux 文件系统数据结构实现机制
  • QuantCell 智能量化交易系统:从数据收集到策略执行全流程自动化
  • Python 与 PyCharm 环境搭建实战指南
  • Flask 结合 OpenCV 的虚拟视点合成视差估计算法实现
  • Node.js 运行机制解析:事件循环与模块系统详解(上)
  • Python 初学者推荐下载哪个版本
  • STL map/multimap 深度解析:接口用法与核心特性
  • Linux 进程间通信进阶:消息队列与信号量详解
  • 大模型医疗落地现状:顶刊研究显示辅助诊疗能力与 CPU 部署实践
  • Linux 匿名管道通信:原理、特性与实战代码详解
  • C++逆向工程:用c++filt解析GCC编译后的函数名
  • C++ 手写高性能日志模块:基于策略模式实现

相关免费在线工具

  • Keycode 信息

    查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online

  • Escape 与 Native 编解码

    JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online

  • JavaScript / HTML 格式化

    使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online

  • JavaScript 压缩与混淆

    Terser 压缩、变量名混淆,或 javascript-obfuscator 高强度混淆(体积会增大)。 在线工具,JavaScript 压缩与混淆在线工具,online

  • RSA密钥对生成器

    生成新的随机RSA私钥和公钥pem证书。 在线工具,RSA密钥对生成器在线工具,online

  • Mermaid 预览与可视化编辑

    基于 Mermaid.js 实时预览流程图、时序图等图表,支持源码编辑与即时渲染。 在线工具,Mermaid 预览与可视化编辑在线工具,online