当前位置：首页 > news >正文

XiangJsonCraft v1.1.0发布：JSON配置网页的终极进化，支持所有CSS选择器！

news 2025/11/3 6:09:43

XiangJsonCraft v1.1.0发布：JSON配置网页的终极进化，支持所有CSS选择器！

文章目录

XiangJsonCraft v1.1.0发布：JSON配置网页的终极进化，支持所有CSS选择器！
- - 📢 前言：从 “能用” 到 “好用” 的蜕变
  - 🔧 核心升级：3 大突破重构配置体验
  - - 1. 全量 CSS 选择器支持（最重磅！）
    - 2. 渲染引擎重构：更稳、更快、更灵活
    - 3. 内容配置升级：支持 HTML 与文本双模式
  - 🚀 实战案例：3 分钟搭出响应式欢迎页
  - - 1. 安装依赖
    - 2. 编写 JSON 配置（config.json）
    - 3. 编写 HTML 与调用
    - 4. 运行效果
  - 📌 版本迁移指南（向下兼容！）
  - 🔭 未来规划：这些功能在路上
  - 💬 开发者心里话

📢 前言：从 “能用” 到 “好用” 的蜕变

作为一名前端开发，你是否也曾遇到这些痛点？

非开发同事想改页面样式，却被 CSS 代码劝退；
改个响应式布局要改 N 处代码，维护成本高；
用 JSON 配置页面却受限于固定选择器，灵活度不足。

今天，我开发的XiangJsonCraft迎来 v1.1.0 重大更新，彻底解决这些问题！这个轻量级 npm 包让你仅凭 JSON 就能构建专业级网页，本次升级更是把 “配置自由度” 拉满。

🔧 核心升级：3 大突破重构配置体验

1. 全量 CSS 选择器支持（最重磅！）

旧版本仅支持基础元素选择器，新版本实现所有 CSS 选择器兼容，包括：

✅ 类选择器（.card）、ID 选择器（#hero）

✅ 伪类（:hover、:active）、伪元素（::before）

✅ 后代选择器（nav ul li）、相邻选择器（div + p）

✅ 媒体查询（@media (max-width:768px)）

再也不用为 “配置不了复杂样式” 发愁，JSON 里写 CSS 选择器就像写原生 CSS 一样自由！

2. 渲染引擎重构：更稳、更快、更灵活

自动属性转换：驼峰式命名（fontSize）自动转 CSS 标准格式（font-size），写配置更顺手；
动态样式块管理：自动创建 / 复用样式节点，避免重复渲染；
错误捕获增强：网络异常、配置错误均有清晰提示，调试效率提升 50%。

3. 内容配置升级：支持 HTML 与文本双模式

新增isHtml参数，既能设置纯文本，也能直接注入 HTML 片段：

"content": {".title": {"value": "欢迎使用", "isHtml": false},"#intro": {"value": "<p>用<span style='color:blue'>JSON</span>造页面</p>", "isHtml": true}
}

非开发人员改文本，开发者嵌组件，协作更高效。

🚀 实战案例：3 分钟搭出响应式欢迎页

光说不练假把式，用新版本快速实现一个企业级欢迎页：

1. 安装依赖

npm install xiangjsoncraft@1.1.0  # 指定新版本安装

2. 编写 JSON 配置（config.json）

{"styles": {"*": {"margin": "0","padding": "0","boxSizing": "border-box"},"body": {"fontFamily": "'Inter', sans-serif","backgroundColor": "#f5f7fa","minHeight": "100vh"},".welcome-container": {"display": "flex","flexDirection": "column","alignItems": "center","justifyContent": "center","padding": "2rem","textAlign": "center"},".welcome-logo": {"width": "120px","height": "120px","borderRadius": "50%","marginBottom": "1.5rem","boxShadow": "0 4px 20px rgba(0,0,0,0.1)"},".welcome-title": {"fontSize": "2.5rem","color": "#2c3e50","marginBottom": "1rem","transition": "color 0.3s ease"},".welcome-title:hover": {  // 伪类示例"color": "#3498db"},".welcome-desc": {"fontSize": "1.1rem","color": "#7f8c8d","maxWidth": "600px"},"@media (max-width: 768px)": {  // 响应式示例".welcome-title": {"fontSize": "1.8rem"},".welcome-container": {"padding": "1rem"}}},"content": {".welcome-title": {"value": "欢迎使用XiangJsonCraft","isHtml": false},".welcome-desc": {"value": "<p>用JSON配置样式与内容，让前端开发更高效</p><p>当前版本：v1.1.0</p>","isHtml": true},".welcome-logo": {"value": "<img src='https://picsum.photos/seed/xiangjsoncraft/200/200' alt='Logo' style='width:100%;height:100%'>","isHtml": true}}
}

3. 编写 HTML 与调用

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>欢迎页</title><style id="dynamic-styles"></style>
</head>
<body><div class="welcome-container"><div class="welcome-logo"></div><h1 class="welcome-title"></h1><div class="welcome-desc"></div></div><script type="module">import { renderJsonStyles } from 'xiangjsoncraft';renderJsonStyles('./config.json');  // 支持自定义配置路径</script>
</body>
</html>