xiangjsoncraft 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/config.json +23 -0
- package/index.html +19 -0
- package/package.json +13 -0
- package/renderJson.js +38 -0
package/config.json
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
{
|
|
2
|
+
"styles": {
|
|
3
|
+
"body": {
|
|
4
|
+
"margin": "0",
|
|
5
|
+
"padding": "0",
|
|
6
|
+
"boxSizing": "border-box"
|
|
7
|
+
},
|
|
8
|
+
"header": {
|
|
9
|
+
"display": "flex",
|
|
10
|
+
"justifyContent": "center",
|
|
11
|
+
"alignItems": "center",
|
|
12
|
+
"padding": "10px",
|
|
13
|
+
"backgroundColor": "azure"
|
|
14
|
+
},
|
|
15
|
+
"headerP": {
|
|
16
|
+
"color": "black",
|
|
17
|
+
"fontSize": "16px"
|
|
18
|
+
}
|
|
19
|
+
},
|
|
20
|
+
"content": {
|
|
21
|
+
"headerText": "Dynamic Header Text"
|
|
22
|
+
}
|
|
23
|
+
}
|
package/index.html
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Document</title>
|
|
7
|
+
<style id="style-block"></style>
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<header>
|
|
11
|
+
<p id="header-text"></p>
|
|
12
|
+
</header>
|
|
13
|
+
<!-- 引入外部 JavaScript 文件 -->
|
|
14
|
+
<script type="module">
|
|
15
|
+
import { renderJson } from './renderJson.js';
|
|
16
|
+
renderJson();
|
|
17
|
+
</script>
|
|
18
|
+
</body>
|
|
19
|
+
</html>
|
package/package.json
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "xiangjsoncraft",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "",
|
|
5
|
+
"main": "renderJson.js",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"test": "echo \"Error: no test specified\" && exit 1"
|
|
8
|
+
},
|
|
9
|
+
"keywords": [],
|
|
10
|
+
"author": "",
|
|
11
|
+
"license": "ISC",
|
|
12
|
+
"type": "commonjs"
|
|
13
|
+
}
|
package/renderJson.js
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
// 定义 replaceCamelCase 方法
|
|
2
|
+
String.prototype.replaceCamelCase = function (separator = '-') {
|
|
3
|
+
return this.replace(/[A-Z]/g, function (match) {
|
|
4
|
+
return separator + match.toLowerCase();
|
|
5
|
+
});
|
|
6
|
+
};
|
|
7
|
+
|
|
8
|
+
// 封装 JSON 渲染函数
|
|
9
|
+
function renderJson() {
|
|
10
|
+
// 使用 fetch API 获取 JSON 文件
|
|
11
|
+
fetch('./config.json')
|
|
12
|
+
.then(response => {
|
|
13
|
+
// 检查响应是否成功
|
|
14
|
+
if (!response.ok) {
|
|
15
|
+
throw new Error('网络响应失败');
|
|
16
|
+
}
|
|
17
|
+
// 将响应转换为 JSON 格式
|
|
18
|
+
return response.json();
|
|
19
|
+
})
|
|
20
|
+
.then(config => {
|
|
21
|
+
// 动态创建样式表
|
|
22
|
+
const styleBlock = document.getElementById('style-block');
|
|
23
|
+
styleBlock.innerHTML = `
|
|
24
|
+
* { ${Object.entries(config.styles.body).map(([key, value]) => `${key}: ${value};`).join(' ')} }
|
|
25
|
+
header { ${Object.entries(config.styles.header).map(([key, value]) => `${key.replaceCamelCase()}: ${value};`).join(' ')} }
|
|
26
|
+
header p { ${Object.entries(config.styles.headerP).map(([key, value]) => `${key}: ${value};`).join(' ')} }
|
|
27
|
+
`;
|
|
28
|
+
|
|
29
|
+
// 动态设置内容
|
|
30
|
+
document.getElementById('header-text').innerText = config.content.headerText;
|
|
31
|
+
})
|
|
32
|
+
.catch(error => {
|
|
33
|
+
console.error('获取 JSON 文件时出错:', error);
|
|
34
|
+
});
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
// 导出渲染函数
|
|
38
|
+
export { renderJson };
|