xiangjsoncraft 1.1.1 → 1.2.0

package/renderJson.js

@@ -1,92 +1,133 @@
-// 定义 replaceCamelCase 方法，用于将驼峰式命名转换为连字符命名
+// 为String原型扩展驼峰转短横线方法，用于CSS属性名转换
 String.prototype.replaceCamelCase = function (separator = '-') {
-    return this.replace(/[A-Z]/g, function (match) {
-        return separator + match.toLowerCase();
-    });
+    // 容错：如果是纯数字/无驼峰的字符串，直接返回
+    return this.replace(/[A-Z]/g, (match) => `${separator}${match.toLowerCase()}`);
 };
 
-// 创建样式块并添加到文档头部
+// 创建样式块并添加到文档头部，确保唯一且不重复创建
 function createStyleBlock() {
     const style = document.createElement('style');
     style.id = 'dynamic-styles';
-    document.head.appendChild(style);
+    // 把样式块插入到head最前面，避免被其他样式覆盖
+    document.head.insertBefore(style, document.head.firstChild);
     return style;
 }
 
-// 封装通用JSON样式渲染函数，支持任意CSS选择器、HTML内容、媒体查询（v1.1.0核心功能）
+// 核心渲染函数：本地config.json最高优先级，CDN配置兜底，全量容错
 export function renderJsonStyles() {
-    // 动态适配CDN/本地环境的config.json路径（发布后双环境可用）
-    const isCdn = import.meta.url.includes('cdn.jsdelivr.net') || import.meta.url.includes('unpkg.com');
-    const configUrl = isCdn
-        ? 'https://cdn.jsdelivr.net/npm/xiangjsoncraft@1.1.1/config.json'
-        : './config.json';
-
-    // 使用fetch API获取JSON配置文件
-    fetch(configUrl)
-        .then(response => {
-            if (!response.ok) {
-                throw new Error(`网络响应失败: ${response.status} (无法加载配置文件)`);
+    // 配置地址：本地自定义（最高优先级） + CDN官方兜底
+    const LOCAL_CONFIG = './config.json';
+    const CDN_CONFIG = 'https://cdn.jsdelivr.net/npm/xiangjsoncraft@1.1.1/config.json';
+
+    // 统一错误处理函数，避免单个错误中断整体渲染
+    const handleError = (msg) => {
+        console.error(`❌ XiangJsonCraft 错误: ${msg}`);
+    };
+
+    // 核心逻辑：先加载本地配置，失败则加载CDN兜底配置
+    fetch(LOCAL_CONFIG)
+        .then(async (res) => {
+            // 本地配置存在（状态码200-299），使用本地配置
+            if (res.ok) {
+                console.log('🔧 检测到本地config.json，优先加载用户自定义配置');
+                return res.json();
             }
-            return response.json();
+            // 本地配置不存在/加载失败，切换到CDN配置
+            console.log('ℹ️  本地未检测到config.json，加载CDN官方示例配置');
+            const cdnRes = await fetch(CDN_CONFIG);
+            if (!cdnRes.ok) throw new Error('CDN官方配置加载失败，请检查网络');
+            return cdnRes.json();
         })
-        .then(config => {
-            // 获取或创建样式块，避免重复创建
+        .then((config) => {
+            // 容错：如果配置不是对象，直接终止渲染
+            if (typeof config !== 'object' || config === null || Array.isArray(config)) {
+                return handleError('配置文件格式错误，必须是标准JSON对象');
+            }
+
+            // 获取/创建样式块，确保渲染容器存在
             const styleBlock = document.getElementById('dynamic-styles') || createStyleBlock();
-            if (!styleBlock) return console.error('样式块创建失败，无法渲染样式');
+            if (!styleBlock) return handleError('样式块创建失败，无法渲染CSS');
 
-            // 生成CSS规则
+            // 生成CSS规则：处理styles节点，全量容错+格式美化
             let cssRules = '';
+            const { styles = {} } = config; // 解构赋值，避免styles未定义
 
-            // 处理所有选择器样式（支持任意CSS选择器、媒体查询）
-            if (config.styles && typeof config.styles === 'object' && Object.keys(config.styles).length > 0) {
-                // 遍历所有选择器（类、ID、伪类、媒体查询等）
-                Object.entries(config.styles).forEach(([selector, styles]) => {
-                    // 过滤空样式，避免无效CSS
-                    if (!styles || typeof styles !== 'object') return;
-                    // 生成该选择器的所有样式属性
-                    const styleProperties = Object.entries(styles)
-                        .map(([prop, value]) => {
-                            // 过滤空属性，驼峰式属性名转换为CSS标准格式
-                            if (!prop || value === undefined || value === null) return '';
-                            const cssProp = prop.replaceCamelCase();
-                            return `${cssProp}: ${value};`;
-                        })
-                        .filter(Boolean) // 移除空属性
-                        .join('\n    ');
-
-                    // 仅当有样式属性时，添加到CSS规则
-                    if (styleProperties) {
-                        cssRules += `${selector} {\n    ${styleProperties}\n}\n\n`;
-                    }
-                });
-            }
+            // 遍历所有CSS选择器（支持类、ID、媒体查询等所有合法选择器）
+            Object.entries(styles).forEach(([selector, styleObj]) => {
+                // 容错1：选择器为空/非字符串，跳过
+                const selectorStr = String(selector).trim();
+                if (!selectorStr) return;
+                // 容错2：选择器对应的不是样式对象，跳过
+                if (typeof styleObj !== 'object' || styleObj === null || Array.isArray(styleObj)) return;
+
+                // 处理单个选择器下的所有样式属性
+                const styleProps = Object.entries(styleObj)
+                    .map(([prop, value]) => {
+                        // 容错3：属性名强制转字符串+去空格，空属性直接跳过
+                        const propStr = String(prop).trim();
+                        if (!propStr) return '';
+                        // 容错4：属性值为空/无效，直接跳过
+                        if (value === undefined || value === null || String(value).trim() === '') return '';
+                        // 驼峰属性名转CSS标准短横线（如fontSize → font-size）
+                        const cssProp = propStr.replaceCamelCase();
+                        // 属性值强制转字符串，避免数字/布尔值渲染异常
+                        const cssValue = String(value).trim();
+                        // 返回合法的CSS属性行
+                        return `${cssProp}: ${cssValue};`;
+                    })
+                    .filter(Boolean) // 过滤所有空字符串，只留合法属性
+                    .join('\n    '); // 拼接成带缩进的整洁CSS
 
-            // 应用生成的CSS规则到样式块
+                // 只有当有合法样式属性时，才生成CSS规则，避免空选择器
+                if (styleProps) {
+                    cssRules += `${selectorStr} {\n    ${styleProps}\n}\n\n`;
+                }
+            });
+
+            // 将生成的CSS注入到样式块，覆盖原有内容（避免重复渲染）
             if (cssRules) {
                 styleBlock.innerHTML = cssRules;
             }
 
-            // 处理内容配置（支持纯文本/HTML内容，通过isHtml标识）
-            if (config.content && typeof config.content === 'object' && Object.keys(config.content).length > 0) {
-                Object.entries(config.content).forEach(([selector, content]) => {
-                    // 过滤无效选择器和内容
-                    if (!selector || !content || !content.hasOwnProperty('value')) return;
-                    const elements = document.querySelectorAll(selector);
-                    elements.forEach(el => {
-                        if (!el) return;
-                        // 支持HTML内容或纯文本，默认纯文本
-                        if (content.isHtml) {
-                            el.innerHTML = content.value;
-                        } else {
-                            el.textContent = content.value;
-                        }
-                    });
+            // 渲染内容：处理content节点，向DOM注入文本/HTML
+            const { content = {} } = config; // 解构赋值，避免content未定义
+            Object.entries(content).forEach(([selector, contentObj]) => {
+                // 容错1：选择器为空/非字符串，跳过
+                const selectorStr = String(selector).trim();
+                if (!selectorStr) return;
+                // 容错2：内容配置不是对象，跳过
+                if (typeof contentObj !== 'object' || contentObj === null || Array.isArray(contentObj)) return;
+                // 容错3：缺少核心的value属性，跳过
+                if (!contentObj.hasOwnProperty('value')) return;
+
+                // 获取要注入内容的DOM节点，容错：节点不存在则跳过
+                const targetNodes = document.querySelectorAll(selectorStr);
+                if (targetNodes.length === 0) return;
+
+                // 解析内容配置：isHtml默认为false（纯文本）
+                const { value, isHtml = false } = contentObj;
+                const contentValue = String(value).trim(); // 内容强制转字符串，避免异常
+
+                // 向所有匹配的DOM节点注入内容
+                targetNodes.forEach((node) => {
+                    if (isHtml) {
+                        node.innerHTML = contentValue; // HTML片段渲染
+                    } else {
+                        node.textContent = contentValue; // 纯文本渲染（防XSS）
+                    }
                 });
-            }
+            });
 
-            console.log('✅ XiangJsonCraft v1.1.0 渲染成功！');
+            // 渲染成功，打印友好提示
+            console.log('✅ XiangJsonCraft 渲染成功！样式+内容已全部加载');
         })
-        .catch(error => {
-            console.error('❌ XiangJsonCraft 处理样式配置时出错:', error.message);
+        .catch((err) => {
+            // 捕获所有异步错误，统一处理
+            handleError(err.message);
         });
+}
+
+// 兼容UMD打包：暴露全局变量，方便CDN引入调用
+if (typeof window !== 'undefined') {
+    window.XiangJsonCraft = { renderJsonStyles };
 }