[{"data":1,"prerenderedAt":266},["ShallowReactive",2],{"/articles/frontend-tips":3},{"id":4,"title":5,"body":6,"date":254,"description":255,"extension":256,"featured":66,"meta":257,"navigation":66,"path":258,"seo":259,"stem":260,"tags":261,"__hash__":265},"articles/articles/frontend-tips.md","2026 年前端开发技巧分享",{"type":7,"value":8,"toc":246},"minimark",[9,13,18,22,133,137,140,182,186,189,236,239,242],[10,11,12],"h2",{"id":12},"前端开发技巧",[14,15,17],"h3",{"id":16},"_1-使用-css-container-queries","1. 使用 CSS Container Queries",[19,20,21],"p",{},"Container Queries 让组件可以根据父容器的尺寸来调整样式：",[23,24,29],"pre",{"className":25,"code":26,"language":27,"meta":28,"style":28},"language-css shiki shiki-themes github-light github-dark",".card-container {\n  container-type: inline-size;\n}\n\n@container (min-width: 400px) {\n  .card {\n    display: grid;\n    grid-template-columns: 1fr 2fr;\n  }\n}\n","css","",[30,31,32,45,55,61,68,78,86,101,122,128],"code",{"__ignoreMap":28},[33,34,37,41],"span",{"class":35,"line":36},"line",1,[33,38,40],{"class":39},"sScJk",".card-container",[33,42,44],{"class":43},"sVt8B"," {\n",[33,46,48,52],{"class":35,"line":47},2,[33,49,51],{"class":50},"sj4cs","  container-type",[33,53,54],{"class":43},": inline-size;\n",[33,56,58],{"class":35,"line":57},3,[33,59,60],{"class":43},"}\n",[33,62,64],{"class":35,"line":63},4,[33,65,67],{"emptyLinePlaceholder":66},true,"\n",[33,69,71,75],{"class":35,"line":70},5,[33,72,74],{"class":73},"szBVR","@container",[33,76,77],{"class":43}," (min-width: 400px) {\n",[33,79,81,84],{"class":35,"line":80},6,[33,82,83],{"class":39},"  .card",[33,85,44],{"class":43},[33,87,89,92,95,98],{"class":35,"line":88},7,[33,90,91],{"class":50},"    display",[33,93,94],{"class":43},": ",[33,96,97],{"class":50},"grid",[33,99,100],{"class":43},";\n",[33,102,104,107,109,112,115,118,120],{"class":35,"line":103},8,[33,105,106],{"class":50},"    grid-template-columns",[33,108,94],{"class":43},[33,110,111],{"class":50},"1",[33,113,114],{"class":73},"fr",[33,116,117],{"class":50}," 2",[33,119,114],{"class":73},[33,121,100],{"class":43},[33,123,125],{"class":35,"line":124},9,[33,126,127],{"class":43},"  }\n",[33,129,131],{"class":35,"line":130},10,[33,132,60],{"class":43},[14,134,136],{"id":135},"_2-利用-view-transitions-api","2. 利用 View Transitions API",[19,138,139],{},"创建流畅的页面过渡动画：",[23,141,145],{"className":142,"code":143,"language":144,"meta":28,"style":28},"language-js shiki shiki-themes github-light github-dark","document.startViewTransition(() => {\n  // 更新 DOM\n  updateContent()\n})\n","js",[30,146,147,163,169,177],{"__ignoreMap":28},[33,148,149,152,155,158,161],{"class":35,"line":36},[33,150,151],{"class":43},"document.",[33,153,154],{"class":39},"startViewTransition",[33,156,157],{"class":43},"(() ",[33,159,160],{"class":73},"=>",[33,162,44],{"class":43},[33,164,165],{"class":35,"line":47},[33,166,168],{"class":167},"sJ8bj","  // 更新 DOM\n",[33,170,171,174],{"class":35,"line":57},[33,172,173],{"class":39},"  updateContent",[33,175,176],{"class":43},"()\n",[33,178,179],{"class":35,"line":63},[33,180,181],{"class":43},"})\n",[14,183,185],{"id":184},"_3-使用-temporal-api","3. 使用 Temporal API",[19,187,188],{},"JavaScript 的新日期时间 API：",[23,190,192],{"className":142,"code":191,"language":144,"meta":28,"style":28},"const now = Temporal.Now.zonedDateTime()\nconst tomorrow = now.add({ days: 1 })\n",[30,193,194,213],{"__ignoreMap":28},[33,195,196,199,202,205,208,211],{"class":35,"line":36},[33,197,198],{"class":73},"const",[33,200,201],{"class":50}," now",[33,203,204],{"class":73}," =",[33,206,207],{"class":43}," Temporal.Now.",[33,209,210],{"class":39},"zonedDateTime",[33,212,176],{"class":43},[33,214,215,217,220,222,225,228,231,233],{"class":35,"line":47},[33,216,198],{"class":73},[33,218,219],{"class":50}," tomorrow",[33,221,204],{"class":73},[33,223,224],{"class":43}," now.",[33,226,227],{"class":39},"add",[33,229,230],{"class":43},"({ days: ",[33,232,111],{"class":50},[33,234,235],{"class":43}," })\n",[10,237,238],{"id":238},"总结",[19,240,241],{},"保持学习，关注 Web 平台的新特性，能让你的开发工作更加高效。",[243,244,245],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":28,"searchDepth":47,"depth":47,"links":247},[248,253],{"id":12,"depth":47,"text":12,"children":249},[250,251,252],{"id":16,"depth":57,"text":17},{"id":135,"depth":57,"text":136},{"id":184,"depth":57,"text":185},{"id":238,"depth":47,"text":238},"2026-06-10","分享一些实用的前端开发技巧和最佳实践","md",{},"/articles/frontend-tips",{"title":5,"description":255},"articles/frontend-tips",[262,263,264],"前端","JavaScript","Vue","F-ja4fQFhyBL6icWxm9_Ak9puEq11sxeWeZSiFPtf_Q",1783865040172]