Skip to content

Commit 2ab9458

Browse files
kscriptkscript
committed
增加示例
1 parent cc3e76b commit 2ab9458

File tree

2 files changed

+237
-0
lines changed

2 files changed

+237
-0
lines changed

‎.npmignore

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
.DS_Store
2+
node_modules
3+
dist
4+
demo
5+
6+
.git
7+
8+
# local env files
9+
.env.local
10+
.env.*.local
11+
12+
# Log files
13+
npm-debug.log*
14+
yarn-debug.log*
15+
yarn-error.log*
16+
pnpm-debug.log*
17+
18+
# Editor directories and files
19+
.idea
20+
.vscode
21+
*.suo
22+
*.ntvs*
23+
*.njsproj
24+
*.sln
25+
*.sw?
26+
*.log

‎demo/index.html

+211
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-CN">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>代码演示页面</title>
8+
<style>
9+
* {
10+
box-sizing: border-box;
11+
margin: 0;
12+
padding: 0;
13+
}
14+
15+
body {
16+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
17+
background-color: #f9f9fa;
18+
display: flex;
19+
justify-content: center;
20+
align-items: center;
21+
height: 100vh;
22+
margin: 0;
23+
}
24+
25+
.container {
26+
background-color: white;
27+
padding: 30px;
28+
border-radius: 12px;
29+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
30+
width: 100%;
31+
max-width: 1200px;
32+
display: flex;
33+
flex-direction: column;
34+
gap: 20px;
35+
}
36+
37+
h1 {
38+
text-align: center;
39+
color: #333;
40+
}
41+
42+
.row {
43+
display: flex;
44+
gap: 20px;
45+
}
46+
47+
.input-output-container {
48+
flex: 1;
49+
}
50+
51+
textarea {
52+
width: 100%;
53+
height: calc(100vh - 300px);
54+
margin-bottom: 10px;
55+
padding: 15px;
56+
border: 1px solid #ddd;
57+
border-radius: 8px;
58+
resize: vertical;
59+
font-family: 'Courier New', Courier, monospace;
60+
font-size: 14px;
61+
}
62+
63+
button {
64+
width: 100%;
65+
padding: 15px;
66+
background-color: #007bff;
67+
color: white;
68+
border: none;
69+
border-radius: 8px;
70+
cursor: pointer;
71+
font-size: 16px;
72+
transition: background-color 0.3s ease;
73+
margin: 0 10px;
74+
}
75+
76+
button:hover {
77+
background-color: #0056b3;
78+
}
79+
80+
.result {
81+
height: calc(100% - 55px);
82+
margin-top: 10px;
83+
padding: 15px;
84+
border: 1px solid #eee;
85+
border-radius: 8px;
86+
background-color: #fafafa;
87+
white-space: pre-wrap;
88+
overflow-x: auto;
89+
font-family: 'Courier New', Courier, monospace;
90+
font-size: 14px;
91+
color: #333;
92+
}
93+
94+
h2 {
95+
margin-bottom: 10px;
96+
color: #555;
97+
}
98+
99+
.flex {
100+
display: flex;
101+
}
102+
103+
.align-center {
104+
align-items: center;
105+
}
106+
107+
.justify-beteen {
108+
justify-content: space-between;
109+
}
110+
</style>
111+
</head>
112+
113+
<body>
114+
<div class="container">
115+
<div class="row">
116+
<div class="input-output-container">
117+
<h2>JSON</h2>
118+
<textarea id="data" placeholder="JSON或JS对象">
119+
</textarea>
120+
</div>
121+
<div class="input-output-container">
122+
<div class="flex justify-beteen align-center">
123+
<h2>压缩后文本</h2>
124+
<small id="length"></small>
125+
</div>
126+
<textarea id="content" placeholder="压缩后文本"></textarea>
127+
</div>
128+
</div>
129+
<div class="flex" style="margin: 0 -10px;">
130+
<button id="compress">&gt;&gt; 压缩 &gt;&gt;</button>
131+
<button id="decompress">&lt;&lt; 解压 &lt;&lt;</button>
132+
</div>
133+
</div>
134+
<script src="//unpkg.com/@kscript/require"></script>
135+
<script type="module">
136+
const jsonpack = await require('../index.js')
137+
const dataElement = document.getElementById('data')
138+
const contentElement = document.getElementById('content')
139+
const compressElement = document.getElementById('compress')
140+
const decompressElement = document.getElementById('decompress')
141+
const lengthElement = document.getElementById('length')
142+
const defaultData = {
143+
a: 1,
144+
aa: 11,
145+
aaa: 111,
146+
aaaa: {
147+
b: 2,
148+
bb: 22,
149+
bbb: 222,
150+
bbbb: {
151+
a: 3,
152+
aa: 33,
153+
aa: 333
154+
}
155+
},
156+
d: [
157+
{
158+
a: 1,
159+
d: 4
160+
},
161+
{
162+
aa: 11,
163+
dd: 44
164+
},
165+
{
166+
aaa: 111,
167+
ddd: 444
168+
},
169+
{
170+
aaaa: 1111,
171+
dddd: 4444
172+
},
173+
{
174+
aaaa: 1111,
175+
dddd: 4444
176+
},
177+
{
178+
aaaa: 1111,
179+
dddd: 4444
180+
}
181+
]
182+
}
183+
184+
const convert = (type) => {
185+
if (type === 0) {
186+
try {
187+
const data = eval(`(${dataElement.value})`)
188+
contentElement.value = jsonpack.compress(data)
189+
contentElement.dispatchEvent(new Event('change'))
190+
} catch (e) {
191+
alert('参数错误, 压缩失败')
192+
}
193+
} else if (type === 1) {
194+
const content = contentElement.value
195+
if (content.length === 0) {
196+
alert('空字符串, 解压失败')
197+
}
198+
dataElement.value = JSON.stringify(jsonpack.decompress(content), null, 2)
199+
}
200+
}
201+
202+
dataElement.value = JSON.stringify(defaultData, null, 2)
203+
compressElement.addEventListener('click', () => convert(0))
204+
decompressElement.addEventListener('click', () => convert(1))
205+
contentElement.addEventListener('change', () => {
206+
lengthElement.innerText = '压缩后长度:' + contentElement.value.length
207+
})
208+
</script>
209+
</body>
210+
211+
</html>

0 commit comments

Comments
 (0)