[{"data":1,"prerenderedAt":262},["ShallowReactive",2],{"content:\u002F2024\u002Fmagic-code":3,"surround:\u002F2024\u002Fmagic-code":251},{"id":4,"title":5,"body":6,"categories":225,"date":227,"description":228,"draft":229,"extension":230,"image":231,"meta":232,"navigation":234,"path":235,"permalink":231,"published":231,"readingTime":236,"recommend":231,"references":231,"seo":241,"sitemap":242,"stem":243,"tags":244,"type":248,"updated":249,"__hash__":250},"content\u002Fposts\u002F2024\u002Fmagic-code.md","写过的奇妙代码。",{"type":7,"value":8,"toc":217},"minimark",[9,14,27,72,80,83,88,91,95,98,101,109,112,158,171,176,179,182,188,191,197,200,206,211,214],[10,11,13],"h2",{"id":12},"c-语言排序根据条件选择排序依据","C 语言排序：根据条件选择排序依据",[15,16,17,18,22,23,26],"p",{},"这是一个简单的 ls 实现，于2023年3月4日学习 C 语言时编写。82 行处使用了选择排序，但是排序条件会根据参数的设置（",[19,20,21],"code",{"code":21},"-t"," ",[19,24,25],{"code":25},"-r","）来选择排序的依据：",[28,29,30,51,62],"ul",{},[31,32,33,39,40,43,44,46,47,50],"li",{},[19,34,37],{"className":35,"code":37,"language":38},[36],"language-c","!!(param & P_r)","c","：检查参数 param 是否设置了标志位 ",[19,41,42],{"code":42},"P_r","（",[19,45,25],{"code":25}," 是逆序参数）。双感叹号 ",[19,48,49],{"code":49},"!!"," 用于将布尔值转换为 0 或 1。",[31,52,53,54,58,59,61],{},"逻辑异或运算 ",[19,55,57],{"className":56,"code":57,"language":38},[36],"^","：根据 ",[19,60,42],{"code":42}," 设置情况，决定后续的排序判断结果是否需要翻转。",[31,63,64,39,68,71],{},[19,65,67],{"className":66,"code":67,"language":38},[36],"(param & P_t)",[19,69,70],{"code":70},"P_t","。如果设置了，则表示需要根据文件的修改时间进行排序，否则根据文件名进行排序。",[73,74,78],"pre",{"className":75,"code":76,"language":38,"meta":77},[36],"\u002F\u002F 排序文件列表\nfor (int i = 1, j, temp; i \u003C entc; i++) {\n    temp = enti[i];\n    for (j = i;\n         \u002F\u002F 排序的 condition 很长\n         j > 0 && !!(param & P_r) ^ (param & P_t\n             ? entv[enti[j - 1]].mtime > entv[temp].mtime\n             : strcmp(entv[enti[j - 1]].name, entv[temp].name) > 0);\n        j--)\n        enti[j] = enti[j - 1];\n    enti[j] = temp;\n}\n","",[19,79,76],{"__ignoreMap":77},[15,81,82],{},"这里的排序的条件比较复杂，但是有效简化了排序的逻辑，不需要再写很多 if 语句来判断排序条件。",[84,85],"link-card",{"link":86,"title":87},"\u002F2023\u002Fzls","Linux 下简单 ls 命令的实现",[15,89,90],{},"程序中关于参数解析的内容也比较有意思，使用了宏函数来解析参数，同时二进制标志位来存储参数。",[10,92,94],{"id":93},"html-模板生成器","HTML 模板生成器",[15,96,97],{},"2023年2月7日，我建立了一个简单的网址导航页面。4 天后，我和半岛的孤城聊了聊，他觉得用 HTML 手搓导航项不够优雅，于是推荐我用类似 JSON 的结构来维护导航项。",[15,99,100],{},"他推荐我用 JS 的模板字符串来生成导航，但是遇到了一些问题，最后发现是生成的 HTML 标签没有正确闭合，导致浏览器报错。同时，由于我的导航项比较复杂，所以写出的模板生成器代码也很抽象。",[73,102,107],{"className":103,"code":105,"language":106,"meta":77},[104],"language-js","const nav = {\n    name: 'CO导航',\n    description: '',\n    list: [],\n    ele: document.getElementsByClassName('navlist'),\n}\n\nnav.list[0] = [{\n    name: '线上课时',\n    icon: 'fa-solid fa-chalkboard-user',\n    item: [\n        { text: '学习通', icon: 'iconfont icon-chaoxing', link: 'http:\u002F\u002Fi.chaoxing.com\u002F' },\n    ]\n}, {\n    name: '西邮生活',\n    icon: 'fa-solid fa-school',\n    item: [\n        { text: '我在校园', desc: '网页版登录', icon: 'fa-solid fa-location-dot', js: 'dialog.showMsg(this.textContent)' },\n    ]\n},]\n\nnav.list.forEach((list, i) => {\n    nav.ele[i].innerHTML = list.map(group => `\n    \u003Cdiv class=\"card\">\n    \u003Cdiv class=\"between\">\n    \u003Ch4>\u003Ci class=\"${group.icon} fa-space\">\u003C\u002Fi>${group.name}\u003C\u002Fh4>\n    ${group.desc ? `\u003Cp class=\"dim\">${group.desc}\u003C\u002Fp>` : ``}\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"list\">\n    ${group.item.map(item => `\n      \u003Ca data-sub=\"${item.desc || ''}\"\n      ${item.js ? `onclick=\"${item.js}\"` : `href=\"${item.link}\"`}\n    >${item.icon ? `\u003Ci class=\"${item.icon} fa-space\">\u003C\u002Fi>` : ``}${item.text}\u003C\u002Fa>\n    `).join(`\\n`)}\n    \u003C\u002Fdiv>\n    \u003C\u002Fdiv>`).join(`\\n`)\n})\n","js",[19,108,105],{"__ignoreMap":77},[15,110,111],{},"模板生成器的嵌套结构比较复杂：",[28,113,114,127,140],{},[31,115,116,117,121,122,126],{},"使用 ",[19,118,120],{"className":119,"code":120,"language":106},[104],"nav.list.forEach()"," 遍历名为 ",[19,123,125],{"className":124,"code":125,"language":106},[104],"nav.list"," 里的每一个导航块。",[31,128,129,130,134,135,139],{},"在每个导航块中，使用 ",[19,131,133],{"className":132,"code":133,"language":106},[104],"map()"," 方法创建新的字符串数组，使用 ",[19,136,138],{"className":137,"code":138,"language":106},[104],"join()"," 方法将数组里的导航组拼接为字符串。",[31,141,142,143,134,146,149,150],{},"在每个导航组中，使用 ",[19,144,133],{"className":145,"code":133,"language":106},[104],[19,147,138],{"className":148,"code":138,"language":106},[104]," 方法将数组里的导航项拼接为字符串。\n",[28,151,152,155],{},[31,153,154],{},"导航项可能会有图标、小字描述。",[31,156,157],{},"有的导航项不是链接，而是 JS 脚本。",[15,159,160,161,165,166,170],{},"其实也可以用 ",[19,162,164],{"className":163,"code":164,"language":106},[104],"createElement()"," 和 ",[19,167,169],{"className":168,"code":169,"language":106},[104],"appendChild()"," 来生成 HTML，或者 Vue 的组件也很方便。不过，用原生 JavaScript 写出来了这些，感觉还是挺奇妙的。",[84,172],{"link":173,"title":174,"icon":175},"https:\u002F\u002Fcooo.site\u002F","CO导航 - 西邮导航服务","https:\u002F\u002Fcooo.site\u002Ffavicon.ico",[10,177,178],{"id":178},"面向函数而不是面向过程",[15,180,181],{},"2024年4月6日，我在维护一个网页工具的背景列表。由于这个项目已经运营了三年，背景列表已经有了四百多张图片，并且还携带了一些描述信息。为了让代码看起来短一些，我先使用比较抽象的数据结构来存储，在使用时再生成更友好的数据结构。",[73,183,186],{"className":184,"code":185,"language":106,"meta":77},[104],"const gallery = {\n    End22: [['呱唧', '山望', '2\u002F12\u002F16\u002FHBqoL'], ['呱唧', '瞰林', '2\u002F12\u002F16\u002FHBBGX'],],\n    Jan23: [['酸子', '云中印象', '3\u002F01\u002F03\u002FE8Lwa'], ['酸子', '镜中暮', '3\u002F01\u002F03\u002FE8HSK'],],\n}\n",[19,187,185],{"__ignoreMap":77},[15,189,190],{},"经过某个处理函数后，它应当变成这种结构：",[73,192,195],{"className":193,"code":194,"language":106,"meta":77},[104],"const galleryFlated = [\n    { vol: 'End22', author: '呱唧', name: '山望', url: 'https:\u002F\u002Fooo.0x0.ooo\u002F2022\u002F12\u002F16\u002FHBqoL.jpg' },\n    { vol: 'End22', author: '呱唧', name: '瞰林', url: 'https:\u002F\u002Fooo.0x0.ooo\u002F2022\u002F12\u002F16\u002FHBBGX.jpg' },\n    { vol: 'Jan23', author: '酸子', name: '云中印象', url: 'https:\u002F\u002Fooo.0x0.ooo\u002F2023\u002F01\u002F03\u002FE8Lwa.jpg' },\n    { vol: 'Jan23', author: '酸子', name: '镜中暮', url: 'https:\u002F\u002Fooo.0x0.ooo\u002F2023\u002F01\u002F03\u002FE8HSK.jpg' }\n]\n",[19,196,194],{"__ignoreMap":77},[15,198,199],{},"刚开始使用面向过程的方式来处理，后来发现，使用面向函数的方式更简短清晰。",[73,201,204],{"className":202,"code":203,"language":106,"meta":77},[104],"const galleryFlated = Object.entries(gallery).flatMap(([vol, picInfos]) =>\n    picInfos.map(([author, name, shortURL]) => ({\n        vol,\n        author,\n        name,\n        url: `https:\u002F\u002Fooo.0x0.ooo\u002F202${shortURL}.jpg`,\n    }))\n)\n",[19,205,203],{"__ignoreMap":77},[84,207],{"link":208,"title":209,"icon":210},"https:\u002F\u002Fexam.thisis.host","考试时钟","https:\u002F\u002Fexam.thisis.host\u002Ffavicon.ico",[10,212,213],{"id":213},"总结",[15,215,216],{},"这些代码不算是 Best Practice，甚至有些抽象，不过挺有意思的。",{"title":77,"searchDepth":218,"depth":218,"links":219},4,[220,222,223,224],{"id":12,"depth":221,"text":13},2,{"id":93,"depth":221,"text":94},{"id":178,"depth":221,"text":178},{"id":213,"depth":221,"text":213},[226],"开发","2024-04-07 12:32:11","这些代码不算是 Best Practice，也不算是常见的写法，令人眼前一亮\u002F黑。",false,"md",null,{"slots":233},{},true,"\u002F2024\u002Fmagic-code",{"text":237,"minutes":238,"time":239,"words":240},"6 min read",5.415,324900,1083,{"title":5,"description":228},{"loc":235},"posts\u002F2024\u002Fmagic-code",[245,246,247],"代码随笔","编程实验","笔记","tech","2024-04-07 20:38:20","CkOXIK1TLf_JSgQKxATl-5XfgVVqXV54Ldiud-d0p2Q",[252,257],{"title":253,"path":254,"stem":255,"date":256,"type":248,"children":-1},"Arch Linux 启动引导修复","\u002F2024\u002Farchlinux-boot-repair","posts\u002F2024\u002Farchlinux-boot-repair","2024-04-01 23:14:39",{"title":258,"path":259,"stem":260,"date":261,"type":248,"children":-1},"把博客文章按年份放在子文件夹中了","\u002F2024\u002Fblog-link-pattern","posts\u002F2024\u002Fblog-link-pattern","2024-04-29 11:10:18",1782091376076]