前端能力全景图：完整资源归档与现代工程选型实践

📅 2026-10-09 📂 前端 🏷️ 开源导读, 前端
48 分钟阅读 · 11,672 字

保留固定版本 README 全部 453 条链接引用与原始说明，并补充编辑器、上传、图形、微前端等场景的选型与安全方法。

本文围绕 huaize2020/awesome-frontend 做原创工程整理。项目来自 腾讯新闻前端团队 2022 年的 25 个 Awesome 项目推荐；上游中文 README 固定到 2023-03-23 commit 56343113b03fdb80da098c5632896ca2d14cd21c；48,505 字节、453 条 Markdown 链接引用，仓库声明 MIT 且随文保留完整 LICENSE 下方保留固定版本入口。

仓库内容地图

  • 标准与学习：Web/ECMAScript 官方文档、教程、前沿文章、面试和算法
  • 基础能力：CSS/动画、数字/数学、日期时间、JavaScript 框架与跨端
  • 交互和集成：表单上传、键盘、微前端、存储和 Web Components
  • 图形与媒体：Canvas/SVG、WebGL、可视化引擎、图表、关系/流程图、地图、甘特图、游戏
  • 内容生产：代码高亮、富文本/代码/Markdown/画布编辑器
  • 办公与工具：Excel/PDF/演示、浏览器终端、构建工具与指纹

怎么读才有收获

文章前半段按现实约束建立选型方法；后半段附上游 2023 年 README 完整快照与 MIT 许可。先界定任务、数据和设备，再核验候选的维护、安全、许可、性能、可访问性和退出成本；归档不是当前推荐。

这份资源地图怎么用

上游把资源分成官方规范、教程/前沿内容/面试/算法，以及大量按功能组织的开源项目。它适合发现候选，不等同于技术选型结论。固定快照来自 2023-03-23 的 README，原文约 48 KB，列有 453 条 Markdown 链接引用、443 个不同目标；下方完整保留 README 和 MIT 许可，便于离线阅读与追溯。条目是否仍维护、许可是否适合当前产品，必须重新核验。

把清单转成工程决策，建议从问题反推能力：用户要完成什么任务、输入输出是什么、数据量和设备范围多大、内容是否敏感、是否需要导入导出、协作、离线和无障碍。先列这些约束，再从对应目录挑两到三个候选，最后用小型原型验证，而不是按星数或“看起来功能多”拍板。

上游目录全景

规范与学习入口

官方 Web/ECMAScript 文档、教程、前沿文章、面试题和算法资料是学习与查证入口。规范回答“平台承诺什么”，教程回答“如何入门”，周刊回答“近期有哪些变化”，面试题只是练习材料。旧版规范和提案页要标注版本，最终行为以当前标准、浏览器兼容数据和运行测试为准。

基础表现与数据处理

CSS 框架/动效、数字与数学、日期时间、JavaScript 框架和跨端框架覆盖界面、精度、时间语义和运行容器。金额、汇率和计费不要直接用浮点数累加；日期时间要说明时区、夏令时、日历和无效输入；随机数要按安全用途区分普通抽样与密码学随机。框架适配层也不能消除不同平台的文件、导航、权限和渲染差异。

表单、上传与交互

上传器目录包含拖放、预览、过滤、分片和进度等能力。可靠上传还需要服务端校验文件大小、真实格式、内容类型、授权、配额、超时、断点续传和清理孤儿临时文件；客户端 accept 只是体验提示，不是安全边界。键盘快捷键应提供冲突检测、可发现的帮助、焦点管理，并允许文本编辑控件保留常见按键。

微前端与运行时集成

微前端框架清单不能代替架构判断。先界定部署独立性、路由归属、共享依赖、样式隔离、跨应用消息、认证上下文和回滚策略。把挂载/卸载做成明确生命周期，取消请求、移除监听器、清理定时器；共享消息带版本、来源与 schema 校验，不把宿主全局对象当作稳定 API。

Canvas、WebGL、动画和数据可视化

Canvas/SVG 适合可控图形和编辑交互；WebGL/3D 适合需要 GPU 管线的大量几何或材质；图表和地图先明确数据规模、交互、投影、坐标系、离线资源和授权边界。屏幕像素比会放大画布显存，组件销毁时释放纹理、缓冲区、观察器和事件。低端移动设备要有降采样、静态图/表格回退与 WebGL context lost 处理。动画尊重 prefers-reduced-motion，不以运动效果承担唯一信息表达。

编辑器与文档生产

富文本框架决定文档模型、事务与扩展方式；Markdown 编辑器决定语法、渲染器和插件边界；代码编辑器关心大文件、语言服务和 worker；图形编辑器关心节点模型、撤销重做、选择/变换和序列化。Office 类能力要区分预览、转换、编辑、批注与协作，不要把“能显示”误称为“完整兼容”。

对富文本和 Markdown，持久化结构化内容或受控语法，渲染时处理 XSS、外链 rel、图片来源、资源上限和恶意压缩文件。导入内容先做格式与大小限制；协作编辑还要验证并发合并、权限撤销、离线冲突和版本回滚。PDF/表格/幻灯片需要按文档体积、字体、公式、复杂布局和移动端性能建立真实样本集。

终端、构建、Web Components 与指纹

浏览器终端属于高风险能力：命令执行应放在受控隔离环境，不应把宿主凭证、任意网络或任意文件系统暴露给页面。构建工具需要以冷启动、增量编译、缓存和产物体积作测量；旧项目条目只表示历史候选。Web Components 可跨框架封装，但 Custom Element 注册名、属性/事件契约、Shadow DOM 样式和焦点行为都要稳定设计。浏览器指纹会关联用户并带来隐私与合规风险，不能因为清单里有库就默认采集。

选型评分表

维度验证问题可接受证据
功能覆盖核心任务是否无明显绕路？用真实流程完成导入、编辑、保存、导出
维护与安全发布节奏、漏洞响应、依赖树如何？最近发布/Issue、公告、SBOM 与扫描结果
许可当前版本和传递依赖能否用于目标产品？仓库 LICENSE、依赖许可证清单及法务解释
体积与性能首屏、交互延迟、峰值内存是否达标？生产构建分析、低端设备实测、长任务记录
可访问性键盘、读屏、缩放和减少动态效果是否可用？手工键盘走查、语义树与自动化辅助检查
数据与退出能否导出、迁移、删除并恢复？文档格式、备份恢复演练、供应商替换方案
集成成本SSR、CSP、路由、主题和部署模型是否兼容？最小集成原型、构建和发布测试

评分要标注权重和证据日期。不能用 0 到 5 的主观印象掩盖硬性约束：许可证不兼容、无法安全保存数据、目标平台不支持或性能超预算时，应直接淘汰。

建议的前端能力成长路径

  1. 平台基础：HTML/CSS/JavaScript、DOM、事件、网络、存储、无障碍和安全。做一个能在手机上使用的表单/列表应用，并支持键盘操作。
  2. 组件和数据流：选择 React/Vue 等框架，理解状态所有权、异步请求、缓存失效、路由和错误边界；用测试固定核心业务规则。
  3. 工程交付：模块边界、构建、代码分割、源映射、监控和 CI；每次优化用构建/运行数据验证。
  4. 文件与内容：实现有服务端校验的上传，支持明确的预览格式；编辑器要处理安全渲染、撤销、持久化与恢复。
  5. 图形与体验：先用 SVG/Canvas 做小交互，再决定是否需要 WebGL；测高分屏和低端手机，支持 reduced motion 和非图形替代。
  6. 跨端/微前端：最后再处理多容器差异、子应用生命周期和部署自治，先画契约与故障隔离图，再引入框架。

每一阶段都留下一个可运行小项目、测试、性能记录和“没有选择某候选”的理由。这样资源表才能变成自己的工程知识，而不是收藏夹。

现代官方参考

上游 README 固定版本完整快照

下面是固定提交中的中文 README 原文，便于离线查阅；清单条目是历史记录，不代表当前推荐。

English | 简体中文

正在持续建设中...

同时推荐你查看我正在维护的其他仓库

目录

官方文档

Web技术

ECMAScript

资源

教程

前沿技术

  • 前端精读周刊 - 前端精读周刊。帮你理解最前沿、实用的技术。
  • Web 技术周刊 - 汇总平时看到的优秀文章，前端为主，兼含其它技术及少量产品、设计、管理内容。
  • 前端日报 - 每日会挑选一些比较有用的文章发在公众号上，欢迎关注。

面试题

算法

GIT仓库

CSS

框架

  • tailwindcss - 一个功能类优先的 CSS 框架。
  • bulma - 基于 Flexbox 的现代CSS框架。

CSS动画

  • animate.css - 跨浏览器CSS动画库。简单易用。
  • Hover.css - 一个悬停效果的CSS3集合，可应用于链接、按钮、徽标、SVG、特色图像等。提供CSS、Sass等版本。
  • Loaders.css - 令人愉快的、注重性能的纯 css 加载动画。
  • csshake - 让你的 DOM 颤抖起来。

数字

  • Numeral.js - 格式化和操作数字。
  • bignumber.js - 用于任意精度十进制和非十进制算术的 JavaScript 库。
  • decimal.js - JavaScript的任意精度的十进制类型。
  • big.js - 一个小型，快速的JavaScript库，用于任意精度的十进制算术运算。
  • round-to - 将数字四舍五入到指定的小数位数：1.234→1.2`。
  • unique-random - 生成连续唯一的随机数。
  • random-int - 生成随机整数。
  • random-float - 生成随机浮点数。

数学运算

  • mathjs - 广泛的数学运算库。
  • ndarray - 多维数组。
  • algebra - 代数结构。
  • multimath - 在WebAssembly和JS中进行快速图像数学运算。

日期 和 时间

  • moment - 解析、校验、操作和显示日期。
  • dayjs - 仅2KB，不可变的日期时间库。使用与Moment.js同样的API，Moment.js的替代库。
  • date-fns - 现代JavaScript日期工具库。
  • luxon - 用于处理日期和时间的库。
  • timeago.js - timeago.js是一个很小的（2.0 kb）库，用于使用 *** time ago 语句格式化日期。
    • timeago-react - 简单高效的react组件使用 *** time ago 语句格式化日期。 例如：'3 hours ago'。
  • ms - 毫秒转换工具。
  • dateformat - 日期格式化。
  • pretty-ms - 将毫秒转换为人类可读的字符串，如: 1337000000 → 15d 11h 23m 20s。
  • strftime - JavaScript版时间格式化Strftime。
  • date-utils - 用于Node.js和浏览器的日期垫片（Polyfills）。

JavaScript框架

  • vue - Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
  • react - 用于构建用户界面的 JavaScript 库。 (你也许会喜欢 awesome-react)
  • angular - 现代 Web 开发平台。
  • svelte - Svelte 是一种全新的构建用户界面的方法，增强的Web应用程序。
  • preact - Preact 是 React 的轻量化替代方案，仅有 3KB。并且提供了相同的 ES6 API，还具有组件和 Virtual DOM。
  • petite-vue - Vue子集，优化渐进增强，仅 5kb。

跨端/多端框架

  • uni-app - Uni-app 是使用 Vue 语法开发小程序、H5、App的统一框架。
  • Taro - 开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。
  • rax - Rax 是阿里巴巴应用最广泛的跨端解决方案，支持开发者通过类 React DSL 编写 Web、小程序、Flutter 等不同容器的跨端应用。

表单相关

上传

  • uppy - Uppy 是一款时尚的模块化 JavaScript 文件上传器，可与任何应用程序无缝集成。 它快速、易于使用，让您可以考虑比搭建文件上传器更重要的问题。
  • dropzone - Dropzone 是一个易于使用的拖放库。 它支持图像预览并显示漂亮的进度条。
  • webuploader - WebUploader是一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。
  • plupload - Plupload 是用于构建文件上传器的 JavaScript API。 它支持多文件选择、文件过滤、分块上传、客户端图像缩小，并且在必要时可以回退到替代运行时，如 Flash 和 Silverlight。

交互相关

键盘操作

  • mousetrap - 处理键盘快捷方式的简单库。
  • keymaster - 一个用于定义和触发键盘快捷键的微型库。 它没有任何依赖。

微前端

  • qiankun - 快速、简单和完整的微前端解决方案。
  • single-spa - 简单微前端的路由器。
  • emp - 这是一个面向未来的，基于Webpack5 Module Federation搭建的微前端解决方案。
  • piral - 使用微前端的下一代 Web 应用程序框架。
  • garfish - 一个功能强大的微前端框架。🚚

Canvas/SVG

你也许会喜欢 awesome-canvas

  • fabric.js - Javascript Canvas 库，SVG-to-Canvas（和 canvas-to-SVG）解析器。
  • rough - 创建具有手绘、粗略外观的图形。
  • konva - Konva.js是一个 HTML5 Canvas JavaScript 框架，它通过为桌面和移动应用程序启用画布交互来扩展2d上下文。
  • concrete - 一个轻量级的 Html5 Canvas 框架，支持命中检测、支持图层、像素比管理、导出和下载。

WebGL

  • three.js - JavaScript 3D库。
  • pixijs - HTML5创意引擎：用最快、最灵活的2D WebGL渲染器创建漂亮的数码内容。
  • gl-matrix - 用于操作矩阵和向量，开发高性能的 WebGL 应用程序的JavaScript库。
  • Oasis Engine - Oasis Engine 是一个Web优先 和 移动端优先的高性能实时开发平台。

全屏

  • screenfull - 跨浏览器使用 JavaScript Fullscreen API 的封装。

存储

  • localForage - 💾 离线存储增强。 基于 IndexedDB、WebSQL 或 localStorage 封装的使用简单但功能强大的 API 。

动画

  • anime.js - JavaScript 动画引擎。
  • lottie-web - 在Web、Android和iOS以及React Native上渲染After Effects动画。
  • mojs - 用于Web的动态图形工具。
  • velocity - Velocity是一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQuery 完美协作，并和$.animate()有相同的 API，但它不依赖jQuery，可单独使用。
  • svg.js - 用于操作和使SVG动画的轻量级库。
  • dynamics.js - 创建基于物理的动画。
  • animsition - 一个简易的jQuery插件用于CSS页面切换过渡效果
  • TweenJS - 一个简单但功能强大的tweening/animation库。CreateJS库套件的一部分。

视觉差

  • parallax - 对智能设备的方向做出响应的视觉差引擎。
  • rellax - 轻量、原生Javascript的视觉差库。

波纹

  • wavesurfer.js - 以Web音频和Canvas的音频波纹。
  • wavedrom - 数字时序图（波形）渲染引擎。
  • waveforms - 一个互动的、可探索的声波纹描绘特效。
  • siriwave - Apple® Siri 波纹特效
  • waveform-playlist - 具有画布波形预览的多轨网络音频编辑器和播放器。
  • waves- 模拟海浪效果。

粒子/路径动画

  • Proton - 粒子效果库。
  • bubbly-bg - 小于 1kB 的漂亮气泡背景(gzipped后750字节)。
  • react-particle-effect-button - 基于React的爆裂粒子效果按钮。
  • pasition - 轻量级 Path 过渡库，可以渲染到任何地方。
  • three.proton - 一个神奇的 3d 粒子引擎，使用了three.js库和Proton。

表情

  • emoji-mart - Emoji Mart 是一个可定制的表情选择器组件。

数据可视化

你也许会喜欢 awesome-react数据可视化

引擎

  • D3.js - 一个可以基于数据来操作文档的 JavaScript 库。 (你也许会喜欢 awesome-d3)
    • visx - 🐯 visx | 可视化组件。
  • Raphaël - Raphaël 是一个小型 JavaScript 库，它可以简化您在网站上操作矢量图形的工作。
  • zrender - 2d 绘图的轻量级图形库。
  • g - 强大的渲染引擎，为 G2 和 G6 提供 Canvas 和 SVG 绘制。

通用

  • ECharts - 来自百度的强大图表库。
    • v-charts - 基于 Vue2.0 和 ECharts 封装的图表组件。
    • vue-echarts - 使用 Apache ECharts 5，同时支持 Vue.js 2/3。
    • echarts-for-weixin - Apache ECharts (incubating) 的微信小程序版本
  • plotly.js - 开源 JavaScript 图形库。
  • HighCharts - 为您的 Web 项目轻松创建交互式图表。

图表

  • Chart.js - 使用 <canvas> 标签创建 HTML5 图表。
  • charts - 简单、响应式、零依赖的现代 SVG 图表。
  • chartist-js - Simple responsive charts.
  • G2 - JavaScript 中的图形语法。
    • BizCharts - 基于 G2 和 React 的强大数据可视化库。
    • g2plot - 一个交互式响应式的图表库。
    • viser - Viser 是一个适用于数据可视化工程师的工具。
  • ApexCharts - 基于 SVG 的交互式 JavaScript 图表。
  • F2 - 一个优雅的、交互式的、灵活的移动图表库。
  • uPlot - 小而快速的图表k库，可制作时序图、折线图、面积图、OHLC图和饼图。
  • flot - 基于jQuery的优雅的JavaScript图表库。
  • Peity - 渐进式 svg 饼图、圆环图、条形图和折线图。

关系图

  • Sigma - Sigma 是一个专门用于关系图绘制的 JavaScript 库。
  • G6 - 便捷的关系数据可视化引擎与图分析工具。
    • graphin - 基于 G6 封装的React图分析应用组件。
  • cytoscape.js - 用于可视化和分析的图论（网络）库。
  • Springy - 一个力导图布局算法。
  • WebCola - Javascript版约束图形布局。

流程图

  • Flowy - 用于创建流程图的最小 Javascript 库。
  • flowchart.js - 基于文本描述绘制简单的 SVG 流程图。
  • js-sequence-diagrams - 从图表表示的文本中绘制简单的 SVG 序列图。
  • GoJS - 交互式流程图、组织结构图、设计工具、规划工具、可视化语言的JavaScript图表库。
  • mermaid - 通过解析类Markdown语法生成图表和流程图等。
  • wireflow - 用户流程图实时协作工具。
  • butterfly - 基于JavaScript/React/Vue2 的流程图组件。
  • Drawflow - 简单的流程库。

地图

  • Leaflet - Leaflet 是对移动端友好的开源领先的交互式地图库。
  • deck.gl - WebGL2 支持的地理空间可视化层。
  • OpenLayers - 高性能、功能丰富的库，用于在 Web 上创建交互式地图。
  • cesium - 用于世界级 3D 地球仪和地图的开源 JavaScript 库。
  • L7 - 基于 WebGL 的开源大规模地理空间数据可视分析开发框架。
  • tangram - 用于创造性制图的WebGL地图绘制引擎。

甘特图

  • gantt - 开源的Javascript甘特图。基于SVG .
  • jQueryGantt - jQuery甘特图编辑器。
  • gantt-schedule-timeline-calendar - JS甘特图，项目甘特图，时间线，调度图，甘特时间线，预订时间线，React甘特图，Angular甘特图，Vue甘特图，svelte甘特图

其他

游戏

  • phaser - Phaser 是一个有趣、免费且快速的 2D 游戏框架，用于为桌面和移动的浏览器制作 HTML5 游戏，支持 Canvas 和 WebGL 渲染。
  • Babylon.js - Babylon.js 是一个功能强大、美观、简单、开放的游戏和渲染引擎。
  • cocos2d-html5 - 用于 Web 浏览器的 Cocos2d。 使用 JavaScript 构建。
  • limejs - 网页和iOS的HTML5游戏框架。

代码查看/代码高亮

  • highlight.js - 语言自动检测 和 零依赖的 JavaScript 语法高亮器。
  • prism - 轻量级、健壮、优雅的语法高亮。

编辑器

富文本编辑器框架

  • slate - 一个完全可定制的框架，用于在浏览器中构建富文本编辑器。
  • draft.js - Draft.js 是一个 JavaScript 富文本编辑器框架，为 React 构建并由不可变模型支持。
  • ckeditor5 - 强大的富文本编辑器框架，具有模块化架构、现代集成和协作编辑等功能。

富文本编辑器

  • quill - 为兼容性和可扩展性而构建的现代所见即所得(WYSIWYG)编辑器。
  • slate - 一个完全可定制的框架，用于在浏览器中构建富文本编辑器。
  • draft.js - Draft.js 是一个 JavaScript 富文本编辑器框架，为 React 构建并由不可变模型支持。
  • editor.js - 具有干净 JSON 输出的块式编辑器。
  • trix - 用于日常写作的富文本编辑器。
  • medium-editor - 从Medium.com 所见即所得编辑器 克隆 而出。使用 contenteditable API 实现富文本解决方案。
  • wangEditor - 轻量级web富文本框。
  • pell - 简单、小巧的 Web 所见即所得文本编辑器，无依赖项。
  • tinymce - 用于富文本编辑的 JavaScript 库。 适用于 React、Vue 和 Angular。
  • prosemirror - 基于 contentEditable 的表现良好的丰富语义内容编辑器，支持协作编辑和自定义文档模式。
  • ckeditor4 - 最好的企业级所见即所得编辑器。完全可定制的无数功能和插件。
  • ckeditor5 - 强大的富文本编辑器框架，具有模块化架构、现代集成和协作编辑等功能。
  • simditor - 一个简单快速的所见即所得(WYSIWYG)编辑器。
  • substance - 用于基于 Web 的内容编辑的 JavaScript 库。
  • neditor - 基于ueditor的更现代化的富文本编辑器，支持HTTPS。

代码编辑器

  • monaco-editor - 基于浏览器端代码编辑器。
  • ace - Ace是使用JavaScript编写的独立代码编辑器。
  • CodeMirror - 浏览器端代码编辑器。

Markdown编辑器

  • stackedit - 浏览器端Markdown编辑器。
  • TOAST UI Editor - Markdown 所见即所得编辑器。 GFM 标准 + 图表和 UML 可扩展。
  • Editor.md - 开源可嵌入在线编辑器（组件）。
  • Markdown Plus - 具有额外功能的 Markdown 编辑器。
  • bytemd - 一个用 Svelte 构建 (hackable) 的 Markdown 编辑器组件。

图形绘制编辑器

  • DrawerJs - 可定制的所见即所得 HTML 画布编辑器。
  • fabric-js-editor - 基于Fabric.js构建的HTML5矢量图像编辑器。

办公软件

Excel/在线表格

  • sheetjs - 电子表格数据工具箱。
  • handsontable - 带有电子表格外观的 JavaScript 数据网格。 适用于 React、Angular 和 Vue。
  • x-spreadsheet - 基于Web Canvas的在线表格。
  • Luckysheet - Luckysheet，一款纯前端类似excel的在线表格，功能强大、配置简单、完全开源。
  • exceljs - Excel工作表管理工具。
  • SlickGrid - 极快的JavaScript网格/电子表格
  • xlsx-populate - Excel XLSX生成和解析工具，可运行在Node和浏览器。

PDF

演示/幻灯片

  • reveal.js - HTML展示框架。
  • impress.js - 它是一个基于现代浏览器中CSS3 transforms和transitions的强大功能的展示框架。
  • slidev - 为开发者准备的演示幻灯片。
  • deck.js - 现代HTML演示文稿。
  • bespoke.js - DIY展示的微框架。
  • shower - Shower HTML演示引擎。

命令终端

构建工具

  • webpack - 打包浏览器的模块和资产。

  • parcel - 快速，零配置的 Web 应用构建工具。

  • gulp - 流式快速构建系统，支持代码而不是配置。

  • esbuild - 极快的 JavaScript 打包压缩工具。

  • rollup - 新一代的 ES2015 打包构建工具。

  • pkg - 将 Node.js 项目打包成可执行文件。

  • Grunt - JavaScript 任务执行器。

  • Brunch - 前端 web 应用程序构建工具，具有简单的声明性配置、快速的增量编译和自定的工作流。

  • FuseBox - 快速构建系统，结合了 webpack，JSPM 和 SystemJS 的强大功能，并具有一流的 TypeScript 支持。

  • rspack - 一个快速的基于 Rust 的 Web 打包工具 🦀️。

  • Broccoli - 快速、可靠的资产管道，支持固定时间重建和紧凑的构建定义。

  • ESM

    • Vite - 新一代前端构建工具。
    • snowpack - 由 ESM 支持的前端构建工具。 即时，轻量级，无捆绑开发。

Web Components

(你也许喜欢 awesome-webcomponents)

  • polymer - Web Component 库。
  • stencil - Stencil 是一个简单的编译器，用于生成 Web Components和静态站点生成的渐进 Web 应用程序(PWA)。
  • lit - Lit是一个简易的用于构建快速、轻量的Web Components库。
  • skatejs - Skate 是基于 Web Components 标准的函数式响应式抽象，使您能够使用流行的视图库（如 React、Preact 和 LitHTML一样）编写小型、快速和可扩展的 Web 组件。
  • x-tag - 现代浏览器自定义组件。
  • slim.js - Slim是一个用于Web Components开发的超快，原生和优雅的库。

指纹

  • clientjs - 设备信息 和 数字指纹。

MIT License

MIT License

Copyright (c) 2021 huaize

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

动手路线

  1. 为博客的文档嵌入功能画“格式 -> 渲染器 -> 权限 -> 资源限制”图，并用真实文件建立回归集。
  2. 挑一个图形编辑器和一个 Markdown 编辑器，比较导入、导出、XSS 边界、协作、撤销和无障碍。
  3. 在低端手机测图表/WebGL 的首屏、内存、像素比和降级行为，记录通过阈值。

使用边界

固定版本包含历史候选和第三方链接；不要将旧描述视为维护状态、许可结论或安全背书。上游 README 与完整 MIT License 一并保留，新增工程说明为原创内容。

原始入口

Live Notes

读者弹幕

留言提交后会先进入审核，审核通过后对其他读者公开。