JS对象应用实例
<div class="codebox" data-prev="1"><!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>My Website</title>
<meta name="generator" content="EverEdit" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<body>
<style>
body { background: #333; color: white; }
.xContainer { margin: 20px auto; margin-top: 60px; width: 80vw; height: 80vh; display: flex; gap: 50px; flex-wrap: wrap; align-content: space-between; }
.xCard { flex: 1 0 20vw; height: 32vh; background: #666; border-radius: 8px; box-shadow: 0 0 4px silver; padding: 20px; transition: .3s; overflow: hidden; scrollbar-width: thin; scrollbar-color: tan transparent; }
.xCard:hover { background: #444; box-shadow: 4px 2px 8px silver; overflow: auto; }
.xCard:empty { opacity: 0.5; }
.xCard a { color: snow; text-decoration: none; }
.xCard a:hover { text-decoration: underline wavy silver; }
.xCard h2 { margin: 0; padding: 0; }
.tMid { text-align: center; }
</style>
<h1 class="tMid">💎 聚宝盆</h1>
<div class="xContainer">
<div class="xCard"></div>
<div class="xCard"></div>
<div class="xCard"></div>
<div class="xCard"></div>
<div class="xCard"></div>
<div class="xCard"></div>
</div>
<script>
var xCards = document.querySelectorAll('.xCard');
var xDatas = {
x1: {
title: '暗夜空间',
icon: '✨',
urls: [
{ name: '马黑整站系统', url: 'http://mhh.52qingyin.cn/' },
{ name: '帖宝', url: 'http://mhh.52qingyin.cn/api/tiebao/tiebao.html' },
{ name: 'SVGDR', url: 'http://mhh.52qingyin.cn/api/svgdr/tool/' },
{ name: 'V5高能电饭煲', url: 'http://mhh.52qingyin.cn/art/bshow.php?st=5&sd=5&art=mahei_1772025886' },
{ name: '音画帖快手', url: 'http://mhh.52qingyin.cn/art/bshow.php?st=5&sd=5&art=mahei_1774501446' },
],
},
x2: {
title: '前端高能',
icon: '🕯️',
urls: [
{ name: '现代 JavaScript 教程', url: 'https://zh.javascript.info/' },
{ name: 'Eloquent JavaScript（2024版）', url: 'https://eloquent.javascript.ac.cn/' },
{ name: 'JS 函数式编程『简明教程』', url: 'https://juejin.cn/post/7083890927298674724' },
{ name: 'User Agent Man', url: 'https://www.useragentman.com/blog/' },
],
},
};
function makecard(elements, datas) {
Object.keys(datas).forEach((key, idx) => {
var xData = datas;
var frg = new DocumentFragment();
var h2 = document.createElement('h2');
h2.innerHTML = `<span>${xData.icon}</span> ${xData.title}`;
frg.appendChild(h2);
var ol = document.createElement('ol');
var liFrg = new DocumentFragment();
xData.urls.forEach(url => {
var li = document.createElement('li');
li.innerHTML = `<a href="${url.url}" target="_blank">${url.name}</a>`;
liFrg.appendChild(li);
});
ol.appendChild(liFrg);
frg.appendChild(ol);
elements.appendChild(frg);
});
}
makecard(xCards, xDatas);
</script>
</body>
</html>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/helight/linenumber.js';
linenumber();
</script> <style>
.artBox { font: normal 18px/1.5 sans-serif; overflow: auto; position: relative; }
.artBox p { margin: 10px 0; }
.artBox h1, .artBox h2 { margin: 8px 0; }
.artBox code, .artBox pre { background: #f7f4f3; padding: 2px 6px; tab-size: 4; }
.artBox pre { padding: 10px 20px; white-space: pre-wrap; word-wrap: break-word; }
.artBox pre code { padding: 0; background: none; }
</style>
<div class="artBox">
<h1>JS对象应用实例解释</h1>
<p>这是一个卡片式的导航Web页，导航数据使用JavaScript对象组织和存储、动态生成卡片内的具体内容。</p>
<h2>设计思路：</h2>
<ol>
<li>
<p>使用flex弹性布局制作 3*2 的卡片页面。卡片为 flex 项目，项目内容为空，其内容将由JS填充完成。</p>
</li>
<li>
<p>JS对象命名为 x1、x2、……、x6，每一个对象有嵌套子对象，内容包括卡片标题（title）、卡片图标（icon）、导航链接数组（urls），链接数组内容又由JS对象组成，包含锚名称（name）、链接网址（url）。</p>
</li>
</ol>
<h2>实现核心：</h2>
<h3>一、CSS设置</h3>
<pre><code>body ： 底色暗色，文本白色
flex容器 ：宽度80vw、高度80vw,水平居中，允许项目折行
flex项目 ：卡片，设置合适的宽高使之在容器主轴能排下三个，设计一些动态效果
锚选择器 ：即a标签，设计恰当的动态效果
其它 ：根据需要设置（例如 .tMid 选择器、一些伪类选择器等）</code></pre>
<h3>二、JS实现核心</h3>
<h4>（一）创建存储数据的JS对象</h4>
<pre><code>var xDatas = {
x1: {
title: '卡片名称',
icon: '🌙',
urls: [
{ name: '锚1名称', url: '网址1' },
{ name: '锚2名称', url: '网址2' },
/* 更多相同结构的数据 */
],
},
/* 这里是 x2、x3 等，还没准备好可以暂时不写 */
};</code></pre>
<p>数据结构前后要一致，方便后续以统一的方式处理数据。锚（urls）使用的是数组包裹子对象，更易于处理。</p>
<h4>（二）设计处理数据的核心函数</h4>
<pre><code>/* 生成卡片内容函数
参数 elements : 写入内容元素集合
参数 datas : JS对象变量
*/
function makecard(elements, datas) {
// 遍历 datas 对象
Object.keys(datas).forEach((key, idx) => {
var xData = datas;
var frg = new DocumentFragment(); // 创建文档碎片1
var h2 = document.createElement('h2'); // 创建卡片标题
h2.innerHTML = `<span>${xData.icon}</span> ${xData.title}`;
frg.appendChild(h2); // 标题加入文档碎片1
var ol = document.createElement('ol'); // 创建有序列表
var liFrg = new DocumentFragment(); // 创建文档碎片2
// 遍历锚数组
xData.urls.forEach(url => {
var li = document.createElement('li'); // 创建有序列表子元素
li.innerHTML = `<a href="${url.url}" target="_blank">${url.name}</a>`;
liFrg.appendChild(li); // li元素加入文档碎片2
});
ol.appendChild(liFrg); // 文档碎片2加入ol有序列表
frg.appendChild(ol); // ol有序列表加入文档碎片1
elements.appendChild(frg); // 文档碎片1加入对应元素
});
}</code></pre>
<p>执行上述函数时需要正确传参，其中的元素集合变量 elements 可根据HTML标签结构拿到，详情见一楼实例代码。</p>
</div> 界面美观，内容经典，交互友好，实例典范，谢谢马老师精彩讲授{:4_191:} align-centent，是否应为 align-content
lang="en"，是否应是 lang="zh-CN"
这个看着有些难，设计得很精细，卡片还设置了icon:呢，看着更有特点。
虽然这个代码感觉难，但这个实例还真的是《聚宝盆》啊，链接的都是好东西啊{:4_199:} 杨帆 发表于 2026-3-30 14:40
界面美观，内容经典，交互友好，实例典范，谢谢马老师精彩讲授
{:4_191:} 杨帆 发表于 2026-3-30 14:47
align-centent，是否应为 align-content
lang="en"，是否应是 lang="zh-CN"
感谢提醒！
手搓代码，手误了 红影 发表于 2026-3-30 20:25
这个看着有些难，设计得很精细，卡片还设置了icon:呢，看着更有特点。
虽然这个代码感觉难，但这个实例还 ...
核心函数是有点抽象，尤其对JS基础较弱的而言。这里面使用了两个文档碎片变量，以便提升函数的运行性能。即使不用文档碎片，多层且循环地创建元素，对JS新手来说是难以理解的。
总的来讲，函数需要根据所提供的JS对象，动态地给对应的卡片（div元素）添加 ol 列表，而又得给 ol 动态添加 li 子元素，所以使用了外、内两个循环：外循环创建的是 h2 和 ol，内循环创建的是 ol 的子元素 li，看着可能有点复杂，但逻辑在那里。
至于聚宝盆还谈不上，只是举个实例，数据并不全面（只有两组JS对象数据）。 马黑黑 发表于 2026-3-30 22:56
感谢提醒！
手搓代码，手误了
马老师您辛苦了~谢谢精彩讲授与示范{:4_180:} 杨帆 发表于 2026-3-30 23:22
马老师您辛苦了~谢谢精彩讲授与示范
{:4_191:} 马黑黑 发表于 2026-3-30 23:04
核心函数是有点抽象，尤其对JS基础较弱的而言。这里面使用了两个文档碎片变量，以便提升函数的运行性能。 ...
是的，想明白逻辑，更容易理解一些。
这个的确是聚宝盆啊，链接的都是好东西呢{:4_187:} 红影 发表于 2026-3-31 23:45
是的，想明白逻辑，更容易理解一些。
这个的确是聚宝盆啊，链接的都是好东西呢
链接只是做个演示，具体内容可以自行收集 马黑黑 发表于 2026-4-1 07:46
链接只是做个演示，具体内容可以自行收集
一下子看到这么多整理好的好东西，还是开心的{:4_187:}
页:
[1]