")]),e("\n"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("div")]),t("span",{class:"token punctuation"},">")]),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br")])],-1),Ka=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".parent"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"display"),t("span",{class:"token punctuation"},":"),e(" flex"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".child"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"/* this will push child to the right of parent border */"),e("\n "),t("span",{class:"token property"},"margin-left"),t("span",{class:"token punctuation"},":"),e(" auto"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br")])],-1),$a=t("h3",{id:"pseudo-elements-of-flex-box"},[t("a",{class:"header-anchor",href:"#pseudo-elements-of-flex-box","aria-hidden":"true"},"#"),e(" Pseudo Elements of Flex Box")],-1),nt=t("p",null,[e("set "),t("code",null,"flex"),e(" to pseudo elements of flex box will change width of pseudo elements.")],-1),st=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".flex"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"display"),t("span",{class:"token punctuation"},":"),e(" flex"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".flex::before"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"position"),t("span",{class:"token punctuation"},":"),e(" relative"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/* no need for absolute position */"),e("\n "),t("span",{class:"token property"},"display"),t("span",{class:"token punctuation"},":"),e(" block"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br")])],-1),at=t("h3",{id:"fixed-sidebar-with-flexbox"},[t("a",{class:"header-anchor",href:"#fixed-sidebar-with-flexbox","aria-hidden":"true"},"#"),e(" Fixed Sidebar with Flexbox")],-1),tt=t("div",{class:"language-html line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("body")]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("aside")]),t("span",{class:"token punctuation"},">")]),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("aside")]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("main")]),t("span",{class:"token punctuation"},">")]),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("main")]),t("span",{class:"token punctuation"},">")]),e("\n"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("body")]),t("span",{class:"token punctuation"},">")]),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br")])],-1),et=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},"body"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"height"),t("span",{class:"token punctuation"},":"),e(" 100vh"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"margin"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"display"),t("span",{class:"token punctuation"},":"),e(" flex"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},"aside"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"flex"),t("span",{class:"token punctuation"},":"),e(" 0 0 auto"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/* inflexible */"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},"main"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"flex"),t("span",{class:"token punctuation"},":"),e(" 1 1 auto"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/* auto flexible */"),e("\n "),t("span",{class:"token property"},"overflow"),t("span",{class:"token punctuation"},":"),e(" auto"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br")])],-1),lt=t("h3",{id:"flexbox-best-practice"},[t("a",{class:"header-anchor",href:"#flexbox-best-practice","aria-hidden":"true"},"#"),e(" Flexbox Best Practice")],-1),ot=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".container"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"display"),t("span",{class:"token punctuation"},":"),e(" -webkit-flex"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"display"),t("span",{class:"token punctuation"},":"),e(" flex"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".initial"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"/*width: 100px~200px*/"),e("\n "),t("span",{class:"token property"},"-webkit-flex"),t("span",{class:"token punctuation"},":"),e(" initial"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"flex"),t("span",{class:"token punctuation"},":"),e(" initial"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"width"),t("span",{class:"token punctuation"},":"),e(" 200px"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"min-width"),t("span",{class:"token punctuation"},":"),e(" 100px"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n"),t("span",{class:"token selector"},".none"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"/*width: 200px*/"),e("\n "),t("span",{class:"token property"},"-webkit-flex"),t("span",{class:"token punctuation"},":"),e(" none"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"flex"),t("span",{class:"token punctuation"},":"),e(" none"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"width"),t("span",{class:"token punctuation"},":"),e(" 200px"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n"),t("span",{class:"token selector"},".flex1"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"/*width: left width * 1/3*/"),e("\n "),t("span",{class:"token property"},"-webkit-flex"),t("span",{class:"token punctuation"},":"),e(" 1"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"flex"),t("span",{class:"token punctuation"},":"),e(" 1"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n"),t("span",{class:"token selector"},".flex2"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"/*width: left width * 2/3*/"),e("\n "),t("span",{class:"token property"},"-webkit-flex"),t("span",{class:"token punctuation"},":"),e(" 2"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"flex"),t("span",{class:"token punctuation"},":"),e(" 2"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br"),t("span",{class:"line-number"},"25"),t("br"),t("span",{class:"line-number"},"26"),t("br"),t("span",{class:"line-number"},"27"),t("br"),t("span",{class:"line-number"},"28"),t("br")])],-1),ct=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token comment"},"/*子元素全部居中对齐*/"),e("\n"),t("span",{class:"token selector"},".vertical-container"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"height"),t("span",{class:"token punctuation"},":"),e(" 300px"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token property"},"display"),t("span",{class:"token punctuation"},":"),e(" -webkit-flex"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"display"),t("span",{class:"token punctuation"},":"),e(" flex"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token property"},"-webkit-align-items"),t("span",{class:"token punctuation"},":"),e(" center"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"align-items"),t("span",{class:"token punctuation"},":"),e(" center"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"-webkit-justify-content"),t("span",{class:"token punctuation"},":"),e(" center"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"justify-content"),t("span",{class:"token punctuation"},":"),e(" center"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br")])],-1),pt=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".layer"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"display"),t("span",{class:"token punctuation"},":"),e(" flex"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"margin"),t("span",{class:"token punctuation"},":"),e(" 5px"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"flex-direction"),t("span",{class:"token punctuation"},":"),e(" row"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"justify-content"),t("span",{class:"token punctuation"},":"),e(" flex-start"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"align-items"),t("span",{class:"token punctuation"},":"),e(" center"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"border"),t("span",{class:"token punctuation"},":"),e(" 1px solid #000"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background-color"),t("span",{class:"token punctuation"},":"),e(" #fff"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"flex-grow"),t("span",{class:"token punctuation"},":"),e(" 1"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br")])],-1),ut=t("h2",{id:"grid-patterns"},[t("a",{class:"header-anchor",href:"#grid-patterns","aria-hidden":"true"},"#"),e(" Grid Patterns")],-1),rt=t("p",null,[t("a",{href:"https://css-tricks.com/snippets/css/complete-guide-grid",target:"_blank",rel:"noopener noreferrer"},"Grid Complete Guide")],-1),it=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".container"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"grid-template-columns"),t("span",{class:"token punctuation"},":"),e(" 1fr 1fr 1fr"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"grid-template-columns"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"repeat"),t("span",{class:"token punctuation"},"("),e("3"),t("span",{class:"token punctuation"},","),e(" 1fr"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token comment"},"/*\n * grid-template-columns:\n * repeat([auto-fit / auto-fill / numbers], minmax(60px, 1fr));\n */"),e("\n\n "),t("span",{class:"token property"},"grid-template-rows"),t("span",{class:"token punctuation"},":"),e(" 1fr 1fr 1fr"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"grid-template-rows"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"minmax"),t("span",{class:"token punctuation"},"("),e("90px"),t("span",{class:"token punctuation"},","),e(" 1fr"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token property"},"grid-template-areas"),t("span",{class:"token punctuation"},":"),e("\n "),t("span",{class:"token string"},"'header header header'"),e("\n "),t("span",{class:"token string"},"'advert content content'"),e("\n "),t("span",{class:"token string"},"'footer footer footer'"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token property"},"grid-gap"),t("span",{class:"token punctuation"},":"),e(" 10px"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"justify-items"),t("span",{class:"token punctuation"},":"),e(" center"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"align-items"),t("span",{class:"token punctuation"},":"),e(" end"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".item"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"grid-row"),t("span",{class:"token punctuation"},":"),e(" start / end"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/* 2 / -1 */"),e("\n "),t("span",{class:"token property"},"grid-column"),t("span",{class:"token punctuation"},":"),e(" start / end"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"grid-area"),t("span",{class:"token punctuation"},":"),e(" footer"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token comment"},"/* grid-area: hstart / vstart / hend / vend */"),e("\n "),t("span",{class:"token property"},"justify-self"),t("span",{class:"token punctuation"},":"),e(" center"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"align-self"),t("span",{class:"token punctuation"},":"),e(" end"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br"),t("span",{class:"line-number"},"25"),t("br"),t("span",{class:"line-number"},"26"),t("br"),t("span",{class:"line-number"},"27"),t("br"),t("span",{class:"line-number"},"28"),t("br"),t("span",{class:"line-number"},"29"),t("br")])],-1),kt=t("p",null,[e("Responsive "),t("code",null,"grid"),e(" layout")],-1),bt=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".items"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"display"),t("span",{class:"token punctuation"},":"),e(" grid"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"grid-template-columns"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"repeat"),t("span",{class:"token punctuation"},"("),e("auto-fit"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token function"},"minmax"),t("span",{class:"token punctuation"},"("),e("400px"),t("span",{class:"token punctuation"},","),e(" 1fr"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br")])],-1),mt=t("p",null,[t("em",null,"named"),e(" rows and columns")],-1),dt=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".main"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"display"),t("span",{class:"token punctuation"},":"),e(" grid"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"grid-column-gap"),t("span",{class:"token punctuation"},":"),e(" 2rem"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"grid-row-gap"),t("span",{class:"token punctuation"},":"),e(" 1rem"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"grid-template-rows"),t("span",{class:"token punctuation"},":"),e(" [header] 100px [body] auto"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"grid-template-columns"),t("span",{class:"token punctuation"},":"),e(" [l-gutter] 1fr[sidebar] 4fr [content] 8fr [r-gutter] 1fr"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".header"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"grid-row"),t("span",{class:"token punctuation"},":"),e(" header"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"grid-column"),t("span",{class:"token punctuation"},":"),e(" sidebar / right-gutter"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".sidebar"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"grid-row"),t("span",{class:"token punctuation"},":"),e(" body"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"grid-column"),t("span",{class:"token punctuation"},":"),e(" sidebar"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".content"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"grid-row"),t("span",{class:"token punctuation"},":"),e(" body"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"grid-column"),t("span",{class:"token punctuation"},":"),e(" content"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br")])],-1),gt=t("h3",{id:"grid-attention-tips"},[t("a",{class:"header-anchor",href:"#grid-attention-tips","aria-hidden":"true"},"#"),e(" Grid Attention Tips")],-1),ht=t("ul",null,[t("li",null,[t("code",null,"grid-column"),e(" will refactor template of "),t("code",null,"grid"),e(" ("),t("code",null,"grid-template-columns"),e(")")]),t("li",null,[t("code",null,"grid-row"),e(" will refactor template of "),t("code",null,"grid"),e(" ("),t("code",null,"grid-template-rows"),e(")")])],-1),ft=t("h3",{id:"grid-alignment"},[t("a",{class:"header-anchor",href:"#grid-alignment","aria-hidden":"true"},"#"),e(" Grid Alignment")],-1),yt=t("ul",null,[t("li",null,[t("code",null,"justify-content"),e("/"),t("code",null,"align-content"),e(" content within element, attach to "),t("strong",null,"parent"),e(" css selector (effectively adjusts "),t("code",null,"padding"),e(" of parent)")]),t("li",null,[t("code",null,"justify-items"),e("/"),t("code",null,"align-items"),e(),t("code",null,"inline"),e(" items inside box, attach to "),t("strong",null,"parent"),e(" css selector (controls "),t("code",null,"margin"),e(" of children )")]),t("li",null,[t("code",null,"justify-self"),e("/"),t("code",null,"align-self"),e(),t("code",null,"inline"),e(" element within parent, attach to "),t("strong",null,"children"),e(" css selector (effectively adjusts "),t("code",null,"margin"),e(" of children)")])],-1),vt=t("h2",{id:"column-patterns"},[t("a",{class:"header-anchor",href:"#column-patterns","aria-hidden":"true"},"#"),e(" Column Patterns")],-1),xt=t("ul",null,[t("li",null,"float 左右元素 + margin 中间元素"),t("li",null,"float 元素 + width: %")],-1),wt=t("h3",{id:"two-column-pattern"},[t("a",{class:"header-anchor",href:"#two-column-pattern","aria-hidden":"true"},"#"),e(" Two Column Pattern")],-1),St=t("p",null,[e("利用父元素 "),t("code",null,"relative"),e(" 与 子元素 "),t("code",null,"absolute"),e(" 进行布局")],-1),Ct=t("ul",null,[t("li",null,[t("code",null,"inline-block"),e(" + "),t("code",null,"inline-block")]),t("li",null,[t("code",null,"float"),e(" + "),t("code",null,"float")]),t("li",null,[t("code",null,"float"),e(" + "),t("code",null,"margin-left"),e(" (block element ignore float element, inline element surround float element)")]),t("li",null,[t("code",null,"absolute"),e(" + "),t("code",null,"margin-left"),e(" (absolute element not in normal flow)")]),t("li",null,[t("code",null,"float"),e(" + BFC")])],-1),qt=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".div-1"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"position"),t("span",{class:"token punctuation"},":"),e(" relative"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".div-1a"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"position"),t("span",{class:"token punctuation"},":"),e(" absolute"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"top"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"right"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"width"),t("span",{class:"token punctuation"},":"),e(" 200px"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".div-1b"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"position"),t("span",{class:"token punctuation"},":"),e(" absolute"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"top"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"left"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"width"),t("span",{class:"token punctuation"},":"),e(" 200px"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br")])],-1),Ft=t("h3",{id:"three-column-pattern"},[t("a",{class:"header-anchor",href:"#three-column-pattern","aria-hidden":"true"},"#"),e(" Three Column Pattern")],-1),zt=t("h4",{id:"absolute-and-margin-column"},[t("a",{class:"header-anchor",href:"#absolute-and-margin-column","aria-hidden":"true"},"#"),e(" Absolute and Margin Column")],-1),Pt=t("p",null,"position .left and .right with absolute, add margin-left and margin-right to .middle",-1),Tt=t("h4",{id:"float-and-margin-column"},[t("a",{class:"header-anchor",href:"#float-and-margin-column","aria-hidden":"true"},"#"),e(" Float and Margin Column")],-1),Bt=t("div",{class:"language-html line-numbers-mode"},[t("pre",null,[t("code",null,".left .right .middle\n")]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br")])],-1),Mt=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".left"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"float"),t("span",{class:"token punctuation"},":"),e(" left"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".right"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"float"),t("span",{class:"token punctuation"},":"),e(" right"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".middle"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"margin"),t("span",{class:"token punctuation"},":"),e(" 0 right-width 0 left-width"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br")])],-1),_t=t("h4",{id:"float-and-negative-margin-column"},[t("a",{class:"header-anchor",href:"#float-and-negative-margin-column","aria-hidden":"true"},"#"),e(" Float and Negative Margin Column")],-1),jt=t("p",null,"On a floated element, a negative margin opposite the float direction will decrease the float area, causing adjacent elements to overlap the floated element. A negative margin in the direction of the float will pull the floated element in that direction.",-1),At=t("ol",null,[t("li",null,"HTML: .middle first"),t("li",null,[e("padding-left and padding-right to .container, "),t("code",null,"min-width: 2 * (leftWidth + rightWidth)"),e(" to container")]),t("li",null,[e("Float: "),t("code",null,"float: left"),e(" to .left/.middle/.right")]),t("li",null,[e("Negative Margin: "),t("code",null,"margin-left: -100%"),e(" to .left, "),t("code",null,"margin-right: -rightWidth px"),e(" to .right")]),t("li",null,[e("Move: "),t("code",null,"right: leftWidth px"),e(" to .left")])],-1),Lt=t("div",{class:"language-html line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("div")]),e(),t("span",{class:"token attr-name"},"class"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("container"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("div")]),e(),t("span",{class:"token attr-name"},"class"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("middle"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("div")]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("div")]),e(),t("span",{class:"token attr-name"},"class"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("left"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("div")]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("div")]),e(),t("span",{class:"token attr-name"},"class"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("right"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("div")]),t("span",{class:"token punctuation"},">")]),e("\n"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("div")]),t("span",{class:"token punctuation"},">")]),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br")])],-1),Vt=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".container"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"padding"),t("span",{class:"token punctuation"},":"),e(" 0 200px 0 300px"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/* padding-left = .left width, same to .right */"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".container .middle"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"float"),t("span",{class:"token punctuation"},":"),e(" left"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"width"),t("span",{class:"token punctuation"},":"),e(" 100%"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background-color"),t("span",{class:"token punctuation"},":"),e(" violet"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".container .left"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"float"),t("span",{class:"token punctuation"},":"),e(" left"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"position"),t("span",{class:"token punctuation"},":"),e(" relative"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"right"),t("span",{class:"token punctuation"},":"),e(" 300px"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"width"),t("span",{class:"token punctuation"},":"),e(" 300px"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"margin-left"),t("span",{class:"token punctuation"},":"),e(" -100%"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background-color"),t("span",{class:"token punctuation"},":"),e(" darkblue"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".container .right"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"float"),t("span",{class:"token punctuation"},":"),e(" left"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"position"),t("span",{class:"token punctuation"},":"),e(" relative"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"width"),t("span",{class:"token punctuation"},":"),e(" 200px"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"margin-right"),t("span",{class:"token punctuation"},":"),e(" -200px"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background-color"),t("span",{class:"token punctuation"},":"),e(" red"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br"),t("span",{class:"line-number"},"25"),t("br"),t("span",{class:"line-number"},"26"),t("br")])],-1),Gt=t("h2",{id:"centering-patterns"},[t("a",{class:"header-anchor",href:"#centering-patterns","aria-hidden":"true"},"#"),e(" Centering Patterns")],-1),Dt=t("p",null,[t("a",{href:"https://css-tricks.com/centering-css-complete-guide/",target:"_blank",rel:"noopener noreferrer"},"Centering CSS Complete Guide")],-1),It=t("h3",{id:"horizontal-centering-pattern"},[t("a",{class:"header-anchor",href:"#horizontal-centering-pattern","aria-hidden":"true"},"#"),e(" Horizontal Centering Pattern")],-1),Et=t("ul",null,[t("li",null,"inline: text-align, flex/grid box"),t("li",null,"block: auto margin, flex/grid box"),t("li",null,"父元素 float, 父子元素 relative")],-1),Ht=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".container"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"float"),t("span",{class:"token punctuation"},":"),e(" left"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"position"),t("span",{class:"token punctuation"},":"),e(" relative"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"left"),t("span",{class:"token punctuation"},":"),e(" 50%"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".container ul"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"position"),t("span",{class:"token punctuation"},":"),e(" relative"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"left"),t("span",{class:"token punctuation"},":"),e(" -50%"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br")])],-1),Nt=t("h3",{id:"vertical-centering-pattern"},[t("a",{class:"header-anchor",href:"#vertical-centering-pattern","aria-hidden":"true"},"#"),e(" Vertical Centering Pattern")],-1),Ot=t("h4",{id:"vertical-inline-element"},[t("a",{class:"header-anchor",href:"#vertical-inline-element","aria-hidden":"true"},"#"),e(" Vertical Inline element")],-1),Rt=t("ul",null,[t("li",null,"padding"),t("li",null,"line-height"),t("li",null,[e("vertical-align: middle "),t("ul",null,[t("li",null,[e("作用环境: parent element "),t("code",null,"line-height"),e(" === "),t("code",null,"height"),e(".")]),t("li",null,[e("作用对象: children element "),t("code",null,"display: inline-block/inline"),e(".")])])]),t("li",null,"flexbox"),t("li",null,"grid")],-1),Xt=t("h4",{id:"vertical-block-element"},[t("a",{class:"header-anchor",href:"#vertical-block-element","aria-hidden":"true"},"#"),e(" Vertical Block element")],-1),Yt=t("ul",null,[t("li",null,"top + margin"),t("li",null,"top + translateY"),t("li",null,"vertical-align"),t("li",null,"flexbox"),t("li",null,"grid")],-1),Wt=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".form-item-label"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"display"),t("span",{class:"token punctuation"},":"),e(" flex"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"flex-direction"),t("span",{class:"token punctuation"},":"),e(" row"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"align-items"),t("span",{class:"token punctuation"},":"),e(" center"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br")])],-1),Ut=t("h3",{id:"mixing-centering-pattern"},[t("a",{class:"header-anchor",href:"#mixing-centering-pattern","aria-hidden":"true"},"#"),e(" Mixing Centering Pattern")],-1),Zt=t("p",null,"在子容器中在设置新元素即可",-1),Jt=t("h2",{id:"css-logical-properties-and-values"},[t("a",{class:"header-anchor",href:"#css-logical-properties-and-values","aria-hidden":"true"},"#"),e(" CSS Logical Properties and Values")],-1),Qt=t("h3",{id:"css-logical-basis"},[t("a",{class:"header-anchor",href:"#css-logical-basis","aria-hidden":"true"},"#"),e(" CSS Logical Basis")],-1),Kt=t("p",null,"In positioning/sizing/margin/padding/border/text alignment:",-1),$t=t("ul",null,[t("li",null,[t("code",null,"block-start"),e(" for "),t("code",null,"top")]),t("li",null,[t("code",null,"block-end"),e(" for "),t("code",null,"bottom")]),t("li",null,[t("code",null,"block"),e(" for vertical")]),t("li",null,[t("code",null,"inline-start"),e(" for "),t("code",null,"left")]),t("li",null,[t("code",null,"inline-end"),e(" for "),t("code",null,"right")]),t("li",null,[t("code",null,"inline"),e(" for horizontal")])],-1),ne=t("h3",{id:"css-logical-reference"},[t("a",{class:"header-anchor",href:"#css-logical-reference","aria-hidden":"true"},"#"),e(" CSS Logical Reference")],-1),se=t("ul",null,[t("li",null,[t("a",{href:"https://drafts.csswg.org/css-logical",target:"_blank",rel:"noopener noreferrer"},"W3C CSS Logical Draft")]),t("li",null,[t("a",{href:"https://css-tricks.com/css-logical-properties-and-values",target:"_blank",rel:"noopener noreferrer"},"CSS Tricks CSS Logical Guide")])],-1),ae=t("h2",{id:"css-scrollbar"},[t("a",{class:"header-anchor",href:"#css-scrollbar","aria-hidden":"true"},"#"),e(" CSS ScrollBar")],-1),te=t("h3",{id:"custom-scrollbar"},[t("a",{class:"header-anchor",href:"#custom-scrollbar","aria-hidden":"true"},"#"),e(" Custom ScrollBar")],-1),ee=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".demo::-webkit-scrollbar"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"/* 滚动条整体样式 */"),e("\n "),t("span",{class:"token comment"},"/* 高宽分别对应横竖滚动条的尺寸 */"),e("\n "),t("span",{class:"token property"},"width"),t("span",{class:"token punctuation"},":"),e(" 10px"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"height"),t("span",{class:"token punctuation"},":"),e(" 1px"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".demo::-webkit-scrollbar-thumb"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"/* 滚动条方块 */"),e("\n "),t("span",{class:"token property"},"border-radius"),t("span",{class:"token punctuation"},":"),e(" 10px"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background-color"),t("span",{class:"token punctuation"},":"),e(" blue"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background-image"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"-webkit-linear-gradient"),t("span",{class:"token punctuation"},"("),e("\n 45deg"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token function"},"rgba"),t("span",{class:"token punctuation"},"("),e("255"),t("span",{class:"token punctuation"},","),e(" 255"),t("span",{class:"token punctuation"},","),e(" 255"),t("span",{class:"token punctuation"},","),e(" 0.2"),t("span",{class:"token punctuation"},")"),e(" 25%"),t("span",{class:"token punctuation"},","),e("\n transparent 25%"),t("span",{class:"token punctuation"},","),e("\n transparent 50%"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token function"},"rgba"),t("span",{class:"token punctuation"},"("),e("255"),t("span",{class:"token punctuation"},","),e(" 255"),t("span",{class:"token punctuation"},","),e(" 255"),t("span",{class:"token punctuation"},","),e(" 0.2"),t("span",{class:"token punctuation"},")"),e(" 50%"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token function"},"rgba"),t("span",{class:"token punctuation"},"("),e("255"),t("span",{class:"token punctuation"},","),e(" 255"),t("span",{class:"token punctuation"},","),e(" 255"),t("span",{class:"token punctuation"},","),e(" 0.2"),t("span",{class:"token punctuation"},")"),e(" 75%"),t("span",{class:"token punctuation"},","),e("\n transparent 75%"),t("span",{class:"token punctuation"},","),e("\n transparent\n "),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".demo::-webkit-scrollbar-track"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"/* 滚动条轨道 */"),e("\n "),t("span",{class:"token property"},"border-radius"),t("span",{class:"token punctuation"},":"),e(" 10px"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background-color"),t("span",{class:"token punctuation"},":"),e(" #ededed"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"box-shadow"),t("span",{class:"token punctuation"},":"),e(" inset 0 0 5px "),t("span",{class:"token function"},"rgba"),t("span",{class:"token punctuation"},"("),e("0"),t("span",{class:"token punctuation"},","),e(" 0"),t("span",{class:"token punctuation"},","),e(" 0"),t("span",{class:"token punctuation"},","),e(" 0.2"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br"),t("span",{class:"line-number"},"25"),t("br"),t("span",{class:"line-number"},"26"),t("br"),t("span",{class:"line-number"},"27"),t("br"),t("span",{class:"line-number"},"28"),t("br"),t("span",{class:"line-number"},"29"),t("br")])],-1),le=t("h3",{id:"hidden-scrollbar"},[t("a",{class:"header-anchor",href:"#hidden-scrollbar","aria-hidden":"true"},"#"),e(" Hidden ScrollBar")],-1),oe=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".demo::-webkit-scrollbar"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"display"),t("span",{class:"token punctuation"},":"),e(" none"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/* Chrome Safari */"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".demo"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"scrollbar-width"),t("span",{class:"token punctuation"},":"),e(" none"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/* FireFox */"),e("\n "),t("span",{class:"token property"},"-ms-overflow-style"),t("span",{class:"token punctuation"},":"),e(" none"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/* IE 10+ */"),e("\n "),t("span",{class:"token property"},"overflow-x"),t("span",{class:"token punctuation"},":"),e(" hidden"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"overflow-y"),t("span",{class:"token punctuation"},":"),e(" auto"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br")])],-1),ce=t("h2",{id:"css-opacity"},[t("a",{class:"header-anchor",href:"#css-opacity","aria-hidden":"true"},"#"),e(" CSS Opacity")],-1),pe=t("p",null,"0 ~ 1, 渐进效果常用属性",-1),ue=t("h2",{id:"css-colors"},[t("a",{class:"header-anchor",href:"#css-colors","aria-hidden":"true"},"#"),e(" CSS Colors")],-1),re=t("h3",{id:"hsl-color"},[t("a",{class:"header-anchor",href:"#hsl-color","aria-hidden":"true"},"#"),e(" HSL Color")],-1),ie=t("ul",null,[t("li",null,"H: hue"),t("li",null,[e("S: saturation (stay "),t("code",null,"50%"),e(" etc.)")]),t("li",null,"L: lightness (easy to theme colors)")],-1),ke=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token comment"},"/* Hover Button */"),e("\n"),t("span",{class:"token selector"},":root"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"--primary-h"),t("span",{class:"token punctuation"},":"),e(" 221"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"--primary-s"),t("span",{class:"token punctuation"},":"),e(" 72%"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"--primary-l"),t("span",{class:"token punctuation"},":"),e(" 62%"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".button"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"background-color"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"hsl"),t("span",{class:"token punctuation"},"("),t("span",{class:"token function"},"var"),t("span",{class:"token punctuation"},"("),e("--primary-h"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token function"},"var"),t("span",{class:"token punctuation"},"("),e("--primary-s"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token function"},"var"),t("span",{class:"token punctuation"},"("),e("--primary-l"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".button:hover"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"--primary-l"),t("span",{class:"token punctuation"},":"),e(" 54%"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br")])],-1),be=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token comment"},"/* Custom Buttons */"),e("\n"),t("span",{class:"token selector"},":root"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"--primary-h"),t("span",{class:"token punctuation"},":"),e(" 221"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"--primary-s"),t("span",{class:"token punctuation"},":"),e(" 72%"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"--primary-l"),t("span",{class:"token punctuation"},":"),e(" 62%"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".button"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"background-color"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"hsl"),t("span",{class:"token punctuation"},"("),t("span",{class:"token function"},"var"),t("span",{class:"token punctuation"},"("),e("--primary-h"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token function"},"var"),t("span",{class:"token punctuation"},"("),e("--primary-s"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token function"},"var"),t("span",{class:"token punctuation"},"("),e("--primary-l"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".button--secondary"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"--primary-l"),t("span",{class:"token punctuation"},":"),e(" 90%"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"color"),t("span",{class:"token punctuation"},":"),e(" #222"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".button--ghost"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"--primary-l"),t("span",{class:"token punctuation"},":"),e(" 90%"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background-color"),t("span",{class:"token punctuation"},":"),e(" transparent"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"border"),t("span",{class:"token punctuation"},":"),e(" 3px solid "),t("span",{class:"token function"},"hsl"),t("span",{class:"token punctuation"},"("),t("span",{class:"token function"},"var"),t("span",{class:"token punctuation"},"("),e("--primary-h"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token function"},"var"),t("span",{class:"token punctuation"},"("),e("--primary-s"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token function"},"var"),t("span",{class:"token punctuation"},"("),e("--primary-l"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br")])],-1),me=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token comment"},"/* Change lightness to get gradient */"),e("\n"),t("span",{class:"token selector"},".section"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"background"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"linear-gradient"),t("span",{class:"token punctuation"},"("),e("\n to left"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token function"},"hsl"),t("span",{class:"token punctuation"},"("),t("span",{class:"token function"},"var"),t("span",{class:"token punctuation"},"("),e("--primary-h"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token function"},"var"),t("span",{class:"token punctuation"},"("),e("--primary-s"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token function"},"var"),t("span",{class:"token punctuation"},"("),e("--primary-l"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token function"},"hsl"),t("span",{class:"token punctuation"},"("),t("span",{class:"token function"},"var"),t("span",{class:"token punctuation"},"("),e("--primary-h"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token function"},"var"),t("span",{class:"token punctuation"},"("),e("--primary-s"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},","),e(" 95%"),t("span",{class:"token punctuation"},")"),e("\n "),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".section-2"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"--primary-h"),t("span",{class:"token punctuation"},":"),e(" 167"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br")])],-1),de=t("h2",{id:"css-border"},[t("a",{class:"header-anchor",href:"#css-border","aria-hidden":"true"},"#"),e(" CSS Border")],-1),ge=t("h3",{id:"border-radius"},[t("a",{class:"header-anchor",href:"#border-radius","aria-hidden":"true"},"#"),e(" Border Radius")],-1),he=t("h3",{id:"border-image"},[t("a",{class:"header-anchor",href:"#border-image","aria-hidden":"true"},"#"),e(" Border Image")],-1),fe=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token property"},"border-image"),t("span",{class:"token punctuation"},":"),e(" source slice width outset repeat"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br")])],-1),ye=t("h3",{id:"border-collapse"},[t("a",{class:"header-anchor",href:"#border-collapse","aria-hidden":"true"},"#"),e(" Border Collapse")],-1),ve=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},"table,\ntr,\ntd"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"border"),t("span",{class:"token punctuation"},":"),e(" 1px solid #666"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n"),t("span",{class:"token selector"},"table"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"border-collapse"),t("span",{class:"token punctuation"},":"),e(" collapse"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br")])],-1),xe=t("h3",{id:"border-best-practice"},[t("a",{class:"header-anchor",href:"#border-best-practice","aria-hidden":"true"},"#"),e(" Border Best Practice")],-1),we=t("p",null,"Mix transparent with non-transparent border to make shapes (e.g. triangle).",-1),Se=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".arrow-up"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"width"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"height"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token property"},"border-right"),t("span",{class:"token punctuation"},":"),e(" 16px solid transparent"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"border-left"),t("span",{class:"token punctuation"},":"),e(" 16px solid transparent"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token property"},"border-bottom"),t("span",{class:"token punctuation"},":"),e(" 20px solid #8888e8"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".arrow-right"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"width"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"height"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token property"},"border-top"),t("span",{class:"token punctuation"},":"),e(" 16px solid transparent"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"border-bottom"),t("span",{class:"token punctuation"},":"),e(" 16px solid transparent"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token property"},"border-left"),t("span",{class:"token punctuation"},":"),e(" 20px solid #e888a3"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".arrow-down"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"width"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"height"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token property"},"border-right"),t("span",{class:"token punctuation"},":"),e(" 16px solid transparent"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"border-left"),t("span",{class:"token punctuation"},":"),e(" 16px solid transparent"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token property"},"border-top"),t("span",{class:"token punctuation"},":"),e(" 20px solid #f7df6c"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".arrow-left"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"width"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"height"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token property"},"border-top"),t("span",{class:"token punctuation"},":"),e(" 16px solid transparent"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"border-bottom"),t("span",{class:"token punctuation"},":"),e(" 16px solid transparent"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token property"},"border-right"),t("span",{class:"token punctuation"},":"),e(" 20px solid #8de698"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br"),t("span",{class:"line-number"},"25"),t("br"),t("span",{class:"line-number"},"26"),t("br"),t("span",{class:"line-number"},"27"),t("br"),t("span",{class:"line-number"},"28"),t("br"),t("span",{class:"line-number"},"29"),t("br"),t("span",{class:"line-number"},"30"),t("br"),t("span",{class:"line-number"},"31"),t("br"),t("span",{class:"line-number"},"32"),t("br"),t("span",{class:"line-number"},"33"),t("br"),t("span",{class:"line-number"},"34"),t("br"),t("span",{class:"line-number"},"35"),t("br"),t("span",{class:"line-number"},"36"),t("br"),t("span",{class:"line-number"},"37"),t("br"),t("span",{class:"line-number"},"38"),t("br"),t("span",{class:"line-number"},"39"),t("br")])],-1),Ce=t("h2",{id:"css-background"},[t("a",{class:"header-anchor",href:"#css-background","aria-hidden":"true"},"#"),e(" CSS Background")],-1),qe=t("h3",{id:"background-image"},[t("a",{class:"header-anchor",href:"#background-image","aria-hidden":"true"},"#"),e(" Background Image")],-1),Fe=t("ul",null,[t("li",null,"url()"),t("li",null,"linear-gradient()"),t("li",null,"radial-gradient()")],-1),ze=t("p",null,"awesome gradient buttons",-1),Pe=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".btn:hover"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"background-position"),t("span",{class:"token punctuation"},":"),e(" right center"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/* change the direction of the change here */"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".btn-1"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"background-image"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"linear-gradient"),t("span",{class:"token punctuation"},"("),e("\n to right"),t("span",{class:"token punctuation"},","),e("\n #f6d365 0%"),t("span",{class:"token punctuation"},","),e("\n #fda085 51%"),t("span",{class:"token punctuation"},","),e("\n #f6d365 100%\n "),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".btn-2"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"background-image"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"linear-gradient"),t("span",{class:"token punctuation"},"("),e("\n to right"),t("span",{class:"token punctuation"},","),e("\n #fbc2eb 0%"),t("span",{class:"token punctuation"},","),e("\n #a6c1ee 51%"),t("span",{class:"token punctuation"},","),e("\n #fbc2eb 100%\n "),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".btn-3"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"background-image"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"linear-gradient"),t("span",{class:"token punctuation"},"("),e("\n to right"),t("span",{class:"token punctuation"},","),e("\n #84fab0 0%"),t("span",{class:"token punctuation"},","),e("\n #8fd3f4 51%"),t("span",{class:"token punctuation"},","),e("\n #84fab0 100%\n "),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".btn-4"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"background-image"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"linear-gradient"),t("span",{class:"token punctuation"},"("),e("\n to right"),t("span",{class:"token punctuation"},","),e("\n #a1c4fd 0%"),t("span",{class:"token punctuation"},","),e("\n #c2e9fb 51%"),t("span",{class:"token punctuation"},","),e("\n #a1c4fd 100%\n "),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".btn-5"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"background-image"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"linear-gradient"),t("span",{class:"token punctuation"},"("),e("\n to right"),t("span",{class:"token punctuation"},","),e("\n #ffecd2 0%"),t("span",{class:"token punctuation"},","),e("\n #fcb69f 51%"),t("span",{class:"token punctuation"},","),e("\n #ffecd2 100%\n "),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br"),t("span",{class:"line-number"},"25"),t("br"),t("span",{class:"line-number"},"26"),t("br"),t("span",{class:"line-number"},"27"),t("br"),t("span",{class:"line-number"},"28"),t("br"),t("span",{class:"line-number"},"29"),t("br"),t("span",{class:"line-number"},"30"),t("br"),t("span",{class:"line-number"},"31"),t("br"),t("span",{class:"line-number"},"32"),t("br"),t("span",{class:"line-number"},"33"),t("br"),t("span",{class:"line-number"},"34"),t("br"),t("span",{class:"line-number"},"35"),t("br"),t("span",{class:"line-number"},"36"),t("br"),t("span",{class:"line-number"},"37"),t("br"),t("span",{class:"line-number"},"38"),t("br"),t("span",{class:"line-number"},"39"),t("br"),t("span",{class:"line-number"},"40"),t("br"),t("span",{class:"line-number"},"41"),t("br"),t("span",{class:"line-number"},"42"),t("br"),t("span",{class:"line-number"},"43"),t("br"),t("span",{class:"line-number"},"44"),t("br"),t("span",{class:"line-number"},"45"),t("br"),t("span",{class:"line-number"},"46"),t("br"),t("span",{class:"line-number"},"47"),t("br"),t("span",{class:"line-number"},"48"),t("br")])],-1),Te=t("h3",{id:"background-size"},[t("a",{class:"header-anchor",href:"#background-size","aria-hidden":"true"},"#"),e(" Background Size")],-1),Be=t("ul",null,[t("li",null,"contain"),t("li",null,"cover"),t("li",null,[e("useful for "),t("code",null,"images"),e(" and "),t("code",null,"video")])],-1),Me=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".video"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"min-width"),t("span",{class:"token punctuation"},":"),e(" 100%"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"min-height"),t("span",{class:"token punctuation"},":"),e(" 100%"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background-size"),t("span",{class:"token punctuation"},":"),e(" cover"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"overflow"),t("span",{class:"token punctuation"},":"),e(" hidden"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br")])],-1),_e=t("h3",{id:"background-repeat"},[t("a",{class:"header-anchor",href:"#background-repeat","aria-hidden":"true"},"#"),e(" Background Repeat")],-1),je=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token comment"},"/* Keyword values */"),e("\n"),t("span",{class:"token property"},"background-repeat"),t("span",{class:"token punctuation"},":"),e(" repeat-x"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token property"},"background-repeat"),t("span",{class:"token punctuation"},":"),e(" repeat-y"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token property"},"background-repeat"),t("span",{class:"token punctuation"},":"),e(" repeat"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token property"},"background-repeat"),t("span",{class:"token punctuation"},":"),e(" space"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token property"},"background-repeat"),t("span",{class:"token punctuation"},":"),e(" round"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token property"},"background-repeat"),t("span",{class:"token punctuation"},":"),e(" no-repeat"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token comment"},"/* Two-value syntax: horizontal | vertical */"),e("\n"),t("span",{class:"token property"},"background-repeat"),t("span",{class:"token punctuation"},":"),e(" repeat space"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token property"},"background-repeat"),t("span",{class:"token punctuation"},":"),e(" repeat repeat"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token property"},"background-repeat"),t("span",{class:"token punctuation"},":"),e(" round space"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token property"},"background-repeat"),t("span",{class:"token punctuation"},":"),e(" no-repeat round"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br")])],-1),Ae=t("h3",{id:"background-attachment"},[t("a",{class:"header-anchor",href:"#background-attachment","aria-hidden":"true"},"#"),e(" Background Attachment")],-1),Le=t("ul",null,[t("li",null,[t("code",null,"scroll"),e(": scrolls with the main view, but stays fixed inside the local view")]),t("li",null,[t("code",null,"local"),e(": scrolls both with the main view and the local view")]),t("li",null,[t("code",null,"fixed"),e(": stays fixed no matter what")]),t("li",null,[e("对于可以滚动的元素 (设置为 "),t("code",null,"overflow: scroll"),e(" 的元素), 当 "),t("code",null,"background-attachment"),e(" 设置为 "),t("code",null,"scroll"),e(" 时, 背景图不会随元素内容的滚动而滚动")]),t("li",null,[e("对于可以滚动的元素 (设置为 "),t("code",null,"overflow: scroll"),e(" 的元素), 设置 "),t("code",null,"background-attachment: local"),e(", 则背景会随内容的滚动而滚动")]),t("li",null,[e("parallax effect: "),t("code",null,"background-attachment: fixed")])],-1),Ve=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token property"},"background-attachment"),t("span",{class:"token punctuation"},":"),e(" scroll"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/* 背景图相对于元素固定,背景随页面滚动而移动,即背景和内容绑定 */"),e("\n"),t("span",{class:"token property"},"background-attachment"),t("span",{class:"token punctuation"},":"),e(" fixed"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/* 背景图相对于元素内容固定 */"),e("\n"),t("span",{class:"token property"},"background-attachment"),t("span",{class:"token punctuation"},":"),e(" local"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/* 背景图相对于视口固定,所以随页面滚动背景不动,相当于背景被设置在了 body 上 */"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br")])],-1),Ge=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token comment"},"/* parallax effect */"),e("\n"),t("span",{class:"token selector"},"body"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"box-sizing"),t("span",{class:"token punctuation"},":"),e(" border-box"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"width"),t("span",{class:"token punctuation"},":"),e(" 100%"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"height"),t("span",{class:"token punctuation"},":"),e(" 100vh"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"margin"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"padding"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".parallax"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"min-height"),t("span",{class:"token punctuation"},":"),e(" 60%"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/* key */"),e("\n "),t("span",{class:"token property"},"background-attachment"),t("span",{class:"token punctuation"},":"),e(" fixed"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/* key */"),e("\n "),t("span",{class:"token property"},"background-image"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token url"},[t("span",{class:"token function"},"url"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string url"},"'./images/bg.jpg'"),t("span",{class:"token punctuation"},")")]),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background-position"),t("span",{class:"token punctuation"},":"),e(" center"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background-size"),t("span",{class:"token punctuation"},":"),e(" cover"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background-repeat"),t("span",{class:"token punctuation"},":"),e(" no-repeat"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br")])],-1),De=t("h3",{id:"background-clip"},[t("a",{class:"header-anchor",href:"#background-clip","aria-hidden":"true"},"#"),e(" Background Clip")],-1),Ie=t("p",null,"指定背景显示范围 content-box/padding-box/border-box",-1),Ee=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},"h1"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"background-image"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token url"},[t("span",{class:"token function"},"url"),t("span",{class:"token punctuation"},"("),e("bg.jpg"),t("span",{class:"token punctuation"},")")]),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background-clip"),t("span",{class:"token punctuation"},":"),e(" text"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br")])],-1),He=t("h3",{id:"background-origin"},[t("a",{class:"header-anchor",href:"#background-origin","aria-hidden":"true"},"#"),e(" Background Origin")],-1),Ne=t("p",null,"指定背景绘制起点 content-box/padding-box/border-box",-1),Oe=t("h3",{id:"blend-mode"},[t("a",{class:"header-anchor",href:"#blend-mode","aria-hidden":"true"},"#"),e(" Blend Mode")],-1),Re=t("ul",null,[t("li",null,[t("code",null,"mix-blend-mode"),e(" is used for text styles")]),t("li",null,[e("with "),t("code",null,"multiply"),e(": black is cutout (keep black) (0 * WHAT = 0)")]),t("li",null,[e("with "),t("code",null,"screen"),e(": white is cutout (keep white) (100 - (100 - WHAT) * (100 - 100) = 100)")])],-1),Xe=t("div",{class:"language-html line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("div")]),e(),t("span",{class:"token attr-name"},"class"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("background"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("h1")]),t("span",{class:"token punctuation"},">")]),e("Even More CSS Secrets"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("h1")]),t("span",{class:"token punctuation"},">")]),e("\n"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("div")]),t("span",{class:"token punctuation"},">")]),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br")])],-1),Ye=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".background"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"background-image"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token url"},[t("span",{class:"token function"},"url"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string url"},"'bg.png'"),t("span",{class:"token punctuation"},")")]),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background-position"),t("span",{class:"token punctuation"},":"),e(" center"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background-size"),t("span",{class:"token punctuation"},":"),e(" cover"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background-repeat"),t("span",{class:"token punctuation"},":"),e(" no-repeat"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".background h1"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"background-color"),t("span",{class:"token punctuation"},":"),e(" black"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/* mix with background */"),e("\n "),t("span",{class:"token property"},"color"),t("span",{class:"token punctuation"},":"),e(" white"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/* keep white */"),e("\n "),t("span",{class:"token property"},"mix-blend-mode"),t("span",{class:"token punctuation"},":"),e(" screen"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/* screen or multiply */"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br")])],-1),We=t("p",null,[t("code",null,"background-blend-mode"),e(" is used for multiple background images")],-1),Ue=t("div",{class:"language-html line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("div")]),e(),t("span",{class:"token attr-name"},"class"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("container"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("div")]),t("span",{class:"token punctuation"},">")]),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br")])],-1),Ze=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".container"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"background"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token url"},[t("span",{class:"token function"},"url"),t("span",{class:"token punctuation"},"("),e("$pic1"),t("span",{class:"token punctuation"},")")]),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token url"},[t("span",{class:"token function"},"url"),t("span",{class:"token punctuation"},"("),e("$pic2"),t("span",{class:"token punctuation"},")")]),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background-size"),t("span",{class:"token punctuation"},":"),e(" cover"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background-blend-mode"),t("span",{class:"token punctuation"},":"),e(" lighten"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br")])],-1),Je=t("p",null,"Night mode:",-1),Qe=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".night"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"background-blend-mode"),t("span",{class:"token punctuation"},":"),e(" darken"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"filter"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"brightness"),t("span",{class:"token punctuation"},"("),e("80%"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token function"},"grayscale"),t("span",{class:"token punctuation"},"("),e("20%"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token function"},"contrast"),t("span",{class:"token punctuation"},"("),e("1.2"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br")])],-1),Ke=t("p",null,"movie style",-1),$e=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".movie"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"background-blend-mode"),t("span",{class:"token punctuation"},":"),e(" soft-light"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"filter"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"contrast"),t("span",{class:"token punctuation"},"("),e("1.1"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br")])],-1),nl=t("h3",{id:"mask-style"},[t("a",{class:"header-anchor",href:"#mask-style","aria-hidden":"true"},"#"),e(" Mask Style")],-1),sl=t("ul",null,[t("li",null,"Black for masking"),t("li",null,"White for showing")],-1),al=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},"#masked"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"width"),t("span",{class:"token punctuation"},":"),e(" 100px"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"height"),t("span",{class:"token punctuation"},":"),e(" 100px"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background-color"),t("span",{class:"token punctuation"},":"),e(" #8cffa0"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"mask-image"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token url"},[t("span",{class:"token function"},"url"),t("span",{class:"token punctuation"},"("),e("https://mdn.mozillademos.org/files/12668/MDN.svg"),t("span",{class:"token punctuation"},")")]),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token url"},[t("span",{class:"token function"},"url"),t("span",{class:"token punctuation"},"("),e("https://mdn.mozillademos.org/files/12676/star.svg"),t("span",{class:"token punctuation"},")")]),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"mask-size"),t("span",{class:"token punctuation"},":"),e(" 100% 100%"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"mask-composite"),t("span",{class:"token punctuation"},":"),e(" add"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/* Can be changed in the live sample */"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br")])],-1),tl=t("h3",{id:"clip-path"},[t("a",{class:"header-anchor",href:"#clip-path","aria-hidden":"true"},"#"),e(" Clip Path")],-1),el=t("h4",{id:"basic-clip-path"},[t("a",{class:"header-anchor",href:"#basic-clip-path","aria-hidden":"true"},"#"),e(" Basic Clip Path")],-1),ll=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".polygon"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"clip-path"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"polygon"),t("span",{class:"token punctuation"},"("),e("75% 0%"),t("span",{class:"token punctuation"},","),e(" 100% 50%"),t("span",{class:"token punctuation"},","),e(" 75% 100%"),t("span",{class:"token punctuation"},","),e(" 0% 100%"),t("span",{class:"token punctuation"},","),e(" 25% 50%"),t("span",{class:"token punctuation"},","),e(" 0% 0%"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br")])],-1),ol=t("h4",{id:"svg-clip-path"},[t("a",{class:"header-anchor",href:"#svg-clip-path","aria-hidden":"true"},"#"),e(" SVG Clip Path")],-1),cl=t("div",{class:"language-html line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("svg")]),e(),t("span",{class:"token attr-name"},"class"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("svg"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("clipPath")]),e(),t("span",{class:"token attr-name"},"id"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("circle"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"clipPathUnits"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("objectBoundingBox"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("path")]),e("\n "),t("span",{class:"token attr-name"},"d"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("M0.5,0 C0.776,0,1,0.224,1,0.5 C1,0.603,0.969,0.7,0.915,0.779 C0.897,0.767,0.876,0.76,0.853,0.76 C0.794,0.76,0.747,0.808,0.747,0.867 C0.747,0.888,0.753,0.908,0.764,0.925 C0.687,0.972,0.597,1,0.5,1 C0.224,1,0,0.776,0,0.5 C0,0.224,0.224,0,0.5,0"),t("span",{class:"token punctuation"},'"')]),e("\n "),t("span",{class:"token punctuation"},">")]),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("path")]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("clipPath")]),t("span",{class:"token punctuation"},">")]),e("\n"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("svg")]),t("span",{class:"token punctuation"},">")]),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br")])],-1),pl=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".item"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"clip-path"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token url"},[t("span",{class:"token function"},"url"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string url"},"'#circle'"),t("span",{class:"token punctuation"},")")]),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br")])],-1),ul=t("h3",{id:"background-best-practice"},[t("a",{class:"header-anchor",href:"#background-best-practice","aria-hidden":"true"},"#"),e(" Background Best Practice")],-1),rl=t("h4",{id:"scroll-indicator"},[t("a",{class:"header-anchor",href:"#scroll-indicator","aria-hidden":"true"},"#"),e(" Scroll Indicator")],-1),il=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},"body"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"position"),t("span",{class:"token punctuation"},":"),e(" relative"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".indicator"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"position"),t("span",{class:"token punctuation"},":"),e(" absolute"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"top"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"right"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"left"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"bottom"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"z-index"),t("span",{class:"token punctuation"},":"),e(" 1"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"linear-gradient"),t("span",{class:"token punctuation"},"("),e("to right top"),t("span",{class:"token punctuation"},","),e(" teal 50%"),t("span",{class:"token punctuation"},","),e(" transparent 50%"),t("span",{class:"token punctuation"},")"),e(" no-repeat"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background-size"),t("span",{class:"token punctuation"},":"),e(" 100% "),t("span",{class:"token function"},"calc"),t("span",{class:"token punctuation"},"("),e("100% - 100vh"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"pointer-events"),t("span",{class:"token punctuation"},":"),e(" none"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"mix-blend-mode"),t("span",{class:"token punctuation"},":"),e(" darken"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token comment"},"/* use after element to hidden triangle background gradient */"),e("\n"),t("span",{class:"token comment"},"/* only show 5px background */"),e("\n"),t("span",{class:"token selector"},".indicator::after"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"content"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token string"},"''"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"position"),t("span",{class:"token punctuation"},":"),e(" fixed"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"top"),t("span",{class:"token punctuation"},":"),e(" 5px"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"bottom"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"right"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"left"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"z-index"),t("span",{class:"token punctuation"},":"),e(" 1"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background"),t("span",{class:"token punctuation"},":"),e(" #fff"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br"),t("span",{class:"line-number"},"25"),t("br"),t("span",{class:"line-number"},"26"),t("br"),t("span",{class:"line-number"},"27"),t("br"),t("span",{class:"line-number"},"28"),t("br"),t("span",{class:"line-number"},"29"),t("br")])],-1),kl=t("h4",{id:"jumbotron-and-landing-page"},[t("a",{class:"header-anchor",href:"#jumbotron-and-landing-page","aria-hidden":"true"},"#"),e(" Jumbotron and Landing Page")],-1),bl=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".jumbotron"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"background-image"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token url"},[t("span",{class:"token function"},"url"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string url"},"''"),t("span",{class:"token punctuation"},")")]),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background-size"),t("span",{class:"token punctuation"},":"),e(" cover"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background-position"),t("span",{class:"token punctuation"},":"),e(" center center"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background-repeat"),t("span",{class:"token punctuation"},":"),e(" no-repeat"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token property"},"height"),t("span",{class:"token punctuation"},":"),e(" 1px"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"width"),t("span",{class:"token punctuation"},":"),e(" 1px"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br")])],-1),ml=t("h4",{id:"horizontal-scrolling-best-practices"},[t("a",{class:"header-anchor",href:"#horizontal-scrolling-best-practices","aria-hidden":"true"},"#"),e(" Horizontal Scrolling Best Practices")],-1),dl=t("p",null,[t("a",{href:"https://designshack.net/articles/navigation/horizontal-scrolling-pros-cons/",target:"_blank",rel:"noopener noreferrer"},"Horizontal Scrolling"),e(":")],-1),gl=t("ul",null,[t("li",null,"Avoid a full-screen horizontal scroll; ensure that users know there is also content that can be reached using a traditional method."),t("li",null,"Make scroll interactions obvious and provide instruction."),t("li",null,"To avoid accessibility issues, ensure that horizontal scrolling elements also work with keyboard navigation."),t("li",null,"Design horizontal scrolling elements in containers using HTML and CSS."),t("li",null,"Use visual cues, such as partial images, to show that there is a horizontal scroll action in effect."),t("li",null,"Use partial horizontal scrolling with a static design element for stability."),t("li",null,"Design horizontal scroll bars in the same manner as vertical scroll bars to create an element of familiarity for users.")],-1),hl=t("p",null,"Horizontal Scrolling Methods:",-1),fl=t("ul",null,[t("li",null,"Rotate 90 deg element."),t("li",null,[t("code",null,"display: flex; overflow-x: auto;")]),t("li",null,[t("code",null,"grid-auto-flow: column;")]),t("li",null,[t("code",null,"scroll-snap-type: x mandatory; scroll-snap-align: center;")])],-1),yl=t("h2",{id:"css-text"},[t("a",{class:"header-anchor",href:"#css-text","aria-hidden":"true"},"#"),e(" CSS Text")],-1),vl=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".text"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"text-align"),t("span",{class:"token punctuation"},":"),e(" center"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"text-decoration"),t("span",{class:"token punctuation"},":"),e(" underline/line-through"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/* 下划线与删除线 */"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".paragraph"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"text-indent"),t("span",{class:"token punctuation"},":"),e(" 2em"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/* 段落缩进 */"),e("\n "),t("span",{class:"token property"},"letter-spacing"),t("span",{class:"token punctuation"},":"),e(" 50px"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/* 字间距 */"),e("\n "),t("span",{class:"token property"},"word-spacing"),t("span",{class:"token punctuation"},":"),e(" 50px"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/* 词间距 */"),e("\n "),t("span",{class:"token property"},"line-height"),t("span",{class:"token punctuation"},":"),e(" 1.5em"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/* 行间距 */"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br")])],-1),xl=t("h3",{id:"text-alignment"},[t("a",{class:"header-anchor",href:"#text-alignment","aria-hidden":"true"},"#"),e(" Text Alignment")],-1),wl=t("p",null,"justify: 自适应,左右都无空格",-1),Sl=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".wrap"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"text-justify"),t("span",{class:"token punctuation"},":"),e(" distribute-all-lines"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/* ie6-8 */"),e("\n "),t("span",{class:"token property"},"text-align"),t("span",{class:"token punctuation"},":"),e(" justify"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"text-align-last"),t("span",{class:"token punctuation"},":"),e(" justify"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/* 一个块或行的最后一行对齐方式 */"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br")])],-1),Cl=t("h3",{id:"text-overflow"},[t("a",{class:"header-anchor",href:"#text-overflow","aria-hidden":"true"},"#"),e(" Text Overflow")],-1),ql=t("ul",null,[t("li",null,"clip 切除溢出部分"),t("li",null,"ellipsis 省略号标志 (要设定 width)")],-1),Fl=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".truncation-article-container"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"width"),t("span",{class:"token punctuation"},":"),e(" 500px"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"overflow"),t("span",{class:"token punctuation"},":"),e(" hidden"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"text-overflow"),t("span",{class:"token punctuation"},":"),e(" ellipsis"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"white-space"),t("span",{class:"token punctuation"},":"),e(" nowrap"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br")])],-1),zl=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".article-container"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"display"),t("span",{class:"token punctuation"},":"),e(" -webkit-box"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"word-break"),t("span",{class:"token punctuation"},":"),e(" break-all"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"-webkit-box-orient"),t("span",{class:"token punctuation"},":"),e(" vertical"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"-webkit-line-clamp"),t("span",{class:"token punctuation"},":"),e(" 4"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/* 需要显示的行数 */"),e("\n "),t("span",{class:"token property"},"overflow"),t("span",{class:"token punctuation"},":"),e(" hidden"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"text-overflow"),t("span",{class:"token punctuation"},":"),e(" ellipsis"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br")])],-1),Pl=t("h3",{id:"text-wrap"},[t("a",{class:"header-anchor",href:"#text-wrap","aria-hidden":"true"},"#"),e(" Text Wrap")],-1),Tl=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token comment"},"/* 不换行 */"),e("\n"),t("span",{class:"token selector"},".nowrap"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"white-space"),t("span",{class:"token punctuation"},":"),e(" nowrap"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token comment"},"/* 自动换行 */"),e("\n"),t("span",{class:"token selector"},".auto-wrap"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"word-wrap"),t("span",{class:"token punctuation"},":"),e(" break-word"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"word-break"),t("span",{class:"token punctuation"},":"),e(" normal"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token comment"},"/* 自动换行 */"),e("\n"),t("span",{class:"token selector"},"pre"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"word-wrap"),t("span",{class:"token punctuation"},":"),e(" break-word"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/* IE 5.5-7 */"),e("\n "),t("span",{class:"token property"},"white-space"),t("span",{class:"token punctuation"},":"),e(" pre-wrap"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/* Modern Browsers */"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token comment"},"/* 强制换行 */"),e("\n"),t("span",{class:"token selector"},".force-wrap"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"word-break"),t("span",{class:"token punctuation"},":"),e(" break-all"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br")])],-1),Bl=t("h3",{id:"text-transform"},[t("a",{class:"header-anchor",href:"#text-transform","aria-hidden":"true"},"#"),e(" Text Transform")],-1),Ml=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},"p"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"/* 大写字母 */"),e("\n "),t("span",{class:"token property"},"text-transform"),t("span",{class:"token punctuation"},":"),e(" uppercase"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},"p"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"/* 小写字母 */"),e("\n "),t("span",{class:"token property"},"text-transform"),t("span",{class:"token punctuation"},":"),e(" lowercase"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},"p"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"/* 首字母大写 */"),e("\n "),t("span",{class:"token property"},"text-transform"),t("span",{class:"token punctuation"},":"),e(" capitalize"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},"p"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"/* 小型的大写字母 */"),e("\n "),t("span",{class:"token property"},"font-variant"),t("span",{class:"token punctuation"},":"),e(" small-caps"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br")])],-1),_l=t("h3",{id:"text-writing-mode"},[t("a",{class:"header-anchor",href:"#text-writing-mode","aria-hidden":"true"},"#"),e(" Text Writing Mode")],-1),jl=t("h4",{id:"vertical-writing-mode"},[t("a",{class:"header-anchor",href:"#vertical-writing-mode","aria-hidden":"true"},"#"),e(" Vertical Writing Mode")],-1),Al=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token comment"},"/* 单列展示 */"),e("\n"),t("span",{class:"token selector"},".wrap"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"width"),t("span",{class:"token punctuation"},":"),e(" 25px"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"height"),t("span",{class:"token punctuation"},":"),e(" auto"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"padding"),t("span",{class:"token punctuation"},":"),e(" 8px 5px"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"line-height"),t("span",{class:"token punctuation"},":"),e(" 18px"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"font-size"),t("span",{class:"token punctuation"},":"),e(" 12px"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"word-wrap"),t("span",{class:"token punctuation"},":"),e(" break-word"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/* 英文自动换行 */"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token comment"},"/* 多列展示 */"),e("\n"),t("span",{class:"token selector"},".wrap"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"height"),t("span",{class:"token punctuation"},":"),e(" 200px"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"line-height"),t("span",{class:"token punctuation"},":"),e(" 30px"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"text-align"),t("span",{class:"token punctuation"},":"),e(" justify"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"writing-mode"),t("span",{class:"token punctuation"},":"),e(" vertical-lr"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/*从左向右 */"),e("\n "),t("span",{class:"token property"},"writing-mode"),t("span",{class:"token punctuation"},":"),e(" vertical-rl"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/* 从右向左 */"),e("\n "),t("span",{class:"token property"},"writing-mode"),t("span",{class:"token punctuation"},":"),e(" tb-lr"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/* IE 从左向右 */"),e("\n "),t("span",{class:"token property"},"writing-mode"),t("span",{class:"token punctuation"},":"),e(" tb-rl"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/* IE 从右向左 */"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br")])],-1),Ll=t("h3",{id:"white-space"},[t("a",{class:"header-anchor",href:"#white-space","aria-hidden":"true"},"#"),e(" White Space")],-1),Vl=t("ul",null,[t("li",null,"Web Default: 空格被解析为换行"),t("li",null,"Web Default: 换行被解析为空格"),t("li",null,"Web Default: 自动合并空格")],-1),Gl=t("p",null,[e("普通标签内自动忽略空格符, 并将其与空白符转换成一个空格进行输出, 可用 "),t("code",null,"white-space"),e(" 改变这一行为:")],-1),Dl=t("p",null,"|------------|-----|----------|------|-------| | White Space|换行符|空格和制表符|文字换行|行尾空格| | normal | 合并 | 合并 | 换行 | 删除 | | nowrap | 合并 | 合并 | 不换行 | 删除 | | pre | 保留 | 保留 | 不换行 | 保留 | | pre-wrap | 保留 | 保留 | 换行 | 挂起 | | pre-line | 保留 | 合并 | 换行 | 删除 | | break-spaces | 保留 | 保留 | 换行 | 换行 |",-1),Il=t("h2",{id:"css-font"},[t("a",{class:"header-anchor",href:"#css-font","aria-hidden":"true"},"#"),e(" CSS Font")],-1),El=t("h3",{id:"font-size"},[t("a",{class:"header-anchor",href:"#font-size","aria-hidden":"true"},"#"),e(" Font Size")],-1),Hl=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},"html"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"/*浏览器默认size为16px,此时将html-size自动计算为10px*/"),e("\n "),t("span",{class:"token property"},"font-size"),t("span",{class:"token punctuation"},":"),e(" 62.5%"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},"small"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"/*11px*/"),e("\n "),t("span",{class:"token property"},"font-size"),t("span",{class:"token punctuation"},":"),e(" 1.1rem"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},"strong"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"/*18px*/"),e("\n "),t("span",{class:"token property"},"font-size"),t("span",{class:"token punctuation"},":"),e(" 1.8rem"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br")])],-1),Nl=t("h3",{id:"font-style"},[t("a",{class:"header-anchor",href:"#font-style","aria-hidden":"true"},"#"),e(" Font Style")],-1),Ol=t("ul",null,[t("li",null,"normal"),t("li",null,"italic"),t("li",null,"oblique")],-1),Rl=t("h3",{id:"font-variant"},[t("a",{class:"header-anchor",href:"#font-variant","aria-hidden":"true"},"#"),e(" Font Variant")],-1),Xl=t("ul",null,[t("li",null,"normal"),t("li",null,"small-caps: 小型大写字母")],-1),Yl=t("h3",{id:"font-size-adjust"},[t("a",{class:"header-anchor",href:"#font-size-adjust","aria-hidden":"true"},"#"),e(" Font Size Adjust")],-1),Wl=t("ul",null,[t("li",null,"使字体保持大小,不随字体类型改变而改变"),t("li",null,"不同字体有不同的值(x-height/字体尺寸)")],-1),Ul=t("h3",{id:"font-display"},[t("a",{class:"header-anchor",href:"#font-display","aria-hidden":"true"},"#"),e(" Font Display")],-1),Zl=t("p",null,"The font display timeline:",-1),Jl=t("ul",null,[t("li",null,[e("block period: font face is not loaded, render an "),t("strong",null,"invisible"),e(" fallback font face (use normally when loaded in this period)")]),t("li",null,"swap period: font face is not loaded, render a fallback font face (use normally when loaded in this period)"),t("li",null,"failure period: the user agent treats it as a failed load causing normal font fallback")],-1),Ql=t("p",null,[t("code",null,"font-display"),e(" - how a font face is displayed based on whether and when it is downloaded and ready to use:")],-1),Kl=t("ul",null,[t("li",null,"auto: font display strategy defined by the user agent"),t("li",null,"block: a short block period and an infinite swap period"),t("li",null,"swap: an extremely small block period and an infinite swap period"),t("li",null,"fallback: an extremely small block period and a short swap period"),t("li",null,"optional: an extremely small block period and no swap period")],-1),$l=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token atrule"},[t("span",{class:"token rule"},"@font-face")]),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"font-family"),t("span",{class:"token punctuation"},":"),e(" ExampleFont"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"src"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token url"},[t("span",{class:"token function"},"url"),t("span",{class:"token punctuation"},"("),e("/path/to/fonts/exampleFont.woff"),t("span",{class:"token punctuation"},")")]),e(),t("span",{class:"token function"},"format"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'woff'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token url"},[t("span",{class:"token function"},"url"),t("span",{class:"token punctuation"},"("),e("/path/to/fonts/exampleFont.eot"),t("span",{class:"token punctuation"},")")]),e("\n "),t("span",{class:"token function"},"format"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'eot'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"font-weight"),t("span",{class:"token punctuation"},":"),e(" 400"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"font-style"),t("span",{class:"token punctuation"},":"),e(" normal"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"font-display"),t("span",{class:"token punctuation"},":"),e(" fallback"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br")])],-1),no=t("h3",{id:"custom-fonts-function"},[t("a",{class:"header-anchor",href:"#custom-fonts-function","aria-hidden":"true"},"#"),e(" Custom Fonts Function")],-1),so=t("p",null,[t("code",null,"@font-face"),e(" 使用户使用服务端提供的字体:")],-1),ao=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token atrule"},[t("span",{class:"token rule"},"@font-face")]),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"/*:call
105_SparkUpNext()*/"),e("\n "),t("span",{class:"token property"},"font-family"),t("span",{class:"token punctuation"},":"),e(" mySpecialFont"),t("span",{class:"token punctuation"},";"),e("\n font-style/font-weight/"),t("span",{class:"token property"},"font-variant"),t("span",{class:"token punctuation"},":"),e(" inherit"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"src"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token url"},[t("span",{class:"token function"},"url"),t("span",{class:"token punctuation"},"("),e("‘./Colleen.ttf’"),t("span",{class:"token punctuation"},")")]),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token comment"},"/*selector {*/"),e("\n"),t("span",{class:"token comment"},"/*:call 105_SparkUpNext()*/"),e("\n"),t("span",{class:"token comment"},"/*font-family:mySpecialFont;*/"),e("\n"),t("span",{class:"token comment"},"/*}*/"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br")])],-1),to=t("h3",{id:"font-best-practice"},[t("a",{class:"header-anchor",href:"#font-best-practice","aria-hidden":"true"},"#"),e(" Font Best Practice")],-1),eo=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token property"},"text-decoration"),t("span",{class:"token punctuation"},":"),e(" none"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token property"},"text-transform"),t("span",{class:"token punctuation"},":"),e(" uppercase"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token property"},"color"),t("span",{class:"token punctuation"},":"),e(" black"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token property"},"line-height"),t("span",{class:"token punctuation"},":"),e(" 100px"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token property"},"letter-spacing"),t("span",{class:"token punctuation"},":"),e(" 1.3px"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token property"},"font-family"),t("span",{class:"token punctuation"},":"),e(" sans-serif"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token property"},"font-size"),t("span",{class:"token punctuation"},":"),e(" 12px"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token property"},"font-weight"),t("span",{class:"token punctuation"},":"),e(" 400"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br")])],-1),lo=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},"小米米官网:"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"font-family"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token string"},"'Arial'"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'Microsoft YaHei'"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'黑体'"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'宋体'"),t("span",{class:"token punctuation"},","),e(" sans-serif"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},"淘宝技术研发中心:"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"font"),t("span",{class:"token punctuation"},":"),e(" 12px/1.5 Tahoma"),t("span",{class:"token punctuation"},","),e(" Helvetica"),t("span",{class:"token punctuation"},","),e(" Arial"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'宋体'"),t("span",{class:"token punctuation"},","),e(" sans-serif"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},"加网:"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"font"),t("span",{class:"token punctuation"},":"),e(" 14px/1.5 "),t("span",{class:"token string"},"'Microsoft YaHei'"),t("span",{class:"token punctuation"},","),e(" arial"),t("span",{class:"token punctuation"},","),e(" tahoma"),t("span",{class:"token punctuation"},","),e(" \\5b8b\\4f53"),t("span",{class:"token punctuation"},","),e(" sans-serif"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},"淘宝ued:"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"font"),t("span",{class:"token punctuation"},":"),e(" 12px/1 Tahoma"),t("span",{class:"token punctuation"},","),e(" Helvetica"),t("span",{class:"token punctuation"},","),e(" Arial"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'\\5b8b\\4f53'"),t("span",{class:"token punctuation"},","),e(" sans-serif"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},"一淘ux:"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"font-family"),t("span",{class:"token punctuation"},":"),e(" Helvetica"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'Hiragino Sans GB'"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'Microsoft Yahei'"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'微软雅黑'"),t("span",{class:"token punctuation"},","),e("\n Arial"),t("span",{class:"token punctuation"},","),e(" sans-serif"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n "),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"font"),t("span",{class:"token punctuation"},":"),e(" 12px/1 Tahoma"),t("span",{class:"token punctuation"},","),e(" Helvetica"),t("span",{class:"token punctuation"},","),e(" Arial"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'\\5b8b\\4f53'"),t("span",{class:"token punctuation"},","),e(" sans-serif"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br")])],-1),oo=t("div",{class:"language-c line-numbers-mode"},[t("pre",null,[t("code",null,[e("宋体 SimSun\n黑体 SimHei\n微软雅黑 Microsoft YaHei\n微软正黑体 Microsoft JhengHei\n新宋体 NSimSun\n新细明体 PMingLiU\n细明体 MingLiU\n标楷体 DFKai"),t("span",{class:"token operator"},"-"),e("SB\n仿宋 FangSong\n楷体 KaiTi\n仿宋_GB2312 FangSong_GB2312\n楷体_GB2312 KaiTi_GB2312\n\n宋体:SimSun\n\n华文细黑:STHeiti Light "),t("span",{class:"token punctuation"},"["),e("STXihei"),t("span",{class:"token punctuation"},"]"),e("\n华文黑体:STHeiti\n华文楷体:STKaiti\n华文宋体:STSong\n华文仿宋:STFangsong\n儷黑 Pro:LiHei Pro Medium\n儷宋 Pro:LiSong Pro Light\n標楷體:BiauKai\n蘋果儷中黑:Apple LiGothic Medium\n蘋果儷細宋:Apple LiSung Light\n\n\n新細明體:PMingLiU\n細明體:MingLiU\n標楷體:DFKai"),t("span",{class:"token operator"},"-"),e("SB\n黑体:SimHei\n新宋体:NSimSun\n仿宋:FangSong\n楷体:KaiTi\n仿宋_GB2312:FangSong_GB2312\n楷体_GB2312:KaiTi_GB2312\n微軟正黑體:Microsoft JhengHei\n微软雅黑体:Microsoft YaHei\n\n隶书:LiSu\n幼圆:YouYuan\n华文细黑:STXihei\n华文楷体:STKaiti\n华文宋体:STSong\n华文中宋:STZhongsong\n华文仿宋:STFangsong\n方正舒体:FZShuTi\n方正姚体:FZYaoti\n华文彩云:STCaiyun\n华文琥珀:STHupo\n华文隶书:STLiti\n华文行楷:STXingkai\n华文新魏:STXinwei\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br"),t("span",{class:"line-number"},"25"),t("br"),t("span",{class:"line-number"},"26"),t("br"),t("span",{class:"line-number"},"27"),t("br"),t("span",{class:"line-number"},"28"),t("br"),t("span",{class:"line-number"},"29"),t("br"),t("span",{class:"line-number"},"30"),t("br"),t("span",{class:"line-number"},"31"),t("br"),t("span",{class:"line-number"},"32"),t("br"),t("span",{class:"line-number"},"33"),t("br"),t("span",{class:"line-number"},"34"),t("br"),t("span",{class:"line-number"},"35"),t("br"),t("span",{class:"line-number"},"36"),t("br"),t("span",{class:"line-number"},"37"),t("br"),t("span",{class:"line-number"},"38"),t("br"),t("span",{class:"line-number"},"39"),t("br"),t("span",{class:"line-number"},"40"),t("br"),t("span",{class:"line-number"},"41"),t("br"),t("span",{class:"line-number"},"42"),t("br"),t("span",{class:"line-number"},"43"),t("br"),t("span",{class:"line-number"},"44"),t("br"),t("span",{class:"line-number"},"45"),t("br"),t("span",{class:"line-number"},"46"),t("br"),t("span",{class:"line-number"},"47"),t("br"),t("span",{class:"line-number"},"48"),t("br"),t("span",{class:"line-number"},"49"),t("br"),t("span",{class:"line-number"},"50"),t("br"),t("span",{class:"line-number"},"51"),t("br"),t("span",{class:"line-number"},"52"),t("br"),t("span",{class:"line-number"},"53"),t("br")])],-1),co=t("h2",{id:"css-counter"},[t("a",{class:"header-anchor",href:"#css-counter","aria-hidden":"true"},"#"),e(" CSS Counter")],-1),po=t("p",null,"Adjust the appearance of content based on its location in a document.",-1),uo=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token comment"},"/* Set a counter named 'section', and its initial value is 0. */"),e("\n"),t("span",{class:"token selector"},"body"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"counter-reset"),t("span",{class:"token punctuation"},":"),e(" section"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token comment"},"/* Increment the value of section counter by 1 */"),e("\n"),t("span",{class:"token comment"},"/* Display the value of section counter */"),e("\n"),t("span",{class:"token selector"},"h3::before"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"counter-increment"),t("span",{class:"token punctuation"},":"),e(" section"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"content"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"counter"),t("span",{class:"token punctuation"},"("),e("section"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br")])],-1),ro=t("h2",{id:"css-filter"},[t("a",{class:"header-anchor",href:"#css-filter","aria-hidden":"true"},"#"),e(" CSS Filter")],-1),io=t("ul",null,[t("li",null,"来源自 SVG 的滤镜特效"),t("li",null,[t("a",{href:"https://github.com/una/CSSgram",target:"_blank",rel:"noopener noreferrer"},"Instagram Filter")])],-1),ko=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token property"},"filter"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token url"},[t("span",{class:"token function"},"url"),t("span",{class:"token punctuation"},"("),e("resources.svg"),t("span",{class:"token punctuation"},")")]),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/*引用SVG filter元素*/"),e("\n"),t("span",{class:"token property"},"filter"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"blur"),t("span",{class:"token punctuation"},"("),e("5px"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/*模糊*/"),e("\n"),t("span",{class:"token property"},"filter"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"brightness"),t("span",{class:"token punctuation"},"("),e("0.4"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/*高光*/"),e("\n"),t("span",{class:"token property"},"filter"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"contrast"),t("span",{class:"token punctuation"},"("),e("200%"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/*对比度*/"),e("\n"),t("span",{class:"token property"},"filter"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"drop-shadow"),t("span",{class:"token punctuation"},"("),e("16px 16px 20px blue"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/*阴影*/"),e("\n"),t("span",{class:"token property"},"filter"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"grayscale"),t("span",{class:"token punctuation"},"("),e("50%"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/*灰度*/"),e("\n"),t("span",{class:"token property"},"filter"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"hue-rotate"),t("span",{class:"token punctuation"},"("),e("90deg"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/*色相旋转*/"),e("\n"),t("span",{class:"token property"},"filter"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"invert"),t("span",{class:"token punctuation"},"("),e("75%"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/*颜色翻转/反相*/"),e("\n"),t("span",{class:"token property"},"filter"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"opacity"),t("span",{class:"token punctuation"},"("),e("25%"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/*透明度*/"),e("\n"),t("span",{class:"token property"},"filter"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"saturate"),t("span",{class:"token punctuation"},"("),e("30%"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/*饱和度*/"),e("\n"),t("span",{class:"token property"},"filter"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"sepia"),t("span",{class:"token punctuation"},"("),e("60%"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/*老照片*/"),e("\n\n"),t("span",{class:"token comment"},"/* Apply multiple filters */"),e("\n"),t("span",{class:"token property"},"filter"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"contrast"),t("span",{class:"token punctuation"},"("),e("175%"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token function"},"brightness"),t("span",{class:"token punctuation"},"("),e("3%"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token comment"},"/* Global values */"),e("\n"),t("span",{class:"token property"},"filter"),t("span",{class:"token punctuation"},":"),e(" inherit"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token property"},"filter"),t("span",{class:"token punctuation"},":"),e(" initial"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token property"},"filter"),t("span",{class:"token punctuation"},":"),e(" unset"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br")])],-1),bo=t("h3",{id:"svg-filter"},[t("a",{class:"header-anchor",href:"#svg-filter","aria-hidden":"true"},"#"),e(" SVG Filter")],-1),mo=t("p",null,"内投影滤镜",-1),go=t("div",{class:"language-html line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("svg")]),e("\n "),t("span",{class:"token attr-name"},"width"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("300"),t("span",{class:"token punctuation"},'"')]),e("\n "),t("span",{class:"token attr-name"},"height"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("300"),t("span",{class:"token punctuation"},'"')]),e("\n "),t("span",{class:"token attr-name"},"viewBox"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("0 0 20 20"),t("span",{class:"token punctuation"},'"')]),e("\n "),t("span",{class:"token special-attr"},[t("span",{class:"token attr-name"},"style"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),t("span",{class:"token value css language-css"},[t("span",{class:"token property"},"position"),t("span",{class:"token punctuation"},":"),e("absolute"),t("span",{class:"token punctuation"},";"),t("span",{class:"token property"},"left"),t("span",{class:"token punctuation"},":"),e("-999px"),t("span",{class:"token punctuation"},";")]),t("span",{class:"token punctuation"},'"')])]),e("\n"),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("filter")]),e(),t("span",{class:"token attr-name"},"id"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("inset-shadow"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token comment"},"\x3c!-- 投影偏移 --\x3e"),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("feOffset")]),e(),t("span",{class:"token attr-name"},"dx"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("0"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"dy"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("0"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token punctuation"},"/>")]),e("\n "),t("span",{class:"token comment"},"\x3c!-- 投影模糊 --\x3e"),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("feGaussianBlur")]),e(),t("span",{class:"token attr-name"},"stdDeviation"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("6"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"result"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("offset-blur"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token punctuation"},"/>")]),e("\n "),t("span",{class:"token comment"},"\x3c!-- 反转投影使其变成内投影 --\x3e"),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("feComposite")]),e("\n "),t("span",{class:"token attr-name"},"operator"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("out"),t("span",{class:"token punctuation"},'"')]),e("\n "),t("span",{class:"token attr-name"},"in"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("SourceGraphic"),t("span",{class:"token punctuation"},'"')]),e("\n "),t("span",{class:"token attr-name"},"in2"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("offset-blur"),t("span",{class:"token punctuation"},'"')]),e("\n "),t("span",{class:"token attr-name"},"result"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("inverse"),t("span",{class:"token punctuation"},'"')]),e("\n "),t("span",{class:"token punctuation"},"/>")]),e("\n "),t("span",{class:"token comment"},"\x3c!-- 内投影附加黑色 --\x3e"),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("feFlood")]),e(),t("span",{class:"token attr-name"},"flood-color"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("black"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"flood-opacity"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e(".95"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"result"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("color"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token punctuation"},"/>")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("feComposite")]),e(),t("span",{class:"token attr-name"},"operator"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("in"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"in"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("color"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"in2"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("inverse"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"result"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("shadow"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token punctuation"},"/>")]),e("\n "),t("span",{class:"token comment"},"\x3c!-- 把内投影显示在图像上 --\x3e"),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("feComposite")]),e(),t("span",{class:"token attr-name"},"operator"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("over"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"in"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("shadow"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"in2"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("SourceGraphic"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token punctuation"},"/>")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("filter")]),t("span",{class:"token punctuation"},">")]),e("\n"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("svg")]),t("span",{class:"token punctuation"},">")]),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br"),t("span",{class:"line-number"},"25"),t("br")])],-1),ho=t("p",null,"毛玻璃滤镜",-1),fo=t("div",{class:"language-html line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("svg")]),e(),t("span",{class:"token attr-name"},"width"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("0"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"height"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("0"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token special-attr"},[t("span",{class:"token attr-name"},"style"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),t("span",{class:"token value css language-css"},[t("span",{class:"token property"},"position"),t("span",{class:"token punctuation"},":"),e("absolute"),t("span",{class:"token punctuation"},";")]),t("span",{class:"token punctuation"},'"')])]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("filter")]),e(),t("span",{class:"token attr-name"},"id"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("blur"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"color-interpolation-filters"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("sRGB"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("feGaussianBlur")]),e(),t("span",{class:"token attr-name"},"stdDeviation"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("6"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"edgeMode"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("duplicate"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token punctuation"},"/>")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("feComponentTransfer")]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("feFuncA")]),e(),t("span",{class:"token attr-name"},"type"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("discrete"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"tableValues"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("0 1"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token punctuation"},"/>")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("feComponentTransfer")]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("filter")]),t("span",{class:"token punctuation"},">")]),e("\n"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("svg")]),t("span",{class:"token punctuation"},">")]),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br")])],-1),yo=t("h3",{id:"backdrop-filter"},[t("a",{class:"header-anchor",href:"#backdrop-filter","aria-hidden":"true"},"#"),e(" Backdrop Filter")],-1),vo=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},"body"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"background-image"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token url"},[t("span",{class:"token function"},"url"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string url"},"'https://images.unsplash.com/image'"),t("span",{class:"token punctuation"},")")]),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background-position"),t("span",{class:"token punctuation"},":"),e(" center"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".card"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"backdrop-filter"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"blur"),t("span",{class:"token punctuation"},"("),e("12px"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token function"},"saturate"),t("span",{class:"token punctuation"},"("),e("200%"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background-color"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"rgba"),t("span",{class:"token punctuation"},"("),e("17"),t("span",{class:"token punctuation"},","),e(" 25"),t("span",{class:"token punctuation"},","),e(" 40"),t("span",{class:"token punctuation"},","),e(" 0.54"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"border-radius"),t("span",{class:"token punctuation"},":"),e(" 12px"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"border"),t("span",{class:"token punctuation"},":"),e(" 1px solid "),t("span",{class:"token function"},"rgba"),t("span",{class:"token punctuation"},"("),e("255"),t("span",{class:"token punctuation"},","),e(" 255"),t("span",{class:"token punctuation"},","),e(" 255"),t("span",{class:"token punctuation"},","),e(" 0.125"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br")])],-1),xo=t("h2",{id:"css-interactive"},[t("a",{class:"header-anchor",href:"#css-interactive","aria-hidden":"true"},"#"),e(" CSS Interactive")],-1),wo=t("h3",{id:"cursor-and-pointer"},[t("a",{class:"header-anchor",href:"#cursor-and-pointer","aria-hidden":"true"},"#"),e(" Cursor and Pointer")],-1),So=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".wrap"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"cursor"),t("span",{class:"token punctuation"},":"),e(" default"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"pointer-events"),t("span",{class:"token punctuation"},":"),e(" none"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br")])],-1),Co=t("h3",{id:"user-select"},[t("a",{class:"header-anchor",href:"#user-select","aria-hidden":"true"},"#"),e(" User Select")],-1),qo=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".wrap"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"-webkit-touch-callout"),t("span",{class:"token punctuation"},":"),e(" none"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"-webkit-user-select"),t("span",{class:"token punctuation"},":"),e(" none"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"-moz-user-select"),t("span",{class:"token punctuation"},":"),e(" none"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"-ms-user-select"),t("span",{class:"token punctuation"},":"),e(" none"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"user-select"),t("span",{class:"token punctuation"},":"),e(" none"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br")])],-1),Fo=t("h3",{id:"css-form"},[t("a",{class:"header-anchor",href:"#css-form","aria-hidden":"true"},"#"),e(" CSS Form")],-1),zo=t("ul",null,[t("li",null,"输入框光标颜色")],-1),Po=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},"input"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"caret-color"),t("span",{class:"token punctuation"},":"),e(" red"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br")])],-1),To=t("h2",{id:"object-position-and-fit"},[t("a",{class:"header-anchor",href:"#object-position-and-fit","aria-hidden":"true"},"#"),e(" Object Position and Fit")],-1),Bo=t("p",null,"object-position/object-fit 只针对替换元素有作用:",-1),Mo=t("ul",null,[t("li",null,"form component"),t("li",null,"img"),t("li",null,"video")],-1),_o=t("p",null,"object-position/object-fit 之间的关系有点类似于 background-position/background-size, 可以处理图片拉伸变形问题.",-1),jo=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".image-container"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"position"),t("span",{class:"token punctuation"},":"),e(" relative"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"padding-bottom"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"calc"),t("span",{class:"token punctuation"},"("),e("2 / 3"),t("span",{class:"token punctuation"},")"),e(" * 100%"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/* (height / width) ratio */"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".image-container > img"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"position"),t("span",{class:"token punctuation"},":"),e(" absolute"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"width"),t("span",{class:"token punctuation"},":"),e(" 100%"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"height"),t("span",{class:"token punctuation"},":"),e(" 100%"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"object-fit"),t("span",{class:"token punctuation"},":"),e(" cover"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br")])],-1),Ao=t("h2",{id:"animation"},[t("a",{class:"header-anchor",href:"#animation","aria-hidden":"true"},"#"),e(" Animation")],-1),Lo=t("ul",null,[t("li",null,[t("a",{href:"https://github.com/cssanimation/css-animation-101",target:"_blank",rel:"noopener noreferrer"},"Animation 101 Tutorial")])],-1),Vo=t("h3",{id:"animation-property"},[t("a",{class:"header-anchor",href:"#animation-property","aria-hidden":"true"},"#"),e(" Animation Property")],-1),Go=t("h4",{id:"transition-and-transform"},[t("a",{class:"header-anchor",href:"#transition-and-transform","aria-hidden":"true"},"#"),e(" Transition and Transform")],-1),Do=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".div"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"transform"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"scaleX"),t("span",{class:"token punctuation"},"("),e("0"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"transition"),t("span",{class:"token punctuation"},":"),e(" * * transform * * 0.5s ease"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".div:hover"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"transform"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"scaleX"),t("span",{class:"token punctuation"},"("),e("1"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br")])],-1),Io=t("h4",{id:"animation-and-transform"},[t("a",{class:"header-anchor",href:"#animation-and-transform","aria-hidden":"true"},"#"),e(" Animation and Transform")],-1),Eo=t("h3",{id:"animation-helper"},[t("a",{class:"header-anchor",href:"#animation-helper","aria-hidden":"true"},"#"),e(" Animation Helper")],-1),Ho=t("ul",null,[t("li",null,"opacity"),t("li",null,[t("code",null,"overflow: hidden")]),t("li",null,[e("pseudo elements ("),t("code",null,"::before"),e(" and "),t("code",null,"::after"),e(")")]),t("li",null,"pseudo elements with animation (opacity, scale, translate, width/height, margin, background-position)"),t("li",null,[t("code",null,":hover"),e("/"),t("code",null,":focus"),e("/"),t("code",null,":target"),e(" + animation/transform/transition")]),t("li",null,"transform: scale/translate"),t("li",null,"animation-delay"),t("li",null,"width/height"),t("li",null,"max-width/max-height"),t("li",null,"margin"),t("li",null,"border"),t("li",null,"background"),t("li",null,"background-position"),t("li",null,"background with multiple gradient"),t("li",null,"single box-shadow"),t("li",null,"multiple box-shadow")],-1),No=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token property"},"overflow"),t("span",{class:"token punctuation"},":"),e(" hidden"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token property"},"z-index"),t("span",{class:"token punctuation"},":"),e(" -1"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br")])],-1),Oo=t("p",null,"Changing top/right/bottom/left of pseudo element can change animation start point (e.g bottom: 0, right: 0, change width/height from 0 to 100%, size animation will start from bottom-right corner).",-1),Ro=t("h3",{id:"transition"},[t("a",{class:"header-anchor",href:"#transition","aria-hidden":"true"},"#"),e(" Transition")],-1),Xo=t("h4",{id:"basic-usage"},[t("a",{class:"header-anchor",href:"#basic-usage","aria-hidden":"true"},"#"),e(" Basic Usage")],-1),Yo=t("ul",null,[t("li",null,"transition-property: color;"),t("li",null,"transition-duration: 1s;"),t("li",null,"transition-timing-function: cubic-bezier(.42, 0, .58, 1);"),t("li",null,"transition-delay: .5s;")],-1),Wo=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".element"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"transition"),t("span",{class:"token punctuation"},":"),e(" property duration timing-function delay"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"transition"),t("span",{class:"token punctuation"},":"),e(" transform 0.5s ease-in-out 0.2s"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br")])],-1),Uo=t("h4",{id:"transition-internal"},[t("a",{class:"header-anchor",href:"#transition-internal","aria-hidden":"true"},"#"),e(" Transition Internal")],-1),Zo=t("p",null,[t("code",null,"transition"),e(" take effect only when browser detecting different styles between "),t("code",null,"style"),e(" stage.")],-1),Jo=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token comment"},"// transition not working"),e("\npanel"),t("span",{class:"token punctuation"},"."),e("style"),t("span",{class:"token punctuation"},"."),e("transform "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token string"},"'scale(0)'"),t("span",{class:"token punctuation"},";"),e("\npanel"),t("span",{class:"token punctuation"},"."),e("style"),t("span",{class:"token punctuation"},"."),e("transition "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token string"},"'transform .5s'"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token comment"},"// previous `transform` is empty"),e("\npanel"),t("span",{class:"token punctuation"},"."),e("style"),t("span",{class:"token punctuation"},"."),e("transform "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token string"},"'scale(1)'"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token comment"},"// transition working"),e("\npanel"),t("span",{class:"token punctuation"},"."),e("style"),t("span",{class:"token punctuation"},"."),e("transform "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token string"},"'scale(0)'"),t("span",{class:"token punctuation"},";"),e("\npanel"),t("span",{class:"token punctuation"},"."),e("style"),t("span",{class:"token punctuation"},"."),e("transition "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token string"},"'transform .5s'"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token comment"},"// previous `transform` is `scale(0)`"),e("\n"),t("span",{class:"token function"},"requestAnimationFrame"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n panel"),t("span",{class:"token punctuation"},"."),e("style"),t("span",{class:"token punctuation"},"."),e("transform "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token string"},"'scale(1)'"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token comment"},"// transition working"),e("\npanel"),t("span",{class:"token punctuation"},"."),e("style"),t("span",{class:"token punctuation"},"."),e("transform "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token string"},"'scale(0)'"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token comment"},"// `getComputedStyle(element).property` trigger a new `style` stage"),e("\n"),t("span",{class:"token function"},"getComputedStyle"),t("span",{class:"token punctuation"},"("),e("panel"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},"."),e("transform"),t("span",{class:"token punctuation"},";"),e("\npanel"),t("span",{class:"token punctuation"},"."),e("style"),t("span",{class:"token punctuation"},"."),e("transition "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token string"},"'transform .5s'"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token comment"},"// previous `transform` is `scale(0)`"),e("\npanel"),t("span",{class:"token punctuation"},"."),e("style"),t("span",{class:"token punctuation"},"."),e("transform "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token string"},"'scale(1)'"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br")])],-1),Qo=t("h4",{id:"transition-direction"},[t("a",{class:"header-anchor",href:"#transition-direction","aria-hidden":"true"},"#"),e(" Transition Direction")],-1),Ko=t("p",null,"By specifying the transition on the element itself, define the transition to occur in both directions (hover on and hover off).",-1),$o=t("p",null,[e("Change "),t("code",null,"transition"),e(" when "),t("code",null,":hover"),e(" etc state bring magic effect:")],-1),nc=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".menu-nav"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"visibility"),t("span",{class:"token punctuation"},":"),e(" hidden"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"transform"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"translateX"),t("span",{class:"token punctuation"},"("),e("-100%"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"transition"),t("span",{class:"token punctuation"},":"),e(" all 0.4s ease-in-out"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".menu-link"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"opacity"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"transition"),t("span",{class:"token punctuation"},":"),e(" opacity 0.4s ease-in-out"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".menu-toggle:checked ~ .menu-nav"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"visibility"),t("span",{class:"token punctuation"},":"),e(" visible"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"transform"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"translateX"),t("span",{class:"token punctuation"},"("),e("0"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".menu-toggle:checked ~ .menu-nav .menu-link"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"opacity"),t("span",{class:"token punctuation"},":"),e(" 1"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token comment"},"/* magic effect for delaying transition */"),e("\n "),t("span",{class:"token property"},"transition"),t("span",{class:"token punctuation"},":"),e(" opacity 0.4s ease-in-out 0.4s"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br")])],-1),sc=t("h4",{id:"class-controls-on-transition"},[t("a",{class:"header-anchor",href:"#class-controls-on-transition","aria-hidden":"true"},"#"),e(" Class Controls on Transition")],-1),ac=t("p",null,[e("Transition Best Practice: with "),t("code",null,"transition: opacity 0.5s"),e(" set, first add "),t("code",null,".opacity-0"),e(" class, then replace it with "),t("code",null,".opacity-1"),e(" class. Transition animation get trigger as css style of element changed (class changed).")],-1),tc=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".element"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"transition"),t("span",{class:"token punctuation"},":"),e(" opacity 0.5s"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token comment"},"/* before-enter -> enter -> before-leave -> leave */"),e("\n"),t("span",{class:"token selector"},".enter,\n.before-leave"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"opacity"),t("span",{class:"token punctuation"},":"),e(" 1"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".leave,\n.before-enter"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"opacity"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br")])],-1),ec=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[e("div"),t("span",{class:"token punctuation"},"."),e("classList"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"add"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'before-enter'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token function"},"setTimeout"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n div"),t("span",{class:"token punctuation"},"."),e("classList"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"remove"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'before-enter'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n div"),t("span",{class:"token punctuation"},"."),e("classList"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"add"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'enter'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"20"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br")])],-1),lc=t("h3",{id:"transform"},[t("a",{class:"header-anchor",href:"#transform","aria-hidden":"true"},"#"),e(" Transform")],-1),oc=t("p",null,"Transformations do affect the visual rendering, but have no affect on the CSS layout other than affecting overflow. Transforms are also taken into account when computing client rectangles exposed via the Element Interface Extensions, namely getClientRects() and getBoundingClientRect(), which are specified in [CSSOM-VIEW].",-1),cc=t("ul",null,[t("li",null,"scale/X/Y/Z/3d(): 0 - n"),t("li",null,"translate/X/Y/Z/3d(): n px"),t("li",null,"rotate/X/Y/Z/3d(): deg"),t("li",null,"skew/X/Y(): deg"),t("li",null,"matrix()/matrix3d()"),t("li",null,[e("transform-origin: change transform start point "),t("code",null,"top bottom center left right")]),t("li",null,[e("perspective(): 为 "),t("strong",null,"3D"),e(" 转换元素定义透视视图")]),t("li",null,"keep translate(-50%, -50%) in keyframe transform property list when using it for alignment")],-1),pc=t("p",null,"一般需要在容器元素上加上以下样式:",-1),uc=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".transform-container"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"perspective"),t("span",{class:"token punctuation"},":"),e(" 1024px"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"transform-style"),t("span",{class:"token punctuation"},":"),e(" preserve-3d"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".front .back"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"backface-visibility"),t("span",{class:"token punctuation"},":"),e(" hidden"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br")])],-1),rc=t("blockquote",null,[t("p",null,":hover should not add to transformed elements :hover should add to parent element")],-1),ic=t("p",null,[e("当旋转绝对定位居中的元素时, 需要改变 "),t("code",null,"transform-origin"),e(":")],-1),kc=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".rotate"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"position"),t("span",{class:"token punctuation"},":"),e(" absolute"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"top"),t("span",{class:"token punctuation"},":"),e(" 200px"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"left"),t("span",{class:"token punctuation"},":"),e(" 50%"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"transform"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"translateX"),t("span",{class:"token punctuation"},"("),e("-50%"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"transform-origin"),t("span",{class:"token punctuation"},":"),e(" left"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br")])],-1),bc=t("h4",{id:"perspective"},[t("a",{class:"header-anchor",href:"#perspective","aria-hidden":"true"},"#"),e(" Perspective")],-1),mc=t("p",null,"translateZ 的功能就是让元素在自己的眼前或近或远",-1),dc=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".parent"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"perspective"),t("span",{class:"token punctuation"},":"),e(" 201px"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br")])],-1),gc=t("p",null,"其子元素:",-1),hc=t("ul",null,[t("li",null,"设置的 translateZ 值越小,则子元素大小越小(因为元素远去,我们眼睛看到的就会变小);"),t("li",null,"translateZ 值越大,该元素也会越来越大"),t("li",null,"当 translateZ 值非常接近 201 像素,但是不超过 201 像素的时候(如 200 像素) 该元素的大小就会撑满整个屏幕(父辈元素没有 overflow:hidden 的限制)"),t("li",null,"当 translateZ 值再变大,超过 201 像素的时候,该元素看不见了")],-1),fc=t("h4",{id:"transform-style"},[t("a",{class:"header-anchor",href:"#transform-style","aria-hidden":"true"},"#"),e(" Transform Style")],-1),yc=t("p",null,[e("transform-style 属性也是 3D 效果中经常使用的, 其两个参数,"),t("code",null,"flat|preserve-3d"),e(". 前者 flat 为默认值,表示平面的; 后者 preserve-3d 表示 3D 透视")],-1),vc=t("h4",{id:"backface-visibility"},[t("a",{class:"header-anchor",href:"#backface-visibility","aria-hidden":"true"},"#"),e(" backface-visibility")],-1),xc=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token property"},"backface-visibility"),t("span",{class:"token punctuation"},":"),e(" hidden"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br")])],-1),wc=t("p",null,[e("当元素 "),t("code",null,"rotateY(180deg)"),e(" 时,元素将被隐藏")],-1),Sc=t("h3",{id:"animation-details"},[t("a",{class:"header-anchor",href:"#animation-details","aria-hidden":"true"},"#"),e(" Animation Details")],-1),Cc=t("ul",null,[t("li",null,"transform: scale, translate, rotate, skew"),t("li",null,"animation bounce/cache: first -100, then, +5/+20, finally 0")],-1),qc=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".element"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"animation"),t("span",{class:"token punctuation"},":"),e(" name duration timing-function delay iteration-count direction"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br")])],-1),Fc=t("blockquote",null,[t("p",null,"Tip : fade in body style")],-1),zc=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token atrule"},[t("span",{class:"token rule"},"@keyframes"),e(" body-fade-in")]),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token selector"},"from"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"opacity"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token selector"},"to"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"opacity"),t("span",{class:"token punctuation"},":"),e(" 1"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},"body"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"animation-name"),t("span",{class:"token punctuation"},":"),e(" body-fade-in"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"animation-duration"),t("span",{class:"token punctuation"},":"),e(" 2.5s"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"animation-timing-function"),t("span",{class:"token punctuation"},":"),e(" ease"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"animation-iteration-count"),t("span",{class:"token punctuation"},":"),e(" 1"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br")])],-1),Pc=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token atrule"},[t("span",{class:"token rule"},"@keyframes"),e(" name")]),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token selector"},"0%/from"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"color"),t("span",{class:"token punctuation"},":"),e(" red"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token selector"},"50%"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"color"),t("span",{class:"token punctuation"},":"),e(" blue"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token selector"},"100%/to"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"color"),t("span",{class:"token punctuation"},":"),e(" green"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token comment"},"/*直接动画*/"),e("\n"),t("span",{class:"token selector"},".div"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"animation-name"),t("span",{class:"token punctuation"},":"),e(" name"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"animation-duration"),t("span",{class:"token punctuation"},":"),e(" 1s"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"animation-timing-function"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"cubic-bezier"),t("span",{class:"token punctuation"},"("),e("0.42"),t("span",{class:"token punctuation"},","),e(" 0"),t("span",{class:"token punctuation"},","),e(" 0.58"),t("span",{class:"token punctuation"},","),e(" 1"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"animation-delay"),t("span",{class:"token punctuation"},":"),e(" 0.5s"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token comment"},"/*hover后再播放动画,高级化transform+transition*/"),e("\n"),t("span",{class:"token selector"},".div:hover"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"animation-name"),t("span",{class:"token punctuation"},":"),e(" name"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"animation-duration"),t("span",{class:"token punctuation"},":"),e(" 1s"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"animation-timing-function"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"cubic-bezier"),t("span",{class:"token punctuation"},"("),e("0.42"),t("span",{class:"token punctuation"},","),e(" 0"),t("span",{class:"token punctuation"},","),e(" 0.58"),t("span",{class:"token punctuation"},","),e(" 1"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"animation-delay"),t("span",{class:"token punctuation"},":"),e(" 0.5s"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br"),t("span",{class:"line-number"},"25"),t("br"),t("span",{class:"line-number"},"26"),t("br"),t("span",{class:"line-number"},"27"),t("br")])],-1),Tc=t("ul",null,[t("li",null,"animation-iteration-count: 执行次数 infinite"),t("li",null,[e("animation-direction: 执行方向 "),t("ul",null,[t("li",null,"normal 0%->100%方向"),t("li",null,"alternate/alternate-reverse 不断交替方向"),t("li",null,"reverse 100%->0%方向")])]),t("li",null,"animation-fill-mode: forwards"),t("li",null,[e("animation-play-state: "),t("code",null,"paused"),e("/"),t("code",null,"running")]),t("li",null,[e("DOM events: "),t("ul",null,[t("li",null,"animationiteration: triggered after each animation iteration"),t("li",null,"animationend: triggered after an animation completes"),t("li",null,"animationstart: triggered at the start of an animation")])])],-1),Bc=t("h4",{id:"animation-play-state"},[t("a",{class:"header-anchor",href:"#animation-play-state","aria-hidden":"true"},"#"),e(" Animation Play State")],-1),Mc=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},"div"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"animation-play-state"),t("span",{class:"token punctuation"},":"),e(" paused"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},":checked ~ div"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"animation-play-state"),t("span",{class:"token punctuation"},":"),e(" running"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br")])],-1),_c=t("p",null,[e("animation pattern: 利用 "),t("code",null,"animation-paly-state"),e(" 与 JS 添加 "),t("code",null,".animate"),e(" 类控制动画开始和停止.")],-1),jc=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".to-animate"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"animation"),t("span",{class:"token punctuation"},":"),e(" animationName 1.5s linear"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"animation-play-state"),t("span",{class:"token punctuation"},":"),e(" paused"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"animation-iteration-count"),t("span",{class:"token punctuation"},":"),e(" infinite"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".animate"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"animation-iteration-count"),t("span",{class:"token punctuation"},":"),e(" running"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br")])],-1),Ac=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[e("element"),t("span",{class:"token punctuation"},"."),e("classList"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"add"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'animate'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token function"},"setTimeout"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(" element"),t("span",{class:"token punctuation"},"."),e("classList"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"remove"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'animate'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},","),e(" duration"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br")])],-1),Lc=t("h4",{id:"flip"},[t("a",{class:"header-anchor",href:"#flip","aria-hidden":"true"},"#"),e(" FLIP")],-1),Vc=t("ul",null,[t("li",null,"first: 初始状态"),t("li",null,"last: 动画结束状态"),t("li",null,[e("invert: last 至 first 的 "),t("code",null,"transform"),e(" 属性")]),t("li",null,[e("play: "),t("code",null,"transition: transform .2s linear")])],-1),Gc=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token comment"},"/* first: scale(1), last: scale(1.2) */"),e("\n"),t("span",{class:"token selector"},".scale-up"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"transform"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"scale"),t("span",{class:"token punctuation"},"("),e("0.8"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"transition"),t("span",{class:"token punctuation"},":"),e(" transform 0.2s linear"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".scale-up:hover"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"transform"),t("span",{class:"token punctuation"},":"),e(" none"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br")])],-1),Dc=t("h3",{id:"animation-best-practice"},[t("a",{class:"header-anchor",href:"#animation-best-practice","aria-hidden":"true"},"#"),e(" Animation Best Practice")],-1),Ic=t("h4",{id:"clear-splash-animation"},[t("a",{class:"header-anchor",href:"#clear-splash-animation","aria-hidden":"true"},"#"),e(" Clear Splash Animation")],-1),Ec=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".cube"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"-webkit-backface-visibility"),t("span",{class:"token punctuation"},":"),e(" hidden"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"backface-visibility"),t("span",{class:"token punctuation"},":"),e(" hidden"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token property"},"-webkit-perspective"),t("span",{class:"token punctuation"},":"),e(" 1000"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"perspective"),t("span",{class:"token punctuation"},":"),e(" 1000"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token property"},"-webkit-transform-style"),t("span",{class:"token punctuation"},":"),e(" preserve-3d"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"transform-style"),t("span",{class:"token punctuation"},":"),e(" preserve-3d"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token property"},"-webkit-transform"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"translate3d"),t("span",{class:"token punctuation"},"("),e("0"),t("span",{class:"token punctuation"},","),e(" 0"),t("span",{class:"token punctuation"},","),e(" 0"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"transform"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"translate3d"),t("span",{class:"token punctuation"},"("),e("0"),t("span",{class:"token punctuation"},","),e(" 0"),t("span",{class:"token punctuation"},","),e(" 0"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token comment"},"/* Other transform properties here */"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br")])],-1),Hc=t("h3",{id:"greensock-library"},[t("a",{class:"header-anchor",href:"#greensock-library","aria-hidden":"true"},"#"),e(" GreenSock Library")],-1),Nc=t("h4",{id:"tweenmax"},[t("a",{class:"header-anchor",href:"#tweenmax","aria-hidden":"true"},"#"),e(" TweenMax")],-1),Oc=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[e("TweenMax"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"fromTo"),t("span",{class:"token punctuation"},"("),e("element"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token punctuation"},"{"),e(" x"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token number"},"0"),e(),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token punctuation"},"{"),e(" x"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token number"},"100"),e(),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br")])],-1),Rc=t("h4",{id:"timelinemax"},[t("a",{class:"header-anchor",href:"#timelinemax","aria-hidden":"true"},"#"),e(" TimelineMax")],-1),Xc=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(" tl "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"new"),e(),t("span",{class:"token class-name"},"TimelineMax"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\ntl"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"staggerFrom"),t("span",{class:"token punctuation"},"("),e("\n "),t("span",{class:"token punctuation"},"["),e("\n "),t("span",{class:"token string"},"'#Cap_1 > g > path:nth-child(1)'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'#Cap_1 > circle:nth-child(7)'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'#Cap_1 > path:nth-child(6)'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'#Cap_1 > circle:nth-child(5)'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token punctuation"},"{"),e("\n scaleY"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token number"},"0"),t("span",{class:"token punctuation"},","),e("\n scaleX"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token number"},"0"),t("span",{class:"token punctuation"},","),e("\n transformOrigin"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token string"},"'center'"),t("span",{class:"token punctuation"},","),e("\n ease"),t("span",{class:"token operator"},":"),e(" Bounce"),t("span",{class:"token punctuation"},"."),e("easeOut"),t("span",{class:"token punctuation"},","),e("\n stagger"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token number"},"0.2"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br")])],-1),Yc=t("h2",{id:"responsive-design"},[t("a",{class:"header-anchor",href:"#responsive-design","aria-hidden":"true"},"#"),e(" Responsive Design")],-1),Wc=t("h3",{id:"responsive-font"},[t("a",{class:"header-anchor",href:"#responsive-font","aria-hidden":"true"},"#"),e(" Responsive Font")],-1),Uc=t("ul",null,[t("li",null,[t("code",null,"em"),e("/"),t("code",null,"rem"),e(" font-size")])],-1),Zc=t("h3",{id:"responsive-length"},[t("a",{class:"header-anchor",href:"#responsive-length","aria-hidden":"true"},"#"),e(" Responsive Length")],-1),Jc=t("ul",null,[t("li",null,[t("code",null,"vw")]),t("li",null,[t("code",null,"vh")]),t("li",null,[t("code",null,"vmin")]),t("li",null,[t("code",null,"vmax")])],-1),Qc=t("h3",{id:"responsive-size"},[t("a",{class:"header-anchor",href:"#responsive-size","aria-hidden":"true"},"#"),e(" Responsive Size")],-1),Kc=t("ul",null,[t("li",null,[e("Size in "),t("code",null,"em"),e(" if the property scales according to it’s font-size.")]),t("li",null,[t("strong",null,"Modular Font Size"),e(": Size in "),t("code",null,"em"),e(" if the font-size should be modular (relative to it's context/parent).")]),t("li",null,[e("Size everything else in "),t("code",null,"rem"),e(" (include media queries).")])],-1),$c=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token comment"},"/* scales to self font-size */"),e("\n"),t("span",{class:"token selector"},".container"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"margin-top"),t("span",{class:"token punctuation"},":"),e(" 1.2em"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br")])],-1),np=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token comment"},"/* modular font size */"),e("\n"),t("span",{class:"token selector"},".container"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"font-size"),t("span",{class:"token punctuation"},":"),e(" 1.2rem"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".container p"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"font-size"),t("span",{class:"token punctuation"},":"),e(" 1em"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".container small"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"font-size"),t("span",{class:"token punctuation"},":"),e(" 0.9em"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br")])],-1),sp=t("h3",{id:"responsive-box"},[t("a",{class:"header-anchor",href:"#responsive-box","aria-hidden":"true"},"#"),e(" Responsive Box")],-1),ap=t("h4",{id:"responsive-width-and-height"},[t("a",{class:"header-anchor",href:"#responsive-width-and-height","aria-hidden":"true"},"#"),e(" Responsive Width and Height")],-1),tp=t("ul",null,[t("li",null,[t("code",null,"min-height")]),t("li",null,[t("code",null,"max-height")]),t("li",null,[t("code",null,"min-width")]),t("li",null,[t("code",null,"max-width")])],-1),ep=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token comment"},"/* responsive images */"),e("\n"),t("span",{class:"token selector"},"img"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"max-width"),t("span",{class:"token punctuation"},":"),e(" 100%"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br")])],-1),lp=t("h4",{id:"responsive-inline-box"},[t("a",{class:"header-anchor",href:"#responsive-inline-box","aria-hidden":"true"},"#"),e(" Responsive Inline Box")],-1),op=t("p",null,[e("use "),t("code",null,"inline-box"),e(" with "),t("code",null,"width")],-1),cp=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".element"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"display"),t("span",{class:"token punctuation"},":"),e(" inline-box"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"width"),t("span",{class:"token punctuation"},":"),e(" 80%"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br")])],-1),pp=t("h3",{id:"responsive-image"},[t("a",{class:"header-anchor",href:"#responsive-image","aria-hidden":"true"},"#"),e(" Responsive Image")],-1),up=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".responsive-image"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"display"),t("span",{class:"token punctuation"},":"),e(" block"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"max-width"),t("span",{class:"token punctuation"},":"),e(" 100%"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"height"),t("span",{class:"token punctuation"},":"),e(" auto"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br")])],-1),rp=t("div",{class:"language-html line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("picture")]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("source")]),e(),t("span",{class:"token attr-name"},"srcset"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("mdn-logo-wide.png"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"media"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("(min-width: 600px)"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token punctuation"},"/>")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("img")]),e(),t("span",{class:"token attr-name"},"src"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("mdn-logo-narrow.png"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"alt"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("MDN"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token punctuation"},"/>")]),e("\n"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("picture")]),t("span",{class:"token punctuation"},">")]),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br")])],-1),ip=t("h2",{id:"media-query"},[t("a",{class:"header-anchor",href:"#media-query","aria-hidden":"true"},"#"),e(" Media Query")],-1),kp=t("ul",null,[t("li",null,[t("code",null,"only"),e(" for improving compatibility with older browsers")]),t("li",null,"definition order matters when media query with a different selector"),t("li",null,[e("JavaScript API: "),t("code",null,"window.matchMedia()")])],-1),bp=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token atrule"},[t("span",{class:"token rule"},"@media"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"not"),e("/"),t("span",{class:"token keyword"},"only"),t("span",{class:"token punctuation"},")"),e(" 设备类型 "),t("span",{class:"token keyword"},"and"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"not"),t("span",{class:"token punctuation"},")"),e(" 设备特性"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"not"),e("/"),t("span",{class:"token keyword"},"only"),t("span",{class:"token punctuation"},")"),e(" 设备类型 "),t("span",{class:"token keyword"},"and"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"not"),t("span",{class:"token punctuation"},")"),e(" 设备特性-1"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token keyword"},"and"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"not"),t("span",{class:"token punctuation"},")"),e(" 设备特性-2"),t("span",{class:"token punctuation"},")")]),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"/* 样式代码 */"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br")])],-1),mp=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token comment"},"/*screen size : 500px ~ 1000px*/"),e("\n"),t("span",{class:"token atrule"},[t("span",{class:"token rule"},"@media"),e(" screen "),t("span",{class:"token keyword"},"and"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token property"},"min-width"),t("span",{class:"token punctuation"},":"),e(" 500px"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token keyword"},"and"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token property"},"max-width"),t("span",{class:"token punctuation"},":"),e(" 1000px"),t("span",{class:"token punctuation"},")")]),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token selector"},".container"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"width"),t("span",{class:"token punctuation"},":"),e(" 750px"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br")])],-1),dp=t("h3",{id:"设备类型"},[t("a",{class:"header-anchor",href:"#设备类型","aria-hidden":"true"},"#"),e(" 设备类型")],-1),gp=t("table",null,[t("thead",null,[t("tr",null,[t("th",{style:{"text-align":"left"}},"类型"),t("th",{style:{"text-align":"left"}},"解释")])]),t("tbody",null,[t("tr",null,[t("td",{style:{"text-align":"left"}},"all"),t("td",{style:{"text-align":"left"}},"所有设备")]),t("tr",null,[t("td",{style:{"text-align":"left"}},"braille"),t("td",{style:{"text-align":"left"}},"盲文")]),t("tr",null,[t("td",{style:{"text-align":"left"}},"embossed"),t("td",{style:{"text-align":"left"}},"盲文打印")]),t("tr",null,[t("td",{style:{"text-align":"left"}},"handheld"),t("td",{style:{"text-align":"left"}},"手持设备")]),t("tr",null,[t("td",{style:{"text-align":"left"}},"print"),t("td",{style:{"text-align":"left"}},"文档打印或打印预览模式")]),t("tr",null,[t("td",{style:{"text-align":"left"}},"projection"),t("td",{style:{"text-align":"left"}},"项目演示,比如幻灯")]),t("tr",null,[t("td",{style:{"text-align":"left"}},"screen"),t("td",{style:{"text-align":"left"}},"彩色电脑屏幕")]),t("tr",null,[t("td",{style:{"text-align":"left"}},"speech"),t("td",{style:{"text-align":"left"}},"演讲")]),t("tr",null,[t("td",{style:{"text-align":"left"}},"tty"),t("td",{style:{"text-align":"left"}},"固定字母间距的网格的媒体,比如电传打字机")]),t("tr",null,[t("td",{style:{"text-align":"left"}},"tv"),t("td",{style:{"text-align":"left"}},"电视")])])],-1),hp=t("h3",{id:"设备特性"},[t("a",{class:"header-anchor",href:"#设备特性","aria-hidden":"true"},"#"),e(" 设备特性")],-1),fp=t("table",null,[t("thead",null,[t("tr",null,[t("th",{style:{"text-align":"left"}},"属性"),t("th",{style:{"text-align":"left"}},"值"),t("th",{style:{"text-align":"left"}},"Min/Max"),t("th",{style:{"text-align":"left"}},"描述")])]),t("tbody",null,[t("tr",null,[t("td",{style:{"text-align":"left"}},"aspect-ratio"),t("td",{style:{"text-align":"left"}},"整数/整数"),t("td",{style:{"text-align":"left"}},"yes"),t("td",{style:{"text-align":"left"}},"渲染界面宽高比例")]),t("tr",null,[t("td",{style:{"text-align":"left"}},"device-aspect-ratio"),t("td",{style:{"text-align":"left"}},"整数/整数"),t("td",{style:{"text-align":"left"}},"yes"),t("td",{style:{"text-align":"left"}},"设备屏幕宽高比例")]),t("tr",null,[t("td",{style:{"text-align":"left"}},"color"),t("td",{style:{"text-align":"left"}},"整数"),t("td",{style:{"text-align":"left"}},"yes"),t("td",{style:{"text-align":"left"}},"每种色彩的字节数")]),t("tr",null,[t("td",{style:{"text-align":"left"}},"color-index"),t("td",{style:{"text-align":"left"}},"整数"),t("td",{style:{"text-align":"left"}},"yes"),t("td",{style:{"text-align":"left"}},"色彩表中的色彩数")]),t("tr",null,[t("td",{style:{"text-align":"left"}},"height"),t("td",{style:{"text-align":"left"}},"length"),t("td",{style:{"text-align":"left"}},"yes"),t("td",{style:{"text-align":"left"}},"渲染界面的高度")]),t("tr",null,[t("td",{style:{"text-align":"left"}},"width"),t("td",{style:{"text-align":"left"}},"length"),t("td",{style:{"text-align":"left"}},"yes"),t("td",{style:{"text-align":"left"}},"渲染界面的宽度")]),t("tr",null,[t("td",{style:{"text-align":"left"}},"device-height"),t("td",{style:{"text-align":"left"}},"length"),t("td",{style:{"text-align":"left"}},"yes"),t("td",{style:{"text-align":"left"}},"设备屏幕的输出高度")]),t("tr",null,[t("td",{style:{"text-align":"left"}},"device-width"),t("td",{style:{"text-align":"left"}},"length"),t("td",{style:{"text-align":"left"}},"yes"),t("td",{style:{"text-align":"left"}},"设备屏幕的输出宽度")]),t("tr",null,[t("td",{style:{"text-align":"left"}},"grid"),t("td",{style:{"text-align":"left"}},"整数"),t("td",{style:{"text-align":"left"}},"no"),t("td",{style:{"text-align":"left"}},"是否是基于格栅的设备")]),t("tr",null,[t("td",{style:{"text-align":"left"}},"monochrome"),t("td",{style:{"text-align":"left"}},"整数"),t("td",{style:{"text-align":"left"}},"yes"),t("td",{style:{"text-align":"left"}},"缓冲器中每像素字节")]),t("tr",null,[t("td",{style:{"text-align":"left"}},"resolution"),t("td",{style:{"text-align":"left"}},"分辨率(“dpi/dpcm”)"),t("td",{style:{"text-align":"left"}},"yes"),t("td",{style:{"text-align":"left"}},"分辨率")]),t("tr",null,[t("td",{style:{"text-align":"left"}},"scan"),t("td",{style:{"text-align":"left"}},"Progressive interlaced"),t("td",{style:{"text-align":"left"}},"no"),t("td",{style:{"text-align":"left"}},"tv 媒体扫描方式")]),t("tr",null,[t("td",{style:{"text-align":"left"}},"orientation"),t("td",{style:{"text-align":"left"}},"Portrait/landscape"),t("td",{style:{"text-align":"left"}},"no"),t("td",{style:{"text-align":"left"}},"横屏或竖屏")])])],-1),yp=t("h4",{id:"prefer-color-scheme"},[t("a",{class:"header-anchor",href:"#prefer-color-scheme","aria-hidden":"true"},"#"),e(" Prefer Color Scheme")],-1),vp=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".day"),e(),t("span",{class:"token punctuation"},"{"),e(),t("span",{class:"token property"},"background"),t("span",{class:"token punctuation"},":"),e(" #eee"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token property"},"color"),t("span",{class:"token punctuation"},":"),e(" black"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token punctuation"},"}"),e("\n"),t("span",{class:"token selector"},".night"),e(),t("span",{class:"token punctuation"},"{"),e(),t("span",{class:"token property"},"background"),t("span",{class:"token punctuation"},":"),e(" #333"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token property"},"color"),t("span",{class:"token punctuation"},":"),e(" white"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token atrule"},[t("span",{class:"token rule"},"@media"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token property"},"prefers-color-scheme"),t("span",{class:"token punctuation"},":"),e(" dark"),t("span",{class:"token punctuation"},")")]),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token selector"},".day.dark-scheme"),e(" "),t("span",{class:"token punctuation"},"{"),e(),t("span",{class:"token property"},"background"),t("span",{class:"token punctuation"},":"),e(" #333"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token property"},"color"),t("span",{class:"token punctuation"},":"),e(" white"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token selector"},".night.dark-scheme"),e(),t("span",{class:"token punctuation"},"{"),e(),t("span",{class:"token property"},"background"),t("span",{class:"token punctuation"},":"),e(" black"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token property"},"color"),t("span",{class:"token punctuation"},":"),e(" #ddd"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token punctuation"},"}"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token atrule"},[t("span",{class:"token rule"},"@media"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token property"},"prefers-color-scheme"),t("span",{class:"token punctuation"},":"),e(" light"),t("span",{class:"token punctuation"},")")]),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token selector"},".day.light-scheme"),e(" "),t("span",{class:"token punctuation"},"{"),e(),t("span",{class:"token property"},"background"),t("span",{class:"token punctuation"},":"),e(" white"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token property"},"color"),t("span",{class:"token punctuation"},":"),e(" #555"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token selector"},".night.light-scheme"),e(),t("span",{class:"token punctuation"},"{"),e(),t("span",{class:"token property"},"background"),t("span",{class:"token punctuation"},":"),e(" #eee"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token property"},"color"),t("span",{class:"token punctuation"},":"),e(" black"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token punctuation"},"}"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br")])],-1),xp=t("h4",{id:"style-for-print-pdf"},[t("a",{class:"header-anchor",href:"#style-for-print-pdf","aria-hidden":"true"},"#"),e(" Style for Print PDF")],-1),wp=t("ul",null,[t("li",null,[t("a",{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/@page",target:"_blank",rel:"noopener noreferrer"},"Page Style Standard")]),t("li",null,[t("a",{href:"https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/",target:"_blank",rel:"noopener noreferrer"},"PDF Style Tutorial")])],-1),Sp=t("h3",{id:"media-query-support-detection"},[t("a",{class:"header-anchor",href:"#media-query-support-detection","aria-hidden":"true"},"#"),e(" Media Query Support Detection")],-1),Cp=t("p",null,"Detecting media query support in CSS:",-1),qp=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token atrule"},[t("span",{class:"token rule"},"@media"),e(),t("span",{class:"token keyword"},"not"),e(" all "),t("span",{class:"token keyword"},"and"),e(),t("span",{class:"token punctuation"},"("),e("prefers-reduced-data"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token punctuation"},"("),e("prefers-reduced-data"),t("span",{class:"token punctuation"},")")]),e(),t("span",{class:"token punctuation"},"{"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br")])],-1),Fp=t("ul",null,[t("li",null,"No support: not all and (prefers-reduced-data): false, (prefers-reduced-data): false, Combined: false."),t("li",null,"Support, but off: not all and (prefers-reduced-data): true, (prefers-reduced-data): false, Combined: true."),t("li",null,"Support, and on: not all and (prefers-reduced-data): false, (prefers-reduced-data): true, Combined: true.")],-1),zp=t("p",null,"Detecting media query support in JavaScript:",-1),Pp=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(" query "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token string"},"'(prefers-reduced-data)'"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token comment"},"// window.matchMedia(query).media return 'not all' or original query string"),e("\n"),t("span",{class:"token keyword"},"const"),e(" resolvedMediaQuery "),t("span",{class:"token operator"},"="),e(" window"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"matchMedia"),t("span",{class:"token punctuation"},"("),e("query"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},"."),e("media"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token keyword"},"const"),e(" isSupported "),t("span",{class:"token operator"},"="),e(" query "),t("span",{class:"token operator"},"==="),e(" resolvedMediaQuery"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br")])],-1),Tp=t("h3",{id:"javascript-media-query-api"},[t("a",{class:"header-anchor",href:"#javascript-media-query-api","aria-hidden":"true"},"#"),e(" JavaScript Media Query API")],-1),Bp=t("ul",null,[t("li",null,[t("a",{href:"https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia",target:"_blank",rel:"noopener noreferrer"},"MDN Media Query Tutorial")])],-1),Mp=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token comment"},"// https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList"),e("\n"),t("span",{class:"token keyword"},"const"),e(" mql "),t("span",{class:"token operator"},"="),e(" window"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"matchMedia"),t("span",{class:"token punctuation"},"("),e("mediaQueryString"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br")])],-1),_p=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"if"),e(),t("span",{class:"token punctuation"},"("),e("window"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"matchMedia"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'(min-width: 400px)'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},"."),e("matches"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"/* the view port is at least 400 pixels wide */"),e("\n"),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token keyword"},"else"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"/* the view port is less than 400 pixels wide */"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br")])],-1),jp=t("h2",{id:"accessibility"},[t("a",{class:"header-anchor",href:"#accessibility","aria-hidden":"true"},"#"),e(" Accessibility")],-1),Ap=t("h3",{id:"screen-reader-only"},[t("a",{class:"header-anchor",href:"#screen-reader-only","aria-hidden":"true"},"#"),e(" Screen Reader Only")],-1),Lp=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".sr-only"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"position"),t("span",{class:"token punctuation"},":"),e(" absolute"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"width"),t("span",{class:"token punctuation"},":"),e(" 1px"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"height"),t("span",{class:"token punctuation"},":"),e(" 1px"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"margin"),t("span",{class:"token punctuation"},":"),e(" -1px"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"padding"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"border"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"clip"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"rect"),t("span",{class:"token punctuation"},"("),e("0 0 0 0"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"clip-path"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"polygon"),t("span",{class:"token punctuation"},"("),e("0px 0px"),t("span",{class:"token punctuation"},","),e(" 0px 0px"),t("span",{class:"token punctuation"},","),e(" 0px 0px"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"white-space"),t("span",{class:"token punctuation"},":"),e(" nowrap"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"overflow"),t("span",{class:"token punctuation"},":"),e(" hidden"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br")])],-1),Vp=t("h2",{id:"awesome-components"},[t("a",{class:"header-anchor",href:"#awesome-components","aria-hidden":"true"},"#"),e(" Awesome Components")],-1),Gp=t("h3",{id:"landing-page"},[t("a",{class:"header-anchor",href:"#landing-page","aria-hidden":"true"},"#"),e(" Landing Page")],-1),Dp=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},"h1"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"background-image"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token url"},[t("span",{class:"token function"},"url"),t("span",{class:"token punctuation"},"("),e("bg.jpg"),t("span",{class:"token punctuation"},")")]),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background-clip"),t("span",{class:"token punctuation"},":"),e(" text"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br")])],-1),Ip=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".jumbotron"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"min-height"),t("span",{class:"token punctuation"},":"),e(" 100%"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background-image"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token url"},[t("span",{class:"token function"},"url"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string url"},"''"),t("span",{class:"token punctuation"},")")]),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background-size"),t("span",{class:"token punctuation"},":"),e(" cover"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background-position"),t("span",{class:"token punctuation"},":"),e(" center center"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background-repeat"),t("span",{class:"token punctuation"},":"),e(" no-repeat"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"opacity"),t("span",{class:"token punctuation"},":"),e(" 0.8"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br")])],-1),Ep=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".fullscreen-video"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"position"),t("span",{class:"token punctuation"},":"),e(" absolute"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"top"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"left"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"width"),t("span",{class:"token punctuation"},":"),e(" 100%"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"height"),t("span",{class:"token punctuation"},":"),e(" 100vh"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background-size"),t("span",{class:"token punctuation"},":"),e(" cover"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"overflow"),t("span",{class:"token punctuation"},":"),e(" hidden"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"z-index"),t("span",{class:"token punctuation"},":"),e(" -100"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".fullscreen-video video"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"min-width"),t("span",{class:"token punctuation"},":"),e(" 100%"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"min-height"),t("span",{class:"token punctuation"},":"),e(" 100%"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br")])],-1),Hp=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".parallax"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"min-height"),t("span",{class:"token punctuation"},":"),e(" 60%"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/* key */"),e("\n "),t("span",{class:"token property"},"background-attachment"),t("span",{class:"token punctuation"},":"),e(" fixed"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/* key */"),e("\n "),t("span",{class:"token property"},"background-image"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token url"},[t("span",{class:"token function"},"url"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string url"},"'./images/bg.jpg'"),t("span",{class:"token punctuation"},")")]),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background-position"),t("span",{class:"token punctuation"},":"),e(" center"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background-size"),t("span",{class:"token punctuation"},":"),e(" cover"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background-repeat"),t("span",{class:"token punctuation"},":"),e(" no-repeat"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br")])],-1),Np=t("h3",{id:"modal"},[t("a",{class:"header-anchor",href:"#modal","aria-hidden":"true"},"#"),e(" Modal")],-1),Op=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".overlay"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"position"),t("span",{class:"token punctuation"},":"),e(" absolute"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"width"),t("span",{class:"token punctuation"},":"),e(" 100%"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"height"),t("span",{class:"token punctuation"},":"),e(" 100%"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"rgba"),t("span",{class:"token punctuation"},"("),e("0"),t("span",{class:"token punctuation"},","),e(" 0"),t("span",{class:"token punctuation"},","),e(" 0"),t("span",{class:"token punctuation"},","),e(" 0.5"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br")])],-1),Rp=t("h3",{id:"flexible-heading"},[t("a",{class:"header-anchor",href:"#flexible-heading","aria-hidden":"true"},"#"),e(" Flexible Heading")],-1),Xp=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},"h1"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"display"),t("span",{class:"token punctuation"},":"),e(" flex"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"width"),t("span",{class:"token punctuation"},":"),e(" 100%"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"align-items"),t("span",{class:"token punctuation"},":"),e(" center"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},"h1::before,\nh1::after"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"content"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token string"},"''"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background-color"),t("span",{class:"token punctuation"},":"),e(" gray"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"height"),t("span",{class:"token punctuation"},":"),e(" 0.1em"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"margin"),t("span",{class:"token punctuation"},":"),e(" 0.2em"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"flex"),t("span",{class:"token punctuation"},":"),e(" 1"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br")])],-1),Yp=t("ul",null,[t("li",null,[t("strong",null,"reset.css")])],-1),Wp=t("h3",{id:"table"},[t("a",{class:"header-anchor",href:"#table","aria-hidden":"true"},"#"),e(" Table")],-1),Up=t("ul",null,[t("li",null,[t("code",null,"margin-left: auto"),e(" to align-left")]),t("li",null,[t("code",null,"border: 0"),e(" and "),t("code",null,"border-collapse: collapse"),e(" to remove border line")]),t("li",null,[t("code",null,"table-layout: fixed"),e(" to contain cells with same width")]),t("li",null,[e("implement filter or pagination with "),t("code",null,"display: none"),e(" applied to "),t("code",null,"")])],-1),Zp=t("h3",{id:"form"},[t("a",{class:"header-anchor",href:"#form","aria-hidden":"true"},"#"),e(" Form")],-1),Jp=t("ul",null,[t("li",null,[t("a",{href:"https://adamsilver.io/articles/form-design-from-zero-to-hero-all-in-one-blog-post",target:"_blank",rel:"noopener noreferrer"},"Form Design Patterns")])],-1),Qp=t("h4",{id:"select"},[t("a",{class:"header-anchor",href:"#select","aria-hidden":"true"},"#"),e(" Select")],-1),Kp=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".custom-select"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"width"),t("span",{class:"token punctuation"},":"),e(" 15%"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"height"),t("span",{class:"token punctuation"},":"),e(" 35px"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"margin-right"),t("span",{class:"token punctuation"},":"),e(" 20px"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token comment"},"/* 自定义边框 */"),e("\n "),t("span",{class:"token property"},"border"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token comment"},"/* 将箭头图片移至右端 */"),e("\n "),t("span",{class:"token property"},"background"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token url"},[t("span",{class:"token function"},"url"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string url"},"'images/arrow.png'"),t("span",{class:"token punctuation"},")")]),e(" no-repeat"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background-color"),t("span",{class:"token punctuation"},":"),e(" #fff"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background-position"),t("span",{class:"token punctuation"},":"),e(" right"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token comment"},"/* 消除默认样式 */"),e("\n "),t("span",{class:"token property"},"-webkit-appearance"),t("span",{class:"token punctuation"},":"),e(" none"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"-moz-appearance"),t("span",{class:"token punctuation"},":"),e(" none"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"appearance"),t("span",{class:"token punctuation"},":"),e(" none"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token comment"},"/* 消除默认箭头 */"),e("\n "),t("span",{class:"token property"},"text-indent"),t("span",{class:"token punctuation"},":"),e(" 0.01px"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"text-overflow"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token string"},"''"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token comment"},"/* 文本属性 */"),e("\n "),t("span",{class:"token property"},"text-align"),t("span",{class:"token punctuation"},":"),e(" center"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"text-align-last"),t("span",{class:"token punctuation"},":"),e(" center"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".custom-select:focus"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"border"),t("span",{class:"token punctuation"},":"),e(" 1px solid #e74f4d"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".custom-select option"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"width"),t("span",{class:"token punctuation"},":"),e(" 100%"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"height"),t("span",{class:"token punctuation"},":"),e(" 25px"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"padding-left"),t("span",{class:"token punctuation"},":"),e(" 30px"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token property"},"background-color"),t("span",{class:"token punctuation"},":"),e(" #fff"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"color"),t("span",{class:"token punctuation"},":"),e(" #323333"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token property"},"line-height"),t("span",{class:"token punctuation"},":"),e(" 25px"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"direction"),t("span",{class:"token punctuation"},":"),e(" rtl"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".custom-select option:hover"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"color"),t("span",{class:"token punctuation"},":"),e(" #fff"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token url"},[t("span",{class:"token function"},"url"),t("span",{class:"token punctuation"},"("),e("../img/tick.png"),t("span",{class:"token punctuation"},")")]),e(" no-repeat 8px center"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background-color"),t("span",{class:"token punctuation"},":"),e(" #e74f4d"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br"),t("span",{class:"line-number"},"25"),t("br"),t("span",{class:"line-number"},"26"),t("br"),t("span",{class:"line-number"},"27"),t("br"),t("span",{class:"line-number"},"28"),t("br"),t("span",{class:"line-number"},"29"),t("br"),t("span",{class:"line-number"},"30"),t("br"),t("span",{class:"line-number"},"31"),t("br"),t("span",{class:"line-number"},"32"),t("br"),t("span",{class:"line-number"},"33"),t("br"),t("span",{class:"line-number"},"34"),t("br"),t("span",{class:"line-number"},"35"),t("br"),t("span",{class:"line-number"},"36"),t("br"),t("span",{class:"line-number"},"37"),t("br"),t("span",{class:"line-number"},"38"),t("br"),t("span",{class:"line-number"},"39"),t("br"),t("span",{class:"line-number"},"40"),t("br"),t("span",{class:"line-number"},"41"),t("br"),t("span",{class:"line-number"},"42"),t("br"),t("span",{class:"line-number"},"43"),t("br"),t("span",{class:"line-number"},"44"),t("br"),t("span",{class:"line-number"},"45"),t("br"),t("span",{class:"line-number"},"46"),t("br"),t("span",{class:"line-number"},"47"),t("br"),t("span",{class:"line-number"},"48"),t("br")])],-1),$p=t("h3",{id:"navigation"},[t("a",{class:"header-anchor",href:"#navigation","aria-hidden":"true"},"#"),e(" Navigation")],-1),nu=t("h4",{id:"基本原则"},[t("a",{class:"header-anchor",href:"#基本原则","aria-hidden":"true"},"#"),e(" 基本原则")],-1),su=t("ul",null,[t("li",null,[t("code",null,"list-style-type"),e(": 改变 "),t("code",null,"ul"),e("/"),t("code",null,"ol"),e(" 前标记类型")]),t("li",null,[t("code",null,"list-style-image"),e(": 改变 "),t("code",null,"ul"),e("/"),t("code",null,"ol"),e(" 前标记类型")]),t("li",null,[e("设置 "),t("code",null,''),e(" 样式")])],-1),au=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},"ul"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"/* 垂直菜单设置宽度, 水平菜单不设置宽度*/"),e("\n "),t("span",{class:"token property"},"list-style"),t("span",{class:"token punctuation"},":"),e(" none"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token comment"},"/* 水平菜单 */"),e("\n"),t("span",{class:"token selector"},"li"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"float"),t("span",{class:"token punctuation"},":"),e(" left"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},"a"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"display"),t("span",{class:"token punctuation"},":"),e(" inline-block"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"text-decoration"),t("span",{class:"token punctuation"},":"),e(" none"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"cursor"),t("span",{class:"token punctuation"},":"),e(" pointer"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br")])],-1),tu=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},"ul"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"text-align"),t("span",{class:"token punctuation"},":"),e(" right"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},"li"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"display"),t("span",{class:"token punctuation"},":"),e(" inline-block"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br")])],-1),eu=t("h4",{id:"hidden-link"},[t("a",{class:"header-anchor",href:"#hidden-link","aria-hidden":"true"},"#"),e(" Hidden Link")],-1),lu=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},"a"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"opacity"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"cursor"),t("span",{class:"token punctuation"},":"),e(" default"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"pointer-events"),t("span",{class:"token punctuation"},":"),e(" none"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"text-decoration"),t("span",{class:"token punctuation"},":"),e(" none"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br")])],-1),ou=t("h4",{id:"awesome-navigation-style"},[t("a",{class:"header-anchor",href:"#awesome-navigation-style","aria-hidden":"true"},"#"),e(" Awesome Navigation Style")],-1),cu=t("p",null,"change bottom border",-1),pu=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},"a"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"position"),t("span",{class:"token punctuation"},":"),e(" relative"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"padding-bottom"),t("span",{class:"token punctuation"},":"),e(" 5px"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"color"),t("span",{class:"token punctuation"},":"),e(" #008080"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"text-decoration"),t("span",{class:"token punctuation"},":"),e(" none"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},"a::after"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"position"),t("span",{class:"token punctuation"},":"),e(" absolute"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"bottom"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"left"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"width"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"height"),t("span",{class:"token punctuation"},":"),e(" 3px"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background-color"),t("span",{class:"token punctuation"},":"),e(" #22313f"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"content"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token string"},"''"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"transform-origin"),t("span",{class:"token punctuation"},":"),e(" bottom-center"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},"a:hover"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"color"),t("span",{class:"token punctuation"},":"),e(" #22313f"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},"a:hover::after"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"width"),t("span",{class:"token punctuation"},":"),e(" 100%"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br"),t("span",{class:"line-number"},"25"),t("br")])],-1),uu=t("h3",{id:"button"},[t("a",{class:"header-anchor",href:"#button","aria-hidden":"true"},"#"),e(" Button")],-1),ru=t("ul",null,[t("li",null,"padding")],-1),iu=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},"a.btn-custom"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"padding"),t("span",{class:"token punctuation"},":"),e(" 10px 40px"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"border-radius"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background-color"),t("span",{class:"token punctuation"},":"),e(" #000"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"line-height"),t("span",{class:"token punctuation"},":"),e(" 100px"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"text-align"),t("span",{class:"token punctuation"},":"),e(" center"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br")])],-1),ku=t("h3",{id:"footer"},[t("a",{class:"header-anchor",href:"#footer","aria-hidden":"true"},"#"),e(" Footer")],-1),bu=t("h4",{id:"sticky-footer"},[t("a",{class:"header-anchor",href:"#sticky-footer","aria-hidden":"true"},"#"),e(" Sticky Footer")],-1),mu=t("ul",null,[t("li",null,"如果页面内容不足够长时, 页脚固定在浏览器窗口的底部"),t("li",null,"如果内容足够长时, 页脚固定在页面的最底部")],-1),du=t("p",null,"5 种方法:",-1),gu=t("ul",null,[t("li",null,[e("negative bottom margin content-wrapper with "),t("strong",null,"fixed height"),e(" footer")]),t("li",null,[e("negative top margin on "),t("strong",null,"fixed height"),e(" footer")]),t("li",null,[t("code",null,"calc"),e(" on "),t("strong",null,"fixed height"),e(" footer")]),t("li",null,[e("use "),t("code",null,"flex"),e(" on "),t("code",null,"body")]),t("li",null,[e("use "),t("code",null,"grid"),e(" on "),t("code",null,"body")])],-1),hu=t("div",{class:"language-html line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("body")]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("div")]),e(),t("span",{class:"token attr-name"},"class"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("wrapper"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),e("\n content\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("div")]),e(),t("span",{class:"token attr-name"},"class"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("push"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("div")]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("div")]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("footer")]),e(),t("span",{class:"token attr-name"},"class"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("footer"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("footer")]),t("span",{class:"token punctuation"},">")]),e("\n"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("body")]),t("span",{class:"token punctuation"},">")]),e("\n\n"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("style")]),t("span",{class:"token punctuation"},">")]),t("span",{class:"token style"},[t("span",{class:"token language-css"},[e("\n "),t("span",{class:"token selector"},"html,\n body"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"height"),t("span",{class:"token punctuation"},":"),e(" 100%"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"margin"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token selector"},".wrapper"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"min-height"),t("span",{class:"token punctuation"},":"),e(" 100%"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token comment"},"/* Equal to height of footer */"),e("\n "),t("span",{class:"token comment"},"/* But also accounting for potential margin-bottom of last child */"),e("\n "),t("span",{class:"token property"},"margin-bottom"),t("span",{class:"token punctuation"},":"),e(" -50px"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token selector"},".footer,\n .push"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"height"),t("span",{class:"token punctuation"},":"),e(" 50px"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("style")]),t("span",{class:"token punctuation"},">")]),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br"),t("span",{class:"line-number"},"25"),t("br"),t("span",{class:"line-number"},"26"),t("br")])],-1),fu=t("div",{class:"language-html line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("body")]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("div")]),e(),t("span",{class:"token attr-name"},"class"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("content"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("div")]),e(),t("span",{class:"token attr-name"},"class"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("content-inside"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),e("content"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("div")]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("div")]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("footer")]),e(),t("span",{class:"token attr-name"},"class"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("footer"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("footer")]),t("span",{class:"token punctuation"},">")]),e("\n"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("body")]),t("span",{class:"token punctuation"},">")]),e("\n\n"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("style")]),t("span",{class:"token punctuation"},">")]),t("span",{class:"token style"},[t("span",{class:"token language-css"},[e("\n "),t("span",{class:"token selector"},"html,\n body"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"height"),t("span",{class:"token punctuation"},":"),e(" 100%"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"margin"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token selector"},".content"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"min-height"),t("span",{class:"token punctuation"},":"),e(" 100%"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token selector"},".content-inside"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"padding"),t("span",{class:"token punctuation"},":"),e(" 20px"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"padding-bottom"),t("span",{class:"token punctuation"},":"),e(" 50px"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token selector"},".footer"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"height"),t("span",{class:"token punctuation"},":"),e(" 50px"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"margin-top"),t("span",{class:"token punctuation"},":"),e(" -50px"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("style")]),t("span",{class:"token punctuation"},">")]),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br"),t("span",{class:"line-number"},"25"),t("br")])],-1),yu=t("div",{class:"language-html line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("body")]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("div")]),e(),t("span",{class:"token attr-name"},"class"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("content"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),e("content"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("div")]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("footer")]),e(),t("span",{class:"token attr-name"},"class"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("footer"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("footer")]),t("span",{class:"token punctuation"},">")]),e("\n"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("body")]),t("span",{class:"token punctuation"},">")]),e("\n\n"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("style")]),t("span",{class:"token punctuation"},">")]),t("span",{class:"token style"},[t("span",{class:"token language-css"},[e("\n "),t("span",{class:"token selector"},".content"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"min-height"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"calc"),t("span",{class:"token punctuation"},"("),e("100vh - 70px"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token selector"},".footer"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"height"),t("span",{class:"token punctuation"},":"),e(" 50px"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("style")]),t("span",{class:"token punctuation"},">")]),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br")])],-1),vu=t("div",{class:"language-html line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("body")]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("div")]),e(),t("span",{class:"token attr-name"},"class"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("content"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),e("content"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("div")]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("footer")]),e(),t("span",{class:"token attr-name"},"class"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("footer"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("footer")]),t("span",{class:"token punctuation"},">")]),e("\n"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("body")]),t("span",{class:"token punctuation"},">")]),e("\n\n"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("style")]),t("span",{class:"token punctuation"},">")]),t("span",{class:"token style"},[t("span",{class:"token language-css"},[e("\n "),t("span",{class:"token selector"},"html,\n body"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"height"),t("span",{class:"token punctuation"},":"),e(" 100%"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token selector"},"body"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"display"),t("span",{class:"token punctuation"},":"),e(" flex"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"flex-direction"),t("span",{class:"token punctuation"},":"),e(" column"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token selector"},".content"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"flex"),t("span",{class:"token punctuation"},":"),e(" 1 0 auto"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token selector"},".footer"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"flex-shrink"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("style")]),t("span",{class:"token punctuation"},">")]),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br")])],-1),xu=t("div",{class:"language-html line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("body")]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("div")]),e(),t("span",{class:"token attr-name"},"class"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("content"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),e("content"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("div")]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("footer")]),e(),t("span",{class:"token attr-name"},"class"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("footer"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("footer")]),t("span",{class:"token punctuation"},">")]),e("\n"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("body")]),t("span",{class:"token punctuation"},">")]),e("\n\n"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("style")]),t("span",{class:"token punctuation"},">")]),t("span",{class:"token style"},[t("span",{class:"token language-css"},[e("\n "),t("span",{class:"token selector"},"html"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"height"),t("span",{class:"token punctuation"},":"),e(" 100%"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token selector"},"body"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"min-height"),t("span",{class:"token punctuation"},":"),e(" 100%"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"display"),t("span",{class:"token punctuation"},":"),e(" grid"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"grid-template-rows"),t("span",{class:"token punctuation"},":"),e(" 1fr auto"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token selector"},".footer"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"grid-row-start"),t("span",{class:"token punctuation"},":"),e(" 2"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"grid-row-end"),t("span",{class:"token punctuation"},":"),e(" 3"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("style")]),t("span",{class:"token punctuation"},">")]),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br")])],-1),wu=t("h3",{id:"picture"},[t("a",{class:"header-anchor",href:"#picture","aria-hidden":"true"},"#"),e(" Picture")],-1),Su=t("h4",{id:"圆形图片"},[t("a",{class:"header-anchor",href:"#圆形图片","aria-hidden":"true"},"#"),e(" 圆形图片")],-1),Cu=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"border-radius"),t("span",{class:"token punctuation"},":"),e(" 50%"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"overflow"),t("span",{class:"token punctuation"},":"),e(" hidden"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br")])],-1),qu=t("h3",{id:"animation-tips"},[t("a",{class:"header-anchor",href:"#animation-tips","aria-hidden":"true"},"#"),e(" Animation Tips")],-1),Fu=t("p",null,"切换动画时, 需要先把之前的动画清除 (防止出现闪烁 Bug )",-1),zu=t("h4",{id:"animated-dots"},[t("a",{class:"header-anchor",href:"#animated-dots","aria-hidden":"true"},"#"),e(" Animated Dots")],-1),Pu=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},"dot"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"display"),t("span",{class:"token punctuation"},":"),e(" inline-block"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"height"),t("span",{class:"token punctuation"},":"),e(" 1em"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"line-height"),t("span",{class:"token punctuation"},":"),e(" 1"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"text-align"),t("span",{class:"token punctuation"},":"),e(" left"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"vertical-align"),t("span",{class:"token punctuation"},":"),e(" -0.25ex"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"overflow"),t("span",{class:"token punctuation"},":"),e(" hidden"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},"dot::before"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"display"),t("span",{class:"token punctuation"},":"),e(" block"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"content"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token string"},"'...\\A..\\A.'"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"white-space"),t("span",{class:"token punctuation"},":"),e(" pre-wrap"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"animation"),t("span",{class:"token punctuation"},":"),e(" dot1 3s infinite step-start both"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token atrule"},[t("span",{class:"token rule"},"@keyframes"),e(" dot1")]),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token selector"},"33%"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"transform"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"translateY"),t("span",{class:"token punctuation"},"("),e("-2em"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token selector"},"66%"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"transform"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"translateY"),t("span",{class:"token punctuation"},"("),e("-1em"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br")])],-1),Tu=t("h4",{id:"fade-with-class"},[t("a",{class:"header-anchor",href:"#fade-with-class","aria-hidden":"true"},"#"),e(" Fade with Class")],-1),Bu=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".enter,\n.leave"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"transition"),t("span",{class:"token punctuation"},":"),e(" opacity 0.5s"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".before-enter,\n.leave"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"opacity"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".enter,\n.before-leave"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"opacity"),t("span",{class:"token punctuation"},":"),e(" 1"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br")])],-1),Mu=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token function"},"enter"),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},[e("el"),t("span",{class:"token punctuation"},","),e(" done")]),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n el"),t("span",{class:"token punctuation"},"."),e("classList"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"add"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'before-enter'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token function"},"setTimeout"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n el"),t("span",{class:"token punctuation"},"."),e("classList"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"remove"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'before-enter'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n el"),t("span",{class:"token punctuation"},"."),e("classList"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"add"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'enter'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"20"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token function"},"setTimeout"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n el"),t("span",{class:"token punctuation"},"."),e("classList"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"remove"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'enter'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token function"},"done"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"500"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token function"},"leave"),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},[e("el"),t("span",{class:"token punctuation"},","),e(" done")]),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n el"),t("span",{class:"token punctuation"},"."),e("classList"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"add"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'before-leave'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token function"},"setTimeout"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n el"),t("span",{class:"token punctuation"},"."),e("classList"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"remove"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'before-leave'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n el"),t("span",{class:"token punctuation"},"."),e("classList"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"add"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'leave'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"0"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token function"},"setTimeout"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n el"),t("span",{class:"token punctuation"},"."),e("classList"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"remove"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'leave'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token function"},"done"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"500"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br"),t("span",{class:"line-number"},"25"),t("br"),t("span",{class:"line-number"},"26"),t("br"),t("span",{class:"line-number"},"27"),t("br")])],-1),_u=t("h4",{id:"accordion-menu-animation"},[t("a",{class:"header-anchor",href:"#accordion-menu-animation","aria-hidden":"true"},"#"),e(" Accordion Menu Animation")],-1),ju=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".menu"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"overflow"),t("span",{class:"token punctuation"},":"),e(" hidden"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"max-height"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"transition"),t("span",{class:"token punctuation"},":"),e(" max-height"),t("span",{class:"token punctuation"},","),e(" 0.3s"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".container:hover .menu,\n.menu:focus"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"max-height"),t("span",{class:"token punctuation"},":"),e(" 1em"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br")])],-1),Au=t("h4",{id:"slides-animation"},[t("a",{class:"header-anchor",href:"#slides-animation","aria-hidden":"true"},"#"),e(" Slides Animation")],-1),Lu=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".slide"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"width"),t("span",{class:"token punctuation"},":"),e(" 500%"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"overflow"),t("span",{class:"token punctuation"},":"),e(" hidden"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token atrule"},[t("span",{class:"token rule"},"@keyframes"),e(" slide")]),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token selector"},"0%"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"margin-left"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token selector"},"10%"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"margin-left"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token selector"},"12%"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"margin-left"),t("span",{class:"token punctuation"},":"),e(" -100%"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token selector"},"22%"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"margin-left"),t("span",{class:"token punctuation"},":"),e(" -100%"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token selector"},"24%"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"margin-left"),t("span",{class:"token punctuation"},":"),e(" -200%"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token selector"},"34%"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"margin-left"),t("span",{class:"token punctuation"},":"),e(" -200%"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token selector"},"36%"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"margin-left"),t("span",{class:"token punctuation"},":"),e(" -300%"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token selector"},"46%"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"margin-left"),t("span",{class:"token punctuation"},":"),e(" -300%"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token selector"},"48%"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"margin-left"),t("span",{class:"token punctuation"},":"),e(" -400%"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token selector"},"58%"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"margin-left"),t("span",{class:"token punctuation"},":"),e(" -400%"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token selector"},"60%"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"margin-left"),t("span",{class:"token punctuation"},":"),e(" -300%"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token selector"},"70%"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"margin-left"),t("span",{class:"token punctuation"},":"),e(" -300%"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token selector"},"72%"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"margin-left"),t("span",{class:"token punctuation"},":"),e(" -200%"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token selector"},"82%"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"margin-left"),t("span",{class:"token punctuation"},":"),e(" -200%"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token selector"},"84%"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"margin-left"),t("span",{class:"token punctuation"},":"),e(" -100%"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token selector"},"94%"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"margin-left"),t("span",{class:"token punctuation"},":"),e(" -100%"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token selector"},"96%"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"margin-left"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br"),t("span",{class:"line-number"},"25"),t("br"),t("span",{class:"line-number"},"26"),t("br"),t("span",{class:"line-number"},"27"),t("br"),t("span",{class:"line-number"},"28"),t("br"),t("span",{class:"line-number"},"29"),t("br"),t("span",{class:"line-number"},"30"),t("br"),t("span",{class:"line-number"},"31"),t("br"),t("span",{class:"line-number"},"32"),t("br"),t("span",{class:"line-number"},"33"),t("br"),t("span",{class:"line-number"},"34"),t("br"),t("span",{class:"line-number"},"35"),t("br"),t("span",{class:"line-number"},"36"),t("br"),t("span",{class:"line-number"},"37"),t("br"),t("span",{class:"line-number"},"38"),t("br"),t("span",{class:"line-number"},"39"),t("br"),t("span",{class:"line-number"},"40"),t("br"),t("span",{class:"line-number"},"41"),t("br"),t("span",{class:"line-number"},"42"),t("br"),t("span",{class:"line-number"},"43"),t("br"),t("span",{class:"line-number"},"44"),t("br"),t("span",{class:"line-number"},"45"),t("br"),t("span",{class:"line-number"},"46"),t("br"),t("span",{class:"line-number"},"47"),t("br"),t("span",{class:"line-number"},"48"),t("br"),t("span",{class:"line-number"},"49"),t("br"),t("span",{class:"line-number"},"50"),t("br"),t("span",{class:"line-number"},"51"),t("br"),t("span",{class:"line-number"},"52"),t("br"),t("span",{class:"line-number"},"53"),t("br"),t("span",{class:"line-number"},"54"),t("br"),t("span",{class:"line-number"},"55"),t("br"),t("span",{class:"line-number"},"56"),t("br"),t("span",{class:"line-number"},"57"),t("br"),t("span",{class:"line-number"},"58"),t("br")])],-1),Vu=t("h3",{id:"resizable-component"},[t("a",{class:"header-anchor",href:"#resizable-component","aria-hidden":"true"},"#"),e(" Resizable Component")],-1),Gu=t("p",null,[t("a",{href:"https://codepen.io/ZeroX-DG/pen/vjdoYe",target:"_blank",rel:"noopener noreferrer"},"CodePen Demo")],-1),Du=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[e("bottom"),t("span",{class:"token operator"},"-"),e("right"),t("span",{class:"token operator"},":"),e("\n new_width "),t("span",{class:"token operator"},"="),e(" element_original_width "),t("span",{class:"token operator"},"+"),e(),t("span",{class:"token punctuation"},"("),e("mouseX "),t("span",{class:"token operator"},"-"),e(" original_mouseX"),t("span",{class:"token punctuation"},")"),e("\n new_height "),t("span",{class:"token operator"},"="),e(" element_original_height "),t("span",{class:"token operator"},"+"),e(),t("span",{class:"token punctuation"},"("),e("mouseY "),t("span",{class:"token operator"},"-"),e(" original_mouseY"),t("span",{class:"token punctuation"},")"),e("\nbottom"),t("span",{class:"token operator"},"-"),e("left"),t("span",{class:"token operator"},":"),e("\n new_width "),t("span",{class:"token operator"},"="),e(" element_original_width "),t("span",{class:"token operator"},"-"),e(),t("span",{class:"token punctuation"},"("),e("mouseX "),t("span",{class:"token operator"},"-"),e(" original_mouseX"),t("span",{class:"token punctuation"},")"),e("\n new_height "),t("span",{class:"token operator"},"="),e(" element_original_height "),t("span",{class:"token operator"},"+"),e(),t("span",{class:"token punctuation"},"("),e("mouseY "),t("span",{class:"token operator"},"-"),e(" original_mouseY"),t("span",{class:"token punctuation"},")"),e("\n new_x "),t("span",{class:"token operator"},"="),e(" element_original_x "),t("span",{class:"token operator"},"-"),e(),t("span",{class:"token punctuation"},"("),e("mouseX "),t("span",{class:"token operator"},"-"),e(" original_mouseX"),t("span",{class:"token punctuation"},")"),e("\ntop"),t("span",{class:"token operator"},"-"),e("right"),t("span",{class:"token operator"},":"),e("\n new_width "),t("span",{class:"token operator"},"="),e(" element_original_width "),t("span",{class:"token operator"},"+"),e(),t("span",{class:"token punctuation"},"("),e("mouseX "),t("span",{class:"token operator"},"-"),e(" original_mouseX"),t("span",{class:"token punctuation"},")"),e("\n new_height "),t("span",{class:"token operator"},"="),e(" element_original_height "),t("span",{class:"token operator"},"-"),e(),t("span",{class:"token punctuation"},"("),e("mouseY "),t("span",{class:"token operator"},"-"),e(" original_mouseY"),t("span",{class:"token punctuation"},")"),e("\n new_y "),t("span",{class:"token operator"},"="),e(" element_original_y "),t("span",{class:"token operator"},"+"),e(),t("span",{class:"token punctuation"},"("),e("mouseY "),t("span",{class:"token operator"},"-"),e(" original_mouseY"),t("span",{class:"token punctuation"},")"),e("\ntop"),t("span",{class:"token operator"},"-"),e("left"),t("span",{class:"token operator"},":"),e("\n new_width "),t("span",{class:"token operator"},"="),e(" element_original_width "),t("span",{class:"token operator"},"-"),e(),t("span",{class:"token punctuation"},"("),e("mouseX "),t("span",{class:"token operator"},"-"),e(" original_mouseX"),t("span",{class:"token punctuation"},")"),e("\n new_height "),t("span",{class:"token operator"},"="),e(" element_original_height "),t("span",{class:"token operator"},"-"),e(),t("span",{class:"token punctuation"},"("),e("mouseY "),t("span",{class:"token operator"},"-"),e(" original_mouseY"),t("span",{class:"token punctuation"},")"),e("\n new_x "),t("span",{class:"token operator"},"="),e(" element_original_x "),t("span",{class:"token operator"},"+"),e(),t("span",{class:"token punctuation"},"("),e("mouseX "),t("span",{class:"token operator"},"-"),e(" original_mouseX"),t("span",{class:"token punctuation"},")"),e("\n new_y "),t("span",{class:"token operator"},"="),e(" element_original_y "),t("span",{class:"token operator"},"+"),e(),t("span",{class:"token punctuation"},"("),e("mouseY "),t("span",{class:"token operator"},"-"),e(" original_mouseY"),t("span",{class:"token punctuation"},")"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br")])],-1),Iu=t("h3",{id:"slides"},[t("a",{class:"header-anchor",href:"#slides","aria-hidden":"true"},"#"),e(" Slides")],-1),Eu=t("ul",null,[t("li",null,[t("code",null,"position: absolute"),e(" to stack slides up")]),t("li",null,[t("code",null,"id"),e(" + "),t("code",null,":target"),e(" for style current slide (change z-index)")]),t("li",null,[e("add animation to slide change: (prev, current, next) "),t("code",null,".slide"),e(", "),t("code",null,".slide:target"),e(", "),t("code",null,".slide:target ~ slide")]),t("li",null,[e("add "),t("code",null,"overflow: hidden"),e(" to "),t("code",null,"body"),e(" when animation")])],-1),Hu=t("div",{class:"language-html line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("main")]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("section")]),e(),t("span",{class:"token attr-name"},"class"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("slide"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"id"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("slide1"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("a")]),e(),t("span",{class:"token attr-name"},"class"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("slide-link"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"href"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("#slide2"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),e("next"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("a")]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("section")]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("section")]),e(),t("span",{class:"token attr-name"},"class"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("slide"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"id"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("slide2"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("a")]),e(),t("span",{class:"token attr-name"},"class"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("slide-link"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"href"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("#slide1"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),e("prev"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("a")]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("a")]),e(),t("span",{class:"token attr-name"},"class"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("slide-link"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"href"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("#slide3"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),e("next"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("a")]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("section")]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("section")]),e(),t("span",{class:"token attr-name"},"class"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("slide"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"id"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("slide3"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("a")]),e(),t("span",{class:"token attr-name"},"class"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("slide-link"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"href"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("#slide2"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),e("prev"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("a")]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("a")]),e(),t("span",{class:"token attr-name"},"class"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("slide-link"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"href"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("#slide4"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),e("next"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("a")]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("section")]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("section")]),e(),t("span",{class:"token attr-name"},"class"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("slide"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"id"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("slide4"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("a")]),e(),t("span",{class:"token attr-name"},"class"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("slide-link"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"href"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("#slide3"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),e("prev"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("a")]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("a")]),e(),t("span",{class:"token attr-name"},"class"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("slide-link"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"href"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("#slide5"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),e("next"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("a")]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("section")]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("section")]),e(),t("span",{class:"token attr-name"},"class"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("slide"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"id"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("slide5"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("a")]),e(),t("span",{class:"token attr-name"},"class"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("slide-link"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"href"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("#slide4"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),e("prev"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("a")]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("section")]),t("span",{class:"token punctuation"},">")]),e("\n"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("main")]),t("span",{class:"token punctuation"},">")]),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br")])],-1),Nu=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},"body"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"overflow"),t("span",{class:"token punctuation"},":"),e(" hidden"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/* key 1 */"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".slide"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"box-sizing"),t("span",{class:"token punctuation"},":"),e(" border-box"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"position"),t("span",{class:"token punctuation"},":"),e(" absolute"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/* key 2 */"),e("\n "),t("span",{class:"token property"},"width"),t("span",{class:"token punctuation"},":"),e(" 100%"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"height"),t("span",{class:"token punctuation"},":"),e(" 100vh"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"z-index"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/* key 3 */"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".slide:target"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"z-index"),t("span",{class:"token punctuation"},":"),e(" 1"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/* key 4 */"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br")])],-1),Ou=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token comment"},"/* Rotate Fade-In Animation */"),e("\n"),t("span",{class:"token selector"},".slide"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"z-index"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"transform"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"rotate"),t("span",{class:"token punctuation"},"("),e("90deg"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"transform-origin"),t("span",{class:"token punctuation"},":"),e(" 0 0"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"transition"),t("span",{class:"token punctuation"},":"),e(" transform 1s"),t("span",{class:"token punctuation"},","),e(" opacity 0.8s"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".slide:target"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"z-index"),t("span",{class:"token punctuation"},":"),e(" 1"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"transform"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"rotate"),t("span",{class:"token punctuation"},"("),e("0deg"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".slide:target ~ section"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"transform"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"rotate"),t("span",{class:"token punctuation"},"("),e("-90deg"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"opacity"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br")])],-1),Ru=t("p",null,[e("当两个 "),t("code",null,"width: 100%"),e(" slide 同时处于同一水平位置, 添加左进/右进动画, 当 slide 向右滑动时, 水平的 scrollX 会直接滑到最右边, 导致幻灯片浏览异常. "),t("a",{href:"https://github.com/sabertazimi/hust-web/blob/master/css/target-slide/index.js",target:"_blank",rel:"noopener noreferrer"},"解决办法"),e(" 如下:")],-1),Xu=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token function-variable function"},"resetScrollX"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n window"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"scrollTo"),t("span",{class:"token punctuation"},"("),t("span",{class:"token number"},"0"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"0"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br")])],-1),Yu=t("h3",{id:"layout"},[t("a",{class:"header-anchor",href:"#layout","aria-hidden":"true"},"#"),e(" Layout")],-1),Wu=t("h4",{id:"相同单元"},[t("a",{class:"header-anchor",href:"#相同单元","aria-hidden":"true"},"#"),e(" 相同单元")],-1),Uu=t("ul",null,[t("li",null,"ul + li + float"),t("li",null,".container{text-align:center;} + .content{width: xx%;}")],-1),Zu=t("h4",{id:"元素定位"},[t("a",{class:"header-anchor",href:"#元素定位","aria-hidden":"true"},"#"),e(" 元素定位")],-1),Ju=t("ul",null,[t("li",null,"align"),t("li",null,"margin + padding"),t("li",null,"position + top/bottom/left/right"),t("li",null,"float"),t("li",null,"flex")],-1),Qu=t("h3",{id:"geometry"},[t("a",{class:"header-anchor",href:"#geometry","aria-hidden":"true"},"#"),e(" Geometry")],-1),Ku=t("ul",null,[t("li",null,"background: color/image/gradient/clip-path"),t("li",null,"border"),t("li",null,"box-shadow (inset)"),t("li",null,"pseudo element")],-1),$u=t("h4",{id:"stretch-line"},[t("a",{class:"header-anchor",href:"#stretch-line","aria-hidden":"true"},"#"),e(" Stretch Line")],-1),nr=t("ul",null,[t("li",null,"background line"),t("li",null,"border line"),t("li",null,[e("pseudo element with "),t("code",null,"line-through"),e(),t("code",null,"text-decoration")])],-1),sr=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".line"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"width"),t("span",{class:"token punctuation"},":"),e(" 70%"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"height"),t("span",{class:"token punctuation"},":"),e(" 10px"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background-color"),t("span",{class:"token punctuation"},":"),e(" #000"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".line"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"background"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"linear-gradient"),t("span",{class:"token punctuation"},"("),e("#000"),t("span",{class:"token punctuation"},","),e(" #000"),t("span",{class:"token punctuation"},")"),e(" 50% / 70% 10px no-repeat"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".line"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"border-top"),t("span",{class:"token punctuation"},":"),e(" 10px solid #000"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".line::after"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"/* control line length */"),e("\n "),t("span",{class:"token property"},"content"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token string"},"'_______'"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token comment"},"/* hide content */"),e("\n "),t("span",{class:"token property"},"color"),t("span",{class:"token punctuation"},":"),e(" transparent"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token comment"},"/* set thickness */"),e("\n "),t("span",{class:"token property"},"font-size"),t("span",{class:"token punctuation"},":"),e(" 5em"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token property"},"text-decoration"),t("span",{class:"token punctuation"},":"),e(" line-through #000"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br"),t("span",{class:"line-number"},"25"),t("br"),t("span",{class:"line-number"},"26"),t("br")])],-1),ar=t("h4",{id:"dash-line"},[t("a",{class:"header-anchor",href:"#dash-line","aria-hidden":"true"},"#"),e(" Dash Line")],-1),tr=t("ul",null,[t("li",null,"background dash line"),t("li",null,"border dash line"),t("li",null,[e("pseudo element with "),t("code",null,"dashed"),e(),t("code",null,"text-decoration")])],-1),er=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".dash"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"background"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"linear-gradient"),t("span",{class:"token punctuation"},"("),e("to left"),t("span",{class:"token punctuation"},","),e(" #000 70%"),t("span",{class:"token punctuation"},","),e(" transparent 0"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background-repeat"),t("span",{class:"token punctuation"},":"),e(" repeat-x"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background-size"),t("span",{class:"token punctuation"},":"),e(" 30px 10px"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".dash"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"border-top"),t("span",{class:"token punctuation"},":"),e(" 10px dashed #000"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".dash::after"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"text-decoration-style"),t("span",{class:"token punctuation"},":"),e(" dashed"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br")])],-1),lr=t("h4",{id:"circle"},[t("a",{class:"header-anchor",href:"#circle","aria-hidden":"true"},"#"),e(" Circle")],-1),or=t("ul",null,[t("li",null,"background circle"),t("li",null,"clip path circle"),t("li",null,"border circle"),t("li",null,"pseudo element circle")],-1),cr=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".circle"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"background-image"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"radial-gradient"),t("span",{class:"token punctuation"},"("),e("#000 72%"),t("span",{class:"token punctuation"},","),e(" transparent 0"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".circle"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"clip-path"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"circle"),t("span",{class:"token punctuation"},"("),e("50%"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".circle"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"border-radius"),t("span",{class:"token punctuation"},":"),e(" 50%"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".circle::after"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"content"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token string"},"'·'"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"line-height"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"font-size"),t("span",{class:"token punctuation"},":"),e(" 120vw"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br")])],-1),pr=t("h4",{id:"triangle"},[t("a",{class:"header-anchor",href:"#triangle","aria-hidden":"true"},"#"),e(" Triangle")],-1),ur=t("ul",null,[t("li",null,"background triangle"),t("li",null,"clip path triangle"),t("li",null,"border triangle"),t("li",null,"pseudo element triangle")],-1),rr=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".triangle"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"background"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"linear-gradient"),t("span",{class:"token punctuation"},"("),e(""),t("span",{class:"token punctuation"},","),e(" #000 50%"),t("span",{class:"token punctuation"},","),e(" transparent 0"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token comment"},"/* clip path */"),e("\n"),t("span",{class:"token selector"},".arrow-right"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"width"),t("span",{class:"token punctuation"},":"),e(" 20px"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"height"),t("span",{class:"token punctuation"},":"),e(" 32px"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background-color"),t("span",{class:"token punctuation"},":"),e(" #e888a3"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"clip-path"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"polygon"),t("span",{class:"token punctuation"},"("),e("0 0"),t("span",{class:"token punctuation"},","),e(" 0 100%"),t("span",{class:"token punctuation"},","),e(" 100% 50%"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token comment"},"/* transparent border */"),e("\n"),t("span",{class:"token selector"},".arrow-up"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"width"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"height"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token property"},"border-right"),t("span",{class:"token punctuation"},":"),e(" 16px solid transparent"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"border-left"),t("span",{class:"token punctuation"},":"),e(" 16px solid transparent"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token property"},"border-bottom"),t("span",{class:"token punctuation"},":"),e(" 20px solid #8888e8"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token comment"},"/* pseudo element + hidden overflow */"),e("\n"),t("span",{class:"token selector"},".arrow-down"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"width"),t("span",{class:"token punctuation"},":"),e(" 40px"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"height"),t("span",{class:"token punctuation"},":"),e(" 40px"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"position"),t("span",{class:"token punctuation"},":"),e(" relative"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"overflow"),t("span",{class:"token punctuation"},":"),e(" hidden"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token selector"},"&::before"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"content"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token string"},"''"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"display"),t("span",{class:"token punctuation"},":"),e(" block"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"width"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"calc"),t("span",{class:"token punctuation"},"("),e("40px / 1.41"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"height"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"calc"),t("span",{class:"token punctuation"},"("),e("40px / 1.41"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"position"),t("span",{class:"token punctuation"},":"),e(" absolute"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"top"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"left"),t("span",{class:"token punctuation"},":"),e(" 0"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background"),t("span",{class:"token punctuation"},":"),e(" #f7df6c"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"transform"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"rotate"),t("span",{class:"token punctuation"},"("),e("-45deg"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"transform-origin"),t("span",{class:"token punctuation"},":"),e(" 0 0"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token comment"},"/* HTML Entities */"),e("\n"),t("span",{class:"token comment"},"/**\n * ◄ : ◄\n * ► : ►\n * ▼ : ▼\n * ▲ : ▲\n */"),e("\n"),t("span",{class:"token selector"},".arrow::before"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"content"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token string"},"'▼'"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br"),t("span",{class:"line-number"},"25"),t("br"),t("span",{class:"line-number"},"26"),t("br"),t("span",{class:"line-number"},"27"),t("br"),t("span",{class:"line-number"},"28"),t("br"),t("span",{class:"line-number"},"29"),t("br"),t("span",{class:"line-number"},"30"),t("br"),t("span",{class:"line-number"},"31"),t("br"),t("span",{class:"line-number"},"32"),t("br"),t("span",{class:"line-number"},"33"),t("br"),t("span",{class:"line-number"},"34"),t("br"),t("span",{class:"line-number"},"35"),t("br"),t("span",{class:"line-number"},"36"),t("br"),t("span",{class:"line-number"},"37"),t("br"),t("span",{class:"line-number"},"38"),t("br"),t("span",{class:"line-number"},"39"),t("br"),t("span",{class:"line-number"},"40"),t("br"),t("span",{class:"line-number"},"41"),t("br"),t("span",{class:"line-number"},"42"),t("br"),t("span",{class:"line-number"},"43"),t("br"),t("span",{class:"line-number"},"44"),t("br"),t("span",{class:"line-number"},"45"),t("br"),t("span",{class:"line-number"},"46"),t("br"),t("span",{class:"line-number"},"47"),t("br"),t("span",{class:"line-number"},"48"),t("br"),t("span",{class:"line-number"},"49"),t("br"),t("span",{class:"line-number"},"50"),t("br"),t("span",{class:"line-number"},"51"),t("br"),t("span",{class:"line-number"},"52"),t("br"),t("span",{class:"line-number"},"53"),t("br"),t("span",{class:"line-number"},"54"),t("br")])],-1),ir=t("h4",{id:"polygon"},[t("a",{class:"header-anchor",href:"#polygon","aria-hidden":"true"},"#"),e(" Polygon")],-1),kr=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token function-variable function"},"polygon"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},[e("n "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token number"},"3")]),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"let"),e(" deg "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token number"},"2"),e(),t("span",{class:"token operator"},"*"),e(" Math"),t("span",{class:"token punctuation"},"."),t("span",{class:"token constant"},"PI"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"/"),e(" n"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"let"),e(" points "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"["),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token keyword"},"for"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"let"),e(" i "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token number"},"0"),t("span",{class:"token punctuation"},";"),e(" i "),t("span",{class:"token operator"},"<"),e(" n"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token operator"},"++"),e("i"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"let"),e(" theta "),t("span",{class:"token operator"},"="),e(" deg "),t("span",{class:"token operator"},"*"),e(" i"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"let"),e(" x "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token number"},"50"),e(),t("span",{class:"token operator"},"*"),e(" Math"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"cos"),t("span",{class:"token punctuation"},"("),e("theta"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"+"),e(),t("span",{class:"token number"},"50"),e(),t("span",{class:"token operator"},"+"),e(),t("span",{class:"token string"},"'%'"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"let"),e(" y "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token number"},"50"),e(),t("span",{class:"token operator"},"*"),e(" Math"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"sin"),t("span",{class:"token punctuation"},"("),e("theta"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"+"),e(),t("span",{class:"token number"},"50"),e(),t("span",{class:"token operator"},"+"),e(),t("span",{class:"token string"},"'%'"),t("span",{class:"token punctuation"},";"),e("\n points"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"push"),t("span",{class:"token punctuation"},"("),e("x "),t("span",{class:"token operator"},"+"),e(),t("span",{class:"token string"},"' '"),e(),t("span",{class:"token operator"},"+"),e(" y"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n\n "),t("span",{class:"token keyword"},"return"),e(),t("span",{class:"token template-string"},[t("span",{class:"token template-punctuation string"},"`"),t("span",{class:"token string"},"polygon("),t("span",{class:"token interpolation"},[t("span",{class:"token interpolation-punctuation punctuation"},"${"),e("points"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"join"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"','"),t("span",{class:"token punctuation"},")"),t("span",{class:"token interpolation-punctuation punctuation"},"}")]),t("span",{class:"token string"},")"),t("span",{class:"token template-punctuation string"},"`")]),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br")])],-1),br=t("h2",{id:"css-variables"},[t("a",{class:"header-anchor",href:"#css-variables","aria-hidden":"true"},"#"),e(" CSS Variables")],-1),mr=t("h3",{id:"variables-dom-api"},[t("a",{class:"header-anchor",href:"#variables-dom-api","aria-hidden":"true"},"#"),e(" Variables DOM API")],-1),dr=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".element"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"height"),t("span",{class:"token punctuation"},":"),e(" 100vh"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"/* Fallback for browsers that do not support Custom Properties */"),e("\n "),t("span",{class:"token property"},"height"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"calc"),t("span",{class:"token punctuation"},"("),t("span",{class:"token function"},"var"),t("span",{class:"token punctuation"},"("),e("--vh"),t("span",{class:"token punctuation"},","),e(" 1vh"),t("span",{class:"token punctuation"},")"),e(" * 100"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br")])],-1),gr=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[e("window"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"addEventListener"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'resize'"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"const"),e(" vh "),t("span",{class:"token operator"},"="),e(" window"),t("span",{class:"token punctuation"},"."),e("innerHeight "),t("span",{class:"token operator"},"*"),e(),t("span",{class:"token number"},"0.01"),t("span",{class:"token punctuation"},";"),e("\n document"),t("span",{class:"token punctuation"},"."),e("documentElement"),t("span",{class:"token punctuation"},"."),e("style"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"setProperty"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'--vh'"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token template-string"},[t("span",{class:"token template-punctuation string"},"`"),t("span",{class:"token interpolation"},[t("span",{class:"token interpolation-punctuation punctuation"},"${"),e("vh"),t("span",{class:"token interpolation-punctuation punctuation"},"}")]),t("span",{class:"token string"},"px"),t("span",{class:"token template-punctuation string"},"`")]),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br")])],-1),hr=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(" root "),t("span",{class:"token operator"},"="),e(" document"),t("span",{class:"token punctuation"},"."),e("documentElement"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token keyword"},"const"),e(" bgColor "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token function"},"getComputedStyle"),t("span",{class:"token punctuation"},"("),e("root"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"getPropertyValue"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'--body-bg'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br")])],-1),fr=t("h3",{id:"scope-variables"},[t("a",{class:"header-anchor",href:"#scope-variables","aria-hidden":"true"},"#"),e(" Scope Variables")],-1),yr=t("div",{class:"language-html line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("div")]),e(),t("span",{class:"token attr-name"},"class"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("alert alert-info"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("div")]),e(),t("span",{class:"token attr-name"},"class"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("alert-content"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("h2")]),e(),t("span",{class:"token attr-name"},"class"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("alert-title"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),e("Info"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("h2")]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("div")]),e(),t("span",{class:"token attr-name"},"class"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("alert-body"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("p")]),t("span",{class:"token punctuation"},">")]),e("Info Message."),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("p")]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("div")]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("div")]),t("span",{class:"token punctuation"},">")]),e("\n"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("div")]),t("span",{class:"token punctuation"},">")]),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br")])],-1),vr=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".alert"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"--primary"),t("span",{class:"token punctuation"},":"),e(" #777"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"--secondary"),t("span",{class:"token punctuation"},":"),e(" #ccc"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token property"},"border"),t("span",{class:"token punctuation"},":"),e(" 1px solid "),t("span",{class:"token function"},"var"),t("span",{class:"token punctuation"},"("),e("--primary"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background-color"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"var"),t("span",{class:"token punctuation"},"("),e("--secondary"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".alert::before"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"background-color"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"var"),t("span",{class:"token punctuation"},"("),e("--primary"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".alert-title"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"color"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"var"),t("span",{class:"token punctuation"},"("),e("--primary"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".alert-success"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"--primary"),t("span",{class:"token punctuation"},":"),e(" #40c057"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"--secondary"),t("span",{class:"token punctuation"},":"),e(" #d3f9d8"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".alert-info"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"--primary"),t("span",{class:"token punctuation"},":"),e(" #228be6"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"--secondary"),t("span",{class:"token punctuation"},":"),e(" #d0ebff"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".alert-warning"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"--primary"),t("span",{class:"token punctuation"},":"),e(" #fab005"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"--secondary"),t("span",{class:"token punctuation"},":"),e(" #fff3bf"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},".alert-error"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"--primary"),t("span",{class:"token punctuation"},":"),e(" #fa5252"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"--secondary"),t("span",{class:"token punctuation"},":"),e(" #ffe3e3"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br"),t("span",{class:"line-number"},"25"),t("br"),t("span",{class:"line-number"},"26"),t("br"),t("span",{class:"line-number"},"27"),t("br"),t("span",{class:"line-number"},"28"),t("br"),t("span",{class:"line-number"},"29"),t("br"),t("span",{class:"line-number"},"30"),t("br"),t("span",{class:"line-number"},"31"),t("br"),t("span",{class:"line-number"},"32"),t("br"),t("span",{class:"line-number"},"33"),t("br"),t("span",{class:"line-number"},"34"),t("br"),t("span",{class:"line-number"},"35"),t("br")])],-1),xr=t("h3",{id:"invalid-and-empty-value-in-css-variables"},[t("a",{class:"header-anchor",href:"#invalid-and-empty-value-in-css-variables","aria-hidden":"true"},"#"),e(" Invalid and Empty Value in CSS Variables")],-1),wr=t("ul",null,[t("li",null,[t("code",null,"--invalid-value: initial;"),e(" is invalid value leading to "),t("code",null,"var(--invalid-value)"),e(" called failed, "),t("code",null,"var(--invalid-value, backup-value)"),e(" get backup-value.")]),t("li",null,[t("code",null,"--empty-value: ;"),e(" is valid empty value leading to "),t("code",null,"var(--empty-value)"),e(" called succeeded, "),t("code",null,"var(--empty-value, backup-value)"),e(" get "),t("strong",null,"parent value"),e(".")]),t("li",null,[e("Use Invalid and Empty Value to implement "),t("code",null,"if (true)"),e(" in CSS.")])],-1),Sr=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},":root"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"--ON"),t("span",{class:"token punctuation"},":"),e(" initial"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"--OFF"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},"button"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"--is-raised"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"var"),t("span",{class:"token punctuation"},"("),e("--OFF"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"border"),t("span",{class:"token punctuation"},":"),e(" 1px solid "),t("span",{class:"token function"},"var"),t("span",{class:"token punctuation"},"("),e("--is-raised"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token function"},"rgb"),t("span",{class:"token punctuation"},"("),e("0 0 0 / 0.1"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token selector"},"button:hover"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"--is-raised"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"var"),t("span",{class:"token punctuation"},"("),e("--ON"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br")])],-1),Cr=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token comment"},"/**\n * css-media-vars\n * BSD 2-Clause License\n * Copyright (c) James0x57, PropJockey, 2020\n */"),e("\n\n"),t("span",{class:"token selector"},"html"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"--media-print"),t("span",{class:"token punctuation"},":"),e(" initial"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"--media-screen"),t("span",{class:"token punctuation"},":"),e(" initial"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"--media-speech"),t("span",{class:"token punctuation"},":"),e(" initial"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"--media-xs"),t("span",{class:"token punctuation"},":"),e(" initial"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"--media-sm"),t("span",{class:"token punctuation"},":"),e(" initial"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"--media-md"),t("span",{class:"token punctuation"},":"),e(" initial"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"--media-lg"),t("span",{class:"token punctuation"},":"),e(" initial"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"--media-xl"),t("span",{class:"token punctuation"},":"),e(" initial"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token comment"},"/* ... */"),e("\n "),t("span",{class:"token property"},"--media-pointer-fine"),t("span",{class:"token punctuation"},":"),e(" initial"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"--media-pointer-none"),t("span",{class:"token punctuation"},":"),e(" initial"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token comment"},"/* 把当前变量变为空值 */"),e("\n"),t("span",{class:"token atrule"},[t("span",{class:"token rule"},"@media"),e(" print")]),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token selector"},"html"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"--media-print"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token atrule"},[t("span",{class:"token rule"},"@media"),e(" screen")]),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token selector"},"html"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"--media-screen"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token atrule"},[t("span",{class:"token rule"},"@media"),e(" speech")]),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token selector"},"html"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"--media-speech"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token comment"},"/* 把当前变量变为空值 */"),e("\n"),t("span",{class:"token atrule"},[t("span",{class:"token rule"},"@media"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token property"},"max-width"),t("span",{class:"token punctuation"},":"),e(" 37.499em"),t("span",{class:"token punctuation"},")")]),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token selector"},"html"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"--media-xs"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"--media-lte-sm"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"--media-lte-md"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"--media-lte-lg"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token comment"},"/** 移动优先的样式规则 */"),e("\n"),t("span",{class:"token selector"},".breakpoints-demo > *"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"/** 小于 37.5em, 宽度 100% */"),e("\n "),t("span",{class:"token property"},"--xs-width"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"var"),t("span",{class:"token punctuation"},"("),e("--media-xs"),t("span",{class:"token punctuation"},")"),e(" 100%"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token comment"},"/** 小于 56.249em, 宽度 49% */"),e("\n "),t("span",{class:"token property"},"--sm-width"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"var"),t("span",{class:"token punctuation"},"("),e("--media-sm"),t("span",{class:"token punctuation"},")"),e(" 49%"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token property"},"--md-width"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"var"),t("span",{class:"token punctuation"},"("),e("--media-md"),t("span",{class:"token punctuation"},")"),e(" 32%"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"--lg-width"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"var"),t("span",{class:"token punctuation"},"("),e("--media-gte-lg"),t("span",{class:"token punctuation"},")"),e(" 24%"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token property"},"width"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"var"),t("span",{class:"token punctuation"},"("),e("--xs-width"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token function"},"var"),t("span",{class:"token punctuation"},"("),e("--sm-width"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token function"},"var"),t("span",{class:"token punctuation"},"("),e("--md-width"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token function"},"var"),t("span",{class:"token punctuation"},"("),e("--lg-width"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token property"},"--sm-and-down-bg"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"var"),t("span",{class:"token punctuation"},"("),e("--media-lte-sm"),t("span",{class:"token punctuation"},")"),e(" red"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"--md-and-up-bg"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"var"),t("span",{class:"token punctuation"},"("),e("--media-gte-md"),t("span",{class:"token punctuation"},")"),e(" green"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token property"},"background"),t("span",{class:"token punctuation"},":"),e(),t("span",{class:"token function"},"var"),t("span",{class:"token punctuation"},"("),e("--sm-and-down-bg"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token function"},"var"),t("span",{class:"token punctuation"},"("),e("--md-and-up-bg"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br"),t("span",{class:"line-number"},"25"),t("br"),t("span",{class:"line-number"},"26"),t("br"),t("span",{class:"line-number"},"27"),t("br"),t("span",{class:"line-number"},"28"),t("br"),t("span",{class:"line-number"},"29"),t("br"),t("span",{class:"line-number"},"30"),t("br"),t("span",{class:"line-number"},"31"),t("br"),t("span",{class:"line-number"},"32"),t("br"),t("span",{class:"line-number"},"33"),t("br"),t("span",{class:"line-number"},"34"),t("br"),t("span",{class:"line-number"},"35"),t("br"),t("span",{class:"line-number"},"36"),t("br"),t("span",{class:"line-number"},"37"),t("br"),t("span",{class:"line-number"},"38"),t("br"),t("span",{class:"line-number"},"39"),t("br"),t("span",{class:"line-number"},"40"),t("br"),t("span",{class:"line-number"},"41"),t("br"),t("span",{class:"line-number"},"42"),t("br"),t("span",{class:"line-number"},"43"),t("br"),t("span",{class:"line-number"},"44"),t("br"),t("span",{class:"line-number"},"45"),t("br"),t("span",{class:"line-number"},"46"),t("br"),t("span",{class:"line-number"},"47"),t("br"),t("span",{class:"line-number"},"48"),t("br"),t("span",{class:"line-number"},"49"),t("br"),t("span",{class:"line-number"},"50"),t("br"),t("span",{class:"line-number"},"51"),t("br"),t("span",{class:"line-number"},"52"),t("br"),t("span",{class:"line-number"},"53"),t("br"),t("span",{class:"line-number"},"54"),t("br"),t("span",{class:"line-number"},"55"),t("br"),t("span",{class:"line-number"},"56"),t("br"),t("span",{class:"line-number"},"57"),t("br"),t("span",{class:"line-number"},"58"),t("br"),t("span",{class:"line-number"},"59"),t("br"),t("span",{class:"line-number"},"60"),t("br"),t("span",{class:"line-number"},"61"),t("br"),t("span",{class:"line-number"},"62"),t("br"),t("span",{class:"line-number"},"63"),t("br"),t("span",{class:"line-number"},"64"),t("br"),t("span",{class:"line-number"},"65"),t("br"),t("span",{class:"line-number"},"66"),t("br")])],-1),qr=t("h2",{id:"svg"},[t("a",{class:"header-anchor",href:"#svg","aria-hidden":"true"},"#"),e(" SVG")],-1),Fr=t("h3",{id:"inline-svg"},[t("a",{class:"header-anchor",href:"#inline-svg","aria-hidden":"true"},"#"),e(" Inline SVG")],-1),zr=t("div",{class:"language-html line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("svg")]),e("\n "),t("span",{class:"token attr-name"},"width"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("100px"),t("span",{class:"token punctuation"},'"')]),e("\n "),t("span",{class:"token attr-name"},"height"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("100px"),t("span",{class:"token punctuation"},'"')]),e("\n "),t("span",{class:"token attr-name"},"viewBox"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("0 0 100 100"),t("span",{class:"token punctuation"},'"')]),e("\n "),t("span",{class:"token attr-name"},"version"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("1.1"),t("span",{class:"token punctuation"},'"')]),e("\n "),t("span",{class:"token attr-name"},"xmlns"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("..."),t("span",{class:"token punctuation"},'"')]),e("\n"),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("title")]),t("span",{class:"token punctuation"},">")]),e("My Awesome SVG"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("title")]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("circle")]),e(),t("span",{class:"token attr-name"},"class"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("circle"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"cx"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("50"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"cy"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("50"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"r"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("50"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"fill"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("#FFFF00"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token punctuation"},"/>")]),e("\n"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("svg")]),t("span",{class:"token punctuation"},">")]),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br")])],-1),Pr=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token selector"},".circle"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"fill"),t("span",{class:"token punctuation"},":"),e(" #ffff00"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br")])],-1),Tr=t("h3",{id:"svg-basic-shape-tags"},[t("a",{class:"header-anchor",href:"#svg-basic-shape-tags","aria-hidden":"true"},"#"),e(" SVG Basic Shape Tags")],-1),Br=t("ul",null,[t("li",null,[e("rectangles and squares: "),t("code",null,"")]),t("li",null,[e("circles: "),t("code",null,"")]),t("li",null,[e("ellipse: "),t("code",null,"")]),t("li",null,[e("line: "),t("code",null,"")]),t("li",null,[e("polyline: "),t("code",null,"")]),t("li",null,[e("polygon: "),t("code",null,"")]),t("li",null,[e("path:"),t("code",null,"")])],-1),Mr=t("h3",{id:"svg-text-tag"},[t("a",{class:"header-anchor",href:"#svg-text-tag","aria-hidden":"true"},"#"),e(" SVG Text Tag")],-1),_r=t("p",null,[e("The text tag "),t("code",null,""),e(" is used to create "),t("strong",null,"selectable"),e(" and "),t("strong",null,"accessible"),e(" text.")],-1),jr=t("h3",{id:"svg-accessibility-tags"},[t("a",{class:"header-anchor",href:"#svg-accessibility-tags","aria-hidden":"true"},"#"),e(" SVG Accessibility Tags")],-1),Ar=t("p",null,[e("The title "),t("code",null,""),e(" and description "),t("code",null,""),e(" tags are specifically for providing accessibility content.")],-1),Lr=t("h3",{id:"svg-group-tag"},[t("a",{class:"header-anchor",href:"#svg-group-tag","aria-hidden":"true"},"#"),e(" SVG Group Tag")],-1),Vr=t("p",null,[e("The group tag "),t("code",null,""),e(" is used to group elements together to add class names and apply animations, filters, patterns and effects to a group of elements.")],-1),Gr=t("h3",{id:"svg-defs-tag"},[t("a",{class:"header-anchor",href:"#svg-defs-tag","aria-hidden":"true"},"#"),e(" SVG Defs Tag")],-1),Dr=t("p",null,[e("The defs tag "),t("code",null,""),e(" is used to define elements for later reuse. This is where you create "),t("strong",null,"patterns"),e(", "),t("strong",null,"filters"),e(" and "),t("strong",null,"masks"),e(" to be reused later. This is also used to create "),t("strong",null,"icon systems"),e(".")],-1),Ir=t("div",{class:"language-html line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("filter")]),e(),t("span",{class:"token attr-name"},"id"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("noise"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"y"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("0"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"x"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("0"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("feTurbulence")]),e(),t("span",{class:"token attr-name"},"stitchTiles"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("stitch"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"baseFrequency"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e(".75"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"type"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("fractalNoise"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token punctuation"},"/>")]),e("\n"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("filter")]),t("span",{class:"token punctuation"},">")]),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br")])],-1),Er=t("div",{class:"language-html line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("pattern")]),e(),t("span",{class:"token attr-name"},"..."),t("span",{class:"token punctuation"},">")]),e("\n ...\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("rect")]),e("\n "),t("span",{class:"token attr-name"},"width"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("100%"),t("span",{class:"token punctuation"},'"')]),e("\n "),t("span",{class:"token attr-name"},"height"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("100%"),t("span",{class:"token punctuation"},'"')]),e("\n "),t("span",{class:"token attr-name"},"fill"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("white"),t("span",{class:"token punctuation"},'"')]),e("\n "),t("span",{class:"token attr-name"},"filter"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("url(#noise)"),t("span",{class:"token punctuation"},'"')]),e("\n "),t("span",{class:"token attr-name"},"opacity"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e(".9"),t("span",{class:"token punctuation"},'"')]),e("\n "),t("span",{class:"token punctuation"},"/>")]),e("\n"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("pattern")]),t("span",{class:"token punctuation"},">")]),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br")])],-1),Hr=t("h3",{id:"svg-mask"},[t("a",{class:"header-anchor",href:"#svg-mask","aria-hidden":"true"},"#"),e(" SVG Mask")],-1),Nr=t("p",null,"Avatar with circle status indicator:",-1),Or=t("div",{class:"language-html line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("svg")]),e(),t("span",{class:"token attr-name"},"role"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("none"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("mask")]),e(),t("span",{class:"token attr-name"},"id"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("circle"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("circle")]),e(),t("span",{class:"token attr-name"},"fill"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("white"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"cx"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("100"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"cy"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("100"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"r"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("100"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("circle")]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("circle")]),e(),t("span",{class:"token attr-name"},"fill"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("black"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"cx"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("86%"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"cy"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("86%"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"r"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("18"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("circle")]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("mask")]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("g")]),e(),t("span",{class:"token attr-name"},"mask"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("url(#circle)"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("image")]),e("\n "),t("span",{class:"token attr-name"},"x"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("0"),t("span",{class:"token punctuation"},'"')]),e("\n "),t("span",{class:"token attr-name"},"y"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("0"),t("span",{class:"token punctuation"},'"')]),e("\n "),t("span",{class:"token attr-name"},"width"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("100%"),t("span",{class:"token punctuation"},'"')]),e("\n "),t("span",{class:"token attr-name"},"height"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("100%"),t("span",{class:"token punctuation"},'"')]),e("\n "),t("span",{class:"token attr-name"},[t("span",{class:"token namespace"},"xlink:"),e("href")]),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("avatar.jpg"),t("span",{class:"token punctuation"},'"')]),e("\n "),t("span",{class:"token punctuation"},">")]),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("image")]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("circle")]),e("\n "),t("span",{class:"token attr-name"},"fill"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("none"),t("span",{class:"token punctuation"},'"')]),e("\n "),t("span",{class:"token attr-name"},"cx"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("100"),t("span",{class:"token punctuation"},'"')]),e("\n "),t("span",{class:"token attr-name"},"cy"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("100"),t("span",{class:"token punctuation"},'"')]),e("\n "),t("span",{class:"token attr-name"},"r"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("100"),t("span",{class:"token punctuation"},'"')]),e("\n "),t("span",{class:"token attr-name"},"stroke"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("rgba(0,0,0,0.1)"),t("span",{class:"token punctuation"},'"')]),e("\n "),t("span",{class:"token attr-name"},"stroke-width"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("2"),t("span",{class:"token punctuation"},'"')]),e("\n "),t("span",{class:"token punctuation"},">")]),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("circle")]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("g")]),t("span",{class:"token punctuation"},">")]),e("\n"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("svg")]),t("span",{class:"token punctuation"},">")]),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br")])],-1),Rr=t("h2",{id:"stylelint-tool"},[t("a",{class:"header-anchor",href:"#stylelint-tool","aria-hidden":"true"},"#"),e(" StyleLint Tool")],-1),Xr=t("p",null,[e("stylelint-config-mass plugin "),t("code",null,"index.js"),e(":")],-1),Yr=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[e("module"),t("span",{class:"token punctuation"},"."),e("exports "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"extends"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token punctuation"},"["),t("span",{class:"token string"},"'stylelint-config-sass-guidelines'"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},","),e("\n rules"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token string"},"'order/properties-order'"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token punctuation"},"["),e("\n "),t("span",{class:"token string"},"'position'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'z-index'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'top'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'right'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'bottom'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'left'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'box-sizing'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'display'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'visibility'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'opacity'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'mix-blend-mode'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'isolation'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'float'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'clear'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'flex'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'flex-basis'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'flex-direction'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'flex-flow'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'flex-grow'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'flex-shrink'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'flex-wrap'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'grid'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'grid-area'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'grid-template'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'grid-template-areas'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'grid-template-rows'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'grid-template-columns'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'grid-row'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'grid-row-start'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'grid-row-end'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'grid-column'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'grid-column-start'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'grid-column-end'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'grid-auto-rows'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'grid-auto-columns'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'grid-auto-flow'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'grid-gap'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'grid-row-gap'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'grid-column-gap'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'align-content'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'align-items'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'align-self'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'justify-content'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'justify-items'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'justify-self'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'order'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'columns'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'column-gap'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'column-fill'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'column-rule'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'column-rule-width'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'column-rule-style'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'column-rule-color'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'column-span'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'column-count'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'column-width'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'backface-visibility'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'perspective'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'perspective-origin'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'transform'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'transform-origin'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'transform-style'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'transition'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'transition-delay'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'transition-duration'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'transition-property'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'transition-timing-function'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'width'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'min-width'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'max-width'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'height'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'min-height'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'max-height'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'overflow'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'overflow-x'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'overflow-y'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'resize'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'margin'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'margin-top'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'margin-right'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'margin-bottom'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'margin-left'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'padding'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'padding-top'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'padding-right'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'padding-bottom'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'padding-left'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'border'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'border-top'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'border-right'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'border-bottom'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'border-left'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'border-width'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'border-top-width'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'border-right-width'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'border-bottom-width'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'border-left-width'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'border-style'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'border-top-style'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'border-right-style'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'border-bottom-style'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'border-left-style'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'border-radius'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'border-top-left-radius'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'border-top-right-radius'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'border-bottom-left-radius'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'border-bottom-right-radius'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'border-color'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'border-top-color'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'border-right-color'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'border-bottom-color'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'border-left-color'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'outline'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'outline-offset'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'outline-width'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'outline-style'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'outline-color'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'box-shadow'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'list-style'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'list-style-type'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'list-style-position'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'list-style-image'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'table-layout'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'caption-side'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'border-collapse'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'border-spacing'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'empty-cells'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'animation'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'animation-name'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'animation-duration'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'animation-timing-function'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'animation-delay'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'animation-iteration-count'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'animation-direction'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'animation-fill-mode'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'animation-play-state'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'background'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'background-attachment'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'background-clip'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'background-color'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'background-image'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'background-origin'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'background-position'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'background-repeat'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'background-size'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'background-blend-mode'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'cursor'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'color'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'font'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'font-family'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'font-kerning'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'font-size'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'font-size-adjust'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'font-stretch'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'font-weight'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'font-smoothing'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'osx-font-smoothing'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'font-variant'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'font-style'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'tab-size'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'text-align'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'text-align-last'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'text-justify'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'text-indent'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'text-transform'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'text-decoration'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'text-decoration-color'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'text-decoration-line'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'text-decoration-style'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'text-rendering'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'text-shadow'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'text-overflow'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'line-height'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'word-spacing'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'letter-spacing'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'white-space'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'word-break'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'word-wrap'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'vertical-align'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'content'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'quotes'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'counter-reset'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'counter-increment'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'page-break-before'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'page-break-after'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'page-break-inside'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'pointer-events'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'will-change'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'order/properties-alphabetical-order'"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token keyword"},"null"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token string"},"'selector-class-pattern'"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token punctuation"},"["),e("\n "),t("span",{class:"token string"},"'^[a-z0-9\\\\-\\\\_]+$'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token punctuation"},"{"),e("\n message"),t("span",{class:"token operator"},":"),e("\n "),t("span",{class:"token string"},"'Selector should be written in lowercase with hyphens (selector-class-pattern)'"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br"),t("span",{class:"line-number"},"25"),t("br"),t("span",{class:"line-number"},"26"),t("br"),t("span",{class:"line-number"},"27"),t("br"),t("span",{class:"line-number"},"28"),t("br"),t("span",{class:"line-number"},"29"),t("br"),t("span",{class:"line-number"},"30"),t("br"),t("span",{class:"line-number"},"31"),t("br"),t("span",{class:"line-number"},"32"),t("br"),t("span",{class:"line-number"},"33"),t("br"),t("span",{class:"line-number"},"34"),t("br"),t("span",{class:"line-number"},"35"),t("br"),t("span",{class:"line-number"},"36"),t("br"),t("span",{class:"line-number"},"37"),t("br"),t("span",{class:"line-number"},"38"),t("br"),t("span",{class:"line-number"},"39"),t("br"),t("span",{class:"line-number"},"40"),t("br"),t("span",{class:"line-number"},"41"),t("br"),t("span",{class:"line-number"},"42"),t("br"),t("span",{class:"line-number"},"43"),t("br"),t("span",{class:"line-number"},"44"),t("br"),t("span",{class:"line-number"},"45"),t("br"),t("span",{class:"line-number"},"46"),t("br"),t("span",{class:"line-number"},"47"),t("br"),t("span",{class:"line-number"},"48"),t("br"),t("span",{class:"line-number"},"49"),t("br"),t("span",{class:"line-number"},"50"),t("br"),t("span",{class:"line-number"},"51"),t("br"),t("span",{class:"line-number"},"52"),t("br"),t("span",{class:"line-number"},"53"),t("br"),t("span",{class:"line-number"},"54"),t("br"),t("span",{class:"line-number"},"55"),t("br"),t("span",{class:"line-number"},"56"),t("br"),t("span",{class:"line-number"},"57"),t("br"),t("span",{class:"line-number"},"58"),t("br"),t("span",{class:"line-number"},"59"),t("br"),t("span",{class:"line-number"},"60"),t("br"),t("span",{class:"line-number"},"61"),t("br"),t("span",{class:"line-number"},"62"),t("br"),t("span",{class:"line-number"},"63"),t("br"),t("span",{class:"line-number"},"64"),t("br"),t("span",{class:"line-number"},"65"),t("br"),t("span",{class:"line-number"},"66"),t("br"),t("span",{class:"line-number"},"67"),t("br"),t("span",{class:"line-number"},"68"),t("br"),t("span",{class:"line-number"},"69"),t("br"),t("span",{class:"line-number"},"70"),t("br"),t("span",{class:"line-number"},"71"),t("br"),t("span",{class:"line-number"},"72"),t("br"),t("span",{class:"line-number"},"73"),t("br"),t("span",{class:"line-number"},"74"),t("br"),t("span",{class:"line-number"},"75"),t("br"),t("span",{class:"line-number"},"76"),t("br"),t("span",{class:"line-number"},"77"),t("br"),t("span",{class:"line-number"},"78"),t("br"),t("span",{class:"line-number"},"79"),t("br"),t("span",{class:"line-number"},"80"),t("br"),t("span",{class:"line-number"},"81"),t("br"),t("span",{class:"line-number"},"82"),t("br"),t("span",{class:"line-number"},"83"),t("br"),t("span",{class:"line-number"},"84"),t("br"),t("span",{class:"line-number"},"85"),t("br"),t("span",{class:"line-number"},"86"),t("br"),t("span",{class:"line-number"},"87"),t("br"),t("span",{class:"line-number"},"88"),t("br"),t("span",{class:"line-number"},"89"),t("br"),t("span",{class:"line-number"},"90"),t("br"),t("span",{class:"line-number"},"91"),t("br"),t("span",{class:"line-number"},"92"),t("br"),t("span",{class:"line-number"},"93"),t("br"),t("span",{class:"line-number"},"94"),t("br"),t("span",{class:"line-number"},"95"),t("br"),t("span",{class:"line-number"},"96"),t("br"),t("span",{class:"line-number"},"97"),t("br"),t("span",{class:"line-number"},"98"),t("br"),t("span",{class:"line-number"},"99"),t("br"),t("span",{class:"line-number"},"100"),t("br"),t("span",{class:"line-number"},"101"),t("br"),t("span",{class:"line-number"},"102"),t("br"),t("span",{class:"line-number"},"103"),t("br"),t("span",{class:"line-number"},"104"),t("br"),t("span",{class:"line-number"},"105"),t("br"),t("span",{class:"line-number"},"106"),t("br"),t("span",{class:"line-number"},"107"),t("br"),t("span",{class:"line-number"},"108"),t("br"),t("span",{class:"line-number"},"109"),t("br"),t("span",{class:"line-number"},"110"),t("br"),t("span",{class:"line-number"},"111"),t("br"),t("span",{class:"line-number"},"112"),t("br"),t("span",{class:"line-number"},"113"),t("br"),t("span",{class:"line-number"},"114"),t("br"),t("span",{class:"line-number"},"115"),t("br"),t("span",{class:"line-number"},"116"),t("br"),t("span",{class:"line-number"},"117"),t("br"),t("span",{class:"line-number"},"118"),t("br"),t("span",{class:"line-number"},"119"),t("br"),t("span",{class:"line-number"},"120"),t("br"),t("span",{class:"line-number"},"121"),t("br"),t("span",{class:"line-number"},"122"),t("br"),t("span",{class:"line-number"},"123"),t("br"),t("span",{class:"line-number"},"124"),t("br"),t("span",{class:"line-number"},"125"),t("br"),t("span",{class:"line-number"},"126"),t("br"),t("span",{class:"line-number"},"127"),t("br"),t("span",{class:"line-number"},"128"),t("br"),t("span",{class:"line-number"},"129"),t("br"),t("span",{class:"line-number"},"130"),t("br"),t("span",{class:"line-number"},"131"),t("br"),t("span",{class:"line-number"},"132"),t("br"),t("span",{class:"line-number"},"133"),t("br"),t("span",{class:"line-number"},"134"),t("br"),t("span",{class:"line-number"},"135"),t("br"),t("span",{class:"line-number"},"136"),t("br"),t("span",{class:"line-number"},"137"),t("br"),t("span",{class:"line-number"},"138"),t("br"),t("span",{class:"line-number"},"139"),t("br"),t("span",{class:"line-number"},"140"),t("br"),t("span",{class:"line-number"},"141"),t("br"),t("span",{class:"line-number"},"142"),t("br"),t("span",{class:"line-number"},"143"),t("br"),t("span",{class:"line-number"},"144"),t("br"),t("span",{class:"line-number"},"145"),t("br"),t("span",{class:"line-number"},"146"),t("br"),t("span",{class:"line-number"},"147"),t("br"),t("span",{class:"line-number"},"148"),t("br"),t("span",{class:"line-number"},"149"),t("br"),t("span",{class:"line-number"},"150"),t("br"),t("span",{class:"line-number"},"151"),t("br"),t("span",{class:"line-number"},"152"),t("br"),t("span",{class:"line-number"},"153"),t("br"),t("span",{class:"line-number"},"154"),t("br"),t("span",{class:"line-number"},"155"),t("br"),t("span",{class:"line-number"},"156"),t("br"),t("span",{class:"line-number"},"157"),t("br"),t("span",{class:"line-number"},"158"),t("br"),t("span",{class:"line-number"},"159"),t("br"),t("span",{class:"line-number"},"160"),t("br"),t("span",{class:"line-number"},"161"),t("br"),t("span",{class:"line-number"},"162"),t("br"),t("span",{class:"line-number"},"163"),t("br"),t("span",{class:"line-number"},"164"),t("br"),t("span",{class:"line-number"},"165"),t("br"),t("span",{class:"line-number"},"166"),t("br"),t("span",{class:"line-number"},"167"),t("br"),t("span",{class:"line-number"},"168"),t("br"),t("span",{class:"line-number"},"169"),t("br"),t("span",{class:"line-number"},"170"),t("br"),t("span",{class:"line-number"},"171"),t("br"),t("span",{class:"line-number"},"172"),t("br"),t("span",{class:"line-number"},"173"),t("br"),t("span",{class:"line-number"},"174"),t("br"),t("span",{class:"line-number"},"175"),t("br"),t("span",{class:"line-number"},"176"),t("br"),t("span",{class:"line-number"},"177"),t("br"),t("span",{class:"line-number"},"178"),t("br"),t("span",{class:"line-number"},"179"),t("br"),t("span",{class:"line-number"},"180"),t("br"),t("span",{class:"line-number"},"181"),t("br"),t("span",{class:"line-number"},"182"),t("br"),t("span",{class:"line-number"},"183"),t("br"),t("span",{class:"line-number"},"184"),t("br"),t("span",{class:"line-number"},"185"),t("br"),t("span",{class:"line-number"},"186"),t("br"),t("span",{class:"line-number"},"187"),t("br"),t("span",{class:"line-number"},"188"),t("br"),t("span",{class:"line-number"},"189"),t("br"),t("span",{class:"line-number"},"190"),t("br"),t("span",{class:"line-number"},"191"),t("br"),t("span",{class:"line-number"},"192"),t("br"),t("span",{class:"line-number"},"193"),t("br"),t("span",{class:"line-number"},"194"),t("br"),t("span",{class:"line-number"},"195"),t("br"),t("span",{class:"line-number"},"196"),t("br"),t("span",{class:"line-number"},"197"),t("br"),t("span",{class:"line-number"},"198"),t("br"),t("span",{class:"line-number"},"199"),t("br"),t("span",{class:"line-number"},"200"),t("br"),t("span",{class:"line-number"},"201"),t("br"),t("span",{class:"line-number"},"202"),t("br"),t("span",{class:"line-number"},"203"),t("br")])],-1),Wr=t("h2",{id:"tailwind"},[t("a",{class:"header-anchor",href:"#tailwind","aria-hidden":"true"},"#"),e(" Tailwind")],-1),Ur=t("h3",{id:"tailwind-directives"},[t("a",{class:"header-anchor",href:"#tailwind-directives","aria-hidden":"true"},"#"),e(" Tailwind Directives")],-1),Zr=t("div",{class:"language-css line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token atrule"},[t("span",{class:"token rule"},"@layer"),e(" base")]),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token selector"},"h1"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token atrule"},[t("span",{class:"token rule"},"@apply"),e(" text-3xl"),t("span",{class:"token punctuation"},";")]),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token atrule"},[t("span",{class:"token rule"},"@layer"),e(" components")]),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token selector"},".primary-btn"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token atrule"},[t("span",{class:"token rule"},"@apply"),e(" bg-yellow-600 "),t("span",{class:"token property"},"hover"),t("span",{class:"token punctuation"},":"),e("bg-yellow-800 text-black font-bold py-4 px-6 shadow-md"),t("span",{class:"token punctuation"},";")]),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token atrule"},[t("span",{class:"token rule"},"@layer"),e(" utilities")]),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token atrule"},[t("span",{class:"token rule"},"@variants"),e(" hover")]),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token selector"},".padding-large"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"padding"),t("span",{class:"token punctuation"},":"),e(" 30px"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n\n "),t("span",{class:"token atrule"},[t("span",{class:"token rule"},"@variants"),e(" focus hover")]),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token selector"},".border-small"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"border"),t("span",{class:"token punctuation"},":"),e(" 1px solid #30485e"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token selector"},".border-medium-dashed"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"border"),t("span",{class:"token punctuation"},":"),e(" 7px dashed #30485e"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n\n "),t("span",{class:"token atrule"},[t("span",{class:"token rule"},"@responsive")]),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"/* generate for all breakpoints */"),e("\n "),t("span",{class:"token selector"},".border-solid"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"border"),t("span",{class:"token punctuation"},":"),e(" 10px solid #30485e"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n\n "),t("span",{class:"token atrule"},[t("span",{class:"token rule"},"@screen"),e(" sm")]),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"/* generate for small screen breakpoint */"),e("\n "),t("span",{class:"token selector"},".border-solid"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},"border"),t("span",{class:"token punctuation"},":"),e(" 10px solid #30485e"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br"),t("span",{class:"line-number"},"25"),t("br"),t("span",{class:"line-number"},"26"),t("br"),t("span",{class:"line-number"},"27"),t("br"),t("span",{class:"line-number"},"28"),t("br"),t("span",{class:"line-number"},"29"),t("br"),t("span",{class:"line-number"},"30"),t("br"),t("span",{class:"line-number"},"31"),t("br"),t("span",{class:"line-number"},"32"),t("br"),t("span",{class:"line-number"},"33"),t("br"),t("span",{class:"line-number"},"34"),t("br"),t("span",{class:"line-number"},"35"),t("br"),t("span",{class:"line-number"},"36"),t("br"),t("span",{class:"line-number"},"37"),t("br"),t("span",{class:"line-number"},"38"),t("br"),t("span",{class:"line-number"},"39"),t("br"),t("span",{class:"line-number"},"40"),t("br"),t("span",{class:"line-number"},"41"),t("br"),t("span",{class:"line-number"},"42"),t("br")])],-1);o.render=function(t,e,l,o,Jr,Qr){return n(),s("div",null,[c,p,u,r,i,k,b,m,d,g,h,f,y,v,x,w,S,C,q,F,z,P,T,B,M,_,j,A,L,V,G,D,I,E,H,N,O,R,X,Y,W,U,Z,J,Q,K,$,nn,sn,an,tn,en,ln,on,cn,pn,un,rn,kn,bn,mn,dn,gn,hn,fn,yn,vn,xn,wn,Sn,Cn,qn,Fn,zn,Pn,Tn,Bn,Mn,_n,jn,An,Ln,Vn,Gn,Dn,In,En,Hn,Nn,On,Rn,Xn,Yn,Wn,Un,Zn,Jn,Qn,Kn,$n,ns,ss,as,ts,es,ls,os,cs,ps,us,rs,is,ks,bs,ms,ds,gs,hs,fs,ys,vs,xs,ws,Ss,Cs,qs,Fs,zs,Ps,Ts,Bs,Ms,_s,js,As,Ls,Vs,Gs,Ds,Is,Es,Hs,Ns,Os,Rs,Xs,Ys,Ws,Us,Zs,Js,Qs,Ks,$s,na,sa,aa,ta,ea,la,oa,ca,pa,ua,ra,ia,ka,ba,ma,da,ga,ha,fa,ya,va,xa,wa,Sa,Ca,qa,Fa,za,Pa,Ta,Ba,Ma,_a,ja,Aa,La,Va,Ga,Da,Ia,Ea,Ha,Na,Oa,Ra,Xa,Ya,Wa,Ua,Za,Ja,Qa,Ka,$a,nt,st,at,tt,et,lt,ot,ct,pt,ut,rt,it,kt,bt,mt,dt,gt,ht,ft,yt,vt,xt,wt,St,Ct,qt,Ft,zt,Pt,Tt,Bt,Mt,_t,jt,At,Lt,Vt,Gt,Dt,It,Et,Ht,Nt,Ot,Rt,Xt,Yt,Wt,Ut,Zt,Jt,Qt,Kt,$t,ne,se,ae,te,ee,le,oe,ce,pe,ue,re,ie,ke,be,me,de,ge,he,fe,ye,ve,xe,we,Se,Ce,qe,Fe,ze,Pe,Te,Be,Me,_e,je,Ae,Le,Ve,Ge,De,Ie,Ee,He,Ne,Oe,Re,Xe,Ye,We,Ue,Ze,Je,Qe,Ke,$e,nl,sl,al,tl,el,ll,ol,a(" markdownlint-disable line-length "),cl,a(" markdownlint-enable line-length "),pl,ul,rl,il,kl,bl,ml,dl,gl,hl,fl,yl,vl,xl,wl,Sl,Cl,ql,Fl,zl,Pl,Tl,Bl,Ml,_l,jl,Al,Ll,Vl,Gl,Dl,Il,El,Hl,Nl,Ol,Rl,Xl,Yl,Wl,Ul,Zl,Jl,Ql,Kl,$l,no,so,ao,to,eo,lo,oo,co,po,uo,ro,io,ko,bo,mo,go,ho,fo,yo,vo,xo,wo,So,Co,qo,Fo,zo,Po,To,Bo,Mo,_o,jo,Ao,Lo,Vo,Go,Do,Io,Eo,Ho,No,Oo,Ro,Xo,Yo,Wo,Uo,Zo,Jo,Qo,Ko,$o,nc,sc,ac,tc,ec,lc,oc,cc,pc,uc,rc,ic,kc,bc,mc,dc,gc,hc,fc,yc,vc,xc,wc,Sc,Cc,qc,Fc,zc,Pc,Tc,Bc,Mc,_c,jc,Ac,Lc,Vc,Gc,Dc,Ic,Ec,Hc,Nc,Oc,Rc,Xc,Yc,Wc,Uc,Zc,Jc,Qc,Kc,$c,np,sp,ap,tp,ep,lp,op,cp,pp,up,rp,ip,kp,bp,mp,dp,gp,hp,fp,yp,vp,xp,wp,Sp,Cp,qp,Fp,zp,Pp,Tp,Bp,Mp,_p,jp,Ap,Lp,Vp,Gp,Dp,Ip,Ep,Hp,Np,Op,Rp,Xp,Yp,Wp,Up,Zp,Jp,Qp,Kp,$p,nu,su,au,tu,eu,lu,ou,cu,pu,uu,ru,iu,ku,bu,mu,du,gu,hu,fu,yu,vu,xu,wu,Su,Cu,qu,Fu,zu,Pu,Tu,Bu,Mu,_u,ju,Au,Lu,Vu,Gu,Du,Iu,Eu,Hu,Nu,Ou,Ru,Xu,Yu,Wu,Uu,Zu,Ju,Qu,Ku,$u,nr,sr,ar,tr,er,lr,or,cr,pr,ur,rr,ir,kr,br,mr,dr,gr,hr,fr,yr,vr,xr,wr,Sr,Cr,qr,Fr,zr,Pr,Tr,Br,Mr,_r,jr,Ar,Lr,Vr,Gr,Dr,Ir,Er,Hr,Nr,Or,Rr,Xr,Yr,Wr,Ur,Zr])};export default o;export{l as __pageData};
diff --git a/assets/web_css_sassBasicNotes.md.77936725.js b/assets/web_css_sassBasicNotes.md.77936725.js
new file mode 100644
index 00000000000..942d3b02e8a
--- /dev/null
+++ b/assets/web_css_sassBasicNotes.md.77936725.js
@@ -0,0 +1 @@
+import{o as n,c as s,a}from"./app.6dd2a1b7.js";const e='{"title":"Sass Basic Notes","description":"","frontmatter":{},"headers":[{"level":2,"title":"Sass Basis","slug":"sass-basis"},{"level":3,"title":"Variable","slug":"variable"},{"level":3,"title":"Directive","slug":"directive"},{"level":3,"title":"Built-in Functions","slug":"built-in-functions"},{"level":2,"title":"Error Handle","slug":"error-handle"},{"level":3,"title":"function error handle","slug":"function-error-handle"},{"level":3,"title":"mixin error handle","slug":"mixin-error-handle"},{"level":3,"title":"Lists Check","slug":"lists-check"},{"level":2,"title":"Project Structure","slug":"project-structure"},{"level":2,"title":"Best Practice","slug":"best-practice"},{"level":3,"title":"Performance","slug":"performance"},{"level":3,"title":"Children Selector","slug":"children-selector"},{"level":2,"title":"Tools","slug":"tools"},{"level":3,"title":"Framework","slug":"framework"},{"level":3,"title":"Sprite Builder","slug":"sprite-builder"},{"level":3,"title":"Grid System","slug":"grid-system"},{"level":3,"title":"Media Query","slug":"media-query"}],"relativePath":"web/css/sassBasicNotes.md","lastUpdated":1627196035000}',p={},t=a(' Sass Basic Notes
Sass Basis Variable Normal Variable $heading-color : green; \n\nh1 { \n color : $heading-color ; \n} \n
1 2 3 4 5
String Variable #{$var}
: combine with string Nesting Variable refer to parent-selector, only use it on:
pseudo selectors and pseudo elements .button { \n & :hover { \n color : $color-button-hover ; \n } \n\n & ::after { \n } \n} \n
1 2 3 4 5 6 7 8
.button { \n .sidebar & { \n font-size : 0.9rem; \n } \n} \n
1 2 3 4 5
List length($list) nth($list, $n) set-nth($list, $n, $value) index($list, $value) list-separator($list) append($list, $value, [$separator]) Map map-get($map, $key) map-merge($map, $map) map-remove($map, $keys) map-keys($map) map-values($map) map-has-key($map, $key) $colors : ( \n color1 : blue, \n color2 : red, \n color3 : green, \n) ; \n\n@each $key , $color in $colors { \n .#{$color} -text { \n color : $color ; \n } \n} \n
1 2 3 4 5 6 7 8 9 10 11
arguments list @mixin dummy ( $a , $b , $c ) { \n \n} \n\n\n@include dummy ( true , 42, 'kittens' ) ; \n\n\n$params : ( true , 42, 'kittens' ) ; \n$value : dummy ( nth ( $params , 1) , nth ( $params , 2) , nth ( $params , 3) ) ; \n\n\n$params : ( true , 42, 'kittens' ) ; \n@include dummy ( $params ...) ; \n\n\n$params : ( \n 'c' : 'kittens' , \n 'a' : true , \n 'b' : 42, \n) ; \n@include dummy ( $params ...) ; \n
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
!default
flag only assign when variables hadn't been assigned
Directive Mixin and Include Directive @mixin box-shadow ( $x , $y , $blur , $c ) { \n -webkit-box-shadow : $x , $y , $blur , $c ; \n -moz-box-shadow : $x , $y , $blur , $c ; \n -ms-box-shadow : $x , $y , $blur , $c ; \n box-shadow : $x , $y , $blur , $c ; \n} \n\ndiv { \n @include box-shadow ( 0px, 0px, 4px, #fff) ; \n} \n
1 2 3 4 5 6 7 8 9 10
If Else Directive @mixin border-stroke ( $val ) { \n @if $val == light { \n border : 1px solid black; \n } @else if $val == medium { \n border : 3px solid black; \n } @else if $val == heavy { \n border : 6px solid black; \n } @else { \n border : none; \n } \n} \n
1 2 3 4 5 6 7 8 9 10 11
\n@if not index ( $list , $item ) { \n \n} \n\n\n@if index ( $list , $item ) == null { \n \n} \n
1 2 3 4 5 6 7 8 9
for loop @for $i from 1 through 12 { \n .col-#{$i} { \n width : 100% / 12 * $i ; \n } \n} \n
1 2 3 4 5
while loop $x : 1; \n@while $x < 13 { \n .col-#{$x} { \n width : 100% / 12 * $x ; \n } \n $x : $x + 1; \n} \n
1 2 3 4 5 6 7
each @each $color in blue, red, green { \n .#{$color} -text { \n color : $color ; \n } \n} \n
1 2 3 4 5
import \n@import 'variables' ; \n
1 2
~
to import scss from node_modules
@import '~bootstrap/scss/bootstrap' ; \n
1
extend @extend
is basically about moving selectors around:
can't extend complex selector can't extend cross media query avoid extending from nested selectors avoid chaining @extend
directives \n%equal-heights { \n display : flex; \n flex-wrap : wrap; \n} \n\n\n%message-shared { \n border : 1px solid #ccc; \n padding : 10px; \n color : #333; \n} \n\n.message { \n @extend %message-shared ; \n} \n\n.success { \n @extend %message-shared ; \n border-color : green; \n} \n\n.error { \n @extend %message-shared ; \n border-color : red; \n} \n\n.warning { \n @extend %message-shared ; \n border-color : yellow; \n} \n
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
.panel { \n background-color : red; \n height : 70px; \n border : 2px solid green; \n} \n\n.big-panel { \n @extend .panel; \n width : 150px; \n font-size : 2em; \n} \n
1 2 3 4 5 6 7 8 9 10 11
%foo { \n content : 'foo' ; \n} \n\n\n@media print { \n .bar { \n \n @extend %foo ; \n } \n} \n\n\n@media print { \n .bar { \n @at-root ( without : media) { \n @extend %foo ; \n } \n } \n} \n\n\n%foo { \n content : 'foo' ; \n\n & -print { \n @media print { \n content : 'foo print' ; \n } \n } \n} \n\n@media print { \n .bar { \n @extend %foo-print ; \n } \n} \n
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
Built-in Functions Official Documentation
Color mix
is better than lighten
/darken
@function tint ( $color , $percentage ) { \n @return mix ( white, $color , $percentage ) ; \n} \n\n@function shade ( $color , $percentage ) { \n @return mix ( black, $color , $percentage ) ; \n} \n
1 2 3 4 5 6 7
Math round($number) ceil($number) floor($number) abs($number) max min $value : 13.37; \n$length : $value * 1em; \n\nwhatever { \n padding-top : round ( $length ) ; \n} \n
1 2 3 4 5 6
type and unit unit($length) unitless($length) type-of($var) is-type-of($var, $type) Error Handle type-of is-type-of unit unitless @warn/@error function error handle @function add-10 ( $number ) { \n @if type-of ( $number ) != 'number' { \n @warn "`#{$number}` is not a number of `add-10`." ; \n @return false ; \n } \n\n @return $number + 10; \n} \n
1 2 3 4 5 6 7 8
mixin error handle @mixin module ( $name ) { \n \n $everything-okay : true ; \n\n \n @if type-of ( $name ) != 'string' { \n @warn '"#{$name}" is not a string for "module".' ; \n $everything-okay : false ; \n } \n\n \n @if $everything-okay { \n @content ; \n } \n} \n
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Lists Check @if length ( $value ) > 1 and type-of ( $value ) != map { \n \n} \n
1 2 3
Project Structure sass/ \n| – abstracts/ \n| | – _variables. scss # Sass Variables\n| | – _functions. scss # Sass Functions\n| | – _mixins. scss # Sass Mixins\n| | – _helpers. scss # Class & placeholders helpers\n| . . . # Etc…\n| \n| – vendors/ \n| | – _bootstrap. scss # Bootstrap\n| | – _jquery- ui. scss # jQuery UI\n| . . . # Etc…\n| \n| – base/ \n| | – _reset. scss # Reset/ normalize\n| | – _typography. scss # Typography rules\n| . . . # Etc…\n| \n| – components/ \n| | – _buttons. scss # Buttons\n| | – _carousel. scss # Carousel\n| | – _cover. scss # Cover\n| | – _dropdown. scss # Dropdown\n| | – _navigation. scss # Navigation\n| . . . # Etc…\n| \n| – layout/ \n| | – _grid. scss # Grid system\n| | – _header. scss # Header\n| | – _footer. scss # Footer\n| | – _sidebar. scss # Sidebar\n| | – _forms. scss # Forms\n| . . . # Etc…\n| \n| – pages/ \n| | – _home. scss # Home specific styles\n| | – _contact. scss # Contact specific styles\n| . . . # Etc…\n| \n| – themes/ \n| | – _theme. scss # Default theme\n| | – _admin. scss # Admin theme\n| . . . # Etc…\n| \n| – main. scss # primary Sass file\n
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45
in main.scss
file:
@charset 'utf-8';
import abstracts
import vendors
import base
import layout
import components
import themes
(or pages
when it's not partial
directory) When working on a very large project with a lot of abstract utilities, it might be interesting to group them by topic rather than type, for instance typography (_typography.scss), theming (_theming.scss), etc. Each file contains all the related helpers: variables, functions, mixins and placeholders.
Best Practice Children Selector \n%button { \n display : inline-block; \n \n\n \n %modal > & { \n display : block; \n } \n} \n\n.button { \n @extend %button ; \n} \n\n\n.modal { \n @extend %modal ; \n\n > .button { \n @extend %button ; \n } \n} \n
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
Framework Sprite Builder Grid System ',85);p.render=function(a,e,p,l,o,c){return n(),s("div",null,[t])};export default p;export{e as __pageData};
diff --git a/assets/web_css_sassBasicNotes.md.77936725.lean.js b/assets/web_css_sassBasicNotes.md.77936725.lean.js
new file mode 100644
index 00000000000..a1a7369793a
--- /dev/null
+++ b/assets/web_css_sassBasicNotes.md.77936725.lean.js
@@ -0,0 +1 @@
+import{o as n,c as s,a}from"./app.6dd2a1b7.js";const e='{"title":"Sass Basic Notes","description":"","frontmatter":{},"headers":[{"level":2,"title":"Sass Basis","slug":"sass-basis"},{"level":3,"title":"Variable","slug":"variable"},{"level":3,"title":"Directive","slug":"directive"},{"level":3,"title":"Built-in Functions","slug":"built-in-functions"},{"level":2,"title":"Error Handle","slug":"error-handle"},{"level":3,"title":"function error handle","slug":"function-error-handle"},{"level":3,"title":"mixin error handle","slug":"mixin-error-handle"},{"level":3,"title":"Lists Check","slug":"lists-check"},{"level":2,"title":"Project Structure","slug":"project-structure"},{"level":2,"title":"Best Practice","slug":"best-practice"},{"level":3,"title":"Performance","slug":"performance"},{"level":3,"title":"Children Selector","slug":"children-selector"},{"level":2,"title":"Tools","slug":"tools"},{"level":3,"title":"Framework","slug":"framework"},{"level":3,"title":"Sprite Builder","slug":"sprite-builder"},{"level":3,"title":"Grid System","slug":"grid-system"},{"level":3,"title":"Media Query","slug":"media-query"}],"relativePath":"web/css/sassBasicNotes.md","lastUpdated":1627196035000}',p={},t=a('',85);p.render=function(a,e,p,l,o,c){return n(),s("div",null,[t])};export default p;export{e as __pageData};
diff --git a/assets/web_frameworks_electronBasicNotes.md.22479f06.js b/assets/web_frameworks_electronBasicNotes.md.22479f06.js
new file mode 100644
index 00000000000..95c8f4f78c6
--- /dev/null
+++ b/assets/web_frameworks_electronBasicNotes.md.22479f06.js
@@ -0,0 +1 @@
+import{o as n,c as a,a as s}from"./app.6dd2a1b7.js";const e='{"title":"Electron Basic Notes","description":"","frontmatter":{},"headers":[{"level":2,"title":"Getting Started","slug":"getting-started"},{"level":2,"title":"Basic Concepts","slug":"basic-concepts"},{"level":3,"title":"Process","slug":"process"},{"level":3,"title":"Shared Data","slug":"shared-data"},{"level":2,"title":"Process Communication","slug":"process-communication"},{"level":3,"title":"Main to Render","slug":"main-to-render"},{"level":3,"title":"Render to Main","slug":"render-to-main"},{"level":3,"title":"Render to Render","slug":"render-to-render"},{"level":2,"title":"Native UI","slug":"native-ui"},{"level":3,"title":"Menu","slug":"menu"},{"level":3,"title":"Dialog","slug":"dialog"},{"level":2,"title":"Electron Security","slug":"electron-security"},{"level":2,"title":"Electron Builder","slug":"electron-builder"},{"level":2,"title":"Electron Cheat Sheet","slug":"electron-cheat-sheet"}],"relativePath":"web/frameworks/electronBasicNotes.md","lastUpdated":1627196035000}',t={},p=s(' Electron Basic Notes
Getting Started npm install -g electron-forge\nelectron-forge init my-new-project --template= react\ncd my-new-project\nelectron-forge start\n
1 2 3 4
Basic Concepts Process 主进程通过实例化 BrowserWindow,每个 BrowserWindow 实例都在它自己的渲染进程内返回一个 web 页面。 当 BrowserWindow 实例销毁时,相应的渲染进程也会终止。
主进程负责掌管所有的 web 页面和它们相应的渲染进程。 每个渲染进程都是相互独立的,它们只关心自己所运行的 web 页面。
在页面(渲染进程)中不允许调用原生 GUI 相关的 API,那是因为在网页(渲染进程)中中掌管原生 GUI 很危险,易造成内存泄露。 如果想在网页中进行 GUI 的操作,渲染进程必须向主进程传达请求,然后在主进程中完成操作。
在 Electron 中,有几种连接主进程和渲染进程的方法, 例如用于传送消息的 ipcRenderer 和 ipcMain 模块,以及用于 RPC 的 remote 模块.
Shared Data \nglobal. sharedObject = { \n someProperty: 'default value' , \n} ; \n\n\nrequire ( 'remote' ) . getGlobal ( 'sharedObject' ) . someProperty = 'new value' ; \n\n\nconsole. log ( require ( 'remote' ) . getGlobal ( 'sharedObject' ) . someProperty) ; \n
1 2 3 4 5 6 7 8 9 10
Process Communication Main to Render webContents.executeJavaScript ipcRenderer ipcMain Render to Main const { BrowserWindow } = require ( 'electron' ) . remote; \nlet win = new BrowserWindow ( { width: 800 , height: 600 } ) ; \nwin. loadURL ( 'https://github.com' ) ; \n
1 2 3
Render to Render Web Storage API IndexedDB Electron IPC e.g remote.getGlobal Native UI Dialog openFile\nopenDirectory\nmultiSelections\ncreateDirectory\nshowHiddenFiles\npromptToCreate ( Windows Only) \n
1 2 3 4 5 6
Electron Security only load secure content (HTTPS/WSS/FTPS) verify integrity of scripts via CSP and SRI don't trust external resources disable nodejs in renderers that display remote content let win; \n\nconst createBrowserWindow = ( ) => { \n win = new BrowserWindow ( { \n width: 800 , \n height: 600 , \n title: 'Electron App' , \n webPreferences: { \n nodeIntegration: false , \n preload: path. join ( __dirname, 'preload.js' ) ; \n } \n } ) ; \n} ; \n
1 2 3 4 5 6 7 8 9 10 11 12 13
\nconst fs = require ( 'fs' ) ; \n\nglobal. desktop = { \n files : ( ) => fs. readdirSync ( __dirname) ; \n} \n
1 2 3 4 5 6
Electron Builder Electron Cheat Sheet ',35);t.render=function(s,e,t,o,r,l){return n(),a("div",null,[p])};export default t;export{e as __pageData};
diff --git a/assets/web_frameworks_electronBasicNotes.md.22479f06.lean.js b/assets/web_frameworks_electronBasicNotes.md.22479f06.lean.js
new file mode 100644
index 00000000000..6ee062f4a38
--- /dev/null
+++ b/assets/web_frameworks_electronBasicNotes.md.22479f06.lean.js
@@ -0,0 +1 @@
+import{o as n,c as a,a as s}from"./app.6dd2a1b7.js";const e='{"title":"Electron Basic Notes","description":"","frontmatter":{},"headers":[{"level":2,"title":"Getting Started","slug":"getting-started"},{"level":2,"title":"Basic Concepts","slug":"basic-concepts"},{"level":3,"title":"Process","slug":"process"},{"level":3,"title":"Shared Data","slug":"shared-data"},{"level":2,"title":"Process Communication","slug":"process-communication"},{"level":3,"title":"Main to Render","slug":"main-to-render"},{"level":3,"title":"Render to Main","slug":"render-to-main"},{"level":3,"title":"Render to Render","slug":"render-to-render"},{"level":2,"title":"Native UI","slug":"native-ui"},{"level":3,"title":"Menu","slug":"menu"},{"level":3,"title":"Dialog","slug":"dialog"},{"level":2,"title":"Electron Security","slug":"electron-security"},{"level":2,"title":"Electron Builder","slug":"electron-builder"},{"level":2,"title":"Electron Cheat Sheet","slug":"electron-cheat-sheet"}],"relativePath":"web/frameworks/electronBasicNotes.md","lastUpdated":1627196035000}',t={},p=s('',35);t.render=function(s,e,t,o,r,l){return n(),a("div",null,[p])};export default t;export{e as __pageData};
diff --git a/assets/web_frameworks_jQueryBasicNotes.md.34d94b01.js b/assets/web_frameworks_jQueryBasicNotes.md.34d94b01.js
new file mode 100644
index 00000000000..2ae23fec20d
--- /dev/null
+++ b/assets/web_frameworks_jQueryBasicNotes.md.34d94b01.js
@@ -0,0 +1 @@
+import{o as n,c as s,a}from"./app.6dd2a1b7.js";const p='{"title":"jQuery Basic Notes","description":"","frontmatter":{},"headers":[{"level":2,"title":"Callbacks Queue","slug":"callbacks-queue"},{"level":2,"title":"Deferred Queue","slug":"deferred-queue"},{"level":2,"title":"Sizzle Selector Engine","slug":"sizzle-selector-engine"},{"level":2,"title":"DOM Module","slug":"dom-module"},{"level":3,"title":"DOM Internal","slug":"dom-internal"},{"level":3,"title":"structure","slug":"structure"},{"level":3,"title":"class","slug":"class"},{"level":3,"title":"style","slug":"style"},{"level":2,"title":"Events Module","slug":"events-module"},{"level":3,"title":"Events Internal","slug":"events-internal"},{"level":3,"title":"Mouse","slug":"mouse"},{"level":3,"title":"Keyboard","slug":"keyboard"},{"level":3,"title":"Form","slug":"form"},{"level":3,"title":"Document and Window Event","slug":"document-and-window-event"},{"level":3,"title":"常用多态函数","slug":"常用多态函数"},{"level":2,"title":"AJAX Module","slug":"ajax-module"},{"level":3,"title":"JSON API","slug":"json-api"},{"level":3,"title":"AJAX API","slug":"ajax-api"},{"level":2,"title":"Animation Module","slug":"animation-module"},{"level":3,"title":"Tween Object","slug":"tween-object"}],"relativePath":"web/frameworks/jQueryBasicNotes.md","lastUpdated":1627632795000}',e={},t=a(' jQuery Basic Notes
Callbacks Queue callback queue use Observer
pattern to add callbacks to callback queue, fire callbacks when events happen.
function Callbacks ( options ) { \n let list = [ ] ; \n const self; \n\n self = { \n add ( fn ) { \n if ( options == 'unique' ) { \n if ( - 1 === list. indexOf ( fn) ) { \n list. push ( fn) \n } \n } else { \n list. push ( fn) \n } \n } , \n fire ( args ) { \n list. forEach ( ( fn ) => { \n fn ( args) ; \n } ) ; \n\n if ( options === 'once' ) { \n list = undefined ; \n } \n } , \n } ; \n\n return self; \n} \n
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
Deferred Queue Same to Promise
class Promise { \n \n \n \n constructor ( executor ) { \n if ( typeof executor !== 'function' ) { \n throw new Error ( 'Executor must be a function' ) ; \n } \n\n \n \n this . $state = 'PENDING' ; \n this . $chained = [ ] ; \n\n \n const resolve = ( res ) => { \n \n \n \n \n \n if ( this . $state !== 'PENDING' ) { \n return ; \n } \n\n \n \n const then = res != null ? res. then : null ; \n if ( typeof then === 'function' ) { \n \n \n \n \n return then ( resolve, reject) ; \n } \n\n this . $state = 'FULFILLED' ; \n this . $internalValue = res; \n\n \n \n for ( const { onFulfilled } of this . $chained) { \n onFulfilled ( res) ; \n } \n\n return res; \n } ; \n\n const reject = ( err ) => { \n if ( this . $state !== 'PENDING' ) { \n return ; \n } \n\n this . $state = 'REJECTED' ; \n this . $internalValue = err; \n\n for ( const { onRejected } of this . $chained) { \n onRejected ( err) ; \n } \n } ; \n\n \n try { \n \n \n \n \n executor ( resolve, reject) ; \n } catch ( err) { \n reject ( err) ; \n } \n } \n\n \n \n \n then ( onFulfilled, onRejected ) { \n return new Promise ( ( resolve, reject ) => { \n \n \n \n const _onFulfilled = ( res ) => { \n try { \n \n \n \n resolve ( onFulfilled ( res) ) ; \n } catch ( err) { \n reject ( err) ; \n } \n } ; \n\n const _onRejected = ( err ) => { \n try { \n \n reject ( onRejected ( err) ) ; \n } catch ( _err) { \n reject ( _err) ; \n } \n } ; \n\n if ( this . $state === 'FULFILLED' ) { \n _onFulfilled ( this . $internalValue) ; \n } else if ( this . $state === 'REJECTED' ) { \n _onRejected ( this . $internalValue) ; \n } else { \n this . $chained. push ( { \n onFulfilled: _onFulfilled, \n onRejected: _onRejected, \n } ) ; \n } \n } ) ; \n } \n\n catch ( onRejected) { \n return this . then ( null , onRejected) ; \n } \n} \n
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118
Sizzle Selector Engine runtime tokenizer and parser api from querySelectorAll
DOM Module DOM Internal createDocumentFragment:
多次使用节点方法(如:appendChild)绘制页面,每次都要刷新页面一次。 使用 document_createDocumentFragment()创建一个文档碎片,把所有的新结点附加在其上, 然后把文档碎片的内容一次性添加到 document 中,提升性能
function domManipulation ( parentElements, target, callback ) { \n const fragment = buildFragment ( [ target] , parentElements) ; \n callback . call ( parentElements) ; \n} \n\n\n... \nafter ( ) { \n return this . domManipulation ( arguments, function ( elem ) { \n this . parentNode. insertBefore ( elem, this . nextSibling) ; \n } ) ; \n} \n
1 2 3 4 5 6 7 8 9 10 11 12
structure $ ( 'selector' ) . html ( 'tag+text' ) ; \n$ ( 'selector' ) . text ( 'text' ) ; \n\n$ ( 'selector' ) . clone ( ) ; \n$ ( 'selector' ) . remove ( ) ; \n$ ( 'selector' ) . appendTo ( 'selector' ) ; \n\n$ ( 'selector' ) . parent ( ) ; \n$ ( 'selector' ) . children ( ) ; \n
1 2 3 4 5 6 7 8 9
$ ( 'selector' ) . index ( ) ; \n
1
class $ ( 'selector' ) . addClass ( '' ) ; \n$ ( 'selector' ) . removeClass ( '' ) ; \n
1 2
style $ ( 'selector' ) . css ( 'color' , 'red' ) ; \n$ ( 'selector' ) . prop ( 'disable' , 'true' ) ; \n
1 2
Events Module Events Internal 通过 on 绑定事件,分析传递的数据,加工变成 add 能够识别的数据 通过 add 把数据整理放到数据缓存中保存,通过 addEventListener 绑定事件 触发事件执行 addEventListener 回调 dispatch 方法 修正事件对象存在的问题,通过 fix 生成一个可写的事件对象 引入 handlers 把委托和原生事件(例如"click")绑定区分对待 执行数据缓存的事件回调,传入内部产生的事件对象 Mouse click dbclick mouseenter mouseleave Keyboard Document and Window Event $ ( window) . scroll ( function ( event ) { } ) ; \n$ ( document) . height ( ) ; \n$ ( window) . height ( ) ; \n$ ( window) . scrollTop ( ) ; \n
1 2 3 4
常用多态函数 data、html、css\n$ ( document) . ready ( function ( ) { } ) ; \n
1 2
AJAX Module JSON API $.getJSON
:
$. getJSON ( url, data, success ( data, status, xhr) ) ; \n\n$. getJSON ( 'test.js' , function ( json ) { \n alert ( 'JSON Data: ' + json. users[ 3 ] . name) ; \n} ) ; \n
1 2 3 4 5
AJAX API $.ajax
:
$. ajax ( { \n url: 'http://localhost:3000' , \n type: 'GET' / 'POST' / 'PUT' / 'DELETE' , \n data: dataSchema, \n dataType: 'json' \n success: successCallback, \n error: errorHandle, \n} ) ; \n
1 2 3 4 5 6 7 8
Animation Module 通过多个 animate 方法形成动画链,那么这个动画链其实都是会加入到 queue 队列里面 在每一次 queue 方法中会把动画数据写到队列中,然后取出队列中的第一个序列通过 dequeue 方法执行 开始执行之前写一个进程锁 inProgress
到 queue 里面, 代表这个动画还在执行中, 防止同个序列的多个动画重复执行,这个就是异步执行同步收集的处理方案 此时动画开始了,这里注意动画是在异步执行的同步的代码,继续调用下一个 animate 执行同样的 animate 方法逻辑但是此时问题来了, 动画可能还在执行可是后续的 animate 还在继续调用,所以这个时候后面的动画代码就需要等待了(进程锁) 队列头是有一把 inProgress
进程锁的,那么这时候动画只需要加入队列, 但是可以通过 inProgress
是否存在来判断是否执行 所有的 animate 方法在加入队列都是按照以上的逻辑依次执行, 动画执行完毕了就会有一个结束通知,然后从 queue 取出第一个队列继续执行了,如此循环 Tween Object 通过一个 Tween 类构造出来的缓动对象,其实就是针对每一个属性的封装对象, 这样我们只需要设计一个定时器,在指定的时间内调用 Tween 生成的这些对象就可以了, Tween 内部控制着各自属性的状态改变。
具体右边的实现代码涉及了如下几个部分了:
Animation 函数,入口函数用来做一些参数的初始化工作,整个动画的开始调度 animation 对象就是实际的动画对象了,通过 Animation 函数创建,这个对象上实现了所有属性与方法 new Tween() 通过 Tween 创建每一个属性对象相关的数据 animation.tweens 保存了每一个属性对象的容器 Animation.fx 就是具体开始动画执行的调用的一个调度对象了 定时器都是执行一个回调函数的,tick 就是定时器执行的回调, tick 函数中通过计算出变化数据,然后通过循环 animation.tweens 中的每一个动画属性对象,来实现改变 ',50);e.render=function(a,p,e,o,c,l){return n(),s("div",null,[t])};export default e;export{p as __pageData};
diff --git a/assets/web_frameworks_jQueryBasicNotes.md.34d94b01.lean.js b/assets/web_frameworks_jQueryBasicNotes.md.34d94b01.lean.js
new file mode 100644
index 00000000000..d04fd9345c4
--- /dev/null
+++ b/assets/web_frameworks_jQueryBasicNotes.md.34d94b01.lean.js
@@ -0,0 +1 @@
+import{o as n,c as s,a}from"./app.6dd2a1b7.js";const p='{"title":"jQuery Basic Notes","description":"","frontmatter":{},"headers":[{"level":2,"title":"Callbacks Queue","slug":"callbacks-queue"},{"level":2,"title":"Deferred Queue","slug":"deferred-queue"},{"level":2,"title":"Sizzle Selector Engine","slug":"sizzle-selector-engine"},{"level":2,"title":"DOM Module","slug":"dom-module"},{"level":3,"title":"DOM Internal","slug":"dom-internal"},{"level":3,"title":"structure","slug":"structure"},{"level":3,"title":"class","slug":"class"},{"level":3,"title":"style","slug":"style"},{"level":2,"title":"Events Module","slug":"events-module"},{"level":3,"title":"Events Internal","slug":"events-internal"},{"level":3,"title":"Mouse","slug":"mouse"},{"level":3,"title":"Keyboard","slug":"keyboard"},{"level":3,"title":"Form","slug":"form"},{"level":3,"title":"Document and Window Event","slug":"document-and-window-event"},{"level":3,"title":"常用多态函数","slug":"常用多态函数"},{"level":2,"title":"AJAX Module","slug":"ajax-module"},{"level":3,"title":"JSON API","slug":"json-api"},{"level":3,"title":"AJAX API","slug":"ajax-api"},{"level":2,"title":"Animation Module","slug":"animation-module"},{"level":3,"title":"Tween Object","slug":"tween-object"}],"relativePath":"web/frameworks/jQueryBasicNotes.md","lastUpdated":1627632795000}',e={},t=a('',50);e.render=function(a,p,e,o,c,l){return n(),s("div",null,[t])};export default e;export{p as __pageData};
diff --git a/assets/web_frameworks_libraryBasicNotes.md.d3a69904.js b/assets/web_frameworks_libraryBasicNotes.md.d3a69904.js
new file mode 100644
index 00000000000..5355a5ae05b
--- /dev/null
+++ b/assets/web_frameworks_libraryBasicNotes.md.d3a69904.js
@@ -0,0 +1 @@
+import{o as e,c as r,a}from"./app.6dd2a1b7.js";const t='{"title":"Library Basic Notes","description":"","frontmatter":{},"headers":[{"level":2,"title":"Indexing Tools","slug":"indexing-tools"},{"level":2,"title":"Boilerplate","slug":"boilerplate"},{"level":2,"title":"UI Framework","slug":"ui-framework"},{"level":2,"title":"Framework and Solution","slug":"framework-and-solution"},{"level":3,"title":"Front-end Solution","slug":"front-end-solution"},{"level":3,"title":"Micro Front-ends Solution","slug":"micro-front-ends-solution"},{"level":3,"title":"Back-end Solution","slug":"back-end-solution"},{"level":3,"title":"Full Stack Solution","slug":"full-stack-solution"},{"level":3,"title":"Desktop Solution","slug":"desktop-solution"},{"level":3,"title":"Mobile Solution","slug":"mobile-solution"},{"level":2,"title":"State Data Management","slug":"state-data-management"},{"level":3,"title":"React Redux","slug":"react-redux"},{"level":3,"title":"React Query","slug":"react-query"},{"level":3,"title":"React Recoil","slug":"react-recoil"},{"level":3,"title":"React Hooks","slug":"react-hooks"},{"level":3,"title":"Others State Management","slug":"others-state-management"},{"level":2,"title":"Browser Utils","slug":"browser-utils"},{"level":2,"title":"JavaScript Utils","slug":"javascript-utils"},{"level":3,"title":"String Utils","slug":"string-utils"},{"level":3,"title":"Concurrent and Parallel Programming Utils","slug":"concurrent-and-parallel-programming-utils"},{"level":3,"title":"Hash Utils","slug":"hash-utils"},{"level":3,"title":"Functional Programming Utils","slug":"functional-programming-utils"},{"level":3,"title":"TypeScript Utils","slug":"typescript-utils"},{"level":2,"title":"CSS Utils","slug":"css-utils"},{"level":3,"title":"Ordinary CSS Utils","slug":"ordinary-css-utils"},{"level":3,"title":"CSS in JS Utils","slug":"css-in-js-utils"},{"level":3,"title":"CSS Design Tools","slug":"css-design-tools"},{"level":3,"title":"Color Utils","slug":"color-utils"},{"level":3,"title":"Gradients Utils","slug":"gradients-utils"},{"level":3,"title":"Box Shadows Utils","slug":"box-shadows-utils"},{"level":3,"title":"Background Utils","slug":"background-utils"},{"level":2,"title":"Components","slug":"components"},{"level":3,"title":"Layout","slug":"layout"},{"level":3,"title":"Navigation","slug":"navigation"},{"level":3,"title":"Landing Page","slug":"landing-page"},{"level":3,"title":"Button","slug":"button"},{"level":3,"title":"Card","slug":"card"},{"level":3,"title":"Chat Widgets","slug":"chat-widgets"},{"level":3,"title":"Comments System","slug":"comments-system"},{"level":3,"title":"Modal","slug":"modal"},{"level":3,"title":"Message","slug":"message"},{"level":3,"title":"Guide Message","slug":"guide-message"},{"level":3,"title":"Form","slug":"form"},{"level":3,"title":"List","slug":"list"},{"level":3,"title":"Table","slug":"table"},{"level":3,"title":"Charts","slug":"charts"},{"level":3,"title":"Slides","slug":"slides"},{"level":3,"title":"iFrame","slug":"iframe"},{"level":2,"title":"Viewport Utils","slug":"viewport-utils"},{"level":3,"title":"Scroll Utils","slug":"scroll-utils"},{"level":3,"title":"Mouse Utils","slug":"mouse-utils"},{"level":2,"title":"Social Utils","slug":"social-utils"},{"level":3,"title":"Social Sharing","slug":"social-sharing"},{"level":3,"title":"Social Forum","slug":"social-forum"},{"level":2,"title":"Animation","slug":"animation"},{"level":3,"title":"Typing Effect Animation","slug":"typing-effect-animation"},{"level":3,"title":"Loading Effect Animation","slug":"loading-effect-animation"},{"level":3,"title":"Hover Effect Animation","slug":"hover-effect-animation"},{"level":2,"title":"Time Utils","slug":"time-utils"},{"level":3,"title":"Date Utils","slug":"date-utils"},{"level":3,"title":"Calendar Utils","slug":"calendar-utils"},{"level":2,"title":"Internationalization Utils","slug":"internationalization-utils"},{"level":2,"title":"Accessibility Tools","slug":"accessibility-tools"},{"level":2,"title":"Fonts","slug":"fonts"},{"level":2,"title":"Images","slug":"images"},{"level":3,"title":"Image Color","slug":"image-color"},{"level":3,"title":"Icons","slug":"icons"},{"level":3,"title":"Emoji","slug":"emoji"},{"level":3,"title":"SVG","slug":"svg"},{"level":3,"title":"Image Size","slug":"image-size"},{"level":3,"title":"Slide Images","slug":"slide-images"},{"level":3,"title":"Image Gallery","slug":"image-gallery"},{"level":3,"title":"Image Filter","slug":"image-filter"},{"level":3,"title":"Image Editor","slug":"image-editor"},{"level":2,"title":"Canvas","slug":"canvas"},{"level":3,"title":"Particles","slug":"particles"},{"level":3,"title":"Blocks","slug":"blocks"},{"level":3,"title":"3D Engine","slug":"_3d-engine"},{"level":2,"title":"Media","slug":"media"},{"level":3,"title":"Audio","slug":"audio"},{"level":3,"title":"Video","slug":"video"},{"level":2,"title":"Clipboard","slug":"clipboard"},{"level":2,"title":"Keyboard","slug":"keyboard"},{"level":2,"title":"Editor","slug":"editor"},{"level":3,"title":"Rich Text Editor","slug":"rich-text-editor"},{"level":3,"title":"Code Editor","slug":"code-editor"},{"level":2,"title":"SMS","slug":"sms"},{"level":3,"title":"Phone","slug":"phone"},{"level":3,"title":"Email","slug":"email"},{"level":2,"title":"Geolocation","slug":"geolocation"},{"level":2,"title":"File","slug":"file"},{"level":3,"title":"File Uploader","slug":"file-uploader"},{"level":3,"title":"File Downloader","slug":"file-downloader"},{"level":3,"title":"File Utils","slug":"file-utils"},{"level":3,"title":"PDF","slug":"pdf"},{"level":2,"title":"Persistent Storage","slug":"persistent-storage"},{"level":2,"title":"Search","slug":"search"},{"level":2,"title":"CLI","slug":"cli"},{"level":3,"title":"CLI Compiler","slug":"cli-compiler"},{"level":3,"title":"CLI Solution","slug":"cli-solution"},{"level":3,"title":"CLI Utils","slug":"cli-utils"},{"level":3,"title":"CLI Cheat Sheet","slug":"cli-cheat-sheet"},{"level":3,"title":"Terminal","slug":"terminal"},{"level":2,"title":"Compiler","slug":"compiler"},{"level":3,"title":"Parser","slug":"parser"},{"level":2,"title":"Daemon","slug":"daemon"},{"level":2,"title":"Network","slug":"network"},{"level":3,"title":"Network Protocols","slug":"network-protocols"},{"level":3,"title":"Web Socket","slug":"web-socket"},{"level":3,"title":"WebRTC","slug":"webrtc"},{"level":3,"title":"Web P2P","slug":"web-p2p"},{"level":3,"title":"Pre-Fetch","slug":"pre-fetch"},{"level":3,"title":"Lazy Loading","slug":"lazy-loading"},{"level":3,"title":"Network Benchmark","slug":"network-benchmark"},{"level":3,"title":"Network Debugging","slug":"network-debugging"},{"level":2,"title":"Server","slug":"server"},{"level":3,"title":"Serverless","slug":"serverless"},{"level":2,"title":"Encryption","slug":"encryption"},{"level":2,"title":"Debug Testing","slug":"debug-testing"},{"level":3,"title":"Unit Testing","slug":"unit-testing"},{"level":3,"title":"Feature Testing","slug":"feature-testing"},{"level":3,"title":"End to End Testing","slug":"end-to-end-testing"},{"level":3,"title":"Headless Automation Tools","slug":"headless-automation-tools"},{"level":3,"title":"Code Analysis Tools","slug":"code-analysis-tools"},{"level":3,"title":"Code Coverage Tools","slug":"code-coverage-tools"},{"level":3,"title":"Code Quality Tools","slug":"code-quality-tools"},{"level":3,"title":"Inspect Tools","slug":"inspect-tools"},{"level":3,"title":"Monitoring Tools","slug":"monitoring-tools"},{"level":3,"title":"Performance Tools","slug":"performance-tools"},{"level":3,"title":"Log Tools","slug":"log-tools"},{"level":3,"title":"Mock Tools","slug":"mock-tools"},{"level":3,"title":"Security Tools","slug":"security-tools"},{"level":3,"title":"UML Tools","slug":"uml-tools"},{"level":2,"title":"DevOps Tools","slug":"devops-tools"},{"level":3,"title":"DevOps Project Tools","slug":"devops-project-tools"},{"level":3,"title":"DepOps Automation CI and CD Tools","slug":"depops-automation-ci-and-cd-tools"},{"level":3,"title":"DevOps Config Tools","slug":"devops-config-tools"},{"level":2,"title":"Documentation","slug":"documentation"},{"level":3,"title":"Changelog","slug":"changelog"},{"level":3,"title":"Markdown Documentation","slug":"markdown-documentation"},{"level":3,"title":"JavaScript Documentation","slug":"javascript-documentation"},{"level":3,"title":"React Documentation","slug":"react-documentation"},{"level":3,"title":"API Documentation","slug":"api-documentation"}],"relativePath":"web/frameworks/libraryBasicNotes.md","lastUpdated":1628058278000}',l={},o=a(' Library Basic Notes
Boilerplate UI Framework Framework and Solution Front-end Solution Micro Front-ends Solution Back-end Solution Full Stack Solution Desktop Solution Mobile Solution State Data Management React Redux React Query React Recoil React Hooks Others State Management Browser Utils JavaScript Utils String Utils Concurrent and Parallel Programming Utils Hash Utils Functional Programming Utils TypeScript Utils IOC and DI Utils CSS Utils Ordinary CSS Utils CSS in JS Utils Color Utils Gradients Utils Gradients Collection Gradients Editor Box Shadows Utils Background Utils Components Layout Navigation Landing Page Card Modal Message Page Indicator Prompt Message Alert Message Guide Message Focus Select Validator List List Virtualized Windowing Table Charts Slides iFrame Viewport Utils Mouse Utils Social Utils Social Sharing Social Forum Animation Typing Effect Animation Loading Effect Animation Progress Bar Skeleton Spinner Hover Effect Animation Time Utils Date Utils Calendar Utils Internationalization Utils Fonts Images Image Color Icons Emoji SVG Image Size Slide Images Image Gallery Image Filter Image Editor Canvas Particles Blocks 3D Engine Audio Video Clipboard Keyboard Editor Rich Text Editor Code Editor SMS Phone Email Geolocation File File Uploader File Downloader File Utils PDF Persistent Storage Search CLI CLI Compiler CLI Solution CLI Utils CLI Output Utils CLI Cheat Sheet Terminal Compiler Parser Daemon Network Network Protocols Web Socket WebRTC Web P2P Pre-Fetch Lazy Loading Network Benchmark Network Debugging Server Serverless Encryption Debug Testing Unit Testing Feature Testing End to End Testing Mock Servers Mock APIs Mock Utils Documentation Changelog Markdown Documentation JavaScript Documentation React Documentation API Documentation ',310);l.render=function(a,t,l,i,n,h){return e(),r("div",null,[o])};export default l;export{t as __pageData};
diff --git a/assets/web_frameworks_libraryBasicNotes.md.d3a69904.lean.js b/assets/web_frameworks_libraryBasicNotes.md.d3a69904.lean.js
new file mode 100644
index 00000000000..a66a3695e69
--- /dev/null
+++ b/assets/web_frameworks_libraryBasicNotes.md.d3a69904.lean.js
@@ -0,0 +1 @@
+import{o as e,c as r,a}from"./app.6dd2a1b7.js";const t='{"title":"Library Basic Notes","description":"","frontmatter":{},"headers":[{"level":2,"title":"Indexing Tools","slug":"indexing-tools"},{"level":2,"title":"Boilerplate","slug":"boilerplate"},{"level":2,"title":"UI Framework","slug":"ui-framework"},{"level":2,"title":"Framework and Solution","slug":"framework-and-solution"},{"level":3,"title":"Front-end Solution","slug":"front-end-solution"},{"level":3,"title":"Micro Front-ends Solution","slug":"micro-front-ends-solution"},{"level":3,"title":"Back-end Solution","slug":"back-end-solution"},{"level":3,"title":"Full Stack Solution","slug":"full-stack-solution"},{"level":3,"title":"Desktop Solution","slug":"desktop-solution"},{"level":3,"title":"Mobile Solution","slug":"mobile-solution"},{"level":2,"title":"State Data Management","slug":"state-data-management"},{"level":3,"title":"React Redux","slug":"react-redux"},{"level":3,"title":"React Query","slug":"react-query"},{"level":3,"title":"React Recoil","slug":"react-recoil"},{"level":3,"title":"React Hooks","slug":"react-hooks"},{"level":3,"title":"Others State Management","slug":"others-state-management"},{"level":2,"title":"Browser Utils","slug":"browser-utils"},{"level":2,"title":"JavaScript Utils","slug":"javascript-utils"},{"level":3,"title":"String Utils","slug":"string-utils"},{"level":3,"title":"Concurrent and Parallel Programming Utils","slug":"concurrent-and-parallel-programming-utils"},{"level":3,"title":"Hash Utils","slug":"hash-utils"},{"level":3,"title":"Functional Programming Utils","slug":"functional-programming-utils"},{"level":3,"title":"TypeScript Utils","slug":"typescript-utils"},{"level":2,"title":"CSS Utils","slug":"css-utils"},{"level":3,"title":"Ordinary CSS Utils","slug":"ordinary-css-utils"},{"level":3,"title":"CSS in JS Utils","slug":"css-in-js-utils"},{"level":3,"title":"CSS Design Tools","slug":"css-design-tools"},{"level":3,"title":"Color Utils","slug":"color-utils"},{"level":3,"title":"Gradients Utils","slug":"gradients-utils"},{"level":3,"title":"Box Shadows Utils","slug":"box-shadows-utils"},{"level":3,"title":"Background Utils","slug":"background-utils"},{"level":2,"title":"Components","slug":"components"},{"level":3,"title":"Layout","slug":"layout"},{"level":3,"title":"Navigation","slug":"navigation"},{"level":3,"title":"Landing Page","slug":"landing-page"},{"level":3,"title":"Button","slug":"button"},{"level":3,"title":"Card","slug":"card"},{"level":3,"title":"Chat Widgets","slug":"chat-widgets"},{"level":3,"title":"Comments System","slug":"comments-system"},{"level":3,"title":"Modal","slug":"modal"},{"level":3,"title":"Message","slug":"message"},{"level":3,"title":"Guide Message","slug":"guide-message"},{"level":3,"title":"Form","slug":"form"},{"level":3,"title":"List","slug":"list"},{"level":3,"title":"Table","slug":"table"},{"level":3,"title":"Charts","slug":"charts"},{"level":3,"title":"Slides","slug":"slides"},{"level":3,"title":"iFrame","slug":"iframe"},{"level":2,"title":"Viewport Utils","slug":"viewport-utils"},{"level":3,"title":"Scroll Utils","slug":"scroll-utils"},{"level":3,"title":"Mouse Utils","slug":"mouse-utils"},{"level":2,"title":"Social Utils","slug":"social-utils"},{"level":3,"title":"Social Sharing","slug":"social-sharing"},{"level":3,"title":"Social Forum","slug":"social-forum"},{"level":2,"title":"Animation","slug":"animation"},{"level":3,"title":"Typing Effect Animation","slug":"typing-effect-animation"},{"level":3,"title":"Loading Effect Animation","slug":"loading-effect-animation"},{"level":3,"title":"Hover Effect Animation","slug":"hover-effect-animation"},{"level":2,"title":"Time Utils","slug":"time-utils"},{"level":3,"title":"Date Utils","slug":"date-utils"},{"level":3,"title":"Calendar Utils","slug":"calendar-utils"},{"level":2,"title":"Internationalization Utils","slug":"internationalization-utils"},{"level":2,"title":"Accessibility Tools","slug":"accessibility-tools"},{"level":2,"title":"Fonts","slug":"fonts"},{"level":2,"title":"Images","slug":"images"},{"level":3,"title":"Image Color","slug":"image-color"},{"level":3,"title":"Icons","slug":"icons"},{"level":3,"title":"Emoji","slug":"emoji"},{"level":3,"title":"SVG","slug":"svg"},{"level":3,"title":"Image Size","slug":"image-size"},{"level":3,"title":"Slide Images","slug":"slide-images"},{"level":3,"title":"Image Gallery","slug":"image-gallery"},{"level":3,"title":"Image Filter","slug":"image-filter"},{"level":3,"title":"Image Editor","slug":"image-editor"},{"level":2,"title":"Canvas","slug":"canvas"},{"level":3,"title":"Particles","slug":"particles"},{"level":3,"title":"Blocks","slug":"blocks"},{"level":3,"title":"3D Engine","slug":"_3d-engine"},{"level":2,"title":"Media","slug":"media"},{"level":3,"title":"Audio","slug":"audio"},{"level":3,"title":"Video","slug":"video"},{"level":2,"title":"Clipboard","slug":"clipboard"},{"level":2,"title":"Keyboard","slug":"keyboard"},{"level":2,"title":"Editor","slug":"editor"},{"level":3,"title":"Rich Text Editor","slug":"rich-text-editor"},{"level":3,"title":"Code Editor","slug":"code-editor"},{"level":2,"title":"SMS","slug":"sms"},{"level":3,"title":"Phone","slug":"phone"},{"level":3,"title":"Email","slug":"email"},{"level":2,"title":"Geolocation","slug":"geolocation"},{"level":2,"title":"File","slug":"file"},{"level":3,"title":"File Uploader","slug":"file-uploader"},{"level":3,"title":"File Downloader","slug":"file-downloader"},{"level":3,"title":"File Utils","slug":"file-utils"},{"level":3,"title":"PDF","slug":"pdf"},{"level":2,"title":"Persistent Storage","slug":"persistent-storage"},{"level":2,"title":"Search","slug":"search"},{"level":2,"title":"CLI","slug":"cli"},{"level":3,"title":"CLI Compiler","slug":"cli-compiler"},{"level":3,"title":"CLI Solution","slug":"cli-solution"},{"level":3,"title":"CLI Utils","slug":"cli-utils"},{"level":3,"title":"CLI Cheat Sheet","slug":"cli-cheat-sheet"},{"level":3,"title":"Terminal","slug":"terminal"},{"level":2,"title":"Compiler","slug":"compiler"},{"level":3,"title":"Parser","slug":"parser"},{"level":2,"title":"Daemon","slug":"daemon"},{"level":2,"title":"Network","slug":"network"},{"level":3,"title":"Network Protocols","slug":"network-protocols"},{"level":3,"title":"Web Socket","slug":"web-socket"},{"level":3,"title":"WebRTC","slug":"webrtc"},{"level":3,"title":"Web P2P","slug":"web-p2p"},{"level":3,"title":"Pre-Fetch","slug":"pre-fetch"},{"level":3,"title":"Lazy Loading","slug":"lazy-loading"},{"level":3,"title":"Network Benchmark","slug":"network-benchmark"},{"level":3,"title":"Network Debugging","slug":"network-debugging"},{"level":2,"title":"Server","slug":"server"},{"level":3,"title":"Serverless","slug":"serverless"},{"level":2,"title":"Encryption","slug":"encryption"},{"level":2,"title":"Debug Testing","slug":"debug-testing"},{"level":3,"title":"Unit Testing","slug":"unit-testing"},{"level":3,"title":"Feature Testing","slug":"feature-testing"},{"level":3,"title":"End to End Testing","slug":"end-to-end-testing"},{"level":3,"title":"Headless Automation Tools","slug":"headless-automation-tools"},{"level":3,"title":"Code Analysis Tools","slug":"code-analysis-tools"},{"level":3,"title":"Code Coverage Tools","slug":"code-coverage-tools"},{"level":3,"title":"Code Quality Tools","slug":"code-quality-tools"},{"level":3,"title":"Inspect Tools","slug":"inspect-tools"},{"level":3,"title":"Monitoring Tools","slug":"monitoring-tools"},{"level":3,"title":"Performance Tools","slug":"performance-tools"},{"level":3,"title":"Log Tools","slug":"log-tools"},{"level":3,"title":"Mock Tools","slug":"mock-tools"},{"level":3,"title":"Security Tools","slug":"security-tools"},{"level":3,"title":"UML Tools","slug":"uml-tools"},{"level":2,"title":"DevOps Tools","slug":"devops-tools"},{"level":3,"title":"DevOps Project Tools","slug":"devops-project-tools"},{"level":3,"title":"DepOps Automation CI and CD Tools","slug":"depops-automation-ci-and-cd-tools"},{"level":3,"title":"DevOps Config Tools","slug":"devops-config-tools"},{"level":2,"title":"Documentation","slug":"documentation"},{"level":3,"title":"Changelog","slug":"changelog"},{"level":3,"title":"Markdown Documentation","slug":"markdown-documentation"},{"level":3,"title":"JavaScript Documentation","slug":"javascript-documentation"},{"level":3,"title":"React Documentation","slug":"react-documentation"},{"level":3,"title":"API Documentation","slug":"api-documentation"}],"relativePath":"web/frameworks/libraryBasicNotes.md","lastUpdated":1628058278000}',l={},o=a('',310);l.render=function(a,t,l,i,n,h){return e(),r("div",null,[o])};export default l;export{t as __pageData};
diff --git a/assets/web_html_htmlBasicNotes.md.ec2fc2b7.js b/assets/web_html_htmlBasicNotes.md.ec2fc2b7.js
new file mode 100644
index 00000000000..5ed799afc4b
--- /dev/null
+++ b/assets/web_html_htmlBasicNotes.md.ec2fc2b7.js
@@ -0,0 +1 @@
+import{o as a,c as n,a as s}from"./app.6dd2a1b7.js";const t='{"title":"HTML Basic Notes","description":"","frontmatter":{},"headers":[{"level":2,"title":"Emmet","slug":"emmet"},{"level":3,"title":"嵌套操作","slug":"嵌套操作"},{"level":3,"title":"属性操作","slug":"属性操作"},{"level":3,"title":"字符操作","slug":"字符操作"},{"level":3,"title":"缺省元素","slug":"缺省元素"},{"level":2,"title":"Structure","slug":"structure"},{"level":3,"title":"section","slug":"section"},{"level":3,"title":"Header","slug":"header"},{"level":3,"title":"Footer","slug":"footer"},{"level":3,"title":"hgroup","slug":"hgroup"},{"level":3,"title":"nav","slug":"nav"},{"level":3,"title":"main","slug":"main"},{"level":3,"title":"address","slug":"address"},{"level":3,"title":"aside","slug":"aside"},{"level":3,"title":"blockquote","slug":"blockquote"},{"level":3,"title":"pre","slug":"pre"},{"level":2,"title":"Head Tag","slug":"head-tag"},{"level":3,"title":"Favicon","slug":"favicon"},{"level":3,"title":"Theme Color","slug":"theme-color"},{"level":2,"title":"Form","slug":"form"},{"level":3,"title":"validate","slug":"validate"},{"level":3,"title":"novalidate","slug":"novalidate"},{"level":3,"title":"表单元素共有属性","slug":"表单元素共有属性"},{"level":3,"title":"Form Labels","slug":"form-labels"},{"level":3,"title":"Form input","slug":"form-input"},{"level":3,"title":"output","slug":"output"},{"level":3,"title":"textarea","slug":"textarea"},{"level":3,"title":"menu","slug":"menu"},{"level":3,"title":"dialog","slug":"dialog"},{"level":3,"title":"datalist","slug":"datalist"},{"level":3,"title":"Form Demo","slug":"form-demo"},{"level":2,"title":"Content","slug":"content"},{"level":3,"title":"Details","slug":"details"},{"level":3,"title":"Description List","slug":"description-list"},{"level":3,"title":"Summary","slug":"summary"},{"level":3,"title":"Table","slug":"table"},{"level":3,"title":"Mark","slug":"mark"},{"level":3,"title":"Ins","slug":"ins"},{"level":3,"title":"Del","slug":"del"},{"level":3,"title":"U","slug":"u"},{"level":3,"title":"Em","slug":"em"},{"level":3,"title":"Strong","slug":"strong"},{"level":3,"title":"Small","slug":"small"},{"level":3,"title":"Hr","slug":"hr"},{"level":3,"title":"Progress","slug":"progress"},{"level":3,"title":"Meter","slug":"meter"},{"level":3,"title":"Wbr","slug":"wbr"},{"level":2,"title":"Media","slug":"media"},{"level":3,"title":"Figure","slug":"figure"},{"level":3,"title":"Figcaption","slug":"figcaption"},{"level":3,"title":"Image","slug":"image"},{"level":3,"title":"Picture","slug":"picture"},{"level":3,"title":"Anchor","slug":"anchor"},{"level":3,"title":"embed","slug":"embed"},{"level":3,"title":"command","slug":"command"},{"level":2,"title":"Information","slug":"information"},{"level":3,"title":"time","slug":"time"},{"level":2,"title":"Attributes","slug":"attributes"},{"level":3,"title":"dataset","slug":"dataset"},{"level":3,"title":"Global Attributes","slug":"global-attributes"},{"level":2,"title":"Nginx Config","slug":"nginx-config"},{"level":2,"title":"Accessibility","slug":"accessibility"},{"level":3,"title":"Semantic HTML","slug":"semantic-html"},{"level":3,"title":"Structure Accessibility","slug":"structure-accessibility"},{"level":3,"title":"Heading Accessibility","slug":"heading-accessibility"},{"level":3,"title":"Navigation Accessibility","slug":"navigation-accessibility"},{"level":3,"title":"Section Accessibility","slug":"section-accessibility"},{"level":3,"title":"Article Accessibility","slug":"article-accessibility"},{"level":3,"title":"Reference Accessibility","slug":"reference-accessibility"},{"level":3,"title":"Link Accessibility","slug":"link-accessibility"},{"level":3,"title":"Text Accessibility","slug":"text-accessibility"},{"level":3,"title":"Button Accessibility","slug":"button-accessibility"},{"level":3,"title":"Image Accessibility","slug":"image-accessibility"},{"level":3,"title":"SVG Accessibility","slug":"svg-accessibility"},{"level":3,"title":"Figure Accessibility","slug":"figure-accessibility"},{"level":3,"title":"Audio Source Accessibility","slug":"audio-source-accessibility"},{"level":3,"title":"Form Accessibility","slug":"form-accessibility"},{"level":3,"title":"Time Accessibility","slug":"time-accessibility"},{"level":3,"title":"Address Accessibility","slug":"address-accessibility"},{"level":3,"title":"Color Contrast","slug":"color-contrast"},{"level":3,"title":"Keys and Tabindex Accessibility","slug":"keys-and-tabindex-accessibility"},{"level":3,"title":"ARIA","slug":"aria"},{"level":3,"title":"Best Practice Tips for Accessibility","slug":"best-practice-tips-for-accessibility"},{"level":3,"title":"Accessibility Checklist","slug":"accessibility-checklist"},{"level":3,"title":"Accessibility Tools","slug":"accessibility-tools"}],"relativePath":"web/html/htmlBasicNotes.md","lastUpdated":1628059176000}',p={},e=s(' HTML Basic Notes
Emmet 嵌套操作 孩子 : >
div>ul>li\n< div> \n < ul> \n < li> </ li> \n </ ul> \n</ div> \n
1 2 3 4 5 6
兄弟 : +
div+ul>li\n< div> </ div> \n< ul> \n < li> </ li> \n</ ul> \n
1 2 3 4 5
上级:^
ul>li^div\n< ul> \n < li> </ li> \n</ ul> \n< div> </ div> \n\nul>li>a^^div\n< ul> \n < li> < a href = " " > </ a> </ li> \n</ ul> \n< div> </ div> \n
1 2 3 4 5 6 7 8 9 10 11
重复:*
ul>li*3\n< ul> \n < li> </ li> \n < li> </ li> \n < li> </ li> \n</ ul> \n
1 2 3 4 5 6
分组:()
div>(p>span)*2\n< div> \n < p> < span> </ span> </ p> \n < p> < span> </ span> </ p> \n</ div> \n
1 2 3 4 5
属性操作 id:# class:.
div#header+div.main+div#footer\n< div id = " header" > </ div> \n< div class = " main" > </ div> \n< div id = " footer" > </ div> \n
1 2 3 4
属性值:[]
a[title=test target=_self] < a title = " test" target = " _self" href = " " > </ a> \n
1
数列值:$
p.item$*3\n< p class = " item1" > </ p> \n< p class = " item2" > </ p> \n< p class = " item3" > </ p> \n\np.item$$*3\n< p class = " item01" > </ p> \n< p class = " item02" > </ p> \n< p class = " item03" > </ p> \n
1 2 3 4 5 6 7 8 9
数列操作符:@
p.item$@-*3 @- = -1\n< p class = " item3" > </ p> \n< p class = " item2" > </ p> \n< p class = " item1" > </ p> \n\np.item$@3*3 @3 = 从3开始3次\n< p class = " item3" > </ p> \n< p class = " item4" > </ p> \n< p class = " item5" > </ p> \n\np.item$@-3*3 @-3 = 3次后到3结束\n< p class = " item5" > </ p> \n< p class = " item4" > </ p> \n< p class = " item3" > </ p> \n
1 2 3 4 5 6 7 8 9 10 11 12 13 14
字符操作 字符操作:{}
a{click}\n< a href = " " > click</ a> \n\na>{click}+span{me}\n< a href = " " > click< span> me</ span> </ a> \n
1 2 3 4 5
缺省元素 .header+.footer = div.header+div.footer ul>.item*3 = ul>li.item*3\ntable>.row*4>.cell*3 = table>tr.row*4>td.cell*3\n
1 2
Structure section 必须含有hx 标题子标签
Not only can the page <body>
contain a header, but also can every <article>
and <section>
element.
Not only can the page <body>
contain a footer, but also can every <article>
and <section>
element.
hgroup nav main 每个网页只有 1 个main
元素 main
不可为article
、aside
、header
、footer
、nav
孩子 address 联系信息 - QQ、住址、电子邮箱、主页链接
aside 名词解释的附属部分/友情链接/广告
blockquote 长文本引用
pre 代码段
Head Tag Meta
data list in HEAD .
Favicon < head> \n < link rel = " shortcut icon" type = " image/x-icon" href = " favicon.ico" /> \n</ head> \n
1 2 3
Theme Color < meta \n name = " theme-color" \n content = " #319197" \n media = " (prefers-color-scheme: light)" \n/> \n< meta \n name = " theme-color" \n content = " #872e4e" \n media = " (prefers-color-scheme: dark)" \n/> \n
1 2 3 4 5 6 7 8 9 10
< form action = " 表单提交的后台地址接口" method = " post" 提交方式,一般为post > \n < fieldset 若内容比较多,用来分区 > \n < legend> 这是分区的标题</ legend> \n < label for = " file" > 选择照片按钮</ label> \n < input type = " file" id = " file" /> \n </ fieldset> \n\n < fieldset> \n < legend> 这是分区的标题</ legend> \n < div> 选择尺寸:</ div> \n < input \n type = " checkbox" \n 多选框 \n name = " size" \n 数据名称,交给后台 \n value = " 5" \n 值 \n id = " cb_0" \n checked \n disabled \n 默认勾选,无法更改 \n /> \n < label for = " cb_0" > 5寸</ label> \n \n < input type = " radio" 单选框 name = " material" value = " fs" id = " rd_0" /> \n < label for = " rd_0" > 富士,单选第一个</ label> \n\n < input \n type = " text" \n 单行文本框,默认 \n id = " description" \n placeholder = " 里面是提示" \n value = " 这里是默认内容" \n readonly只读 \n hidden隐藏 \n /> \n < input type = " submit" 提交按钮 /> == < button type = " submit" > 提交</ button> \n < input type = " reset" 重置按钮 /> == < button type = " reset" > 重置</ button> \n\n < div> \n < label for = " delivery" 功能提示信息,通过for与标签对应 > 配送方式</ label> \n < select id = " delivery" 下拉选择 > \n < optgroup label = " group1" 给选项分组 > \n < option value = " 0" > 快递</ option> \n < option value = " 1" > EMS</ option> \n </ optgroup> \n < option value = " 2" selected > 平邮</ option> \n </ select> \n </ div> \n\n < div> \n < label for = " feedback" > 意见反馈,多行文本框</ label> \n < textarea name = " feedback" rows = " 4" 4行 id = " feedback" > </ textarea> \n </ div> \n </ fieldset> \n</ form> \n\n< input type = " email" /> \n< input type = " url" /> \n< input type = " number" /> \n< input type = " tel" /> \n< input type = " search" /> \n< input type = " range" /> \n< input type = " color" /> \n< input type = " date picker(data,month,week,time,datetime,datetime-local)" /> \n
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65
validate novalidate 关闭表单的提交验证
表单元素共有属性 form=form_name
: 使表单元素可放置于表单之外
formaction=target_name
: 使表单元素可提交到不同页面
formmethod=post/get
: 使表单元素以不同的方式提交
默认值:application/x-www-form-urlencoded 提交前编码所有字符 multipart/form-data 不编码字符,上传控件表单元素 必须使用改值 text/plain 表单元素数据中的空格->+
定义表单提交后加载页面打开方式
blank 在新窗口中打开被链接文档 self 默认:在相同的框架中打开被链接文档 parent 在父框架集中打开被链接文档 top 在整个窗口中打开被链接文档 frameName 在指定的框架中打开被链接文档 取消表单元素的提交验证
将 submit 元素的 formnovalidate 属性值为 true,使整个表单提交验证失效,实现加提交; 进而弹出再次确认按钮(真提交)。
AutoFocus Required 指定表单元素的标签
< label for = " input_id" > OS : </ label> \n
1
隐式 Control 属性 javascript tips:通过 control 属性改变标签对应表单元素的值
var textbox = $ ( '#label_id' ) . control; \ntextbox. value = '666666' ; \n
1 2
Form Input Text name 相同时, 多个 radio 组成一个 radio group
Checkbox Search 搜索条
电话号码 - 无输入检查
date/month/week/time/datetime-local:
stepUp ( ) ; \nstepDown ( ) ; \n
1 2
input.valueAsNumber input.valueAsDate\n
1
< label for = " myBrowser" > Choose a browser from this list:</ label> \n< input list = " browsers" id = " myBrowser" name = " myBrowser" /> \n< datalist id = " browsers" > \n < option value = " Chrome" > </ option> \n < option value = " Firefox" > </ option> \n < option value = " Internet Explorer" > </ option> \n < option value = " Opera" > </ option> \n < option value = " Safari" > </ option> \n < option value = " Microsoft Edge" > </ option> \n</ datalist> \n
1 2 3 4 5 6 7 8 9 10
indeterminate javascript tips:检查 type=checkbox 的状态
if ( checkbox. indeterminate) { \n} else { \n if ( checkbox. checked) { \n } else { \n } \n} \n
1 2 3 4 5 6
list
&& autocomplete
为输入框指定智能提示数据
< input list = " datalist_id" autocomplete = " on" /> \n
1
pattern 通过正则表达式指定输入格式
< input pattern = " [0-9][A-Z]{3}" /> \n
1
validity 返回 ValidityState 对象,拥有 ValidityState.valid 属性
output input 元素的镜像元素
textarea maxlength cols 每行可显示字符最大数
wrap hard:换行时加入换行标志,此时必须指定 cols
属性 soft:不加入换行标志 dialog datalist style="display: none";\n\n< datalist id = " register-prompt" style = " display : none; " > \n < option value = " Windows" > Windows</ option> \n < option value = " Mac OS" > Mac OS</ option> \n < option value = " Linux" > Linux</ option> \n</ datalist> \n
1 2 3 4 5 6 7
<! DOCTYPE html > \n< html> \n < head> \n < meta charset = " utf-8" /> \n < meta name = " viewport" content = " width=device-width, initial-scale=1.0" /> \n < title> Sign Up Form</ title> \n < link rel = " stylesheet" href = " css/normalize.css" /> \n < link \n href = " https://fonts.googleapis.com/css?family=Lato:300,400,700" \n rel = " stylesheet" \n /> \n < link rel = " stylesheet" href = " css/main.css" /> \n </ head> \n < body> \n < form action = " index.html" method = " post" > \n < h2> Your basic info</ h2> \n\n < label for = " name" > Name</ label> \n < input type = " text" id = " name" name = " student_name" /> \n\n < label for = " mail" > Email</ label> \n < input type = " email" id = " mail" name = " student_email" /> \n\n < label for = " password" > Password</ label> \n < input type = " password" id = " password" name = " student_password" /> \n\n < label> Age:</ label> \n < input \n type = " radio" \n id = " under_16" \n value = " under_16" \n name = " user_age" \n /> < label for = " under_16" class = " light" > Under 16</ label> < br /> \n < input type = " radio" id = " over_16" value = " over_16" name = " user_age" /> < label \n for = " over_16" \n class = " light" \n > 16 or Older</ label \n > \n\n < h2> Your profile</ h2> \n\n < label for = " bio" > Biography</ label> \n < textarea id = " bio" name = " student_bio" > </ textarea> \n\n < label for = " courses" > Select Courses</ label> \n < select id = " courses" name = " student_courses" > \n < optgroup label = " Engineering" > \n < option value = " computer_engineering" > \n Computer Science Engineering\n </ option> \n < option value = " electrical_engineering" > Electrical Engineering</ option> \n < option value = " mechanical_engineering" > Mechanical Engineering</ option> \n < option value = " civil_engineering" > Civil Engineering</ option> \n < option value = " chemical_engineering" > Chemical Engineering</ option> \n </ optgroup> \n < optgroup label = " Management" > \n < option value = " finance_management" > Finance Management</ option> \n < option value = " technology_management" > Technology Management</ option> \n < option value = " marketing_management" > Marketing Management</ option> \n < option value = " business_administration" > \n Business Administration\n </ option> \n </ optgroup> \n </ select> \n\n < label> Interests:</ label> \n < input \n type = " checkbox" \n id = " engineering" \n value = " interest_engineering" \n name = " user_interest" \n /> < label class = " light" for = " engineering" > Engineering</ label> < br /> \n < input \n type = " checkbox" \n id = " business" \n value = " interest_business" \n name = " user_interest" \n /> < label class = " light" for = " business" > Business</ label> < br /> \n < input \n type = " checkbox" \n id = " law" \n value = " interest_law" \n name = " user_interest" \n /> < label class = " light" for = " law" > Law</ label> \n\n < button type = " submit" > Submit</ button> \n </ form> \n </ body> \n</ html> \n
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89
Content Details Details Summary < details> \n < summary> Details</ summary> \n Something small enough to escape casual notice.\n</ details> \n
1 2 3 4
Data Grid 配合 AutoComplete 属性 Open 默认 open=false
Description List <dl>
: description list.<dt>
: description Term.<dd>
: description details.< h1> Review your data</ h1> \n< p> Please review the data you entered in the previous step to ensure it is correct:</ p> \n< dl> \n < dt> First name</ dt> \n < dd> Marc</ dd> \n\n < dt> Last name</ dt> \n < dd> Simmons</ dd> \n\n < dt> Date of Birth</ dt> \n < dd> < time datetime = " 1990-05-15" > May 15 1990</ time> </ dd> \n\n</ dl> \n
1 2 3 4 5 6 7 8 9 10 11 12 13
Summary 折叠/收缩时触发 toggle 事件
Table < table> \n < thead> \n < tr> \n < th scope = " col" > Col Header 1</ th> \n < th scope = " col" > Col Header 2</ th> \n < th scope = " col" > Col Header 3</ th> \n </ tr> \n </ thead> \n < tbody> \n < tr> \n < th scope = " row" > Row Header 1</ th> \n < td> Row 1 Col 2</ td> \n < td> Row 1 Col 3</ td> \n </ tr> \n < tr> \n < th scope = " row" > Row Header 2</ th> \n < td> Row 2 Col 2</ td> \n < td> Row 2 Col 3</ td> \n </ tr> \n </ tbody> \n < tfoot> \n < tr> \n < th scope = " row" > Summary</ th> \n < td> Col 2 summary</ td> \n < td> Col 3 summary</ td> \n </ tr> \n </ tfoot> \n</ table> \n
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
Mark 突出/高亮显示,无关原文作者
Ins Insert text
Del Delete text
U underline text
Em 文章重点
Strong 段落强调
Small 免责声明、注意事项、法律规定、版权声明 不改变文字样式 Hr 下划线
Progress value/max 百分比
< label for = " file" > File progress:</ label> \n\n< progress id = " file" max = " 100" value = " 70" > 70%</ progress> \n
1 2 3
Meter Value Min Max Low High Optimum Wbr 软换行
流内容 如代码、文件、图片、音频、视频
Figcaption figure 可拥有唯一的 0/1 个 figcaption
<figcaption>figure_title</figcaption>
< figure> \n < img src = " /media/cc0-images/elephant-660-480.jpg" alt = " Elephant at sunset" /> \n < figcaption> An elephant at sunset</ figcaption> \n</ figure> \n
1 2 3 4
Image Attr -
Src Alt (图片崩溃时文本)、title(提示信息)、class(CSS 类选择器)
Responsive Images \n< img src = " foo" alt = " bar" /> \n\n\n< img \n srcset = " foo-320w.jpg 320w, foo-480w.jpg 480w, foo-800w.jpg 800w" \n sizes = " (max-width: 480px) 440px, 320px" \n src = " foo-320w.jpg" \n alt = " bar" \n/> \n
1 2 3 4 5 6 7 8 9 10
Picture Multiple <source>
and only one <img>
\n< picture> \n < source media = " (max-width: 799px)" srcset = " foo-480w.jpg" /> \n < source media = " (min-width: 800px)" srcset = " foo-800w.jpg" /> \n < img src = " foo-800w.jpg" alt = " bar" /> \n</ picture> \n
1 2 3 4 5 6
< picture> \n < source srcset = " 128px.jpg, 256px.jpg 2x, 512px.jpg 3x" /> \n < img src = " foo.jpg" alt = " bar" /> \n</ picture> \n
1 2 3 4
< picture> \n < source srcset = " foo.avif" type = " image/avif" /> \n < source srcset = " foo.webp" type = " image/webp" /> \n < img src = " foo.jpg" /> \n</ picture> \n
1 2 3 4 5
Anchor <a>
Anchor Href 超链接指向--超链接/#id/#name
Anchor ID or Name 当前锚点标识
Anchor Target 定义被链接文档出现方式
blank 在新窗口中打开被链接文档 self 默认:在相同的框架中打开被链接文档 parent 在父框架集中打开被链接文档 top 在整个窗口中打开被链接文档 framename 在指定的框架中打开被链接文档 embed 插入媒体流
command time Pub Date pubdate
: boolean 代表当前<time>
表示整个网页的时间
DateTime < time datetime = " 2010-11-13T20:00Z" > </ time> \n< time datetime = " 2010-11-13T20:00+09:00" > </ time> \n
1 2
T
分隔日期与时间Z
使用 UTC 标准时间+
时差 Attributes dataset < td data-row = " 1" data-column = " 1" > </ td> \n
1
const onChange = ( event ) => { \n const { \n currentTarget: { \n dataset: { row, column } , \n } , \n } = event; \n} ; \n
1 2 3 4 5 6 7
Global Attributes contentEditable -boolean
hidden boolean
spellcheck boolean
tabindex -1 : 编程可获得焦点,tab 键不可获得焦点
Nginx Config 子域名设置:
sudo mkdir -p /var/www/blog/html\nsudo chown -R $USER : $USER /var/www/blog/html\nsudo chmod -R 755 /var/www\nsudo cp /etc/nginx/sites-available/default /etc/nginx/sites-available/blog\n\nsudo vim /etc/nginx/sites-available/blog\nsudo ln -s /etc/nginx/sites-available/blog /etc/nginx/sites-enabled/\nsudo nginx -t\nsudo systemctl restart nginx\n
1 2 3 4 5 6 7 8 9
Accessibility Semantic HTML Structure Accessibility Semantics Section Reference <header>
: role="banner"
<nav>
: role="navigation"
<main>
: role="main"
<aside>
: role="complementary"
<section>
: role="region"
<article>
: role="article"
<footer>
: role="contentinfo"
< header> \n < nav> \n < ul> \n < li> < a> </ a> </ li> \n </ ul> \n </ nav> \n</ header> \n\n< main> \n < section> </ section> \n</ main> \n\n< footer> </ footer> \n
1 2 3 4 5 6 7 8 9 10 11 12 13
Heading Accessibility 7 heading levels: <div role="heading" aria-level="7"></div>
One <h1>
per page Navigation Accessibility Have a HTML sitemap. Support keyboard navigation (Key and Tab Index). Breadcrumbs a11y: aria-label="breadcrumbs"
aria-label="page"
< nav aria-label = " breadcrumbs" > \n < ol> \n < li> \n < a href = " https://example.com/" > Home </ a> \n </ li> \n < li> \n < a href = " https://example.com/products" > Products </ a> \n </ li> \n < li> \n < a href = " https://example.com/products/childrens-clothing" > \n Children's clothing\n </ a> \n </ li> \n < li> \n < a \n href = " https://example.com/products/childrens-clothing/shoes" \n aria-current = " page" \n > \n Shoes\n </ a> \n </ li> \n </ ol> \n</ nav> \n
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
Section Accessibility < section aria-labelledby = " sectionHeader1" > \n < h2 id = " sectionHeader1" > A great section</ h2> \n</ section> \n< section aria-labelledby = " sectionHeader2" > \n < h2 id = " sectionHeader2" > An even better section</ h2> \n</ section> \n
1 2 3 4 5 6
Article Accessibility The <article>
element is used to represent a fully self-contained region of content
< article> \n < header> \n < h1> Why you should buy more cheeses than you currently do</ h1> \n </ header> \n < section> \n < header> \n < h2> Part 1: Variety is spicy</ h2> \n </ header> \n \n </ section> \n < section> \n < header> \n < h2> Part 2: Cows are great</ h2> \n </ header> \n \n </ section> \n</ article> \n
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
Reference Accessibility <cite>
<q>
<blockquote>
<code>
< p> \n Every time Kenny is killed, Stan will announce\n < q cite = " http://en.wikipedia.org/wiki/Kenny_McCormick#Cultural_impact" > \n Oh my God, you/they killed Kenny! </ q \n > .\n</ p> \n
1 2 3 4 5 6
< blockquote cite = " https://www.huxley.net/bnw/four.html" > \n < p> \n Words can be like X-rays, if you use them properly – they'll go through\n anything. You read and you're pierced.\n </ p> \n</ blockquote> \n\n< cite> – Ados Huxley, Brave New World</ cite> \n
1 2 3 4 5 6 7 8
Link Accessibility < article> \n < h2 id = " article1-title" > My article</ h2> \n < p> Article brief description with truncation...</ p> \n < a href = " article1-url" aria-labelledby = " article1-title" > Read more</ a> \n</ article> \n
1 2 3 4 5
Text Accessibility <b>
<strong>
<mark>
<ins>
<del>
<abbr>
: 专有名词解释 <abbr title="HyperText Markup Language">HTML</abbr>
不要将 <b>
元素与 <strong>
、<em>
或 <mark>
元素混淆:
<strong>
元素表示某些重要性的文本<em>
强调文本<mark>
元素表示某些相关性的文本 Text Color A11Y Devtool inspect elements A11Y for color contrast ratio. Don't forget ::selection
. Text Spacing A11Y line-height
of blocks of text should be 1.5 .space between paragraphs should be 1.5 times the line-height
(so a minimum of 2.25 rem
). Line height (line spacing) to at least 1.5 times the font size. Spacing following paragraphs to at least 2 times the font size. Letter spacing (tracking) to at least 0.12 times the font size. Word spacing to at least 0.16 times the font size. Use <button>
for clickable elements
Image Accessibility SVG Accessibility < svg width = " 100" height = " 75" > \n < title> Dark rectangle</ title> \n < desc> A grey rectangle with rounded corners and a dark green border</ desc> \n < rect \n width = " 75" \n height = " 50" \n rx = " 20" \n ry = " 20" \n fill = " #666" \n stroke = " #229b23" \n stroke-fill = " 1" \n /> \n</ svg> \n
1 2 3 4 5 6 7 8 9 10 11 12 13
< figure> \n < img src = " " alt = " " /> \n < br /> \n < figcaption> </ figcaption> \n</ figure> \n
1 2 3 4 5
Audio Source Accessibility With fieldset
and legend
:
< form role = " form" > \n < fieldset> \n < legend> Choose one of these three items:</ legend> \n < input id = " one" type = " radio" name = " items" value = " one" /> \n < label for = " one" > Choice One</ label> < br /> \n < input id = " two" type = " radio" name = " items" value = " two" /> \n < label for = " two" > Choice Two</ label> < br /> \n < input id = " three" type = " radio" name = " items" value = " three" /> \n < label for = " three" > Choice Three</ label> \n </ fieldset> \n</ form> \n
1 2 3 4 5 6 7 8 9 10 11
label[for]
input.aria-describedby
and aria-invalid
for input error.< form role = " form" > \n < label for = " name" > Name:</ label> \n < input type = " text" id = " name" name = " name" /> \n</ form> \n
1 2 3 4
< form role = " form" > \n < label for = " email-address" > Your Email Address </ label> \n < span id = " email-error" > \n Error: Your email address must contain an @ symbol\n </ span> \n < input \n id = " email-address" \n type = " email" \n aria-describedby = " email-error" \n aria-invalid = " true" \n /> \n</ form> \n
1 2 3 4 5 6 7 8 9 10 11 12
Time Accessibility < time datetime = " 2016-09-15" > Thursday, September 15< sup> th</ sup> </ time> \n
1
Address Accessibility < footer> \n < section class = " contact" vocab = " http://schema.org/" typeof = " LocalBusiness" > \n < h2> Contact us!</ h2> \n < address property = " email" > \n < a href = " mailto:us@example.com" > us@example.com</ a> \n </ address> \n < address property = " address" typeof = " PostalAddress" > \n < p property = " streetAddress" > 123 Main St., Suite 404</ p> \n < p> \n < span property = " addressLocality" > Your Town</ span> ,\n < span property = " addressRegion" > AK</ span> ,\n < span property = " postalCode" > 12345</ span> \n </ p> \n < p property = " addressCountry" > United States of America</ p> \n </ address> \n </ section> \n</ footer> \n
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
Color Contrast Keys and Tabindex Accessibility < a id = " second" href = " " accesskey = " c" > </ a> \n
1
document. addEventListener ( 'keyup' , ( event ) => { \n switch ( event. keyCode) { \n \n case 27 : \n \n break ; \n \n case 13 || 32 : \n \n break ; \n \n case 37 : \n \n break ; \n \n case 39 : \n \n break ; \n \n case 38 : \n \n break ; \n \n case 40 : \n \n break ; \n } \n} \n
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
\nexport function trapTabKey ( e, context ) { \n if ( e. key !== 'Tab' ) return ; \n\n let focusableItems = getFocusable ( context) ; \n let focusedItem = document. activeElement; \n\n let focusedItemIndex = focusableItems. indexOf ( focusedItem) ; \n\n if ( e. shiftKey) { \n if ( focusedItemIndex == 0 ) { \n focusableItems[ focusableItems. length - 1 ] . focus ( ) ; \n e. preventDefault ( ) ; \n } \n } else { \n if ( focusedItemIndex == focusableItems. length - 1 ) { \n focusableItems[ 0 ] . focus ( ) ; \n e. preventDefault ( ) ; \n } \n } \n} \n
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
ARIA Web Accessibility Initiative - Accessible Rich Internet Applications :
aria-label
aria-labelledby="dropdownMenuButton"
: dropdown/formaria-disabled="true"
: disable elementaria-controls="navbarSupportedContent"
: navigation/selectaria-expanded="false"
: dropdownaria-haspopup="true"
: dropdown/popuparia-current="pages
: breadcrumbaria-valuenow
/aria-valuemin
/aria-valuemax
: progressaria-describedBy
: input + smallrole <header>
: role="banner"
<nav>
: role="navigation"
<main>
: role="main"
<aside>
: role="complementary"
<section>
: role="region"
<article>
: role="article"
<footer>
: role="contentinfo"
<form role="form">
7 heading levels: <div role="heading" aria-level="7"></div>
role="button"
role="checkbox"
role="gridcell"
role="link"
role="menuitem"
role="menuitemcheckbox"
role="menuitemradio"
role="option"
role="progressbar"
role="radio"
role="scrollbar"
role="searchbox"
role="separator (when focusable)"
role="slider"
role="spinbutton"
role="switch"
role="tab"
role="tabpanel"
role="textbox"
role="treeitem"
role="presentation"
role="application"
< button \n class = " list-expander" \n aria-expanded = " false" \n aria-controls = " expandable-list-1" \n> \n Expand List\n</ button> \n< ul id = " expandable-list-1" > \n < li> < a href = " http://example.com" > Sample Link</ a> </ li> \n < li> < a href = " http://example.com" > Sample Link 2</ a> </ li> \n < li> < a href = " http://example.com" > Sample Link 3</ a> </ li> \n</ ul> \n
1 2 3 4 5 6 7 8 9 10 11 12
const listExpander = document. querySelector ( '.list-expander' ) ; \nconst list = document. querySelector ( '#expandable-list-1' ) ; \n\nlistExpander. addEventListener ( 'click' , ( e ) => { \n if ( list. getAttribute ( 'aria-expanded' ) === 'true' ) { \n list. setAttribute ( 'aria-expanded' , 'false' ) ; \n } else { \n list. setAttribute ( 'aria-expanded' , 'true' ) ; \n } \n} ) ; \n
1 2 3 4 5 6 7 8 9 10
Best Practice Tips for Accessibility Accessibility Checklist ',298);p.render=function(s,t,p,o,l,c){return a(),n("div",null,[e])};export default p;export{t as __pageData};
diff --git a/assets/web_html_htmlBasicNotes.md.ec2fc2b7.lean.js b/assets/web_html_htmlBasicNotes.md.ec2fc2b7.lean.js
new file mode 100644
index 00000000000..d5eb57a81ac
--- /dev/null
+++ b/assets/web_html_htmlBasicNotes.md.ec2fc2b7.lean.js
@@ -0,0 +1 @@
+import{o as a,c as n,a as s}from"./app.6dd2a1b7.js";const t='{"title":"HTML Basic Notes","description":"","frontmatter":{},"headers":[{"level":2,"title":"Emmet","slug":"emmet"},{"level":3,"title":"嵌套操作","slug":"嵌套操作"},{"level":3,"title":"属性操作","slug":"属性操作"},{"level":3,"title":"字符操作","slug":"字符操作"},{"level":3,"title":"缺省元素","slug":"缺省元素"},{"level":2,"title":"Structure","slug":"structure"},{"level":3,"title":"section","slug":"section"},{"level":3,"title":"Header","slug":"header"},{"level":3,"title":"Footer","slug":"footer"},{"level":3,"title":"hgroup","slug":"hgroup"},{"level":3,"title":"nav","slug":"nav"},{"level":3,"title":"main","slug":"main"},{"level":3,"title":"address","slug":"address"},{"level":3,"title":"aside","slug":"aside"},{"level":3,"title":"blockquote","slug":"blockquote"},{"level":3,"title":"pre","slug":"pre"},{"level":2,"title":"Head Tag","slug":"head-tag"},{"level":3,"title":"Favicon","slug":"favicon"},{"level":3,"title":"Theme Color","slug":"theme-color"},{"level":2,"title":"Form","slug":"form"},{"level":3,"title":"validate","slug":"validate"},{"level":3,"title":"novalidate","slug":"novalidate"},{"level":3,"title":"表单元素共有属性","slug":"表单元素共有属性"},{"level":3,"title":"Form Labels","slug":"form-labels"},{"level":3,"title":"Form input","slug":"form-input"},{"level":3,"title":"output","slug":"output"},{"level":3,"title":"textarea","slug":"textarea"},{"level":3,"title":"menu","slug":"menu"},{"level":3,"title":"dialog","slug":"dialog"},{"level":3,"title":"datalist","slug":"datalist"},{"level":3,"title":"Form Demo","slug":"form-demo"},{"level":2,"title":"Content","slug":"content"},{"level":3,"title":"Details","slug":"details"},{"level":3,"title":"Description List","slug":"description-list"},{"level":3,"title":"Summary","slug":"summary"},{"level":3,"title":"Table","slug":"table"},{"level":3,"title":"Mark","slug":"mark"},{"level":3,"title":"Ins","slug":"ins"},{"level":3,"title":"Del","slug":"del"},{"level":3,"title":"U","slug":"u"},{"level":3,"title":"Em","slug":"em"},{"level":3,"title":"Strong","slug":"strong"},{"level":3,"title":"Small","slug":"small"},{"level":3,"title":"Hr","slug":"hr"},{"level":3,"title":"Progress","slug":"progress"},{"level":3,"title":"Meter","slug":"meter"},{"level":3,"title":"Wbr","slug":"wbr"},{"level":2,"title":"Media","slug":"media"},{"level":3,"title":"Figure","slug":"figure"},{"level":3,"title":"Figcaption","slug":"figcaption"},{"level":3,"title":"Image","slug":"image"},{"level":3,"title":"Picture","slug":"picture"},{"level":3,"title":"Anchor","slug":"anchor"},{"level":3,"title":"embed","slug":"embed"},{"level":3,"title":"command","slug":"command"},{"level":2,"title":"Information","slug":"information"},{"level":3,"title":"time","slug":"time"},{"level":2,"title":"Attributes","slug":"attributes"},{"level":3,"title":"dataset","slug":"dataset"},{"level":3,"title":"Global Attributes","slug":"global-attributes"},{"level":2,"title":"Nginx Config","slug":"nginx-config"},{"level":2,"title":"Accessibility","slug":"accessibility"},{"level":3,"title":"Semantic HTML","slug":"semantic-html"},{"level":3,"title":"Structure Accessibility","slug":"structure-accessibility"},{"level":3,"title":"Heading Accessibility","slug":"heading-accessibility"},{"level":3,"title":"Navigation Accessibility","slug":"navigation-accessibility"},{"level":3,"title":"Section Accessibility","slug":"section-accessibility"},{"level":3,"title":"Article Accessibility","slug":"article-accessibility"},{"level":3,"title":"Reference Accessibility","slug":"reference-accessibility"},{"level":3,"title":"Link Accessibility","slug":"link-accessibility"},{"level":3,"title":"Text Accessibility","slug":"text-accessibility"},{"level":3,"title":"Button Accessibility","slug":"button-accessibility"},{"level":3,"title":"Image Accessibility","slug":"image-accessibility"},{"level":3,"title":"SVG Accessibility","slug":"svg-accessibility"},{"level":3,"title":"Figure Accessibility","slug":"figure-accessibility"},{"level":3,"title":"Audio Source Accessibility","slug":"audio-source-accessibility"},{"level":3,"title":"Form Accessibility","slug":"form-accessibility"},{"level":3,"title":"Time Accessibility","slug":"time-accessibility"},{"level":3,"title":"Address Accessibility","slug":"address-accessibility"},{"level":3,"title":"Color Contrast","slug":"color-contrast"},{"level":3,"title":"Keys and Tabindex Accessibility","slug":"keys-and-tabindex-accessibility"},{"level":3,"title":"ARIA","slug":"aria"},{"level":3,"title":"Best Practice Tips for Accessibility","slug":"best-practice-tips-for-accessibility"},{"level":3,"title":"Accessibility Checklist","slug":"accessibility-checklist"},{"level":3,"title":"Accessibility Tools","slug":"accessibility-tools"}],"relativePath":"web/html/htmlBasicNotes.md","lastUpdated":1628059176000}',p={},e=s('',298);p.render=function(s,t,p,o,l,c){return a(),n("div",null,[e])};export default p;export{t as __pageData};
diff --git a/assets/web_javascript_javascriptAdvancedNotes.md.dbb1ab26.js b/assets/web_javascript_javascriptAdvancedNotes.md.dbb1ab26.js
new file mode 100644
index 00000000000..55740407d06
--- /dev/null
+++ b/assets/web_javascript_javascriptAdvancedNotes.md.dbb1ab26.js
@@ -0,0 +1 @@
+import{o as n,c as s,e as a,b as t,d as e}from"./app.6dd2a1b7.js";const o='{"title":"JavaScript Advanced Notes","description":"","frontmatter":{},"headers":[{"level":2,"title":"Modern JavaScript","slug":"modern-javascript"},{"level":3,"title":"TC39","slug":"tc39"},{"level":3,"title":"Variable","slug":"variable"},{"level":3,"title":"Destructuring Pattern Matching","slug":"destructuring-pattern-matching"},{"level":3,"title":"String","slug":"string"},{"level":3,"title":"Number","slug":"number"},{"level":3,"title":"Internationalization","slug":"internationalization"},{"level":3,"title":"Array","slug":"array"},{"level":3,"title":"New Object API","slug":"new-object-api"},{"level":3,"title":"Arrow Function","slug":"arrow-function"},{"level":3,"title":"Modules","slug":"modules"},{"level":3,"title":"Class 语法糖","slug":"class-语法糖"},{"level":3,"title":"Map","slug":"map"},{"level":3,"title":"WeakMap","slug":"weakmap"},{"level":3,"title":"Symbol","slug":"symbol"},{"level":3,"title":"Iterator","slug":"iterator"},{"level":3,"title":"Generator","slug":"generator"},{"level":3,"title":"Proxy and Reflect","slug":"proxy-and-reflect"},{"level":3,"title":"Asynchronous Programming","slug":"asynchronous-programming"},{"level":2,"title":"Functional JavaScript","slug":"functional-javascript"},{"level":3,"title":"Pros","slug":"pros"},{"level":3,"title":"Cons","slug":"cons"},{"level":3,"title":"Closure","slug":"closure"},{"level":3,"title":"Partial Application","slug":"partial-application"},{"level":3,"title":"Currying","slug":"currying"},{"level":2,"title":"Internal JavaScript","slug":"internal-javascript"},{"level":3,"title":"Variables Lifecycle","slug":"variables-lifecycle"},{"level":3,"title":"Execution Context","slug":"execution-context"},{"level":3,"title":"Event Loop","slug":"event-loop"},{"level":2,"title":"Browser Internal","slug":"browser-internal"},{"level":3,"title":"Browser Process","slug":"browser-process"},{"level":3,"title":"Render Engine","slug":"render-engine"},{"level":2,"title":"Effective JavaScript","slug":"effective-javascript"},{"level":3,"title":"Memory Leak","slug":"memory-leak"},{"level":3,"title":"禁用特性","slug":"禁用特性"},{"level":3,"title":"局部变量/函数参数","slug":"局部变量-函数参数"},{"level":3,"title":"字符串","slug":"字符串"},{"level":3,"title":"函数","slug":"函数"},{"level":3,"title":"循环","slug":"循环"},{"level":3,"title":"Exception","slug":"exception"},{"level":3,"title":"Event Delegation","slug":"event-delegation"},{"level":3,"title":"缓存模式","slug":"缓存模式"},{"level":3,"title":"加载脚本","slug":"加载脚本"},{"level":3,"title":"DOM Performance","slug":"dom-performance"},{"level":3,"title":"CSS","slug":"css"},{"level":3,"title":"定时器(防止脚本阻塞)","slug":"定时器-防止脚本阻塞"},{"level":3,"title":"计时器","slug":"计时器"},{"level":3,"title":"Web Worker","slug":"web-worker"},{"level":3,"title":"Ajax","slug":"ajax"},{"level":3,"title":"Reduce Repeat Manipulation","slug":"reduce-repeat-manipulation"},{"level":3,"title":"First Paint Time","slug":"first-paint-time"},{"level":3,"title":"算数逻辑运算","slug":"算数逻辑运算"},{"level":2,"title":"Browser Performance","slug":"browser-performance"},{"level":3,"title":"Browser Caches","slug":"browser-caches"},{"level":3,"title":"Browser Performance Monitoring","slug":"browser-performance-monitoring"},{"level":3,"title":"Data Format and Size","slug":"data-format-and-size"},{"level":3,"title":"Data Loading","slug":"data-loading"},{"level":3,"title":"V8 Good Parts","slug":"v8-good-parts"},{"level":3,"title":"Perf and Analysis Tools","slug":"perf-and-analysis-tools"},{"level":3,"title":"Performance Best Practice","slug":"performance-best-practice"},{"level":2,"title":"Testing and Debugging","slug":"testing-and-debugging"},{"level":3,"title":"Log","slug":"log"},{"level":3,"title":"Headless Testing","slug":"headless-testing"},{"level":3,"title":"Frameworks","slug":"frameworks"},{"level":3,"title":"可测试代码","slug":"可测试代码"},{"level":3,"title":"圈复杂度","slug":"圈复杂度"},{"level":3,"title":"函数复杂度","slug":"函数复杂度"},{"level":3,"title":"耦合度","slug":"耦合度"},{"level":3,"title":"单元测试","slug":"单元测试"},{"level":3,"title":"Monkey Patch","slug":"monkey-patch"},{"level":3,"title":"Tools API","slug":"tools-api"},{"level":3,"title":"Browser Compatibility","slug":"browser-compatibility"},{"level":2,"title":"Chrome Dev Tools","slug":"chrome-dev-tools"},{"level":3,"title":"Shortcuts","slug":"shortcuts"},{"level":3,"title":"Elements Panel","slug":"elements-panel"},{"level":3,"title":"Console Panel","slug":"console-panel"},{"level":3,"title":"Source Panel","slug":"source-panel"},{"level":3,"title":"Network Panel","slug":"network-panel"},{"level":3,"title":"Performance Panel","slug":"performance-panel"},{"level":3,"title":"Simulation DevTools","slug":"simulation-devtools"},{"level":3,"title":"Audit DevTool","slug":"audit-devtool"},{"level":3,"title":"Coverage Tool","slug":"coverage-tool"},{"level":3,"title":"Rendering Panel","slug":"rendering-panel"},{"level":3,"title":"More Tools","slug":"more-tools"},{"level":2,"title":"JavaScript Style Guide","slug":"javascript-style-guide"},{"level":3,"title":"Naming Style","slug":"naming-style"},{"level":3,"title":"Variable Style","slug":"variable-style"},{"level":3,"title":"Object Style","slug":"object-style"},{"level":3,"title":"Array Style","slug":"array-style"},{"level":3,"title":"Destruct Style","slug":"destruct-style"},{"level":3,"title":"String Style","slug":"string-style"},{"level":3,"title":"Function Style","slug":"function-style"},{"level":3,"title":"Arrow Function Style","slug":"arrow-function-style"},{"level":3,"title":"Module Style","slug":"module-style"},{"level":3,"title":"Iterator and Generator Style","slug":"iterator-and-generator-style"},{"level":3,"title":"Expression Style","slug":"expression-style"},{"level":3,"title":"换行 Style","slug":"换行-style"},{"level":3,"title":"空格 Style","slug":"空格-style"},{"level":3,"title":"注释 Style","slug":"注释-style"},{"level":2,"title":"PWA","slug":"pwa"},{"level":3,"title":"Service Worker","slug":"service-worker"},{"level":3,"title":"PWA Library","slug":"pwa-library"},{"level":3,"title":"PWA Tutorials","slug":"pwa-tutorials"},{"level":2,"title":"Web Observer API","slug":"web-observer-api"},{"level":3,"title":"Intersection Observer","slug":"intersection-observer"},{"level":2,"title":"Web Animations API","slug":"web-animations-api"},{"level":2,"title":"Web Canvas API","slug":"web-canvas-api"},{"level":3,"title":"Canvas Basic Usage","slug":"canvas-basic-usage"},{"level":3,"title":"Game Loop With Canvas","slug":"game-loop-with-canvas"},{"level":3,"title":"Canvas Performance","slug":"canvas-performance"},{"level":3,"title":"Canvas Reference","slug":"canvas-reference"},{"level":2,"title":"Web Audio API","slug":"web-audio-api"},{"level":3,"title":"From Oscillator","slug":"from-oscillator"},{"level":3,"title":"From Music Data","slug":"from-music-data"},{"level":3,"title":"Audio Bar Chart with Canvas","slug":"audio-bar-chart-with-canvas"},{"level":2,"title":"Web Storage API","slug":"web-storage-api"},{"level":3,"title":"Local Storage API","slug":"local-storage-api"},{"level":3,"title":"IndexDB API","slug":"indexdb-api"},{"level":3,"title":"Web Files API","slug":"web-files-api"},{"level":2,"title":"Web Navigator API","slug":"web-navigator-api"},{"level":2,"title":"Web Sockets API","slug":"web-sockets-api"},{"level":3,"title":"Web Sockets Message Header","slug":"web-sockets-message-header"},{"level":3,"title":"Web Sockets Basic Usage","slug":"web-sockets-basic-usage"},{"level":3,"title":"Web Socket HeartBeat Mechanism","slug":"web-socket-heartbeat-mechanism"},{"level":2,"title":"Web RTC API","slug":"web-rtc-api"},{"level":2,"title":"Web Workers API","slug":"web-workers-api"},{"level":2,"title":"Web Gamepad API","slug":"web-gamepad-api"},{"level":2,"title":"Web Geolocation API","slug":"web-geolocation-api"},{"level":2,"title":"Web Fetch API","slug":"web-fetch-api"},{"level":2,"title":"Web URL API","slug":"web-url-api"},{"level":2,"title":"RESTful API","slug":"restful-api"},{"level":2,"title":"SSR","slug":"ssr"},{"level":2,"title":"SEO","slug":"seo"},{"level":3,"title":"SEO Tutorials","slug":"seo-tutorials"},{"level":3,"title":"SEO Tips","slug":"seo-tips"},{"level":2,"title":"Network","slug":"network"},{"level":3,"title":"HTTPS","slug":"https"},{"level":3,"title":"HTTP 2","slug":"http-2"},{"level":3,"title":"HTTP 3","slug":"http-3"},{"level":2,"title":"Security","slug":"security"},{"level":3,"title":"Web Authentication","slug":"web-authentication"},{"level":3,"title":"Content Security Policy Level 3","slug":"content-security-policy-level-3"},{"level":3,"title":"Trusted Types","slug":"trusted-types"},{"level":3,"title":"CSRF","slug":"csrf"},{"level":3,"title":"Object Property","slug":"object-property"},{"level":3,"title":"Sandbox","slug":"sandbox"},{"level":3,"title":"User Fingerprint","slug":"user-fingerprint"},{"level":2,"title":"DevOps","slug":"devops"},{"level":3,"title":"Static Assets","slug":"static-assets"},{"level":3,"title":"CI System","slug":"ci-system"},{"level":3,"title":"Release System","slug":"release-system"},{"level":3,"title":"Blue Green Deployment","slug":"blue-green-deployment"},{"level":3,"title":"Rolling Update","slug":"rolling-update"},{"level":3,"title":"Gray Release","slug":"gray-release"},{"level":3,"title":"Zero Trust Access Control","slug":"zero-trust-access-control"},{"level":2,"title":"Babel","slug":"babel"},{"level":3,"title":"Babel Node","slug":"babel-node"},{"level":3,"title":"Babel Core","slug":"babel-core"},{"level":3,"title":"CodeMod Tool","slug":"codemod-tool"},{"level":3,"title":"Babel Transform Plugin","slug":"babel-transform-plugin"},{"level":3,"title":"Babel Preset Plugin","slug":"babel-preset-plugin"},{"level":2,"title":"Webpack","slug":"webpack"},{"level":3,"title":"Webpack Watch Options","slug":"webpack-watch-options"},{"level":3,"title":"Webpack Resolve Path Options","slug":"webpack-resolve-path-options"},{"level":3,"title":"Webpack Flag Options","slug":"webpack-flag-options"},{"level":3,"title":"Webpack Loader Configuration","slug":"webpack-loader-configuration"},{"level":3,"title":"Webpack Optimization","slug":"webpack-optimization"},{"level":3,"title":"Webpack Plugins","slug":"webpack-plugins"},{"level":3,"title":"Webpack Migrate to 5","slug":"webpack-migrate-to-5"},{"level":3,"title":"Webpack Reference","slug":"webpack-reference"},{"level":2,"title":"Jest Testing","slug":"jest-testing"},{"level":3,"title":"Jest Installation","slug":"jest-installation"},{"level":3,"title":"Jest Configuration","slug":"jest-configuration"},{"level":3,"title":"Jest Basic Testing","slug":"jest-basic-testing"},{"level":3,"title":"Jest Snapshot Testing","slug":"jest-snapshot-testing"},{"level":3,"title":"Enzyme","slug":"enzyme"},{"level":3,"title":"React Testing Library","slug":"react-testing-library"},{"level":2,"title":"E2E Testing","slug":"e2e-testing"},{"level":3,"title":"Cypress Installation","slug":"cypress-installation"},{"level":3,"title":"Cypress Configuration","slug":"cypress-configuration"},{"level":3,"title":"Basic Cypress Testing","slug":"basic-cypress-testing"}],"relativePath":"web/javascript/javascriptAdvancedNotes.md","lastUpdated":1628057161000}',c={},l=t("h1",{id:"javascript-advanced-notes"},[t("a",{class:"header-anchor",href:"#javascript-advanced-notes","aria-hidden":"true"},"#"),e(" JavaScript Advanced Notes")],-1),p=t("p",null,[t("div",{class:"table-of-contents"},[t("ul",null,[t("li",null,[t("a",{href:"#javascript-advanced-notes"},"JavaScript Advanced Notes"),t("ul",null,[t("li",null,[t("a",{href:"#modern-javascript"},"Modern JavaScript")]),t("li",null,[t("a",{href:"#functional-javascript"},"Functional JavaScript")]),t("li",null,[t("a",{href:"#internal-javascript"},"Internal JavaScript")]),t("li",null,[t("a",{href:"#browser-internal"},"Browser Internal")]),t("li",null,[t("a",{href:"#effective-javascript"},"Effective JavaScript")]),t("li",null,[t("a",{href:"#browser-performance"},"Browser Performance")]),t("li",null,[t("a",{href:"#testing-and-debugging"},"Testing and Debugging")]),t("li",null,[t("a",{href:"#chrome-dev-tools"},"Chrome Dev Tools")]),t("li",null,[t("a",{href:"#javascript-style-guide"},"JavaScript Style Guide")]),t("li",null,[t("a",{href:"#pwa"},"PWA")]),t("li",null,[t("a",{href:"#web-observer-api"},"Web Observer API")]),t("li",null,[t("a",{href:"#web-animations-api"},"Web Animations API")]),t("li",null,[t("a",{href:"#web-canvas-api"},"Web Canvas API")]),t("li",null,[t("a",{href:"#web-audio-api"},"Web Audio API")]),t("li",null,[t("a",{href:"#web-storage-api"},"Web Storage API")]),t("li",null,[t("a",{href:"#web-navigator-api"},"Web Navigator API")]),t("li",null,[t("a",{href:"#web-sockets-api"},"Web Sockets API")]),t("li",null,[t("a",{href:"#web-rtc-api"},"Web RTC API")]),t("li",null,[t("a",{href:"#web-workers-api"},"Web Workers API")]),t("li",null,[t("a",{href:"#web-gamepad-api"},"Web Gamepad API")]),t("li",null,[t("a",{href:"#web-geolocation-api"},"Web Geolocation API")]),t("li",null,[t("a",{href:"#web-fetch-api"},"Web Fetch API")]),t("li",null,[t("a",{href:"#web-url-api"},"Web URL API")]),t("li",null,[t("a",{href:"#restful-api"},"RESTful API")]),t("li",null,[t("a",{href:"#ssr"},"SSR")]),t("li",null,[t("a",{href:"#seo"},"SEO")]),t("li",null,[t("a",{href:"#network"},"Network")]),t("li",null,[t("a",{href:"#security"},"Security")]),t("li",null,[t("a",{href:"#devops"},"DevOps")]),t("li",null,[t("a",{href:"#babel"},"Babel")]),t("li",null,[t("a",{href:"#webpack"},"Webpack")]),t("li",null,[t("a",{href:"#jest-testing"},"Jest Testing")]),t("li",null,[t("a",{href:"#e2e-testing"},"E2E Testing")])])])])])],-1),u=t("h2",{id:"modern-javascript"},[t("a",{class:"header-anchor",href:"#modern-javascript","aria-hidden":"true"},"#"),e(" Modern JavaScript")],-1),r=t("h3",{id:"tc39"},[t("a",{class:"header-anchor",href:"#tc39","aria-hidden":"true"},"#"),e(" TC39")],-1),i=t("ul",null,[t("li",null,[t("a",{href:"https://www.ecma-international.org/technical-committees/tc39",title:"TC39",target:"_blank",rel:"noopener noreferrer"},"Technical Committees 39")]),t("li",null,[t("a",{href:"http://tc39.github.io/process-document",target:"_blank",rel:"noopener noreferrer"},"New Feature Process")])],-1),k=t("h3",{id:"variable"},[t("a",{class:"header-anchor",href:"#variable","aria-hidden":"true"},"#"),e(" Variable")],-1),b=t("ul",null,[t("li",null,[e("一方面规定, var/function 声明的全局变量, 依旧是全局对象的属性, 意味着会"),t("code",null,"Hoisting"),e(".")]),t("li",null,[e("另一方面规定, let/const/class 声明的全局变量, 不属于全局对象的属性, 意味着不会"),t("code",null,"Hoisting"),e(".")])],-1),m=t("h4",{id:"let"},[t("a",{class:"header-anchor",href:"#let","aria-hidden":"true"},"#"),e(" let")],-1),d=t("ul",null,[t("li",null,"块级作用域内定义的变量/函数,在块级作用域外 ReferenceError"),t("li",null,"不存在变量提升, 导致暂时性死区 (Temporal Dead Zone)"),t("li",null,[t("code",null,"let"),e(" variable in "),t("code",null,"for-loop"),e(" closure, every closure for each loop binds the block-scoped variable.")])],-1),g=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(" a "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},";"),e("\n\nb "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token number"},"3"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// temporal dead zone: throw reference error"),e("\n\n"),t("span",{class:"token keyword"},"let"),e(" b "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token number"},"2"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br")])],-1),h=t("h4",{id:"const"},[t("a",{class:"header-anchor",href:"#const","aria-hidden":"true"},"#"),e(" const")],-1),f=t("ul",null,[t("li",null,"const 一旦声明变量,就必须立即初始化,不能留到以后赋值"),t("li",null,[e("引用一个"),t("code",null,"Reference"),e("变量时,只表示此变量地址不可变,但所引用变量的值/属性可变 (xxx * const, 即"),t("code",null,"const"),e("指针, 指向一个变量)")]),t("li",null,"不存在变量提升, 导致暂时性死区 (Temporal Dead Zone)"),t("li",null,"块级作用域")],-1),y=t("h3",{id:"destructuring-pattern-matching"},[t("a",{class:"header-anchor",href:"#destructuring-pattern-matching","aria-hidden":"true"},"#"),e(" Destructuring Pattern Matching")],-1),w=t("ul",null,[t("li",null,[t("strong",null,"建议只要有可能,就不要在模式中放置圆括号")]),t("li",null,"赋值语句的非模式部分,可以使用圆括号")],-1),v=t("h4",{id:"默认值"},[t("a",{class:"header-anchor",href:"#默认值","aria-hidden":"true"},"#"),e(" 默认值")],-1),x=t("ul",null,[t("li",null,"ES6 内部使用严格相等运算符(===),判断一个位置是否有值。若此位置无值,则使用默认值"),t("li",null,"如果一个数组成员不严格等于 undefined,默认值不会生效")],-1),j=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token punctuation"},"["),e("x "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},"]"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"["),t("span",{class:"token keyword"},"undefined"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),e("\nx"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// 1"),e("\n\n"),t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token punctuation"},"["),e("x "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},"]"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"["),t("span",{class:"token keyword"},"null"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),e("\nx"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// null"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br")])],-1),S=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"let"),e(),t("span",{class:"token punctuation"},"["),e("x "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},","),e(" y "),t("span",{class:"token operator"},"="),e(" x"),t("span",{class:"token punctuation"},"]"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"["),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// x=1; y=1"),e("\n"),t("span",{class:"token keyword"},"let"),e(),t("span",{class:"token punctuation"},"["),e("x "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},","),e(" y "),t("span",{class:"token operator"},"="),e(" x"),t("span",{class:"token punctuation"},"]"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"["),t("span",{class:"token number"},"2"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// x=2; y=2"),e("\n"),t("span",{class:"token keyword"},"let"),e(),t("span",{class:"token punctuation"},"["),e("x "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},","),e(" y "),t("span",{class:"token operator"},"="),e(" x"),t("span",{class:"token punctuation"},"]"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"["),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"2"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// x=1; y=2"),e("\n"),t("span",{class:"token keyword"},"let"),e(),t("span",{class:"token punctuation"},"["),e("x "),t("span",{class:"token operator"},"="),e(" y"),t("span",{class:"token punctuation"},","),e(" y "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},"]"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"["),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// ReferenceError"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br")])],-1),T=t("h4",{id:"sample"},[t("a",{class:"header-anchor",href:"#sample","aria-hidden":"true"},"#"),e(" Sample")],-1),P=t("h5",{id:"swap"},[t("a",{class:"header-anchor",href:"#swap","aria-hidden":"true"},"#"),e(" swap")],-1),C=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token punctuation"},"["),e("x"),t("span",{class:"token punctuation"},","),e(" y"),t("span",{class:"token punctuation"},"]"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"["),e("y"),t("span",{class:"token punctuation"},","),e(" x"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br")])],-1),I=t("h5",{id:"简化函数的参数与返回值"},[t("a",{class:"header-anchor",href:"#简化函数的参数与返回值","aria-hidden":"true"},"#"),e(" 简化函数的参数与返回值")],-1),_=t("ul",null,[t("li",null,"可用于工厂(factory)/设置(options)模式: 传参一般为 options 对象,具有固定的属性名"),t("li",null,"一次性定义多个参数"),t("li",null,"一次性定义多个参数的默认值")],-1),A=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token comment"},"// 参数是一组有次序的值"),e("\n"),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token function"},"f"),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},[t("span",{class:"token punctuation"},"["),e("x"),t("span",{class:"token punctuation"},","),e(" y"),t("span",{class:"token punctuation"},","),e(" z"),t("span",{class:"token punctuation"},"]")]),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e(),t("span",{class:"token operator"},"..."),e(),t("span",{class:"token punctuation"},"}"),e("\n"),t("span",{class:"token function"},"f"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"["),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"2"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"3"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},")"),e("\n\n"),t("span",{class:"token comment"},"// 参数是一组无次序的值"),e("\n"),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token function"},"f"),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},[t("span",{class:"token punctuation"},"{"),e("x"),t("span",{class:"token punctuation"},","),e(" y"),t("span",{class:"token punctuation"},","),e(" z"),t("span",{class:"token punctuation"},"}")]),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e(),t("span",{class:"token operator"},"..."),e(),t("span",{class:"token punctuation"},"}"),e("\n"),t("span",{class:"token function"},"f"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"{"),e("z"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token number"},"3"),t("span",{class:"token punctuation"},","),e(" y"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token number"},"2"),t("span",{class:"token punctuation"},","),e(" x"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),e("\n\n"),t("span",{class:"token comment"},"// 可省略 var foo = config.foo || 'default foo';"),e("\njQuery"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function-variable function"},"ajax"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token punctuation"},"("),e("url"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token punctuation"},"{"),e("\n async "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token boolean"},"true"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token function-variable function"},"beforeSend"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),e("\n cache "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token boolean"},"true"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token function-variable function"},"complete"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),e("\n crossDomain "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token boolean"},"false"),t("span",{class:"token punctuation"},","),e("\n global "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token boolean"},"true"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token comment"},"// ... more config"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"// ... do stuff"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br")])],-1),E=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token comment"},"// 返回一个数组"),e("\n"),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token function"},"example"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"return"),e(),t("span",{class:"token punctuation"},"["),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"2"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"3"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n"),t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token punctuation"},"["),e("a"),t("span",{class:"token punctuation"},","),e(" b"),t("span",{class:"token punctuation"},","),e(" c"),t("span",{class:"token punctuation"},"]"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token function"},"example"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token comment"},"// 返回一个对象"),e("\n"),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token function"},"example"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"return"),e(),t("span",{class:"token punctuation"},"{"),e("\n foo"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},","),e("\n bar"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token number"},"2"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n"),t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token punctuation"},"{"),e(" foo"),t("span",{class:"token punctuation"},","),e(" bar "),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token function"},"example"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br")])],-1),O=t("h5",{id:"解析-json-对象"},[t("a",{class:"header-anchor",href:"#解析-json-对象","aria-hidden":"true"},"#"),e(" 解析 JSON 对象")],-1),M=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(" jsonData "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"{"),e("\n id"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token number"},"42"),t("span",{class:"token punctuation"},","),e("\n status"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token string"},"'OK'"),t("span",{class:"token punctuation"},","),e("\n data"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token punctuation"},"["),t("span",{class:"token number"},"867"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"5309"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},","),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token punctuation"},"{"),e(" id"),t("span",{class:"token punctuation"},","),e(" status"),t("span",{class:"token punctuation"},","),e(" data"),t("span",{class:"token operator"},":"),e(" number "),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token operator"},"="),e(" jsonData"),t("span",{class:"token punctuation"},";"),e("\n\nconsole"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),e("id"),t("span",{class:"token punctuation"},","),e(" status"),t("span",{class:"token punctuation"},","),e(" number"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token comment"},'// 42, "OK", [867, 5309]'),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br")])],-1),D=t("h5",{id:"traverse-map-and-list"},[t("a",{class:"header-anchor",href:"#traverse-map-and-list","aria-hidden":"true"},"#"),e(" Traverse Map and List")],-1),L=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(" map "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"new"),e(),t("span",{class:"token class-name"},"Map"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\nmap"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"set"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'first'"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'hello'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\nmap"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"set"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'second'"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'world'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token keyword"},"for"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"let"),e(),t("span",{class:"token punctuation"},"["),e("key"),t("span",{class:"token punctuation"},","),e(" value"),t("span",{class:"token punctuation"},"]"),e(),t("span",{class:"token keyword"},"of"),e(" map"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),e("key "),t("span",{class:"token operator"},"+"),e(),t("span",{class:"token string"},"' is '"),e(),t("span",{class:"token operator"},"+"),e(" value"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n"),t("span",{class:"token comment"},"// first is hello"),e("\n"),t("span",{class:"token comment"},"// second is world"),e("\n\n"),t("span",{class:"token comment"},"// 获取键名"),e("\n"),t("span",{class:"token keyword"},"for"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"let"),e(),t("span",{class:"token punctuation"},"["),e("key"),t("span",{class:"token punctuation"},"]"),e(),t("span",{class:"token keyword"},"of"),e(" map"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"// ..."),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token comment"},"// 获取键值"),e("\n"),t("span",{class:"token keyword"},"for"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"let"),e(),t("span",{class:"token punctuation"},"["),t("span",{class:"token punctuation"},","),e(" value"),t("span",{class:"token punctuation"},"]"),e(),t("span",{class:"token keyword"},"of"),e(" map"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"// ..."),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br")])],-1),W=t("h5",{id:"加载特定模块"},[t("a",{class:"header-anchor",href:"#加载特定模块","aria-hidden":"true"},"#"),e(" 加载特定模块")],-1),N=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token punctuation"},"{"),e(" SourceMapConsumer"),t("span",{class:"token punctuation"},","),e(" SourceNode "),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token function"},"require"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'source-map'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br")])],-1),R=t("h4",{id:"array-iterator-style-matching"},[t("a",{class:"header-anchor",href:"#array-iterator-style-matching","aria-hidden":"true"},"#"),e(" Array Iterator Style Matching")],-1),z=t("p",null,"等号右边必须为数组等实现了 Iterator 接口的对象,否则报错",-1),B=t("ul",null,[t("li",null,"Array"),t("li",null,"Set"),t("li",null,"Generator 函数")],-1),F=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token punctuation"},"["),e("foo"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token punctuation"},"["),t("span",{class:"token punctuation"},"["),e("bar"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},","),e(" baz"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},"]"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"["),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token punctuation"},"["),t("span",{class:"token punctuation"},"["),t("span",{class:"token number"},"2"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"3"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),e("\nfoo"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// 1"),e("\nbar"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// 2"),e("\nbaz"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// 3"),e("\n\n"),t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token punctuation"},"["),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token punctuation"},","),e(" third"),t("span",{class:"token punctuation"},"]"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"["),t("span",{class:"token string"},"'foo'"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'bar'"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'baz'"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),e("\nthird"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},'// "baz"'),e("\n\n"),t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token punctuation"},"["),e("x"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token punctuation"},","),e(" y"),t("span",{class:"token punctuation"},"]"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"["),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"2"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"3"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),e("\nx"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// 1"),e("\ny"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// 3"),e("\n\n"),t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token punctuation"},"["),e("head"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token operator"},"..."),e("tail"),t("span",{class:"token punctuation"},"]"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"["),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"2"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"3"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"4"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),e("\nhead"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// 1"),e("\ntail"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// [2, 3, 4]"),e("\n\n"),t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token punctuation"},"["),e("x"),t("span",{class:"token punctuation"},","),e(" y"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token operator"},"..."),e("z"),t("span",{class:"token punctuation"},"]"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"["),t("span",{class:"token string"},"'a'"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),e("\nx"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},'// "a"'),e("\ny"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// undefined"),e("\nz"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// []"),e("\n\n"),t("span",{class:"token comment"},"// Generator 函数"),e("\n"),t("span",{class:"token keyword"},"function"),t("span",{class:"token operator"},"*"),e(),t("span",{class:"token function"},"fibs"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"var"),e(" a "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token number"},"0"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"var"),e(" b "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"while"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token boolean"},"true"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"yield"),e(" a"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"["),e("a"),t("span",{class:"token punctuation"},","),e(" b"),t("span",{class:"token punctuation"},"]"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"["),e("b"),t("span",{class:"token punctuation"},","),e(" a "),t("span",{class:"token operator"},"+"),e(" b"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token punctuation"},"["),e("first"),t("span",{class:"token punctuation"},","),e(" second"),t("span",{class:"token punctuation"},","),e(" third"),t("span",{class:"token punctuation"},","),e(" fourth"),t("span",{class:"token punctuation"},","),e(" fifth"),t("span",{class:"token punctuation"},","),e(" sixth"),t("span",{class:"token punctuation"},"]"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token function"},"fibs"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\nsixth"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// 5"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br"),t("span",{class:"line-number"},"25"),t("br"),t("span",{class:"line-number"},"26"),t("br"),t("span",{class:"line-number"},"27"),t("br"),t("span",{class:"line-number"},"28"),t("br"),t("span",{class:"line-number"},"29"),t("br"),t("span",{class:"line-number"},"30"),t("br"),t("span",{class:"line-number"},"31"),t("br"),t("span",{class:"line-number"},"32"),t("br"),t("span",{class:"line-number"},"33"),t("br")])],-1),H=t("h4",{id:"object-style-matching"},[t("a",{class:"header-anchor",href:"#object-style-matching","aria-hidden":"true"},"#"),e(" Object Style Matching")],-1),q=t("ul",null,[t("li",null,"真正被赋值的是后者,而不是前者")],-1),J=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token punctuation"},"{"),e(" pattern"),t("span",{class:"token operator"},":"),e(" variable "),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"{"),e(" key"),t("span",{class:"token operator"},":"),e(" value "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br")])],-1),U=t("ul",null,[t("li",null,"解构赋值的规则: 只要等号右边的值不是对象,就先将其转为对象"),t("li",null,"undefined/null 无法转化为对象")],-1),G=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token punctuation"},"{"),e(" prop"),t("span",{class:"token operator"},":"),e(" x "),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"undefined"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// TypeError"),e("\n"),t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token punctuation"},"{"),e(" prop"),t("span",{class:"token operator"},":"),e(" y "),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"null"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// TypeError"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br")])],-1),$=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token punctuation"},"{"),e(" bar"),t("span",{class:"token punctuation"},","),e(" foo "),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"{"),e(" foo"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token string"},"'aaa'"),t("span",{class:"token punctuation"},","),e(" bar"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token string"},"'bbb'"),e(),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\nfoo"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},'// "aaa"'),e("\nbar"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},'// "bbb"'),e("\n\n"),t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token punctuation"},"{"),e(" foo"),t("span",{class:"token operator"},":"),e(" foo"),t("span",{class:"token punctuation"},","),e(" bar"),t("span",{class:"token operator"},":"),e(" bar "),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"{"),e(" foo"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token string"},"'aaa'"),t("span",{class:"token punctuation"},","),e(" bar"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token string"},"'bbb'"),e(),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token punctuation"},"{"),e(" baz "),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"{"),e(" foo"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token string"},"'aaa'"),t("span",{class:"token punctuation"},","),e(" bar"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token string"},"'bbb'"),e(),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\nbaz"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// undefined"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br")])],-1),V=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token punctuation"},"{"),e(" foo"),t("span",{class:"token operator"},":"),e(" baz "),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"{"),e(" foo"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token string"},"'aaa'"),t("span",{class:"token punctuation"},","),e(" bar"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token string"},"'bbb'"),e(),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\nbaz"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},'// "aaa"'),e("\n\n"),t("span",{class:"token keyword"},"const"),e(" obj "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"{"),e(" first"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token string"},"'hello'"),t("span",{class:"token punctuation"},","),e(" last"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token string"},"'world'"),e(),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token punctuation"},"{"),e(" first"),t("span",{class:"token operator"},":"),e(" f"),t("span",{class:"token punctuation"},","),e(" last"),t("span",{class:"token operator"},":"),e(" l "),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token operator"},"="),e(" obj"),t("span",{class:"token punctuation"},";"),e("\nf"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// 'hello'"),e("\nl"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// 'world'"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br")])],-1),K=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token punctuation"},"{"),e(" log"),t("span",{class:"token punctuation"},","),e(" sin"),t("span",{class:"token punctuation"},","),e(" cos "),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token operator"},"="),e(" Math"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br")])],-1),Y=t("h4",{id:"string-style-matching"},[t("a",{class:"header-anchor",href:"#string-style-matching","aria-hidden":"true"},"#"),e(" String Style Matching")],-1),X=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token punctuation"},"["),e("a"),t("span",{class:"token punctuation"},","),e(" b"),t("span",{class:"token punctuation"},","),e(" c"),t("span",{class:"token punctuation"},","),e(" d"),t("span",{class:"token punctuation"},","),e(" e"),t("span",{class:"token punctuation"},"]"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token string"},"'hello'"),t("span",{class:"token punctuation"},";"),e("\na"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},'// "h"'),e("\nb"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},'// "e"'),e("\nc"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},'// "l"'),e("\nd"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},'// "l"'),e("\ne"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},'// "o"'),e("\n\n"),t("span",{class:"token keyword"},"let"),e(),t("span",{class:"token punctuation"},"{"),e(" length"),t("span",{class:"token operator"},":"),e(" len "),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token string"},"'hello'"),t("span",{class:"token punctuation"},";"),e("\nlen"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// 5"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br")])],-1),Z=t("h4",{id:"number-and-boolean-style-matching"},[t("a",{class:"header-anchor",href:"#number-and-boolean-style-matching","aria-hidden":"true"},"#"),e(" Number and Boolean Style Matching")],-1),Q=t("p",null,"number/boolean 会转化成对象",-1),nn=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"let"),e(),t("span",{class:"token punctuation"},"{"),e(" toString"),t("span",{class:"token operator"},":"),e(" s "),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token number"},"123"),t("span",{class:"token punctuation"},";"),e("\ns "),t("span",{class:"token operator"},"==="),e(),t("span",{class:"token class-name"},"Number"),t("span",{class:"token punctuation"},"."),e("prototype"),t("span",{class:"token punctuation"},"."),e("toString"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// true"),e("\n\n"),t("span",{class:"token keyword"},"let"),e(),t("span",{class:"token punctuation"},"{"),e(" toString"),t("span",{class:"token operator"},":"),e(" s "),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token boolean"},"true"),t("span",{class:"token punctuation"},";"),e("\ns "),t("span",{class:"token operator"},"==="),e(),t("span",{class:"token class-name"},"Boolean"),t("span",{class:"token punctuation"},"."),e("prototype"),t("span",{class:"token punctuation"},"."),e("toString"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// true"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br")])],-1),sn=t("h4",{id:"function-arguments-style-matching"},[t("a",{class:"header-anchor",href:"#function-arguments-style-matching","aria-hidden":"true"},"#"),e(" Function Arguments Style Matching")],-1),an=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token function"},"add"),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},[t("span",{class:"token punctuation"},"["),e("x"),t("span",{class:"token punctuation"},","),e(" y"),t("span",{class:"token punctuation"},"]")]),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"return"),e(" x "),t("span",{class:"token operator"},"+"),e(" y"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n"),t("span",{class:"token function"},"add"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"["),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"2"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token comment"},"// 3"),e("\n "),t("span",{class:"token punctuation"},"["),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"["),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"2"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token punctuation"},"["),t("span",{class:"token number"},"3"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"4"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"map"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},[t("span",{class:"token punctuation"},"["),e("a"),t("span",{class:"token punctuation"},","),e(" b"),t("span",{class:"token punctuation"},"]")]),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(" a "),t("span",{class:"token operator"},"+"),e(" b"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token comment"},"// [ 3, 7 ]"),e("\n\n"),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token function"},"move"),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},[t("span",{class:"token punctuation"},"{"),e(" x "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token number"},"0"),t("span",{class:"token punctuation"},","),e(" y "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token number"},"0"),e(),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"{"),t("span",{class:"token punctuation"},"}")]),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"return"),e(),t("span",{class:"token punctuation"},"["),e("x"),t("span",{class:"token punctuation"},","),e(" y"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n"),t("span",{class:"token function"},"move"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"{"),e(" x"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token number"},"3"),t("span",{class:"token punctuation"},","),e(" y"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token number"},"8"),e(),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// [3, 8]"),e("\n"),t("span",{class:"token function"},"move"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"{"),e(" x"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token number"},"3"),e(),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// [3, 0]"),e("\n"),t("span",{class:"token function"},"move"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"{"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// [0, 0]"),e("\n"),t("span",{class:"token function"},"move"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// [0, 0]"),e("\n\n"),t("span",{class:"token comment"},"// 严格为 undefined 时,触发默认值设置"),e("\n"),t("span",{class:"token punctuation"},"["),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token keyword"},"undefined"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"3"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"map"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),e("x "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token string"},"'yes'"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(" x"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token comment"},"// [ 1, 'yes', 3 ]"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br")])],-1),tn=t("h3",{id:"string"},[t("a",{class:"header-anchor",href:"#string","aria-hidden":"true"},"#"),e(" String")],-1),en=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token string"},"'z'"),e(),t("span",{class:"token operator"},"==="),e(),t("span",{class:"token string"},"'z'"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// true"),e("\n"),t("span",{class:"token string"},"'\\172'"),e(),t("span",{class:"token operator"},"==="),e(),t("span",{class:"token string"},"'z'"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// true"),e("\n"),t("span",{class:"token string"},"'\\x7A'"),e(),t("span",{class:"token operator"},"==="),e(),t("span",{class:"token string"},"'z'"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// true"),e("\n"),t("span",{class:"token string"},"'\\u007A'"),e(),t("span",{class:"token operator"},"==="),e(),t("span",{class:"token string"},"'z'"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// true"),e("\n"),t("span",{class:"token string"},"'\\u{7A}'"),e(),t("span",{class:"token operator"},"==="),e(),t("span",{class:"token string"},"'z'"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// true"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br")])],-1),on=t("h4",{id:"methods"},[t("a",{class:"header-anchor",href:"#methods","aria-hidden":"true"},"#"),e(" Methods")],-1),cn=t("ul",null,[t("li",null,"string.codePointAt(index): 正确处理 4 字节存储字符"),t("li",null,"string.fromCodePoint(codePoint)")],-1),ln=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token function"},"is32Bit"),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"c"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"return"),e(" c"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"codePointAt"),t("span",{class:"token punctuation"},"("),t("span",{class:"token number"},"0"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},">"),e(),t("span",{class:"token number"},"0xffff"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\nString"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"fromCodePoint"),t("span",{class:"token punctuation"},"("),t("span",{class:"token number"},"0x78"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"0x1f680"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"0x79"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"==="),e(),t("span",{class:"token string"},"'x\\uD83D\\uDE80y'"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token comment"},"// true"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br")])],-1),pn=t("ul",null,[t("li",null,"string.includes(substr)/startsWith(substr)/endsWith(substr)"),t("li",null,"使用第二个参数 n 时,endsWith 针对前 n 个字符,其他两个方法针对从第 n 个位置直到字符串结束")],-1),un=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(" s "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token string"},"'Hello world!'"),t("span",{class:"token punctuation"},";"),e("\n\ns"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"startsWith"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'world'"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"6"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// true"),e("\ns"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"endsWith"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'Hello'"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"5"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// true"),e("\ns"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"includes"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'Hello'"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"6"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// false"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br")])],-1),rn=t("ul",null,[t("li",null,"repeat(times)")],-1),kn=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token string"},"'hello'"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"repeat"),t("span",{class:"token punctuation"},"("),t("span",{class:"token number"},"2"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},'// "hellohello"'),e("\n"),t("span",{class:"token string"},"'na'"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"repeat"),t("span",{class:"token punctuation"},"("),t("span",{class:"token number"},"2.9"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},'// "nana"'),e("\n\n"),t("span",{class:"token string"},"'na'"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"repeat"),t("span",{class:"token punctuation"},"("),t("span",{class:"token operator"},"-"),t("span",{class:"token number"},"0.9"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},'// ""'),e("\n"),t("span",{class:"token string"},"'na'"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"repeat"),t("span",{class:"token punctuation"},"("),t("span",{class:"token operator"},"-"),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// RangeError"),e("\n\n"),t("span",{class:"token string"},"'na'"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"repeat"),t("span",{class:"token punctuation"},"("),t("span",{class:"token number"},"NaN"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},'// ""'),e("\n"),t("span",{class:"token string"},"'na'"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"repeat"),t("span",{class:"token punctuation"},"("),t("span",{class:"token number"},"Infinity"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// RangeError"),e("\n\n"),t("span",{class:"token string"},"'na'"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"repeat"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'na'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},'// ""'),e("\n"),t("span",{class:"token string"},"'na'"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"repeat"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'3'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},'// "nanana"'),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br")])],-1),bn=t("ul",null,[t("li",null,"padStart/padEnd(len, paddingStr)")],-1),mn=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token string"},"'1'"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"padStart"),t("span",{class:"token punctuation"},"("),t("span",{class:"token number"},"10"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'0'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},'// "0000000001"'),e("\n"),t("span",{class:"token string"},"'12'"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"padStart"),t("span",{class:"token punctuation"},"("),t("span",{class:"token number"},"10"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'0'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},'// "0000000012"'),e("\n"),t("span",{class:"token string"},"'123456'"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"padStart"),t("span",{class:"token punctuation"},"("),t("span",{class:"token number"},"10"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'0'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},'// "0000123456"'),e("\n\n"),t("span",{class:"token string"},"'12'"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"padStart"),t("span",{class:"token punctuation"},"("),t("span",{class:"token number"},"10"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'YYYY-MM-DD'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},'// "YYYY-MM-12"'),e("\n"),t("span",{class:"token string"},"'09-12'"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"padStart"),t("span",{class:"token punctuation"},"("),t("span",{class:"token number"},"10"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'YYYY-MM-DD'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},'// "YYYY-09-12"'),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br")])],-1),dn=t("h4",{id:"template-string"},[t("a",{class:"header-anchor",href:"#template-string","aria-hidden":"true"},"#"),e(" Template String")],-1),gn=t("p",null,[t("code",null,"str"),e(" 表示模板字符串")],-1),hn=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token comment"},"// 普通字符串"),e("\n"),t("span",{class:"token template-string"},[t("span",{class:"token template-punctuation string"},"`"),t("span",{class:"token string"},"In JavaScript '\\n' is a line-feed."),t("span",{class:"token template-punctuation string"},"`")]),t("span",{class:"token template-string"},[t("span",{class:"token template-punctuation string"},"`"),t("span",{class:"token string"},"\\`Yo\\` World!"),t("span",{class:"token template-punctuation string"},"`")]),t("span",{class:"token template-string"},[t("span",{class:"token template-punctuation string"},"`"),t("span",{class:"token string"},"In JavaScript this is // 多行字符串\n not legal."),t("span",{class:"token template-punctuation string"},"`")]),t("span",{class:"token template-string"},[t("span",{class:"token template-punctuation string"},"`"),t("span",{class:"token interpolation"},[t("span",{class:"token interpolation-punctuation punctuation"},"${"),e("\n x "),t("span",{class:"token comment"},"// 引用变量"),e("\n"),t("span",{class:"token interpolation-punctuation punctuation"},"}")]),t("span",{class:"token string"}," + "),t("span",{class:"token interpolation"},[t("span",{class:"token interpolation-punctuation punctuation"},"${"),e("y "),t("span",{class:"token operator"},"*"),e(),t("span",{class:"token number"},"2"),t("span",{class:"token interpolation-punctuation punctuation"},"}")]),t("span",{class:"token string"}," = "),t("span",{class:"token interpolation"},[t("span",{class:"token interpolation-punctuation punctuation"},"${"),e("x "),t("span",{class:"token operator"},"+"),e(" y "),t("span",{class:"token operator"},"*"),e(),t("span",{class:"token number"},"2"),t("span",{class:"token interpolation-punctuation punctuation"},"}")]),t("span",{class:"token template-punctuation string"},"`")]),t("span",{class:"token template-string"},[t("span",{class:"token template-punctuation string"},"`"),t("span",{class:"token interpolation"},[t("span",{class:"token interpolation-punctuation punctuation"},"${"),e("obj"),t("span",{class:"token punctuation"},"."),e("x "),t("span",{class:"token operator"},"+"),e(" obj"),t("span",{class:"token punctuation"},"."),e("y"),t("span",{class:"token interpolation-punctuation punctuation"},"}")]),t("span",{class:"token template-punctuation string"},"`")]),t("span",{class:"token template-string"},[t("span",{class:"token template-punctuation string"},"`"),t("span",{class:"token string"},"foo "),t("span",{class:"token interpolation"},[t("span",{class:"token interpolation-punctuation punctuation"},"${"),e("\n "),t("span",{class:"token function"},"fn"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token comment"},"// 调用函数"),e("\n"),t("span",{class:"token interpolation-punctuation punctuation"},"}")]),t("span",{class:"token string"}," bar"),t("span",{class:"token template-punctuation string"},"`")]),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br")])],-1),fn=t("h4",{id:"tagged-templates"},[t("a",{class:"header-anchor",href:"#tagged-templates","aria-hidden":"true"},"#"),e(" Tagged Templates")],-1),yn=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token function-variable function"},"boldify"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},[e("parts"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token operator"},"..."),e("insertedParts")]),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"return"),e(" parts\n "),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"map"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},[e("s"),t("span",{class:"token punctuation"},","),e(" i")]),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"if"),e(),t("span",{class:"token punctuation"},"("),e("i "),t("span",{class:"token operator"},"==="),e(" insertedParts"),t("span",{class:"token punctuation"},"."),e("length"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token keyword"},"return"),e(" s"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"return"),e(),t("span",{class:"token template-string"},[t("span",{class:"token template-punctuation string"},"`"),t("span",{class:"token interpolation"},[t("span",{class:"token interpolation-punctuation punctuation"},"${"),e("s"),t("span",{class:"token interpolation-punctuation punctuation"},"}")]),t("span",{class:"token string"},""),t("span",{class:"token interpolation"},[t("span",{class:"token interpolation-punctuation punctuation"},"${"),e("insertedParts"),t("span",{class:"token punctuation"},"["),e("i"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token interpolation-punctuation punctuation"},"}")]),t("span",{class:"token string"}," "),t("span",{class:"token template-punctuation string"},"`")]),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),e("\n "),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"join"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"''"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token keyword"},"const"),e(" name "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token string"},"'Sabertaz'"),t("span",{class:"token punctuation"},";"),e("\nconsole"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),e("boldify"),t("span",{class:"token template-string"},[t("span",{class:"token template-punctuation string"},"`"),t("span",{class:"token string"},"Hi, my name is "),t("span",{class:"token interpolation"},[t("span",{class:"token interpolation-punctuation punctuation"},"${"),e("name"),t("span",{class:"token interpolation-punctuation punctuation"},"}")]),t("span",{class:"token string"},"!"),t("span",{class:"token template-punctuation string"},"`")]),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token comment"},'// => "Hi, my name is Sabertaz !"'),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br")])],-1),wn=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token function"},"template"),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},[e("strings"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token operator"},"..."),e("keys")]),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"return"),e(),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},[t("span",{class:"token operator"},"..."),e("values")]),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"const"),e(" dict "),t("span",{class:"token operator"},"="),e(" values"),t("span",{class:"token punctuation"},"["),e("values"),t("span",{class:"token punctuation"},"."),e("length "),t("span",{class:"token operator"},"-"),e(),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},"]"),e(),t("span",{class:"token operator"},"||"),e(),t("span",{class:"token punctuation"},"{"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"const"),e(" result "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"["),e("strings"),t("span",{class:"token punctuation"},"["),t("span",{class:"token number"},"0"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),e("\n keys"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"forEach"),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},[e("key"),t("span",{class:"token punctuation"},","),e(" i")]),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"const"),e(" value "),t("span",{class:"token operator"},"="),e(" Number"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"isInteger"),t("span",{class:"token punctuation"},"("),e("key"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"?"),e(" values"),t("span",{class:"token punctuation"},"["),e("key"),t("span",{class:"token punctuation"},"]"),e(),t("span",{class:"token operator"},":"),e(" dict"),t("span",{class:"token punctuation"},"["),e("key"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),e("\n result"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"push"),t("span",{class:"token punctuation"},"("),e("value"),t("span",{class:"token punctuation"},","),e(" strings"),t("span",{class:"token punctuation"},"["),e("i "),t("span",{class:"token operator"},"+"),e(),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"return"),e(" result"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"join"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"''"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token keyword"},"const"),e(" t1Closure "),t("span",{class:"token operator"},"="),e(" template"),t("span",{class:"token template-string"},[t("span",{class:"token template-punctuation string"},"`"),t("span",{class:"token interpolation"},[t("span",{class:"token interpolation-punctuation punctuation"},"${"),t("span",{class:"token number"},"0"),t("span",{class:"token interpolation-punctuation punctuation"},"}")]),t("span",{class:"token interpolation"},[t("span",{class:"token interpolation-punctuation punctuation"},"${"),t("span",{class:"token number"},"1"),t("span",{class:"token interpolation-punctuation punctuation"},"}")]),t("span",{class:"token interpolation"},[t("span",{class:"token interpolation-punctuation punctuation"},"${"),t("span",{class:"token number"},"0"),t("span",{class:"token interpolation-punctuation punctuation"},"}")]),t("span",{class:"token string"},"!"),t("span",{class:"token template-punctuation string"},"`")]),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token function"},"t1Closure"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'Y'"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'A'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},'// "YAY!"'),e("\n"),t("span",{class:"token keyword"},"const"),e(" t2Closure "),t("span",{class:"token operator"},"="),e(" template"),t("span",{class:"token template-string"},[t("span",{class:"token template-punctuation string"},"`"),t("span",{class:"token interpolation"},[t("span",{class:"token interpolation-punctuation punctuation"},"${"),t("span",{class:"token number"},"0"),t("span",{class:"token interpolation-punctuation punctuation"},"}")]),t("span",{class:"token string"}," "),t("span",{class:"token interpolation"},[t("span",{class:"token interpolation-punctuation punctuation"},"${"),t("span",{class:"token string"},"'foo'"),t("span",{class:"token interpolation-punctuation punctuation"},"}")]),t("span",{class:"token string"},"!"),t("span",{class:"token template-punctuation string"},"`")]),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token function"},"t2Closure"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'Hello'"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token punctuation"},"{"),e(" foo"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token string"},"'World'"),e(),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},'// "Hello World!"'),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br")])],-1),vn=t("ul",null,[t("li",null,"编译模板(小型模板引擎)")],-1),xn=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token function"},"compile"),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"template"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"const"),e(" evalExpr "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token regex"},[t("span",{class:"token regex-delimiter"},"/"),t("span",{class:"token regex-source language-regex"},"<%=(.+?)%>"),t("span",{class:"token regex-delimiter"},"/"),t("span",{class:"token regex-flags"},"g")]),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"const"),e(" expr "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token regex"},[t("span",{class:"token regex-delimiter"},"/"),t("span",{class:"token regex-source language-regex"},"<%([\\s\\S]+?)%>"),t("span",{class:"token regex-delimiter"},"/"),t("span",{class:"token regex-flags"},"g")]),t("span",{class:"token punctuation"},";"),e("\n\n template "),t("span",{class:"token operator"},"="),e(" template\n "),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"replace"),t("span",{class:"token punctuation"},"("),e("evalExpr"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'`); \\n echo( $1 ); \\n echo(`'"),t("span",{class:"token punctuation"},")"),e("\n "),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"replace"),t("span",{class:"token punctuation"},"("),e("expr"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'`); \\n $1 \\n echo(`'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n template "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token string"},"'echo(`'"),e(),t("span",{class:"token operator"},"+"),e(" template "),t("span",{class:"token operator"},"+"),e(),t("span",{class:"token string"},"'`);'"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token keyword"},"const"),e(" script "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token template-string"},[t("span",{class:"token template-punctuation string"},"`"),t("span",{class:"token string"},'(function parse(data){\n var output = "";\n\n function echo(html){\n output += html;\n }\n\n '),t("span",{class:"token interpolation"},[t("span",{class:"token interpolation-punctuation punctuation"},"${"),e("template"),t("span",{class:"token interpolation-punctuation punctuation"},"}")]),t("span",{class:"token string"},"\n\n return output;\n })"),t("span",{class:"token template-punctuation string"},"`")]),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token keyword"},"return"),e(" script"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token keyword"},"const"),e(" template "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token template-string"},[t("span",{class:"token template-punctuation string"},"`"),t("span",{class:"token string"},"\n\n <% for(var i=0; i < data.supplies.length; i++) { %>\n <%= data.supplies[i] %> \n <% } %>\n \n"),t("span",{class:"token template-punctuation string"},"`")]),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token keyword"},"const"),e(" parse "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token function"},"compile"),t("span",{class:"token punctuation"},"("),e("template"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\ndiv"),t("span",{class:"token punctuation"},"."),e("innerHTML "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token function"},"parse"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"{"),e(" supplies"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token punctuation"},"["),t("span",{class:"token string"},"'broom'"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'mop'"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'cleaner'"),t("span",{class:"token punctuation"},"]"),e(),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token comment"},"// => "),e("\n"),t("span",{class:"token comment"},"// => broom "),e("\n"),t("span",{class:"token comment"},"// => mop "),e("\n"),t("span",{class:"token comment"},"// => cleaner "),e("\n"),t("span",{class:"token comment"},"// => "),e("\n\n"),t("span",{class:"token comment"},"// 下面的hashTemplate函数"),e("\n"),t("span",{class:"token comment"},"// 是一个自定义的模板处理函数"),e("\n"),t("span",{class:"token keyword"},"const"),e(" libraryHtml "),t("span",{class:"token operator"},"="),e(" hashTemplate"),t("span",{class:"token template-string"},[t("span",{class:"token template-punctuation string"},"`"),t("span",{class:"token string"},"\n \n #for book in "),t("span",{class:"token interpolation"},[t("span",{class:"token interpolation-punctuation punctuation"},"${"),e("myBooks"),t("span",{class:"token interpolation-punctuation punctuation"},"}")]),t("span",{class:"token string"},"\n #{book.title} by #{book.author} \n #end\n \n"),t("span",{class:"token template-punctuation string"},"`")]),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br"),t("span",{class:"line-number"},"25"),t("br"),t("span",{class:"line-number"},"26"),t("br"),t("span",{class:"line-number"},"27"),t("br"),t("span",{class:"line-number"},"28"),t("br"),t("span",{class:"line-number"},"29"),t("br"),t("span",{class:"line-number"},"30"),t("br"),t("span",{class:"line-number"},"31"),t("br"),t("span",{class:"line-number"},"32"),t("br"),t("span",{class:"line-number"},"33"),t("br"),t("span",{class:"line-number"},"34"),t("br"),t("span",{class:"line-number"},"35"),t("br"),t("span",{class:"line-number"},"36"),t("br"),t("span",{class:"line-number"},"37"),t("br"),t("span",{class:"line-number"},"38"),t("br"),t("span",{class:"line-number"},"39"),t("br"),t("span",{class:"line-number"},"40"),t("br"),t("span",{class:"line-number"},"41"),t("br"),t("span",{class:"line-number"},"42"),t("br"),t("span",{class:"line-number"},"43"),t("br"),t("span",{class:"line-number"},"44"),t("br"),t("span",{class:"line-number"},"45"),t("br"),t("span",{class:"line-number"},"46"),t("br"),t("span",{class:"line-number"},"47"),t("br"),t("span",{class:"line-number"},"48"),t("br"),t("span",{class:"line-number"},"49"),t("br")])],-1),jn=t("ul",null,[t("li",null,"国际化处理")],-1),Sn=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[e("i18n"),t("span",{class:"token template-string"},[t("span",{class:"token template-punctuation string"},"`"),t("span",{class:"token string"},"Welcome to "),t("span",{class:"token interpolation"},[t("span",{class:"token interpolation-punctuation punctuation"},"${"),e("siteName"),t("span",{class:"token interpolation-punctuation punctuation"},"}")]),t("span",{class:"token string"},", you are visitor number "),t("span",{class:"token interpolation"},[t("span",{class:"token interpolation-punctuation punctuation"},"${"),e("visitorNumber"),t("span",{class:"token interpolation-punctuation punctuation"},"}")]),t("span",{class:"token string"},"!"),t("span",{class:"token template-punctuation string"},"`")]),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token comment"},'// "欢迎访问xxx,您是第xxxx位访问者!"'),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br")])],-1),Tn=t("ul",null,[t("li",null,"XSS 攻击")],-1),Pn=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(" message "),t("span",{class:"token operator"},"="),e(" SaferHTML"),t("span",{class:"token template-string"},[t("span",{class:"token template-punctuation string"},"`"),t("span",{class:"token string"},""),t("span",{class:"token interpolation"},[t("span",{class:"token interpolation-punctuation punctuation"},"${"),e("sender"),t("span",{class:"token interpolation-punctuation punctuation"},"}")]),t("span",{class:"token string"}," has sent you a message.
"),t("span",{class:"token template-punctuation string"},"`")]),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token function"},"SaferHTML"),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"templateData"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"let"),e(" s "),t("span",{class:"token operator"},"="),e(" templateData"),t("span",{class:"token punctuation"},"["),t("span",{class:"token number"},"0"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"for"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"let"),e(" i "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},";"),e(" i "),t("span",{class:"token operator"},"<"),e(" arguments"),t("span",{class:"token punctuation"},"."),e("length"),t("span",{class:"token punctuation"},";"),e(" i"),t("span",{class:"token operator"},"++"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"const"),e(" arg "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token function"},"String"),t("span",{class:"token punctuation"},"("),e("arguments"),t("span",{class:"token punctuation"},"["),e("i"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token comment"},"// Escape special characters in the substitution."),e("\n s "),t("span",{class:"token operator"},"+="),e(" arg"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"replace"),t("span",{class:"token punctuation"},"("),t("span",{class:"token regex"},[t("span",{class:"token regex-delimiter"},"/"),t("span",{class:"token regex-source language-regex"},"&"),t("span",{class:"token regex-delimiter"},"/"),t("span",{class:"token regex-flags"},"g")]),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'&'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"replace"),t("span",{class:"token punctuation"},"("),t("span",{class:"token regex"},[t("span",{class:"token regex-delimiter"},"/"),t("span",{class:"token regex-source language-regex"},"<"),t("span",{class:"token regex-delimiter"},"/"),t("span",{class:"token regex-flags"},"g")]),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'<'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"replace"),t("span",{class:"token punctuation"},"("),t("span",{class:"token regex"},[t("span",{class:"token regex-delimiter"},"/"),t("span",{class:"token regex-source language-regex"},">"),t("span",{class:"token regex-delimiter"},"/"),t("span",{class:"token regex-flags"},"g")]),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'>'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token comment"},"// Don't escape special characters in the template."),e("\n s "),t("span",{class:"token operator"},"+="),e(" templateData"),t("span",{class:"token punctuation"},"["),e("i"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token keyword"},"return"),e(" s"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br")])],-1),Cn=t("ul",null,[t("li",null,"运行代码")],-1),In=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[e("jsx"),t("span",{class:"token template-string"},[t("span",{class:"token template-punctuation string"},"`"),t("span",{class:"token string"},"\n \n \n "),t("span",{class:"token interpolation"},[t("span",{class:"token interpolation-punctuation punctuation"},"${"),t("span",{class:"token keyword"},"this"),t("span",{class:"token punctuation"},"."),e("state"),t("span",{class:"token punctuation"},"."),e("value"),t("span",{class:"token interpolation-punctuation punctuation"},"}")]),t("span",{class:"token string"},"\n
\n"),t("span",{class:"token template-punctuation string"},"`")]),t("span",{class:"token punctuation"},";"),e("\n\njava"),t("span",{class:"token template-string"},[t("span",{class:"token template-punctuation string"},"`"),t("span",{class:"token string"},"\nclass HelloWorldApp {\n public static void main(String[] args) {\n System.out.println(“Hello World!”); // Display the string.\n }\n}\n"),t("span",{class:"token template-punctuation string"},"`")]),t("span",{class:"token punctuation"},";"),e("\nHelloWorldApp"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"main"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br")])],-1),_n=t("h3",{id:"number"},[t("a",{class:"header-anchor",href:"#number","aria-hidden":"true"},"#"),e(" Number")],-1),An=t("ul",null,[t("li",null,"0bxxx/0Bxxx"),t("li",null,"0oxxx/0Oxxx"),t("li",null,"Number.isFinite()/isNaN()/parseInt()/parseFloat()/isInteger()/isSafeInteger()"),t("li",null,[e("Number.EPSILON/"),t("code",null,"MAX_SAFE_INTEGER"),e("/"),t("code",null,"MIN_SAFE_INTEGER")]),t("li",null,"** 指数运算符"),t("li",null,"BigInt")],-1),En=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(" a "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token number"},"2172141653"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token keyword"},"const"),e(" b "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token number"},"15346349309"),t("span",{class:"token punctuation"},";"),e("\na "),t("span",{class:"token operator"},"*"),e(" b"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token comment"},"// => 33334444555566670000"),e("\n"),t("span",{class:"token function"},"BigInt"),t("span",{class:"token punctuation"},"("),e("a"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"*"),e(),t("span",{class:"token function"},"BigInt"),t("span",{class:"token punctuation"},"("),e("b"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token comment"},"// => 33334444555566667777n"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br")])],-1),On=t("h3",{id:"internationalization"},[t("a",{class:"header-anchor",href:"#internationalization","aria-hidden":"true"},"#"),e(" Internationalization")],-1),Mn=t("h4",{id:"number-i18n"},[t("a",{class:"header-anchor",href:"#number-i18n","aria-hidden":"true"},"#"),e(" Number i18n")],-1),Dn=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(" nfFrench "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"new"),e(),t("span",{class:"token class-name"},[e("Intl"),t("span",{class:"token punctuation"},"."),e("NumberFormat")]),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'fr'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\nnf"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"format"),t("span",{class:"token punctuation"},"("),t("span",{class:"token number"},"12345678901234567890n"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token comment"},"// => 12 345 678 901 234 567 890"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br")])],-1),Ln=t("h4",{id:"string-i18n"},[t("a",{class:"header-anchor",href:"#string-i18n","aria-hidden":"true"},"#"),e(" String i18n")],-1),Wn=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(" lfEnglish "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"new"),e(),t("span",{class:"token class-name"},[e("Intl"),t("span",{class:"token punctuation"},"."),e("ListFormat")]),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'en'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token comment"},"// const lfEnglish = new Intl.ListFormat('en', { type: 'disjunction' }); => 'or'"),e("\n\nlfEnglish"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"format"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"["),t("span",{class:"token string"},"'Ada'"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'Grace'"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'Ida'"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token comment"},"// => 'Ada, Grace and Ida'"),e("\n\n"),t("span",{class:"token keyword"},"const"),e(" formatter "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"new"),e(),t("span",{class:"token class-name"},[e("Intl"),t("span",{class:"token punctuation"},"."),e("ListFormat")]),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'en'"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token punctuation"},"{"),e("\n style"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token string"},"'long'"),t("span",{class:"token punctuation"},","),e("\n type"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token string"},"'conjunction'"),t("span",{class:"token punctuation"},","),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\nconsole"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),e("formatter"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"format"),t("span",{class:"token punctuation"},"("),e("vehicles"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token comment"},'// expected output: "Motorcycle, Bus, and Car"'),e("\n\n"),t("span",{class:"token keyword"},"const"),e(" formatter2 "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"new"),e(),t("span",{class:"token class-name"},[e("Intl"),t("span",{class:"token punctuation"},"."),e("ListFormat")]),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'de'"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token punctuation"},"{"),e("\n style"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token string"},"'short'"),t("span",{class:"token punctuation"},","),e("\n type"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token string"},"'disjunction'"),t("span",{class:"token punctuation"},","),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\nconsole"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),e("formatter2"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"format"),t("span",{class:"token punctuation"},"("),e("vehicles"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token comment"},'// expected output: "Motorcycle, Bus oder Car"'),e("\n\n"),t("span",{class:"token keyword"},"const"),e(" formatter3 "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"new"),e(),t("span",{class:"token class-name"},[e("Intl"),t("span",{class:"token punctuation"},"."),e("ListFormat")]),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'en'"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token punctuation"},"{"),e(" style"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token string"},"'narrow'"),t("span",{class:"token punctuation"},","),e(" type"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token string"},"'unit'"),e(),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\nconsole"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),e("formatter3"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"format"),t("span",{class:"token punctuation"},"("),e("vehicles"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token comment"},'// expected output: "Motorcycle Bus Car"'),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br")])],-1),Nn=t("h4",{id:"time-i18n"},[t("a",{class:"header-anchor",href:"#time-i18n","aria-hidden":"true"},"#"),e(" Time i18n")],-1),Rn=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(" rtfEnglish "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"new"),e(),t("span",{class:"token class-name"},[e("Intl"),t("span",{class:"token punctuation"},"."),e("RelativeTimeFormat")]),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'en'"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token punctuation"},"{"),e(" numeric"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token string"},"'auto'"),e(),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\nrtf"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"format"),t("span",{class:"token punctuation"},"("),t("span",{class:"token operator"},"-"),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'day'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// 'yesterday'"),e("\nrtf"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"format"),t("span",{class:"token punctuation"},"("),t("span",{class:"token number"},"0"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'day'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// 'today'"),e("\nrtf"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"format"),t("span",{class:"token punctuation"},"("),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'day'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// 'tomorrow'"),e("\nrtf"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"format"),t("span",{class:"token punctuation"},"("),t("span",{class:"token operator"},"-"),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'week'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// 'last week'"),e("\nrtf"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"format"),t("span",{class:"token punctuation"},"("),t("span",{class:"token number"},"0"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'week'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// 'this week'"),e("\nrtf"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"format"),t("span",{class:"token punctuation"},"("),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'week'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// 'next week'"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br")])],-1),zn=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(" dtfEnglish "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"new"),e(),t("span",{class:"token class-name"},[e("Intl"),t("span",{class:"token punctuation"},"."),e("DateTimeFormat")]),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'en'"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token punctuation"},"{"),e("\n year"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token string"},"'numeric'"),t("span",{class:"token punctuation"},","),e("\n month"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token string"},"'long'"),t("span",{class:"token punctuation"},","),e("\n day"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token string"},"'numeric'"),t("span",{class:"token punctuation"},","),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\ndtfEnglish"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"format"),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"new"),e(),t("span",{class:"token class-name"},"Date"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// => 'May 7, 2019'"),e("\ndtfEnglish"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"formatRange"),t("span",{class:"token punctuation"},"("),e("start"),t("span",{class:"token punctuation"},","),e(" end"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// => 'May 7 - 9, 2019'"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br")])],-1),Bn=t("h3",{id:"array"},[t("a",{class:"header-anchor",href:"#array","aria-hidden":"true"},"#"),e(" Array")],-1),Fn=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token punctuation"},"["),t("span",{class:"token operator"},"..."),t("span",{class:"token function"},"Array"),t("span",{class:"token punctuation"},"("),t("span",{class:"token number"},"5"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"keys"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// => [0, 1, 2, 3, 4]"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br")])],-1),Hn=t("h4",{id:"array-includes"},[t("a",{class:"header-anchor",href:"#array-includes","aria-hidden":"true"},"#"),e(" Array Includes")],-1),qn=t("p",null,[e("no more "),t("code",null,"indexOf() > -1")],-1),Jn=t("h4",{id:"array-from"},[t("a",{class:"header-anchor",href:"#array-from","aria-hidden":"true"},"#"),e(" Array From")],-1),Un=t("p",null,[e("强大的"),t("strong",null,"函数式"),e("方法")],-1),Gn=t("ul",null,[t("li",null,"伪数组对象(array-like object)"),t("li",null,"可枚举对象(iterable object)"),t("li",null,"克隆数组"),t("li",null,"map 函数")],-1),$n=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token comment"},"// Set"),e("\n"),t("span",{class:"token comment"},"// Map"),e("\n\n"),t("span",{class:"token comment"},"// NodeList对象"),e("\n"),t("span",{class:"token keyword"},"const"),e(" ps "),t("span",{class:"token operator"},"="),e(" document"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"querySelectorAll"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'p'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\nArray"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"from"),t("span",{class:"token punctuation"},"("),e("ps"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"forEach"),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"p"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),e("p"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token comment"},"// arguments对象"),e("\n"),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token function"},"foo"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"const"),e(" args "),t("span",{class:"token operator"},"="),e(" Array"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"from"),t("span",{class:"token punctuation"},"("),e("arguments"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token comment"},"// ..."),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\nArray"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"from"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'hello'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token comment"},"// => ['h', 'e', 'l', 'l', 'o']"),e("\n\n"),t("span",{class:"token keyword"},"const"),e(" namesSet "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"new"),e(),t("span",{class:"token class-name"},"Set"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"["),t("span",{class:"token string"},"'a'"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'b'"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\nArray"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"from"),t("span",{class:"token punctuation"},"("),e("namesSet"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// ['a', 'b']"),e("\n\n"),t("span",{class:"token comment"},"// 克隆数组"),e("\nArray"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"from"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"["),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"2"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"3"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token comment"},"// => [1, 2, 3]"),e("\n\nArray"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"from"),t("span",{class:"token punctuation"},"("),e("arrayLike"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"x"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(" x "),t("span",{class:"token operator"},"*"),e(" x"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token comment"},"// =>"),e("\nArray"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"from"),t("span",{class:"token punctuation"},"("),e("arrayLike"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"map"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"x"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(" x "),t("span",{class:"token operator"},"*"),e(" x"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\nArray"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"from"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"["),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"2"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"3"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"x"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(" x "),t("span",{class:"token operator"},"*"),e(" x"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token comment"},"// [1, 4, 9]"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br"),t("span",{class:"line-number"},"25"),t("br"),t("span",{class:"line-number"},"26"),t("br"),t("span",{class:"line-number"},"27"),t("br"),t("span",{class:"line-number"},"28"),t("br"),t("span",{class:"line-number"},"29"),t("br"),t("span",{class:"line-number"},"30"),t("br"),t("span",{class:"line-number"},"31"),t("br")])],-1),Vn=t("h4",{id:"array-copywithin"},[t("a",{class:"header-anchor",href:"#array-copywithin","aria-hidden":"true"},"#"),e(" Array CopyWithin")],-1),Kn=t("p",null,"替换数组元素,修改原数组",-1),Yn=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token class-name"},"Array"),t("span",{class:"token punctuation"},"."),e("prototype"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"copyWithin"),t("span",{class:"token punctuation"},"("),e("target"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token punctuation"},"("),e("start "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token number"},"0"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token punctuation"},"("),e("end "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"this"),t("span",{class:"token punctuation"},"."),e("length"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br")])],-1),Xn=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token punctuation"},"["),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"2"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"3"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"4"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"5"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"copyWithin"),t("span",{class:"token punctuation"},"("),t("span",{class:"token number"},"0"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"3"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},"["),e("\n "),t("span",{class:"token comment"},"// => [4, 5, 3, 4, 5]"),e("\n\n "),t("span",{class:"token comment"},"// -2相当于3号位,-1相当于4号位"),e("\n "),t("span",{class:"token punctuation"},"("),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"2"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"3"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"4"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"5"),t("span",{class:"token punctuation"},")"),e("\n"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"copyWithin"),t("span",{class:"token punctuation"},"("),t("span",{class:"token number"},"0"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token operator"},"-"),t("span",{class:"token number"},"2"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token operator"},"-"),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token comment"},"// => [4, 2, 3, 4, 5]"),e("\n\n"),t("span",{class:"token comment"},"// 将2号位到数组结束,复制到0号位"),e("\n"),t("span",{class:"token keyword"},"const"),e(" i32a "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"new"),e(),t("span",{class:"token class-name"},"Int32Array"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"["),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"2"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"3"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"4"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"5"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\ni32a"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"copyWithin"),t("span",{class:"token punctuation"},"("),t("span",{class:"token number"},"0"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"2"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token comment"},"// => Int32Array [3, 4, 5, 4, 5]"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br")])],-1),Zn=t("h4",{id:"array-find"},[t("a",{class:"header-anchor",href:"#array-find","aria-hidden":"true"},"#"),e(" Array Find")],-1),Qn=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[e("arr"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"find"),t("span",{class:"token punctuation"},"("),e("fn"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\narr"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"findIndex"),t("span",{class:"token punctuation"},"("),e("fn"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br")])],-1),ns=t("h4",{id:"array-flat"},[t("a",{class:"header-anchor",href:"#array-flat","aria-hidden":"true"},"#"),e(" Array Flat")],-1),ss=t("p",null,[t("code",null,"[2, [2, 2]] => [2, 2, 2]")],-1),as=t("h4",{id:"array-flatmap"},[t("a",{class:"header-anchor",href:"#array-flatmap","aria-hidden":"true"},"#"),e(" Array FlatMap")],-1),ts=t("p",null,"map + flat",-1),es=t("h4",{id:"array-map"},[t("a",{class:"header-anchor",href:"#array-map","aria-hidden":"true"},"#"),e(" Array Map")],-1),os=t("p",null,"相当于 Haskell 中的 List Map",-1),cs=t("h4",{id:"array-filter"},[t("a",{class:"header-anchor",href:"#array-filter","aria-hidden":"true"},"#"),e(" Array Filter")],-1),ls=t("p",null,"相当于 Haskell 中的 List Filter",-1),ps=t("h4",{id:"array-reduce"},[t("a",{class:"header-anchor",href:"#array-reduce","aria-hidden":"true"},"#"),e(" Array Reduce")],-1),us=t("p",null,"相当于 Haskell 中的 fold",-1),rs=t("h4",{id:"array-sort"},[t("a",{class:"header-anchor",href:"#array-sort","aria-hidden":"true"},"#"),e(" Array Sort")],-1),is=t("h4",{id:"spread-array"},[t("a",{class:"header-anchor",href:"#spread-array","aria-hidden":"true"},"#"),e(" Spread Array")],-1),ks=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[e("arr2"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"push"),t("span",{class:"token punctuation"},"("),t("span",{class:"token operator"},"..."),e("arr1"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br")])],-1),bs=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"var"),e(" obj "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"{"),e(" x"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},","),e(" y"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token number"},"2"),t("span",{class:"token punctuation"},","),e(" z"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token number"},"3"),e(),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n\nobj"),t("span",{class:"token punctuation"},"["),e("Symbol"),t("span",{class:"token punctuation"},"."),e("iterator"),t("span",{class:"token punctuation"},"]"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"function"),t("span",{class:"token operator"},"*"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"yield"),e(),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"yield"),e(),t("span",{class:"token number"},"2"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"yield"),e(),t("span",{class:"token number"},"3"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token punctuation"},"["),t("span",{class:"token operator"},"..."),e("obj"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// print [1, 2, 3]"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br")])],-1),ms=t("h3",{id:"new-object-api"},[t("a",{class:"header-anchor",href:"#new-object-api","aria-hidden":"true"},"#"),e(" New Object API")],-1),ds=t("ul",null,[t("li",null,"Object.keys()"),t("li",null,"Object.values()"),t("li",null,"Object.entries()"),t("li",null,"Object.fromEntries()")],-1),gs=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(" score "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"{"),e("\n saber"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token number"},"42"),t("span",{class:"token punctuation"},","),e("\n todd"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token number"},"19"),t("span",{class:"token punctuation"},","),e("\n ken"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token number"},"4"),t("span",{class:"token punctuation"},","),e("\n gan"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token number"},"41"),t("span",{class:"token punctuation"},","),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n\nObject"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"keys"),t("span",{class:"token punctuation"},"("),e("score"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"map"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"k"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(" score"),t("span",{class:"token punctuation"},"["),e("k"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token comment"},"// => [ 42, 19, 4, 41 ]"),e("\n\nObject"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"values"),t("span",{class:"token punctuation"},"("),e("score"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token comment"},"// => [ 42, 19, 4, 41 ]"),e("\n\nObject"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"entries"),t("span",{class:"token punctuation"},"("),e("score"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token comment"},"/**\n * =>\n * [\n * [ 'saber', 42 ],\n * [ 'todd', 19 ],\n * [ 'ken', 4 ],\n * [ 'gan', 41 ],\n * ]\n */"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br")])],-1),hs=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(" object "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"{"),e(" x"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token number"},"42"),t("span",{class:"token punctuation"},","),e(" y"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token number"},"50"),t("span",{class:"token punctuation"},","),e(" abc"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token number"},"9001"),e(),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token keyword"},"const"),e(" result "),t("span",{class:"token operator"},"="),e(" Object"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"fromEntries"),t("span",{class:"token punctuation"},"("),e("\n Object"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"entries"),t("span",{class:"token punctuation"},"("),e("object"),t("span",{class:"token punctuation"},")"),e("\n "),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"filter"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},[t("span",{class:"token punctuation"},"["),e("key"),t("span",{class:"token punctuation"},","),e(" value"),t("span",{class:"token punctuation"},"]")]),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(" key"),t("span",{class:"token punctuation"},"."),e("length "),t("span",{class:"token operator"},"==="),e(),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},")"),e("\n "),t("span",{class:"token function"},"map"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},[t("span",{class:"token punctuation"},"["),e("key"),t("span",{class:"token punctuation"},","),e(" value"),t("span",{class:"token punctuation"},"]")]),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"["),e("key"),t("span",{class:"token punctuation"},","),e(" value "),t("span",{class:"token operator"},"*"),e(),t("span",{class:"token number"},"2"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},")"),e("\n"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br")])],-1),fs=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(" map "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"new"),e(),t("span",{class:"token class-name"},"Map"),t("span",{class:"token punctuation"},"("),e("Object"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"entries"),t("span",{class:"token punctuation"},"("),e("object"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token keyword"},"const"),e(" objectCopy "),t("span",{class:"token operator"},"="),e(" Object"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"fromEntries"),t("span",{class:"token punctuation"},"("),e("map"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br")])],-1),ys=t("h3",{id:"arrow-function"},[t("a",{class:"header-anchor",href:"#arrow-function","aria-hidden":"true"},"#"),e(" Arrow Function")],-1),ws=t("ul",null,[t("li",null,"no thisArgs binding"),t("li",null,"no arguments binding"),t("li",null,"no prototype binding"),t("li",null,[e("no suited for "),t("code",null,"New"),e(" constructor")]),t("li",null,[e("not suited as methods of plain object ("),t("code",null,"this"),e(" in arrow function would be refer to "),t("code",null,"window"),e(")")])],-1),vs=t("h3",{id:"modules"},[t("a",{class:"header-anchor",href:"#modules","aria-hidden":"true"},"#"),e(" Modules")],-1),xs=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"import"),e(),t("span",{class:"token punctuation"},"{"),e(" lastName "),t("span",{class:"token keyword"},"as"),e(" surname "),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token keyword"},"from"),e(),t("span",{class:"token string"},"'./profile.js'"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br")])],-1),js=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"export"),e(),t("span",{class:"token keyword"},"const"),e(" firstName "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token string"},"'Michael'"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token keyword"},"export"),e(),t("span",{class:"token keyword"},"const"),e(" lastName "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token string"},"'Jackson'"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token keyword"},"export"),e(),t("span",{class:"token keyword"},"const"),e(" year "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token number"},"1958"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br")])],-1),Ss=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token comment"},"// profile.js"),e("\n"),t("span",{class:"token keyword"},"const"),e(" firstName "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token string"},"'Michael'"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token keyword"},"const"),e(" lastName "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token string"},"'Jackson'"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token keyword"},"const"),e(" year "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token number"},"1958"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token keyword"},"export"),e(),t("span",{class:"token punctuation"},"{"),e(" firstName"),t("span",{class:"token punctuation"},","),e(" lastName"),t("span",{class:"token punctuation"},","),e(" year "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br")])],-1),Ts=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token comment"},"// 接口改名"),e("\n"),t("span",{class:"token keyword"},"export"),e(),t("span",{class:"token punctuation"},"{"),e(" foo "),t("span",{class:"token keyword"},"as"),e(" myFoo "),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token keyword"},"from"),e(),t("span",{class:"token string"},"'my_module'"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token comment"},"// 整体输出"),e("\n"),t("span",{class:"token keyword"},"export"),e(),t("span",{class:"token operator"},"*"),e(),t("span",{class:"token keyword"},"from"),e(),t("span",{class:"token string"},"'my_module'"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br")])],-1),Ps=t("h4",{id:"commonjs-vs-es6-module"},[t("a",{class:"header-anchor",href:"#commonjs-vs-es6-module","aria-hidden":"true"},"#"),e(" CommonJS vs ES6 Module")],-1),Cs=t("ul",null,[t("li",null,"CommonJS 模块是运行时加载,ES6 模块是编译时输出接口."),t("li",null,"CommonJS 是单个值导出, ES6 Module 可以导出多个."),t("li",null,"CommonJS 是动态语法可以写在判断里, ES6 Module 静态语法只能写在顶层."),t("li",null,[e("CommonJS 的 "),t("code",null,"this"),e(" 是当前模块, ES6 Module 的 "),t("code",null,"this"),e(" 是 "),t("code",null,"undefined"),e(".")]),t("li",null,[e("CommonJS 模块输出的是一个值的拷贝, ES6 模块 Export 分 3 种情况: "),t("ol",null,[t("li",null,[t("code",null,"export default xxx"),e("输出"),t("code",null,"value"),e(",")]),t("li",null,[t("code",null,"export xxx"),e("输出"),t("code",null,"reference"),e(". "),t("code",null,"defaultThing"),e(" and "),t("code",null,"anotherDefaultThing"),e(" shows ES6 export default value, "),t("code",null,"importedThing"),e(" and "),t("code",null,"module.thing"),e(" shows ES6 export normal reference, and "),t("code",null,"Destructuring Behavior"),e(" create a brand new value.")]),t("li",null,[e("function/class special case: "),t("code",null,"export default function/class thing() {}; // function/class expressions"),e(" export default reference, "),t("code",null,"function/class thing() {}; export default thing; // function/class statements"),e(" export default value.")])])])],-1),Is=t("p",null,"Export default value:",-1),_s=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token comment"},"// module.js"),e("\n"),t("span",{class:"token keyword"},"let"),e(" thing "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token string"},"'initial'"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token keyword"},"export"),e(),t("span",{class:"token punctuation"},"{"),e(" thing "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token keyword"},"export"),e(),t("span",{class:"token keyword"},"default"),e(" thing"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token function"},"setTimeout"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n thing "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token string"},"'changed'"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"500"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token comment"},"// main.js"),e("\n"),t("span",{class:"token keyword"},"import"),e(),t("span",{class:"token punctuation"},"{"),e(" thing"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token keyword"},"default"),e(),t("span",{class:"token keyword"},"as"),e(" defaultThing "),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token keyword"},"from"),e(),t("span",{class:"token string"},"'./module.js'"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token keyword"},"import"),e(" anotherDefaultThing "),t("span",{class:"token keyword"},"from"),e(),t("span",{class:"token string"},"'./module.js'"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token function"},"setTimeout"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),e("thing"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},'// "changed"'),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),e("defaultThing"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},'// "initial"'),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),e("anotherDefaultThing"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},'// "initial"'),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"1000"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br")])],-1),As=t("p",null,"Export normal reference:",-1),Es=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token comment"},"// module.js"),e("\n"),t("span",{class:"token keyword"},"export"),e(),t("span",{class:"token keyword"},"let"),e(" thing "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token string"},"'initial'"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token function"},"setTimeout"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n thing "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token string"},"'changed'"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"500"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token comment"},"// main.js"),e("\n"),t("span",{class:"token keyword"},"import"),e(),t("span",{class:"token punctuation"},"{"),e(" thing "),t("span",{class:"token keyword"},"as"),e(" importedThing "),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token keyword"},"from"),e(),t("span",{class:"token string"},"'./module.js'"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token keyword"},"const"),e(" module "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"await"),e(),t("span",{class:"token keyword"},"import"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'./module.js'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token keyword"},"let"),e(),t("span",{class:"token punctuation"},"{"),e(" thing "),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"await"),e(),t("span",{class:"token keyword"},"import"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'./module.js'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// Destructuring Behavior"),e("\n\n"),t("span",{class:"token function"},"setTimeout"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),e("importedThing"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},'// "changed"'),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),e("module"),t("span",{class:"token punctuation"},"."),e("thing"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},'// "changed"'),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),e("thing"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},'// "initial"'),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"1000"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br")])],-1),Os=t("p",null,"To sum up:",-1),Ms=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token comment"},"// These give you a live reference to the exported thing(s):"),e("\n"),t("span",{class:"token keyword"},"import"),e(),t("span",{class:"token punctuation"},"{"),e(" thing "),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token keyword"},"from"),e(),t("span",{class:"token string"},"'./module.js'"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token keyword"},"import"),e(),t("span",{class:"token punctuation"},"{"),e(" thing "),t("span",{class:"token keyword"},"as"),e(" otherName "),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token keyword"},"from"),e(),t("span",{class:"token string"},"'./module.js'"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token keyword"},"import"),e(),t("span",{class:"token operator"},"*"),e(),t("span",{class:"token keyword"},"as"),e(" module "),t("span",{class:"token keyword"},"from"),e(),t("span",{class:"token string"},"'./module.js'"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token keyword"},"const"),e(" module "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"await"),e(),t("span",{class:"token keyword"},"import"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'./module.js'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token comment"},"// This assigns the current value of the export to a new identifier:"),e("\n"),t("span",{class:"token keyword"},"let"),e(),t("span",{class:"token punctuation"},"{"),e(" thing "),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"await"),e(),t("span",{class:"token keyword"},"import"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'./module.js'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token comment"},"// These export a live reference:"),e("\n"),t("span",{class:"token keyword"},"export"),e(),t("span",{class:"token punctuation"},"{"),e(" thing "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token keyword"},"export"),e(),t("span",{class:"token punctuation"},"{"),e(" thing "),t("span",{class:"token keyword"},"as"),e(" otherName "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token keyword"},"export"),e(),t("span",{class:"token punctuation"},"{"),e(" thing "),t("span",{class:"token keyword"},"as"),e(),t("span",{class:"token keyword"},"default"),e(),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token keyword"},"export"),e(),t("span",{class:"token keyword"},"default"),e(),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token function"},"thing"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),t("span",{class:"token punctuation"},"}"),e("\n"),t("span",{class:"token comment"},"// These export the current value:"),e("\n"),t("span",{class:"token keyword"},"export"),e(),t("span",{class:"token keyword"},"default"),e(" thing"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token keyword"},"export"),e(),t("span",{class:"token keyword"},"default"),e(),t("span",{class:"token string"},"'hello!'"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br")])],-1),Ds=t("h3",{id:"class-语法糖"},[t("a",{class:"header-anchor",href:"#class-语法糖","aria-hidden":"true"},"#"),e(" Class 语法糖")],-1),Ls=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"class"),e(),t("span",{class:"token class-name"},"A"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token function"},"constructor"),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"value"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"this"),t("span",{class:"token punctuation"},"."),e("val "),t("span",{class:"token operator"},"="),e(" value"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token keyword"},"class"),e(),t("span",{class:"token class-name"},"B"),e(),t("span",{class:"token keyword"},"extends"),e(),t("span",{class:"token class-name"},"A"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token function"},"constructor"),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"value"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"super"),t("span",{class:"token punctuation"},"("),e("value"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token keyword"},"const"),e(" b "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"new"),e(),t("span",{class:"token class-name"},"B"),t("span",{class:"token punctuation"},"("),t("span",{class:"token number"},"6"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\nconsole"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),t("span",{class:"token constant"},"B"),t("span",{class:"token punctuation"},"."),e("__proto__ "),t("span",{class:"token operator"},"==="),e(),t("span",{class:"token constant"},"A"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\nconsole"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),t("span",{class:"token class-name"},"B"),t("span",{class:"token punctuation"},"."),e("prototype"),t("span",{class:"token punctuation"},"."),e("constructor "),t("span",{class:"token operator"},"==="),e(),t("span",{class:"token constant"},"B"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\nconsole"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),t("span",{class:"token class-name"},"B"),t("span",{class:"token punctuation"},"."),e("prototype"),t("span",{class:"token punctuation"},"."),e("__proto__ "),t("span",{class:"token operator"},"==="),e(),t("span",{class:"token class-name"},"A"),t("span",{class:"token punctuation"},"."),e("prototype"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\nconsole"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),e("b"),t("span",{class:"token punctuation"},"."),e("__proto__ "),t("span",{class:"token operator"},"==="),e(),t("span",{class:"token class-name"},"B"),t("span",{class:"token punctuation"},"."),e("prototype"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token constant"},"AA"),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"value"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"this"),t("span",{class:"token punctuation"},"."),e("val "),t("span",{class:"token operator"},"="),e(" value"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token constant"},"BB"),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"value"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token constant"},"AA"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"call"),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"this"),t("span",{class:"token punctuation"},","),e(" value"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token class-name"},"BB"),t("span",{class:"token punctuation"},"."),e("prototype "),t("span",{class:"token operator"},"="),e(" Object"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"create"),t("span",{class:"token punctuation"},"("),t("span",{class:"token class-name"},"AA"),t("span",{class:"token punctuation"},"."),e("prototype"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token class-name"},"BB"),t("span",{class:"token punctuation"},"."),e("prototype"),t("span",{class:"token punctuation"},"."),e("constructor "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token constant"},"BB"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token keyword"},"const"),e(" bb "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"new"),e(),t("span",{class:"token class-name"},"BB"),t("span",{class:"token punctuation"},"("),t("span",{class:"token number"},"6"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\nconsole"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),t("span",{class:"token constant"},"BB"),t("span",{class:"token punctuation"},"."),e("__proto__ "),t("span",{class:"token operator"},"==="),e(),t("span",{class:"token class-name"},"Function"),t("span",{class:"token punctuation"},"."),e("prototype"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// not consistence with class syntax"),e("\nconsole"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),t("span",{class:"token class-name"},"BB"),t("span",{class:"token punctuation"},"."),e("prototype"),t("span",{class:"token punctuation"},"."),e("constructor "),t("span",{class:"token operator"},"==="),e(),t("span",{class:"token constant"},"BB"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\nconsole"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),t("span",{class:"token class-name"},"BB"),t("span",{class:"token punctuation"},"."),e("prototype"),t("span",{class:"token punctuation"},"."),e("__proto__ "),t("span",{class:"token operator"},"==="),e(),t("span",{class:"token class-name"},"AA"),t("span",{class:"token punctuation"},"."),e("prototype"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\nconsole"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),e("bb"),t("span",{class:"token punctuation"},"."),e("__proto__ "),t("span",{class:"token operator"},"==="),e(),t("span",{class:"token class-name"},"BB"),t("span",{class:"token punctuation"},"."),e("prototype"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br"),t("span",{class:"line-number"},"25"),t("br"),t("span",{class:"line-number"},"26"),t("br"),t("span",{class:"line-number"},"27"),t("br"),t("span",{class:"line-number"},"28"),t("br"),t("span",{class:"line-number"},"29"),t("br"),t("span",{class:"line-number"},"30"),t("br"),t("span",{class:"line-number"},"31"),t("br"),t("span",{class:"line-number"},"32"),t("br"),t("span",{class:"line-number"},"33"),t("br"),t("span",{class:"line-number"},"34"),t("br"),t("span",{class:"line-number"},"35"),t("br"),t("span",{class:"line-number"},"36"),t("br")])],-1),Ws=t("p",null,"禁止对复合对象字面量进行导出操作 (array literal, object literal)",-1),Ns=t("h3",{id:"map"},[t("a",{class:"header-anchor",href:"#map","aria-hidden":"true"},"#"),e(" Map")],-1),Rs=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(" map "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"new"),e(),t("span",{class:"token class-name"},"Map"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"["),e("\n "),t("span",{class:"token comment"},"// You define a map via an array of 2-element arrays. The first"),e("\n "),t("span",{class:"token comment"},"// element of each nested array is the key, and the 2nd is the value"),e("\n "),t("span",{class:"token punctuation"},"["),t("span",{class:"token string"},"'name'"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'Jean-Luc Picard'"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token punctuation"},"["),t("span",{class:"token string"},"'age'"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"59"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token punctuation"},"["),t("span",{class:"token string"},"'rank'"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'Captain'"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},","),e("\n"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token comment"},"// To get the value associated with a given `key` in a map, you"),e("\n"),t("span",{class:"token comment"},"// need to call `map.get(key)`. Using `map.key` will **not** work."),e("\nmap"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"get"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'name'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// 'Jean-Luc Picard'"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br")])],-1),zs=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(" map "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"new"),e(),t("span",{class:"token class-name"},"Map"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"["),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token keyword"},"const"),e(" n1 "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"new"),e(),t("span",{class:"token class-name"},"Number"),t("span",{class:"token punctuation"},"("),t("span",{class:"token number"},"5"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token keyword"},"const"),e(" n2 "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"new"),e(),t("span",{class:"token class-name"},"Number"),t("span",{class:"token punctuation"},"("),t("span",{class:"token number"},"5"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\nmap"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"set"),t("span",{class:"token punctuation"},"("),e("n1"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'One'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\nmap"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"set"),t("span",{class:"token punctuation"},"("),e("n2"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'Two'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token comment"},"// `n1` and `n2` are objects, so `n1 !== n2`. That means the map has"),e("\n"),t("span",{class:"token comment"},"// separate keys for `n1` and `n2`."),e("\nmap"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"get"),t("span",{class:"token punctuation"},"("),e("n1"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// 'One'"),e("\nmap"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"get"),t("span",{class:"token punctuation"},"("),e("n2"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// 'Two'"),e("\nmap"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"get"),t("span",{class:"token punctuation"},"("),t("span",{class:"token number"},"5"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// undefined"),e("\n\n"),t("span",{class:"token comment"},"// If you were to do this with an object, `n2` would overwrite `n1`"),e("\n"),t("span",{class:"token keyword"},"const"),e(" obj "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"{"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\nobj"),t("span",{class:"token punctuation"},"["),e("n1"),t("span",{class:"token punctuation"},"]"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token string"},"'One'"),t("span",{class:"token punctuation"},";"),e("\nobj"),t("span",{class:"token punctuation"},"["),e("n2"),t("span",{class:"token punctuation"},"]"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token string"},"'Two'"),t("span",{class:"token punctuation"},";"),e("\n\nobj"),t("span",{class:"token punctuation"},"["),e("n1"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// 'Two'"),e("\nobj"),t("span",{class:"token punctuation"},"["),t("span",{class:"token number"},"5"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// 'Two'"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br")])],-1),Bs=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(" objectClone "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"new"),e(),t("span",{class:"token class-name"},"Map"),t("span",{class:"token punctuation"},"("),e("Object"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"entries"),t("span",{class:"token punctuation"},"("),e("object"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token keyword"},"const"),e(" arrayClone "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"new"),e(),t("span",{class:"token class-name"},"Map"),t("span",{class:"token punctuation"},"("),e("Array"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"from"),t("span",{class:"token punctuation"},"("),e("map"),t("span",{class:"token punctuation"},"."),e("entries"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token keyword"},"const"),e(" map "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"new"),e(),t("span",{class:"token class-name"},"Map"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"["),e("\n "),t("span",{class:"token punctuation"},"["),t("span",{class:"token string"},"'name'"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'Jean-Luc Picard'"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token punctuation"},"["),t("span",{class:"token string"},"'age'"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"59"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token punctuation"},"["),t("span",{class:"token string"},"'rank'"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'Captain'"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},","),e("\n"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token comment"},"// The `for/of` loop can loop through iterators"),e("\n"),t("span",{class:"token keyword"},"for"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"const"),e(" key "),t("span",{class:"token keyword"},"of"),e(" map"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"keys"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n key"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// 'name', 'age', 'rank'"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token keyword"},"for"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"const"),e(" v "),t("span",{class:"token keyword"},"of"),e(" map"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"values"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n v"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// 'Jean-Luc Picard', 59, 'Captain'"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token keyword"},"for"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token punctuation"},"["),e("key"),t("span",{class:"token punctuation"},","),e(" value"),t("span",{class:"token punctuation"},"]"),e(),t("span",{class:"token keyword"},"of"),e(" map"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"entries"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n key"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// 'name', 'age', 'rank'"),e("\n value"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// 'Jean-Luc Picard', 59, 'Captain'"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br")])],-1),Fs=t("h3",{id:"weakmap"},[t("a",{class:"header-anchor",href:"#weakmap","aria-hidden":"true"},"#"),e(" WeakMap")],-1),Hs=t("p",null,"WeakMap 结构与 Map 结构基本类似, 唯一的区别就是 WeakMap 只接受对象作为键名 (null 除外), 而且键名所指向的对象不计入垃圾回收机制.",-1),qs=t("p",null,"它的键所对应的对象可能会在将来消失. 一个对应 DOM 元素的 WeakMap 结构, 当某个 DOM 元素被清除, 其所对应的 WeakMap 记录就会自动被移除.",-1),Js=t("p",null,"有时候我们会把对象作为一个对象的键用来存放属性值, 普通集合类型比如简单对象会阻止垃圾回收器对这些作为属性键存在的对象的回收, 有造成内存泄漏的危险, 而 WeakMap/WeakSet 则更加安全些.",-1),Us=t("h3",{id:"symbol"},[t("a",{class:"header-anchor",href:"#symbol","aria-hidden":"true"},"#"),e(" Symbol")],-1),Gs=t("ul",null,[t("li",null,[e("A Symbol is a "),t("strong",null,"unique"),e(" and "),t("strong",null,"immutable"),e(" primitive value and may be used as the key of an Object property.")]),t("li",null,"Symbols don't auto-convert to \"strings\" and can't convert to numbers")],-1),$s=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"let"),e(" arr "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"["),t("span",{class:"token string"},"'a'"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'b'"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'c'"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token keyword"},"let"),e(" iter "),t("span",{class:"token operator"},"="),e(" arr"),t("span",{class:"token punctuation"},"["),e("Symbol"),t("span",{class:"token punctuation"},"."),e("iterator"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\niter"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"next"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// { value: 'a', done: false }"),e("\niter"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"next"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// { value: 'b', done: false }"),e("\niter"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"next"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// { value: 'c', done: false }"),e("\niter"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"next"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// { value: undefined, done: true }"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br")])],-1),Vs=t("h3",{id:"iterator"},[t("a",{class:"header-anchor",href:"#iterator","aria-hidden":"true"},"#"),e(" Iterator")],-1),Ks=t("ul",null,[t("li",null,'一个数据结构只要具有 Symbol.iterator 属性 (其为 function), 就可以认为是 "可遍历的" (iterable)'),t("li",null,[e("implement iterator with "),t("code",null,"Symbol.iterator")]),t("li",null,[e("只有 "),t("code",null,"for...in"),e(" 可以遍历到原型上的属性")]),t("li",null,"Object.getOwnPropertyNames, Object.getOwnPropertySymbols 和 Reflect.ownKeys 可获取到不可枚举的属性"),t("li",null,"Object.getOwnPropertySymbols 和 Reflect.ownKeys 可获取到 Symbol 属性")],-1),Ys=t("h4",{id:"synchronous-iterator"},[t("a",{class:"header-anchor",href:"#synchronous-iterator","aria-hidden":"true"},"#"),e(" Synchronous Iterator")],-1),Xs=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(" Iterable "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token punctuation"},"["),e("Symbol"),t("span",{class:"token punctuation"},"."),e("iterator"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"return"),e(" Iterator"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token keyword"},"const"),e(" Iterator "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token function"},"next"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"return"),e(" IteratorResult"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token keyword"},"return"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"return"),e(" IteratorResult"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token keyword"},"throw"),t("span",{class:"token punctuation"},"("),e("e"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"throw"),e(" e"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token keyword"},"const"),e(" IteratorResult "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"{"),e("\n value"),t("span",{class:"token operator"},":"),e(" any"),t("span",{class:"token punctuation"},","),e("\n done"),t("span",{class:"token operator"},":"),e(" boolean"),t("span",{class:"token punctuation"},","),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token keyword"},"const"),e(" Iterator "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token function"},"next"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"return"),e(" IteratorResult"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token punctuation"},"["),e("Symbol"),t("span",{class:"token punctuation"},"."),e("iterator"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"return"),e(),t("span",{class:"token keyword"},"this"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br"),t("span",{class:"line-number"},"25"),t("br"),t("span",{class:"line-number"},"26"),t("br"),t("span",{class:"line-number"},"27"),t("br"),t("span",{class:"line-number"},"28"),t("br"),t("span",{class:"line-number"},"29"),t("br"),t("span",{class:"line-number"},"30"),t("br"),t("span",{class:"line-number"},"31"),t("br")])],-1),Zs=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token function"},"methodsIterator"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"let"),e(" index "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token number"},"0"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"let"),e(" methods "),t("span",{class:"token operator"},"="),e(" Object"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"keys"),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"this"),t("span",{class:"token punctuation"},")"),e("\n "),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"filter"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"key"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"return"),e(),t("span",{class:"token keyword"},"typeof"),e(),t("span",{class:"token keyword"},"this"),t("span",{class:"token punctuation"},"["),e("key"),t("span",{class:"token punctuation"},"]"),e(),t("span",{class:"token operator"},"==="),e(),t("span",{class:"token string"},"'function'"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),e("\n "),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"map"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"key"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token keyword"},"this"),t("span",{class:"token punctuation"},"["),e("key"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token comment"},"// iterator object"),e("\n "),t("span",{class:"token keyword"},"return"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token function-variable function"},"next"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"// Conform to Iterator protocol"),e("\n done"),t("span",{class:"token operator"},":"),e(" index "),t("span",{class:"token operator"},">="),e(" methods"),t("span",{class:"token punctuation"},"."),e("length"),t("span",{class:"token punctuation"},","),e("\n value"),t("span",{class:"token operator"},":"),e(" methods"),t("span",{class:"token punctuation"},"["),e("index"),t("span",{class:"token operator"},"++"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token keyword"},"let"),e(" myMethods "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token function-variable function"},"toString"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"return"),e(),t("span",{class:"token string"},"'[object myMethods]'"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token function-variable function"},"sumNumbers"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},[e("a"),t("span",{class:"token punctuation"},","),e(" b")]),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"return"),e(" a "),t("span",{class:"token operator"},"+"),e(" b"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),e("\n numbers"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token punctuation"},"["),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"5"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"6"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token punctuation"},"["),e("Symbol"),t("span",{class:"token punctuation"},"."),e("iterator"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token operator"},":"),e(" methodsIterator"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token comment"},"// Conform to Iterable Protocol"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token keyword"},"for"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"let"),e(" method "),t("span",{class:"token keyword"},"of"),e(" myMethods"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),e("method"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// logs methods `toString` and `sumNumbers`"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br"),t("span",{class:"line-number"},"25"),t("br"),t("span",{class:"line-number"},"26"),t("br"),t("span",{class:"line-number"},"27"),t("br"),t("span",{class:"line-number"},"28"),t("br"),t("span",{class:"line-number"},"29"),t("br"),t("span",{class:"line-number"},"30"),t("br"),t("span",{class:"line-number"},"31"),t("br"),t("span",{class:"line-number"},"32"),t("br")])],-1),Qs=t("h4",{id:"asynchronous-iterator"},[t("a",{class:"header-anchor",href:"#asynchronous-iterator","aria-hidden":"true"},"#"),e(" Asynchronous Iterator")],-1),na=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(" AsyncIterable "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token punctuation"},"["),e("Symbol"),t("span",{class:"token punctuation"},"."),e("asyncIterator"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"return"),e(" AsyncIterator"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token keyword"},"const"),e(" AsyncIterator "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token function"},"next"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"return"),e(" Promise"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"resolve"),t("span",{class:"token punctuation"},"("),e("IteratorResult"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token keyword"},"return"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"return"),e(" Promise"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"resolve"),t("span",{class:"token punctuation"},"("),e("IteratorResult"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token keyword"},"throw"),t("span",{class:"token punctuation"},"("),e("e"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"return"),e(" Promise"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"reject"),t("span",{class:"token punctuation"},"("),e("e"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token keyword"},"const"),e(" IteratorResult "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"{"),e("\n value"),t("span",{class:"token operator"},":"),e(" any"),t("span",{class:"token punctuation"},","),e("\n done"),t("span",{class:"token operator"},":"),e(" boolean"),t("span",{class:"token punctuation"},","),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br")])],-1),sa=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token function"},"remotePostsAsyncIteratorsFactory"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"let"),e(" i "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"let"),e(" done "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token boolean"},"false"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token keyword"},"const"),e(" asyncIterableIterator "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"// the next method will always return a Promise"),e("\n "),t("span",{class:"token keyword"},"async"),e(),t("span",{class:"token function"},"next"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"// do nothing if we went out-of-bounds"),e("\n "),t("span",{class:"token keyword"},"if"),e(),t("span",{class:"token punctuation"},"("),e("done"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"return"),e(" Promise"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"resolve"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"{"),e("\n done"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token boolean"},"true"),t("span",{class:"token punctuation"},","),e("\n value"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token keyword"},"undefined"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n\n "),t("span",{class:"token keyword"},"const"),e(" res "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"await"),e(),t("span",{class:"token function"},"fetch"),t("span",{class:"token punctuation"},"("),e("\n "),t("span",{class:"token template-string"},[t("span",{class:"token template-punctuation string"},"`"),t("span",{class:"token string"},"https://jsonplaceholder.typicode.com/posts/"),t("span",{class:"token interpolation"},[t("span",{class:"token interpolation-punctuation punctuation"},"${"),e("i"),t("span",{class:"token operator"},"++"),t("span",{class:"token interpolation-punctuation punctuation"},"}")]),t("span",{class:"token template-punctuation string"},"`")]),e("\n "),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"then"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"r"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(" r"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"json"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token comment"},"// the posts source is ended"),e("\n "),t("span",{class:"token keyword"},"if"),e(),t("span",{class:"token punctuation"},"("),e("Object"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"keys"),t("span",{class:"token punctuation"},"("),e("res"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},"."),e("length "),t("span",{class:"token operator"},"==="),e(),t("span",{class:"token number"},"0"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n done "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token boolean"},"true"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"return"),e(" Promise"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"resolve"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"{"),e("\n done"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token boolean"},"true"),t("span",{class:"token punctuation"},","),e("\n value"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token keyword"},"undefined"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token keyword"},"else"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"return"),e(" Promise"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"resolve"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"{"),e("\n done"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token boolean"},"false"),t("span",{class:"token punctuation"},","),e("\n value"),t("span",{class:"token operator"},":"),e(" res"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token punctuation"},"["),e("Symbol"),t("span",{class:"token punctuation"},"."),e("asyncIterator"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"return"),e(),t("span",{class:"token keyword"},"this"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token keyword"},"return"),e(" asyncIterableIterator"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"async"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"const"),e(" ait "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token function"},"remotePostsAsyncIteratorsFactory"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token keyword"},"await"),e(" ait"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"next"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// { done:false, value:{id: 1, ...} }"),e("\n "),t("span",{class:"token keyword"},"await"),e(" ait"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"next"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// { done:false, value:{id: 2, ...} }"),e("\n "),t("span",{class:"token keyword"},"await"),e(" ait"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"next"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// { done:false, value:{id: 3, ...} }"),e("\n "),t("span",{class:"token comment"},"// ..."),e("\n "),t("span",{class:"token keyword"},"await"),e(" ait"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"next"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// { done:false, value:{id: 100, ...} }"),e("\n "),t("span",{class:"token keyword"},"await"),e(" ait"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"next"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// { done:true, value:undefined }"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br"),t("span",{class:"line-number"},"25"),t("br"),t("span",{class:"line-number"},"26"),t("br"),t("span",{class:"line-number"},"27"),t("br"),t("span",{class:"line-number"},"28"),t("br"),t("span",{class:"line-number"},"29"),t("br"),t("span",{class:"line-number"},"30"),t("br"),t("span",{class:"line-number"},"31"),t("br"),t("span",{class:"line-number"},"32"),t("br"),t("span",{class:"line-number"},"33"),t("br"),t("span",{class:"line-number"},"34"),t("br"),t("span",{class:"line-number"},"35"),t("br"),t("span",{class:"line-number"},"36"),t("br"),t("span",{class:"line-number"},"37"),t("br"),t("span",{class:"line-number"},"38"),t("br"),t("span",{class:"line-number"},"39"),t("br"),t("span",{class:"line-number"},"40"),t("br"),t("span",{class:"line-number"},"41"),t("br"),t("span",{class:"line-number"},"42"),t("br"),t("span",{class:"line-number"},"43"),t("br"),t("span",{class:"line-number"},"44"),t("br"),t("span",{class:"line-number"},"45"),t("br"),t("span",{class:"line-number"},"46"),t("br"),t("span",{class:"line-number"},"47"),t("br"),t("span",{class:"line-number"},"48"),t("br"),t("span",{class:"line-number"},"49"),t("br"),t("span",{class:"line-number"},"50"),t("br"),t("span",{class:"line-number"},"51"),t("br")])],-1),aa=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token comment"},"// tasks will run in parallel"),e("\nait"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"next"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"then"),t("span",{class:"token punctuation"},"("),t("span",{class:"token operator"},"..."),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\nait"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"next"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"then"),t("span",{class:"token punctuation"},"("),t("span",{class:"token operator"},"..."),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\nait"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"next"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"then"),t("span",{class:"token punctuation"},"("),t("span",{class:"token operator"},"..."),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br")])],-1),ta=t("h3",{id:"generator"},[t("a",{class:"header-anchor",href:"#generator","aria-hidden":"true"},"#"),e(" Generator")],-1),ea=t("ul",null,[t("li",null,[t("a",{href:"https://dev.to/jfet97/javascript-iterators-and-generators-synchronous-generators-3ai4",target:"_blank",rel:"noopener noreferrer"},"Synchronous Generators")])],-1),oa=t("h4",{id:"basic-usage"},[t("a",{class:"header-anchor",href:"#basic-usage","aria-hidden":"true"},"#"),e(" Basic Usage")],-1),ca=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"function"),t("span",{class:"token operator"},"*"),e(),t("span",{class:"token function"},"gen"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"yield"),e(),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"yield"),e(),t("span",{class:"token number"},"2"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"yield"),e(),t("span",{class:"token number"},"3"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token keyword"},"const"),e(" g "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token function"},"gen"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\ng"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"next"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// { value: 1, done: false }"),e("\ng"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"next"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// { value: 2, done: false }"),e("\ng"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"next"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// { value: 3, done: false }"),e("\ng"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"next"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// { value: undefined, done: true }"),e("\ng"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"return"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// { value: undefined, done: true }"),e("\ng"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"return"),t("span",{class:"token punctuation"},"("),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// { value: 1, done: true }"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br")])],-1),la=t("p",null,"iterable object",-1),pa=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(" users "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"{"),e("\n james"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token boolean"},"false"),t("span",{class:"token punctuation"},","),e("\n andrew"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token boolean"},"true"),t("span",{class:"token punctuation"},","),e("\n alexander"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token boolean"},"false"),t("span",{class:"token punctuation"},","),e("\n daisy"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token boolean"},"false"),t("span",{class:"token punctuation"},","),e("\n luke"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token boolean"},"false"),t("span",{class:"token punctuation"},","),e("\n clare"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token boolean"},"true"),t("span",{class:"token punctuation"},","),e("\n\n "),t("span",{class:"token operator"},"*"),t("span",{class:"token punctuation"},"["),e("Symbol"),t("span",{class:"token punctuation"},"."),e("iterator"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"// this === 'users'"),e("\n "),t("span",{class:"token keyword"},"for"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"const"),e(" key "),t("span",{class:"token keyword"},"in"),e(),t("span",{class:"token keyword"},"this"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"if"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"this"),t("span",{class:"token punctuation"},"["),e("key"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token keyword"},"yield"),e(" key"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br")])],-1),ua=t("p",null,"early return",-1),ra=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"function"),t("span",{class:"token operator"},"*"),e(),t("span",{class:"token function"},"gen"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"yield"),e(),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"yield"),e(),t("span",{class:"token number"},"2"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"yield"),e(),t("span",{class:"token number"},"3"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token keyword"},"const"),e(" g "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token function"},"gen"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\ng"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"next"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// { value: 1, done: false }"),e("\ng"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"return"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'foo'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},'// { value: "foo", done: true }'),e("\ng"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"next"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// { value: undefined, done: true }"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br")])],-1),ia=t("h4",{id:"complex-usage"},[t("a",{class:"header-anchor",href:"#complex-usage","aria-hidden":"true"},"#"),e(" Complex Usage")],-1),ka=t("p",null,"The generator function itself is not iterable, call it to get the iterable-iterator",-1),ba=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"for"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"const"),e(" v "),t("span",{class:"token keyword"},"of"),e(" someOddNumbers"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),e("v"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token comment"},"// => TypeError: someOddNumbers is not iterable"),e("\n\n"),t("span",{class:"token keyword"},"for"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"const"),e(" v "),t("span",{class:"token keyword"},"of"),e(),t("span",{class:"token function"},"number"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),e("v"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// 1 3 5 7"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br")])],-1),ma=t("p",null,"messaging system",-1),da=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"function"),t("span",{class:"token operator"},"*"),e(),t("span",{class:"token function"},"lazyCalculator"),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"operator"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"const"),e(" firstOperand "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"yield"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"const"),e(" secondOperand "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"yield"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token keyword"},"switch"),e(),t("span",{class:"token punctuation"},"("),e("operator"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"case"),e(),t("span",{class:"token string"},"'+'"),t("span",{class:"token operator"},":"),e("\n "),t("span",{class:"token keyword"},"yield"),e(" firstOperand "),t("span",{class:"token operator"},"+"),e(" secondOperand"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"return"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"case"),e(),t("span",{class:"token string"},"'-'"),t("span",{class:"token operator"},":"),e("\n "),t("span",{class:"token keyword"},"yield"),e(" firstOperand "),t("span",{class:"token operator"},"-"),e(" secondOperand"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"return"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"case"),e(),t("span",{class:"token string"},"'*'"),t("span",{class:"token operator"},":"),e("\n "),t("span",{class:"token keyword"},"yield"),e(" firstOperand "),t("span",{class:"token operator"},"*"),e(" secondOperand"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"return"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"case"),e(),t("span",{class:"token string"},"'/'"),t("span",{class:"token operator"},":"),e("\n "),t("span",{class:"token keyword"},"yield"),e(" firstOperand "),t("span",{class:"token operator"},"/"),e(" secondOperand"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"return"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token keyword"},"const"),e(" g "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token function"},"gen"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'*'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\ng"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"next"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// { value: undefined, done: false }"),e("\ng"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"next"),t("span",{class:"token punctuation"},"("),t("span",{class:"token number"},"10"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// { value: undefined, done: false }"),e("\ng"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"next"),t("span",{class:"token punctuation"},"("),t("span",{class:"token number"},"2"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// { value: 20, done: false }"),e("\ng"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"next"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// { value: undefined, done: true }"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br"),t("span",{class:"line-number"},"25"),t("br")])],-1),ga=t("p",null,"error handling",-1),ha=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"function"),t("span",{class:"token operator"},"*"),e(),t("span",{class:"token function"},"generator"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"try"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"yield"),e(),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token keyword"},"catch"),e(),t("span",{class:"token punctuation"},"("),e("e"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),e("e"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n\n "),t("span",{class:"token keyword"},"yield"),e(),t("span",{class:"token number"},"2"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"yield"),e(),t("span",{class:"token number"},"3"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"yield"),e(),t("span",{class:"token number"},"4"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"yield"),e(),t("span",{class:"token number"},"5"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token keyword"},"const"),e(" it "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token function"},"generator"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\nit"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"next"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// {value: 1, done: false}"),e("\n\n"),t("span",{class:"token comment"},'// the error will be handled and printed ("Error: Handled!"),'),e("\n"),t("span",{class:"token comment"},"// then the flow will continue, so we will get the"),e("\n"),t("span",{class:"token comment"},"// next yielded value as result."),e("\nit"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"throw"),t("span",{class:"token punctuation"},"("),t("span",{class:"token function"},"Error"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'Handled!'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// {value: 2, done: false}"),e("\n\nit"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"next"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// {value: 3, done: false}"),e("\n\n"),t("span",{class:"token comment"},"// now the generator instance is paused on the"),e("\n"),t("span",{class:"token comment"},"// third yield that is not inside a try-catch."),e("\n"),t("span",{class:"token comment"},"// the error will be re-thrown out"),e("\nit"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"throw"),t("span",{class:"token punctuation"},"("),t("span",{class:"token function"},"Error"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'Not handled!'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// !!! Uncaught Error: Not handled! !!!"),e("\n\n"),t("span",{class:"token comment"},"// now the iterator is exhausted"),e("\nit"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"next"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// {value: undefined, done: true}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br"),t("span",{class:"line-number"},"25"),t("br"),t("span",{class:"line-number"},"26"),t("br"),t("span",{class:"line-number"},"27"),t("br"),t("span",{class:"line-number"},"28"),t("br"),t("span",{class:"line-number"},"29"),t("br"),t("span",{class:"line-number"},"30"),t("br"),t("span",{class:"line-number"},"31"),t("br")])],-1),fa=t("p",null,[e("Generator based control flow goodness for nodejs and the browser, using promises, letting you write non-blocking code in a nice-ish way (just like "),t("a",{href:"https://github.com/tj/co",target:"_blank",rel:"noopener noreferrer"},"tj/co"),e(").")],-1),ya=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token function"},"coroutine"),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"generatorFunc"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"const"),e(" generator "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token function"},"generatorFunc"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token function"},"nextResponse"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token function"},"nextResponse"),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"value"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"const"),e(" response "),t("span",{class:"token operator"},"="),e(" generator"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"next"),t("span",{class:"token punctuation"},"("),e("value"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token keyword"},"if"),e(),t("span",{class:"token punctuation"},"("),e("response"),t("span",{class:"token punctuation"},"."),e("done"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"return"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n\n "),t("span",{class:"token keyword"},"if"),e(),t("span",{class:"token punctuation"},"("),e("value"),t("span",{class:"token punctuation"},"."),e("then"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n value"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"then"),t("span",{class:"token punctuation"},"("),e("nextResponse"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token keyword"},"else"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token function"},"nextResponse"),t("span",{class:"token punctuation"},"("),e("response"),t("span",{class:"token punctuation"},"."),e("value"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token function"},"coroutine"),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"function"),t("span",{class:"token operator"},"*"),e(),t("span",{class:"token function"},"bounce"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"yield"),e(" bounceUp"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"yield"),e(" bounceDown"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br")])],-1),wa=t("h4",{id:"asynchronous-generator"},[t("a",{class:"header-anchor",href:"#asynchronous-generator","aria-hidden":"true"},"#"),e(" Asynchronous Generator")],-1),va=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(" asyncSource "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"{"),e("\n async "),t("span",{class:"token operator"},"*"),t("span",{class:"token punctuation"},"["),e("Symbol"),t("span",{class:"token punctuation"},"."),e("asyncIterator"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"yield"),e(),t("span",{class:"token keyword"},"await"),e(),t("span",{class:"token keyword"},"new"),e(),t("span",{class:"token class-name"},"Promise"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"res"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token function"},"setTimeout"),t("span",{class:"token punctuation"},"("),e("res"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"1000"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token keyword"},"async"),e(),t("span",{class:"token keyword"},"function"),t("span",{class:"token operator"},"*"),e(),t("span",{class:"token function"},"remotePostsAsyncGenerator"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"let"),e(" i "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token keyword"},"while"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token boolean"},"true"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"const"),e(" res "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"await"),e(),t("span",{class:"token function"},"fetch"),t("span",{class:"token punctuation"},"("),e("\n "),t("span",{class:"token template-string"},[t("span",{class:"token template-punctuation string"},"`"),t("span",{class:"token string"},"https://jsonplaceholder.typicode.com/posts/"),t("span",{class:"token interpolation"},[t("span",{class:"token interpolation-punctuation punctuation"},"${"),e("i"),t("span",{class:"token operator"},"++"),t("span",{class:"token interpolation-punctuation punctuation"},"}")]),t("span",{class:"token template-punctuation string"},"`")]),e("\n "),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"then"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"r"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(" r"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"json"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token comment"},"// when no more remote posts will be available,"),e("\n "),t("span",{class:"token comment"},"// it will break the infinite loop."),e("\n "),t("span",{class:"token comment"},"// the async iteration will end"),e("\n "),t("span",{class:"token keyword"},"if"),e(),t("span",{class:"token punctuation"},"("),e("Object"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"keys"),t("span",{class:"token punctuation"},"("),e("res"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},"."),e("length "),t("span",{class:"token operator"},"==="),e(),t("span",{class:"token number"},"0"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"break"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n\n "),t("span",{class:"token keyword"},"yield"),e(" res"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br")])],-1),xa=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token comment"},"// do you remember it?"),e("\n"),t("span",{class:"token keyword"},"function"),t("span",{class:"token operator"},"*"),e(),t("span",{class:"token function"},"chunkify"),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},[e("array"),t("span",{class:"token punctuation"},","),e(" n")]),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"yield"),e(" array"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"slice"),t("span",{class:"token punctuation"},"("),t("span",{class:"token number"},"0"),t("span",{class:"token punctuation"},","),e(" n"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n array"),t("span",{class:"token punctuation"},"."),e("length "),t("span",{class:"token operator"},">"),e(" n "),t("span",{class:"token operator"},"&&"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"yield"),t("span",{class:"token operator"},"*"),e(),t("span",{class:"token function"},"chunkify"),t("span",{class:"token punctuation"},"("),e("array"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"slice"),t("span",{class:"token punctuation"},"("),e("n"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},","),e(" n"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token keyword"},"async"),e(),t("span",{class:"token keyword"},"function"),t("span",{class:"token operator"},"*"),e(),t("span",{class:"token function"},"getRemoteData"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"let"),e(" hasMore "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token boolean"},"true"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"let"),e(" page"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token keyword"},"while"),e(),t("span",{class:"token punctuation"},"("),e("hasMore"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token punctuation"},"{"),e(" next_page"),t("span",{class:"token punctuation"},","),e(" results "),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"await"),e(),t("span",{class:"token function"},"fetch"),t("span",{class:"token punctuation"},"("),t("span",{class:"token constant"},"URL"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token punctuation"},"{"),e(" params"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token punctuation"},"{"),e(" page "),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"then"),t("span",{class:"token punctuation"},"("),e("\n "),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"r"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(" r"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"json"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e("\n "),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token comment"},"// return 5 elements with each iteration"),e("\n "),t("span",{class:"token keyword"},"yield"),t("span",{class:"token operator"},"*"),e(),t("span",{class:"token function"},"chunkify"),t("span",{class:"token punctuation"},"("),e("results"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"5"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n hasMore "),t("span",{class:"token operator"},"="),e(" next_page "),t("span",{class:"token operator"},"!="),e(),t("span",{class:"token keyword"},"null"),t("span",{class:"token punctuation"},";"),e("\n page "),t("span",{class:"token operator"},"="),e(" next_page"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br")])],-1),ja=t("h3",{id:"proxy-and-reflect"},[t("a",{class:"header-anchor",href:"#proxy-and-reflect","aria-hidden":"true"},"#"),e(" Proxy and Reflect")],-1),Sa=t("p",null,[e("modify default object behavior with "),t("code",null,"Proxy"),e(" and "),t("code",null,"Reflect")],-1),Ta=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token comment"},"// new Proxy(target, handler)"),e("\n"),t("span",{class:"token function"},"Proxy"),t("span",{class:"token punctuation"},"("),e("target"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token function-variable function"},"set"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},[e("target"),t("span",{class:"token punctuation"},","),e(" name"),t("span",{class:"token punctuation"},","),e(" value"),t("span",{class:"token punctuation"},","),e(" receiver")]),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"const"),e(" success "),t("span",{class:"token operator"},"="),e(" Reflect"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"set"),t("span",{class:"token punctuation"},"("),e("target"),t("span",{class:"token punctuation"},","),e(" name"),t("span",{class:"token punctuation"},","),e(" value"),t("span",{class:"token punctuation"},","),e(" receiver"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"if"),e(),t("span",{class:"token punctuation"},"("),e("success"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'property '"),e(),t("span",{class:"token operator"},"+"),e(" name "),t("span",{class:"token operator"},"+"),e(),t("span",{class:"token string"},"' on '"),e(),t("span",{class:"token operator"},"+"),e(" target "),t("span",{class:"token operator"},"+"),e(),t("span",{class:"token string"},"' set to '"),e(),t("span",{class:"token operator"},"+"),e(" value"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token keyword"},"return"),e(" success"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br")])],-1),Pa=t("p",null,"APIs of handler:",-1),Ca=t("ul",null,[t("li",null,"get"),t("li",null,"set"),t("li",null,"has"),t("li",null,"apply"),t("li",null,"construct"),t("li",null,[t("code",null,"Reflect.ownKeys"),e(": "),t("code",null,"Object.getOwnPropertyNames"),e(" + "),t("code",null,"Object.getOwnPropertySymbols"),e(", all keys include Symbols.")]),t("li",null,"deleteProperty"),t("li",null,"defineProperty"),t("li",null,"isExtensible"),t("li",null,"preventExtensions"),t("li",null,"getPrototypeOf"),t("li",null,"setPrototypeOf"),t("li",null,"getOwnPropertyDescriptor")],-1),Ia=t("h4",{id:"proxy-vs-defineproperty"},[t("a",{class:"header-anchor",href:"#proxy-vs-defineproperty","aria-hidden":"true"},"#"),e(" Proxy vs DefineProperty")],-1),_a=t("ul",null,[t("li",null,[t("code",null,"Proxy"),e(" 使用上比 Object.defineProperty 方便. "),t("code",null,"Object.defineProperty"),e(" 只能监听对象, 导致 "),t("code",null,"Vue2"),e(),t("code",null,"data"),e(" 属性必须通过一个返回对象的函数方式初始化, "),t("code",null,"Vue3"),e(" 更加多元化, 可以监听任意数据.")]),t("li",null,[t("code",null,"Proxy"),e(" 代理整个对象, Object.defineProperty 只代理对象上的某个属性. "),t("code",null,"Object.defineProperty"),e(" 由于每次只能监听对象一个键的 "),t("code",null,"get"),e("/"),t("code",null,"set"),e(", 导致需要循环监听浪费性能. "),t("code",null,"Proxy"),e(" 可以一次性监听到所有属性.")]),t("li",null,"如果对象内部要全部递归代理, 则 Proxy 可以只在调用时递归. 而 Object.defineProperty 需要在一开始就全部递归. Proxy 性能优于 Object.defineProperty."),t("li",null,"对象上定义新属性时, 只有 Proxy 可以监听到."),t("li",null,[e("数组新增删除修改时, 只有 Proxy 可以监听到. "),t("code",null,"Object.defineProperty"),e(" 无法监听数组, "),t("code",null,"Proxy"),e(" 则可以直接监听数组变化.")]),t("li",null,"Proxy 不兼容 IE, Object.defineProperty 不兼容 IE8 及以下.")],-1),Aa=t("h4",{id:"default-zero-value-with-proxy"},[t("a",{class:"header-anchor",href:"#default-zero-value-with-proxy","aria-hidden":"true"},"#"),e(" Default Zero Value with Proxy")],-1),Ea=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token function-variable function"},"withZeroValue"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},[e("target"),t("span",{class:"token punctuation"},","),e(" zeroValue "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token number"},"0")]),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e("\n "),t("span",{class:"token keyword"},"new"),e(),t("span",{class:"token class-name"},"Proxy"),t("span",{class:"token punctuation"},"("),e("target"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token function-variable function"},"get"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},[e("obj"),t("span",{class:"token punctuation"},","),e(" prop")]),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"("),e("prop "),t("span",{class:"token keyword"},"in"),e(" obj "),t("span",{class:"token operator"},"?"),e(" obj"),t("span",{class:"token punctuation"},"["),e("prop"),t("span",{class:"token punctuation"},"]"),e(),t("span",{class:"token operator"},":"),e(" zeroValue"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token keyword"},"let"),e(" pos "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"{"),e(" x"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token number"},"4"),t("span",{class:"token punctuation"},","),e(" y"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token number"},"19"),e(),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\nconsole"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),e("pos"),t("span",{class:"token punctuation"},"."),e("z"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// => undefined"),e("\npos "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token function"},"withZeroValue"),t("span",{class:"token punctuation"},"("),e("pos"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\nconsole"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),e("pos"),t("span",{class:"token punctuation"},"."),e("z"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// => 0"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br")])],-1),Oa=t("h4",{id:"negative-array-indices-with-proxy"},[t("a",{class:"header-anchor",href:"#negative-array-indices-with-proxy","aria-hidden":"true"},"#"),e(" Negative Array Indices with Proxy")],-1),Ma=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token function-variable function"},"negativeArray"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"els"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e("\n "),t("span",{class:"token keyword"},"new"),e(),t("span",{class:"token class-name"},"Proxy"),t("span",{class:"token punctuation"},"("),e("target"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token function-variable function"},"get"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},[e("target"),t("span",{class:"token punctuation"},","),e(" propKey"),t("span",{class:"token punctuation"},","),e(" receiver")]),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e("\n Reflect"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"get"),t("span",{class:"token punctuation"},"("),e("\n target"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token operator"},"+"),e("propKey "),t("span",{class:"token operator"},"<"),e(),t("span",{class:"token number"},"0"),e(),t("span",{class:"token operator"},"?"),e(),t("span",{class:"token function"},"String"),t("span",{class:"token punctuation"},"("),e("target"),t("span",{class:"token punctuation"},"."),e("length "),t("span",{class:"token operator"},"+"),e(),t("span",{class:"token operator"},"+"),e("propKey"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},":"),e(" propKey"),t("span",{class:"token punctuation"},","),e("\n receiver\n "),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br")])],-1),Da=t("h4",{id:"hiding-properties-with-proxy"},[t("a",{class:"header-anchor",href:"#hiding-properties-with-proxy","aria-hidden":"true"},"#"),e(" Hiding Properties with Proxy")],-1),La=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(" hide "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"("),e("target"),t("span",{class:"token punctuation"},","),e(" prefix "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token string"},"'_'"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e("\n "),t("span",{class:"token keyword"},"new"),e(),t("span",{class:"token class-name"},"Proxy"),t("span",{class:"token punctuation"},"("),e("target"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token function-variable function"},"has"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},[e("obj"),t("span",{class:"token punctuation"},","),e(" prop")]),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token operator"},"!"),e("prop"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"startsWith"),t("span",{class:"token punctuation"},"("),e("prefix"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"&&"),e(" prop "),t("span",{class:"token keyword"},"in"),e(" obj"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token function-variable function"},"ownKeys"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"obj"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e("\n Reflect"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"ownKeys"),t("span",{class:"token punctuation"},"("),e("obj"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"filter"),t("span",{class:"token punctuation"},"("),e("\n "),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"prop"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token keyword"},"typeof"),e(" prop "),t("span",{class:"token operator"},"!=="),e(),t("span",{class:"token string"},"'string'"),e(),t("span",{class:"token operator"},"||"),e(),t("span",{class:"token operator"},"!"),e("prop"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"startsWith"),t("span",{class:"token punctuation"},"("),e("prefix"),t("span",{class:"token punctuation"},")"),e("\n "),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token function-variable function"},"get"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},[e("obj"),t("span",{class:"token punctuation"},","),e(" prop"),t("span",{class:"token punctuation"},","),e(" rec")]),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"("),e("prop "),t("span",{class:"token keyword"},"in"),e(" rec "),t("span",{class:"token operator"},"?"),e(" obj"),t("span",{class:"token punctuation"},"["),e("prop"),t("span",{class:"token punctuation"},"]"),e(),t("span",{class:"token operator"},":"),e(),t("span",{class:"token keyword"},"undefined"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token keyword"},"let"),e(" userData "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token function"},"hide"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"{"),e("\n firstName"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token string"},"'Tom'"),t("span",{class:"token punctuation"},","),e("\n mediumHandle"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token string"},"'@bar'"),t("span",{class:"token punctuation"},","),e("\n _favoriteRapper"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token string"},"'Drake'"),t("span",{class:"token punctuation"},","),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token string"},"'_favoriteRapper'"),e(),t("span",{class:"token keyword"},"in"),e(" userData"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// has: false"),e("\nObject"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"keys"),t("span",{class:"token punctuation"},"("),e("userData"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// ownKeys: ['firstName', 'mediumHandle']"),e("\nuserData"),t("span",{class:"token punctuation"},"."),e("_favoriteRapper"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// get: undefined"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br")])],-1),Wa=t("h4",{id:"read-only-object-with-proxy"},[t("a",{class:"header-anchor",href:"#read-only-object-with-proxy","aria-hidden":"true"},"#"),e(" Read Only Object with Proxy")],-1),Na=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token function-variable function"},"NOPE"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"throw"),e(),t("span",{class:"token keyword"},"new"),e(),t("span",{class:"token class-name"},"Error"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'Can\\'t modify read-only object'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token constant"},"NOPE_HANDLER"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"{"),e("\n set"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token constant"},"NOPE"),t("span",{class:"token punctuation"},","),e("\n defineProperty"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token constant"},"NOPE"),t("span",{class:"token punctuation"},","),e("\n deleteProperty"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token constant"},"NOPE"),t("span",{class:"token punctuation"},","),e("\n deleteProperty"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token constant"},"NOPE"),t("span",{class:"token punctuation"},","),e("\n preventExtensions"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token constant"},"NOPE"),t("span",{class:"token punctuation"},","),e("\n setPrototypeOf"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token constant"},"NOPE"),e("\n "),t("span",{class:"token function-variable function"},"get"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},[e("obj"),t("span",{class:"token punctuation"},","),e(" prop")]),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"if"),e(),t("span",{class:"token punctuation"},"("),e("prop "),t("span",{class:"token keyword"},"in"),e(" obj"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"return"),e(" Reflect"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"get"),t("span",{class:"token punctuation"},"("),e("obj"),t("span",{class:"token punctuation"},","),e(" prop"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n\n "),t("span",{class:"token keyword"},"throw"),e(),t("span",{class:"token keyword"},"new"),e(),t("span",{class:"token class-name"},"ReferenceError"),t("span",{class:"token punctuation"},"("),t("span",{class:"token template-string"},[t("span",{class:"token template-punctuation string"},"`"),t("span",{class:"token string"},'Unknown prop "'),t("span",{class:"token interpolation"},[t("span",{class:"token interpolation-punctuation punctuation"},"${"),e("prop"),t("span",{class:"token interpolation-punctuation punctuation"},"}")]),t("span",{class:"token string"},'"'),t("span",{class:"token template-punctuation string"},"`")]),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token function-variable function"},"readOnly"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token parameter"},"target"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token keyword"},"new"),e(),t("span",{class:"token class-name"},"Proxy"),t("span",{class:"token punctuation"},"("),e("target"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token constant"},"NODE_HANDLER"),t("span",{class:"token punctuation"},")"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br")])],-1),Ra=t("h4",{id:"range-judgement-with-proxy"},[t("a",{class:"header-anchor",href:"#range-judgement-with-proxy","aria-hidden":"true"},"#"),e(" Range Judgement with Proxy")],-1),za=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token function-variable function"},"range"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},[e("min"),t("span",{class:"token punctuation"},","),e(" max")]),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e("\n "),t("span",{class:"token keyword"},"new"),e(),t("span",{class:"token class-name"},"Proxy"),t("span",{class:"token punctuation"},"("),e("Object"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"create"),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"null"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token function-variable function"},"has"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},[e("_"),t("span",{class:"token punctuation"},","),e(" prop")]),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token operator"},"+"),e("prop "),t("span",{class:"token operator"},">="),e(" min "),t("span",{class:"token operator"},"&&"),e(),t("span",{class:"token operator"},"+"),e("prop "),t("span",{class:"token operator"},"<="),e(" max"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token constant"},"X"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token number"},"10.5"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token keyword"},"const"),e(" nums "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"["),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"5"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token constant"},"X"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"50"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"100"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token keyword"},"if"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token constant"},"X"),e(),t("span",{class:"token keyword"},"in"),e(),t("span",{class:"token function"},"range"),t("span",{class:"token punctuation"},"("),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"100"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"// => true"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\nnums"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"filter"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"n"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(" n "),t("span",{class:"token keyword"},"in"),e(),t("span",{class:"token function"},"range"),t("span",{class:"token punctuation"},"("),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"10"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token comment"},"// => [1, 5]"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br")])],-1),Ba=t("h3",{id:"asynchronous-programming"},[t("a",{class:"header-anchor",href:"#asynchronous-programming","aria-hidden":"true"},"#"),e(" Asynchronous Programming")],-1),Fa=t("h4",{id:"promise"},[t("a",{class:"header-anchor",href:"#promise","aria-hidden":"true"},"#"),e(" Promise")],-1),Ha=t("p",null,"avoid callback hell with:",-1),qa=t("ul",null,[t("li",null,[e("return "),t("code",null,"new Promise")]),t("li",null,[e("return "),t("code",null,"promise.then")]),t("li",null,[t("code",null,"Promise.all"),e(": short-circuits when an input value is rejected")]),t("li",null,[t("code",null,"Promise.race"),e(": short-circuits when an input value is settled")]),t("li",null,[t("code",null,"Promise.any"),e(": short-circuits when an input value is fulfilled")]),t("li",null,[t("code",null,"Promise.allSettled"),e(": does not short-circuits")])],-1),Ja=t("p",null,[e("resolve only accept "),t("strong",null,"one"),e(" value")],-1),Ua=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"return"),e(),t("span",{class:"token keyword"},"new"),e(),t("span",{class:"token class-name"},"Promise"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"resolve"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token function"},"resolve"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"["),e("a"),t("span",{class:"token punctuation"},","),e(" b"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br")])],-1),Ga=t("ul",null,[t("li",null,"promises on the same chain execute orderly"),t("li",null,"promises on two separate chains execute in random order")],-1),$a=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(" users "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"["),t("span",{class:"token string"},"'User1'"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'User2'"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'User3'"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'User4'"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token keyword"},"const"),e(" response "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"["),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token function-variable function"},"getUser"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"user"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"return"),e(" axios"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"get"),t("span",{class:"token punctuation"},"("),t("span",{class:"token template-string"},[t("span",{class:"token template-punctuation string"},"`"),t("span",{class:"token string"},"/users/userId="),t("span",{class:"token interpolation"},[t("span",{class:"token interpolation-punctuation punctuation"},"${"),e("user"),t("span",{class:"token interpolation-punctuation punctuation"},"}")]),t("span",{class:"token template-punctuation string"},"`")]),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"then"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"res"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(" response"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"push"),t("span",{class:"token punctuation"},"("),e("res"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token function-variable function"},"getUsers"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"users"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token punctuation"},"["),e("getFirstUser"),t("span",{class:"token punctuation"},","),e(" getSecondUser"),t("span",{class:"token punctuation"},","),e(" getThirdUser"),t("span",{class:"token punctuation"},","),e(" getFourthUser"),t("span",{class:"token punctuation"},"]"),e(),t("span",{class:"token operator"},"="),e("\n users"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"map"),t("span",{class:"token punctuation"},"("),e("getUser"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token function"},"getFirstUser"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e("\n "),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"then"),t("span",{class:"token punctuation"},"("),e("getSecondUser"),t("span",{class:"token punctuation"},")"),e("\n "),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"then"),t("span",{class:"token punctuation"},"("),e("getThirdUser"),t("span",{class:"token punctuation"},")"),e("\n "),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"then"),t("span",{class:"token punctuation"},"("),e("getFourthUser"),t("span",{class:"token punctuation"},")"),e("\n "),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"catch"),t("span",{class:"token punctuation"},"("),e("console"),t("span",{class:"token punctuation"},"."),e("log"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br")])],-1),Va=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(" users "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"["),t("span",{class:"token string"},"'User1'"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'User2'"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'User3'"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'User4'"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token keyword"},"let"),e(" response "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"["),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token function"},"getUsers"),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"users"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"const"),e(" promises "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"["),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),e("\n promises"),t("span",{class:"token punctuation"},"["),t("span",{class:"token number"},"0"),t("span",{class:"token punctuation"},"]"),e(),t("span",{class:"token operator"},"="),e(" axios"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"get"),t("span",{class:"token punctuation"},"("),t("span",{class:"token template-string"},[t("span",{class:"token template-punctuation string"},"`"),t("span",{class:"token string"},"/users/userId="),t("span",{class:"token interpolation"},[t("span",{class:"token interpolation-punctuation punctuation"},"${"),e("users"),t("span",{class:"token punctuation"},"["),t("span",{class:"token number"},"0"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token interpolation-punctuation punctuation"},"}")]),t("span",{class:"token template-punctuation string"},"`")]),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n promises"),t("span",{class:"token punctuation"},"["),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},"]"),e(),t("span",{class:"token operator"},"="),e(" axios"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"get"),t("span",{class:"token punctuation"},"("),t("span",{class:"token template-string"},[t("span",{class:"token template-punctuation string"},"`"),t("span",{class:"token string"},"/users/userId="),t("span",{class:"token interpolation"},[t("span",{class:"token interpolation-punctuation punctuation"},"${"),e("users"),t("span",{class:"token punctuation"},"["),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token interpolation-punctuation punctuation"},"}")]),t("span",{class:"token template-punctuation string"},"`")]),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n promises"),t("span",{class:"token punctuation"},"["),t("span",{class:"token number"},"2"),t("span",{class:"token punctuation"},"]"),e(),t("span",{class:"token operator"},"="),e(" axios"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"get"),t("span",{class:"token punctuation"},"("),t("span",{class:"token template-string"},[t("span",{class:"token template-punctuation string"},"`"),t("span",{class:"token string"},"/users/userId="),t("span",{class:"token interpolation"},[t("span",{class:"token interpolation-punctuation punctuation"},"${"),e("users"),t("span",{class:"token punctuation"},"["),t("span",{class:"token number"},"2"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token interpolation-punctuation punctuation"},"}")]),t("span",{class:"token template-punctuation string"},"`")]),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n promises"),t("span",{class:"token punctuation"},"["),t("span",{class:"token number"},"3"),t("span",{class:"token punctuation"},"]"),e(),t("span",{class:"token operator"},"="),e(" axios"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"get"),t("span",{class:"token punctuation"},"("),t("span",{class:"token template-string"},[t("span",{class:"token template-punctuation string"},"`"),t("span",{class:"token string"},"/users/userId="),t("span",{class:"token interpolation"},[t("span",{class:"token interpolation-punctuation punctuation"},"${"),e("users"),t("span",{class:"token punctuation"},"["),t("span",{class:"token number"},"3"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token interpolation-punctuation punctuation"},"}")]),t("span",{class:"token template-punctuation string"},"`")]),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n Promise"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"all"),t("span",{class:"token punctuation"},"("),e("promises"),t("span",{class:"token punctuation"},")"),e("\n "),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"then"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"userDataArr"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"("),e("response "),t("span",{class:"token operator"},"="),e(" userDataArr"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),e("\n "),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"catch"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"err"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(" console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),e("err"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br")])],-1),Ka=t("h5",{id:"promise-all"},[t("a",{class:"header-anchor",href:"#promise-all","aria-hidden":"true"},"#"),e(" Promise All")],-1),Ya=t("ul",null,[t("li",null,[t("code",null,"Promise.all([...])"),e(" fail-fast. If at least one promise in the promises array rejects, then the promise returned rejects too.")])],-1),Xa=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[e("Promise"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"all"),t("span",{class:"token punctuation"},"("),e("urls"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"map"),t("span",{class:"token punctuation"},"("),e("fetch"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"then"),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"responses"),e(),t("span",{class:"token operator"},"=>"),e("\n Promise"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"all"),t("span",{class:"token punctuation"},"("),e("responses"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"map"),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"res"),e(),t("span",{class:"token operator"},"=>"),e(" res"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"text"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),e("\n"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"then"),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"texts"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"//"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br")])],-1),Za=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[e("Promise"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"all"),t("span",{class:"token punctuation"},"("),e("urls"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"map"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"url"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token function"},"fetch"),t("span",{class:"token punctuation"},"("),e("url"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"then"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"resp"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(" resp"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"text"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"then"),t("span",{class:"token punctuation"},"("),e("\n "),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"texts"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"//"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br")])],-1),Qa=t("ul",null,[t("li",null,[t("code",null,"Promise.all"),e(" with "),t("code",null,"async"),e("/"),t("code",null,"await")])],-1),nt=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token function-variable function"},"loadData"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"async"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"try"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"const"),e(" urls "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"["),t("span",{class:"token string"},"'...'"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'...'"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token keyword"},"const"),e(" results "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"await"),e(" Promise"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"all"),t("span",{class:"token punctuation"},"("),e("urls"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"map"),t("span",{class:"token punctuation"},"("),e("fetch"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"const"),e(" dataPromises "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"await"),e(" results"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"map"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"result"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(" result"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"json"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"const"),e(" finalData "),t("span",{class:"token operator"},"="),e(" Promise"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"all"),t("span",{class:"token punctuation"},"("),e("dataPromises"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token keyword"},"return"),e(" finalData"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token keyword"},"catch"),e(),t("span",{class:"token punctuation"},"("),e("err"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),e("err"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token keyword"},"const"),e(" data "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token function"},"loadData"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"then"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"data"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(" console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),e("data"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br")])],-1),st=t("h5",{id:"promise-polyfill"},[t("a",{class:"header-anchor",href:"#promise-polyfill","aria-hidden":"true"},"#"),e(" Promise Polyfill")],-1),at=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"class"),e(),t("span",{class:"token class-name"},"Promise"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"// `executor` takes 2 parameters, `resolve()` and `reject()`. The executor"),e("\n "),t("span",{class:"token comment"},"// function is responsible for calling `resolve()` or `reject()` to say that"),e("\n "),t("span",{class:"token comment"},"// the async operation succeeded (resolved) or failed (rejected)."),e("\n "),t("span",{class:"token function"},"constructor"),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"executor"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"if"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"typeof"),e(" executor "),t("span",{class:"token operator"},"!=="),e(),t("span",{class:"token string"},"'function'"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"throw"),e(),t("span",{class:"token keyword"},"new"),e(),t("span",{class:"token class-name"},"Error"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'Executor must be a function'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n\n "),t("span",{class:"token comment"},"// Internal state. `$state` is the state of the promise, and `$chained` is"),e("\n "),t("span",{class:"token comment"},"// an array of the functions we need to call once this promise is settled."),e("\n "),t("span",{class:"token keyword"},"this"),t("span",{class:"token punctuation"},"."),e("$state "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token string"},"'PENDING'"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"this"),t("span",{class:"token punctuation"},"."),e("$chained "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"["),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token comment"},"// Implement `resolve()` and `reject()` for the executor function to use"),e("\n "),t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token function-variable function"},"resolve"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"res"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},'// A promise is considered "settled" when it is no longer'),e("\n "),t("span",{class:"token comment"},"// pending, that is, when either `resolve()` or `reject()`"),e("\n "),t("span",{class:"token comment"},"// was called once. Calling `resolve()` or `reject()` twice"),e("\n "),t("span",{class:"token comment"},"// or calling `reject()` after `resolve()` was already called"),e("\n "),t("span",{class:"token comment"},"// are no-ops."),e("\n "),t("span",{class:"token keyword"},"if"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"this"),t("span",{class:"token punctuation"},"."),e("$state "),t("span",{class:"token operator"},"!=="),e(),t("span",{class:"token string"},"'PENDING'"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"return"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n\n "),t("span",{class:"token comment"},'// If `res` is a "thenable", lock in this promise to match the'),e("\n "),t("span",{class:"token comment"},"// resolved or rejected state of the thenable."),e("\n "),t("span",{class:"token keyword"},"const"),e(" then "),t("span",{class:"token operator"},"="),e(" res "),t("span",{class:"token operator"},"!="),e(),t("span",{class:"token keyword"},"null"),e(),t("span",{class:"token operator"},"?"),e(" res"),t("span",{class:"token punctuation"},"."),e("then "),t("span",{class:"token operator"},":"),e(),t("span",{class:"token keyword"},"null"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"if"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"typeof"),e(" then "),t("span",{class:"token operator"},"==="),e(),t("span",{class:"token string"},"'function'"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"// In this case, the promise is \"resolved\", but still in the 'PENDING'"),e("\n "),t("span",{class:"token comment"},'// state. This is what the ES6 spec means when it says "A resolved promise'),e("\n "),t("span",{class:"token comment"},'// may be pending, fulfilled or rejected" in'),e("\n "),t("span",{class:"token comment"},"// http://www.ecma-international.org/ecma-262/6.0/#sec-promise-objects"),e("\n "),t("span",{class:"token keyword"},"return"),e(),t("span",{class:"token function"},"then"),t("span",{class:"token punctuation"},"("),e("resolve"),t("span",{class:"token punctuation"},","),e(" reject"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n\n "),t("span",{class:"token keyword"},"this"),t("span",{class:"token punctuation"},"."),e("$state "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token string"},"'FULFILLED'"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"this"),t("span",{class:"token punctuation"},"."),e("$internalValue "),t("span",{class:"token operator"},"="),e(" res"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token comment"},"// If somebody called `.then()` while this promise was pending, need"),e("\n "),t("span",{class:"token comment"},"// to call their `onFulfilled()` function"),e("\n "),t("span",{class:"token keyword"},"for"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token punctuation"},"{"),e(" onFulfilled "),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token keyword"},"of"),e(),t("span",{class:"token keyword"},"this"),t("span",{class:"token punctuation"},"."),e("$chained"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token function"},"onFulfilled"),t("span",{class:"token punctuation"},"("),e("res"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n\n "),t("span",{class:"token keyword"},"return"),e(" res"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token function-variable function"},"reject"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"err"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"if"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"this"),t("span",{class:"token punctuation"},"."),e("$state "),t("span",{class:"token operator"},"!=="),e(),t("span",{class:"token string"},"'PENDING'"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"return"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n\n "),t("span",{class:"token keyword"},"this"),t("span",{class:"token punctuation"},"."),e("$state "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token string"},"'REJECTED'"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"this"),t("span",{class:"token punctuation"},"."),e("$internalValue "),t("span",{class:"token operator"},"="),e(" err"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token keyword"},"for"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token punctuation"},"{"),e(" onRejected "),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token keyword"},"of"),e(),t("span",{class:"token keyword"},"this"),t("span",{class:"token punctuation"},"."),e("$chained"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token function"},"onRejected"),t("span",{class:"token punctuation"},"("),e("err"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token comment"},"// Call the executor function with `resolve()` and `reject()` as in the spec."),e("\n "),t("span",{class:"token keyword"},"try"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"// If the executor function throws a sync exception, we consider that"),e("\n "),t("span",{class:"token comment"},"// a rejection. Keep in mind that, since `resolve()` or `reject()` can"),e("\n "),t("span",{class:"token comment"},"// only be called once, a function that synchronously calls `resolve()`"),e("\n "),t("span",{class:"token comment"},"// and then throws will lead to a fulfilled promise and a swallowed error"),e("\n "),t("span",{class:"token function"},"executor"),t("span",{class:"token punctuation"},"("),e("resolve"),t("span",{class:"token punctuation"},","),e(" reject"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token keyword"},"catch"),e(),t("span",{class:"token punctuation"},"("),e("err"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token function"},"reject"),t("span",{class:"token punctuation"},"("),e("err"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n\n "),t("span",{class:"token comment"},"// `onFulfilled` is called if the promise is fulfilled, and `onRejected`"),e("\n "),t("span",{class:"token comment"},"// if the promise is rejected. For now, you can think of 'fulfilled' and"),e("\n "),t("span",{class:"token comment"},"// 'resolved' as the same thing."),e("\n "),t("span",{class:"token function"},"then"),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},[e("onFulfilled"),t("span",{class:"token punctuation"},","),e(" onRejected")]),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"return"),e(),t("span",{class:"token keyword"},"new"),e(),t("span",{class:"token class-name"},"Promise"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},[e("resolve"),t("span",{class:"token punctuation"},","),e(" reject")]),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"// Ensure that errors in `onFulfilled()` and `onRejected()` reject the"),e("\n "),t("span",{class:"token comment"},"// returned promise, otherwise they'll crash the process. Also, ensure"),e("\n "),t("span",{class:"token comment"},"// that the promise"),e("\n "),t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token function-variable function"},"_onFulfilled"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"res"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"try"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"// If `onFulfilled()` returns a promise, trust `resolve()` to handle"),e("\n "),t("span",{class:"token comment"},"// it correctly."),e("\n "),t("span",{class:"token comment"},"// store new value to new Promise"),e("\n "),t("span",{class:"token function"},"resolve"),t("span",{class:"token punctuation"},"("),t("span",{class:"token function"},"onFulfilled"),t("span",{class:"token punctuation"},"("),e("res"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token keyword"},"catch"),e(),t("span",{class:"token punctuation"},"("),e("err"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token function"},"reject"),t("span",{class:"token punctuation"},"("),e("err"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token function-variable function"},"_onRejected"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"err"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"try"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"// store new value to new Promise"),e("\n "),t("span",{class:"token function"},"reject"),t("span",{class:"token punctuation"},"("),t("span",{class:"token function"},"onRejected"),t("span",{class:"token punctuation"},"("),e("err"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token keyword"},"catch"),e(),t("span",{class:"token punctuation"},"("),e("_err"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token function"},"reject"),t("span",{class:"token punctuation"},"("),e("_err"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token keyword"},"if"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"this"),t("span",{class:"token punctuation"},"."),e("$state "),t("span",{class:"token operator"},"==="),e(),t("span",{class:"token string"},"'FULFILLED'"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token function"},"_onFulfilled"),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"this"),t("span",{class:"token punctuation"},"."),e("$internalValue"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token keyword"},"else"),e(),t("span",{class:"token keyword"},"if"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"this"),t("span",{class:"token punctuation"},"."),e("$state "),t("span",{class:"token operator"},"==="),e(),t("span",{class:"token string"},"'REJECTED'"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token function"},"_onRejected"),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"this"),t("span",{class:"token punctuation"},"."),e("$internalValue"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token keyword"},"else"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"this"),t("span",{class:"token punctuation"},"."),e("$chained"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"push"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"{"),e("\n onFulfilled"),t("span",{class:"token operator"},":"),e(" _onFulfilled"),t("span",{class:"token punctuation"},","),e("\n onRejected"),t("span",{class:"token operator"},":"),e(" _onRejected"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n\n "),t("span",{class:"token keyword"},"catch"),t("span",{class:"token punctuation"},"("),e("onRejected"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"return"),e(),t("span",{class:"token keyword"},"this"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"then"),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"null"),t("span",{class:"token punctuation"},","),e(" onRejected"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br"),t("span",{class:"line-number"},"25"),t("br"),t("span",{class:"line-number"},"26"),t("br"),t("span",{class:"line-number"},"27"),t("br"),t("span",{class:"line-number"},"28"),t("br"),t("span",{class:"line-number"},"29"),t("br"),t("span",{class:"line-number"},"30"),t("br"),t("span",{class:"line-number"},"31"),t("br"),t("span",{class:"line-number"},"32"),t("br"),t("span",{class:"line-number"},"33"),t("br"),t("span",{class:"line-number"},"34"),t("br"),t("span",{class:"line-number"},"35"),t("br"),t("span",{class:"line-number"},"36"),t("br"),t("span",{class:"line-number"},"37"),t("br"),t("span",{class:"line-number"},"38"),t("br"),t("span",{class:"line-number"},"39"),t("br"),t("span",{class:"line-number"},"40"),t("br"),t("span",{class:"line-number"},"41"),t("br"),t("span",{class:"line-number"},"42"),t("br"),t("span",{class:"line-number"},"43"),t("br"),t("span",{class:"line-number"},"44"),t("br"),t("span",{class:"line-number"},"45"),t("br"),t("span",{class:"line-number"},"46"),t("br"),t("span",{class:"line-number"},"47"),t("br"),t("span",{class:"line-number"},"48"),t("br"),t("span",{class:"line-number"},"49"),t("br"),t("span",{class:"line-number"},"50"),t("br"),t("span",{class:"line-number"},"51"),t("br"),t("span",{class:"line-number"},"52"),t("br"),t("span",{class:"line-number"},"53"),t("br"),t("span",{class:"line-number"},"54"),t("br"),t("span",{class:"line-number"},"55"),t("br"),t("span",{class:"line-number"},"56"),t("br"),t("span",{class:"line-number"},"57"),t("br"),t("span",{class:"line-number"},"58"),t("br"),t("span",{class:"line-number"},"59"),t("br"),t("span",{class:"line-number"},"60"),t("br"),t("span",{class:"line-number"},"61"),t("br"),t("span",{class:"line-number"},"62"),t("br"),t("span",{class:"line-number"},"63"),t("br"),t("span",{class:"line-number"},"64"),t("br"),t("span",{class:"line-number"},"65"),t("br"),t("span",{class:"line-number"},"66"),t("br"),t("span",{class:"line-number"},"67"),t("br"),t("span",{class:"line-number"},"68"),t("br"),t("span",{class:"line-number"},"69"),t("br"),t("span",{class:"line-number"},"70"),t("br"),t("span",{class:"line-number"},"71"),t("br"),t("span",{class:"line-number"},"72"),t("br"),t("span",{class:"line-number"},"73"),t("br"),t("span",{class:"line-number"},"74"),t("br"),t("span",{class:"line-number"},"75"),t("br"),t("span",{class:"line-number"},"76"),t("br"),t("span",{class:"line-number"},"77"),t("br"),t("span",{class:"line-number"},"78"),t("br"),t("span",{class:"line-number"},"79"),t("br"),t("span",{class:"line-number"},"80"),t("br"),t("span",{class:"line-number"},"81"),t("br"),t("span",{class:"line-number"},"82"),t("br"),t("span",{class:"line-number"},"83"),t("br"),t("span",{class:"line-number"},"84"),t("br"),t("span",{class:"line-number"},"85"),t("br"),t("span",{class:"line-number"},"86"),t("br"),t("span",{class:"line-number"},"87"),t("br"),t("span",{class:"line-number"},"88"),t("br"),t("span",{class:"line-number"},"89"),t("br"),t("span",{class:"line-number"},"90"),t("br"),t("span",{class:"line-number"},"91"),t("br"),t("span",{class:"line-number"},"92"),t("br"),t("span",{class:"line-number"},"93"),t("br"),t("span",{class:"line-number"},"94"),t("br"),t("span",{class:"line-number"},"95"),t("br"),t("span",{class:"line-number"},"96"),t("br"),t("span",{class:"line-number"},"97"),t("br"),t("span",{class:"line-number"},"98"),t("br"),t("span",{class:"line-number"},"99"),t("br"),t("span",{class:"line-number"},"100"),t("br"),t("span",{class:"line-number"},"101"),t("br"),t("span",{class:"line-number"},"102"),t("br"),t("span",{class:"line-number"},"103"),t("br"),t("span",{class:"line-number"},"104"),t("br"),t("span",{class:"line-number"},"105"),t("br"),t("span",{class:"line-number"},"106"),t("br"),t("span",{class:"line-number"},"107"),t("br"),t("span",{class:"line-number"},"108"),t("br"),t("span",{class:"line-number"},"109"),t("br"),t("span",{class:"line-number"},"110"),t("br"),t("span",{class:"line-number"},"111"),t("br"),t("span",{class:"line-number"},"112"),t("br"),t("span",{class:"line-number"},"113"),t("br"),t("span",{class:"line-number"},"114"),t("br"),t("span",{class:"line-number"},"115"),t("br"),t("span",{class:"line-number"},"116"),t("br"),t("span",{class:"line-number"},"117"),t("br"),t("span",{class:"line-number"},"118"),t("br")])],-1),tt=t("h5",{id:"promise-thenable-and-catch"},[t("a",{class:"header-anchor",href:"#promise-thenable-and-catch","aria-hidden":"true"},"#"),e(" Promise Thenable and Catch")],-1),et=t("p",null,[e("The main difference between the forms "),t("code",null,"promise.then(success, error)"),e(" and "),t("code",null,"promise.then(success).catch(error)"),e(":")],-1),ot=t("p",null,"in case if success callback returns a rejected promise, then only the second form is going to catch that rejection.",-1),ct=t("h4",{id:"await-and-async"},[t("a",{class:"header-anchor",href:"#await-and-async","aria-hidden":"true"},"#"),e(" Await and Async")],-1),lt=t("p",null,"avoid wrong parallel logic (too sequential)",-1),pt=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token comment"},"// wrong"),e("\n"),t("span",{class:"token keyword"},"const"),e(" books "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"await"),e(" bookModel"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"fetchAll"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token keyword"},"const"),e(" author "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"await"),e(" authorModel"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"fetch"),t("span",{class:"token punctuation"},"("),e("authorId"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token comment"},"// right"),e("\n"),t("span",{class:"token keyword"},"const"),e(" bookPromise "),t("span",{class:"token operator"},"="),e(" bookModel"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"fetchAll"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token keyword"},"const"),e(" authorPromise "),t("span",{class:"token operator"},"="),e(" authorModel"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"fetch"),t("span",{class:"token punctuation"},"("),e("authorId"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token keyword"},"const"),e(" book "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"await"),e(" bookPromise"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token keyword"},"const"),e(" author "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"await"),e(" authorPromise"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token keyword"},"async"),e(),t("span",{class:"token function"},"getAuthors"),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"authorIds"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"// WRONG, this will cause sequential calls"),e("\n "),t("span",{class:"token comment"},"// const authors = _.map("),e("\n "),t("span",{class:"token comment"},"// authorIds,"),e("\n "),t("span",{class:"token comment"},"// id => await authorModel.fetch(id));"),e("\n "),t("span",{class:"token comment"},"// CORRECT"),e("\n "),t("span",{class:"token keyword"},"const"),e(" promises "),t("span",{class:"token operator"},"="),e(" _"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"map"),t("span",{class:"token punctuation"},"("),e("authorIds"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token parameter"},"id"),e(),t("span",{class:"token operator"},"=>"),e(" authorModel"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"fetch"),t("span",{class:"token punctuation"},"("),e("id"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"const"),e(" authors "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"await"),e(" Promise"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"all"),t("span",{class:"token punctuation"},"("),e("promises"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br")])],-1),ut=t("h5",{id:"await-arrays"},[t("a",{class:"header-anchor",href:"#await-arrays","aria-hidden":"true"},"#"),e(" Await Arrays")],-1),rt=t("ul",null,[t("li",null,"If you want to execute await calls in series, use a for-loop (or any loop without a callback)."),t("li",null,[e("Don't ever use await with "),t("code",null,"forEach"),e(" ("),t("code",null,"forEach"),e(" is not promise-aware), use a for-loop (or any loop without a callback) instead.")]),t("li",null,"Don't await inside filter and reduce, always await an array of promises with map, then filter or reduce accordingly.")],-1),it=t("h4",{id:"sleep-function"},[t("a",{class:"header-anchor",href:"#sleep-function","aria-hidden":"true"},"#"),e(" Sleep Function")],-1),kt=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token function"},"sleep"),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"time"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"return"),e(),t("span",{class:"token keyword"},"new"),e(),t("span",{class:"token class-name"},"Promise"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"resolve"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token function"},"setTimeout"),t("span",{class:"token punctuation"},"("),e("resolve"),t("span",{class:"token punctuation"},","),e(" time"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br")])],-1),bt=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token function"},"sleep"),t("span",{class:"token punctuation"},"("),t("span",{class:"token number"},"2000"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"then"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"//do something after 2000 milliseconds"),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'resolved'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token keyword"},"async"),e(),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token function"},"add"),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},[e("n1"),t("span",{class:"token punctuation"},","),e(" n2")]),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"await"),e(),t("span",{class:"token function"},"sleep"),t("span",{class:"token punctuation"},"("),t("span",{class:"token number"},"2222"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),e("n1 "),t("span",{class:"token operator"},"+"),e(" n2"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token function"},"add"),t("span",{class:"token punctuation"},"("),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"2"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br")])],-1),mt=t("h4",{id:"race-condition"},[t("a",{class:"header-anchor",href:"#race-condition","aria-hidden":"true"},"#"),e(" Race Condition")],-1),dt=t("ul",null,[t("li",null,"keep latest updates"),t("li",null,"recover from failures"),t("li",null,[e("online and offline sync ("),t("a",{href:"https://github.com/pouchdb/pouchdb",target:"_blank",rel:"noopener noreferrer"},"PouchDB"),e(")")]),t("li",null,[e("tools: "),t("a",{href:"https://github.com/redux-saga/redux-saga",target:"_blank",rel:"noopener noreferrer"},"redux-saga")])],-1),gt=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"export"),e(),t("span",{class:"token keyword"},"default"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token function"},"data"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"return"),e(),t("span",{class:"token punctuation"},"{"),e("\n text"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token string"},"''"),t("span",{class:"token punctuation"},","),e("\n results"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token punctuation"},"["),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},","),e("\n nextRequestId"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},","),e("\n displayedRequestId"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token number"},"0"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),e("\n watch"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"async"),e(),t("span",{class:"token function"},"text"),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"value"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"const"),e(" requestId "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"this"),t("span",{class:"token punctuation"},"."),e("nextRequestId"),t("span",{class:"token operator"},"++"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"const"),e(" results "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"await"),e(),t("span",{class:"token function"},"search"),t("span",{class:"token punctuation"},"("),e("value"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token comment"},"// guarantee display latest search results (when input keep changing)"),e("\n "),t("span",{class:"token keyword"},"if"),e(),t("span",{class:"token punctuation"},"("),e("requestId "),t("span",{class:"token operator"},"<"),e(),t("span",{class:"token keyword"},"this"),t("span",{class:"token punctuation"},"."),e("displayedRequestId"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"return"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n\n "),t("span",{class:"token keyword"},"this"),t("span",{class:"token punctuation"},"."),e("displayedRequestId "),t("span",{class:"token operator"},"="),e(" requestId"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"this"),t("span",{class:"token punctuation"},"."),e("results "),t("span",{class:"token operator"},"="),e(" results"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br")])],-1),ht=t("h4",{id:"async-comparison"},[t("a",{class:"header-anchor",href:"#async-comparison","aria-hidden":"true"},"#"),e(" Async Comparison")],-1),ft=t("ul",null,[t("li",null,"promise 和 async/await 是专门用于处理异步操作的."),t("li",null,"Generator 并不是为异步而设计出来的, 它还有其他功能(对象迭代, 控制输出, Iterator Interface...)"),t("li",null,"promise 编写代码相比 Generator、async 更为复杂化,且可读性也稍差."),t("li",null,"Generator、async 需要与 promise 对象搭配处理异步情况."),t("li",null,"async 实质是 Generator 的语法糖, 相当于会自动执行 Generator 函数."),t("li",null,"async 使用上更为简洁, 将异步代码以同步的形式进行编写, 是处理异步编程的最终方案.")],-1),yt=t("h2",{id:"functional-javascript"},[t("a",{class:"header-anchor",href:"#functional-javascript","aria-hidden":"true"},"#"),e(" Functional JavaScript")],-1),wt=t("ul",null,[t("li",null,"predictable (pure and immutable)"),t("li",null,"safe (pure and immutable)"),t("li",null,"transparent (pure and immutable)"),t("li",null,"modular (composite)")],-1),vt=t("h3",{id:"pros"},[t("a",{class:"header-anchor",href:"#pros","aria-hidden":"true"},"#"),e(" Pros")],-1),xt=t("ul",null,[t("li",null,"type safe and state safe"),t("li",null,"explicit flow of data"),t("li",null,"concurrency safety")],-1),jt=t("h3",{id:"cons"},[t("a",{class:"header-anchor",href:"#cons","aria-hidden":"true"},"#"),e(" Cons")],-1),St=t("ul",null,[t("li",null,"verbose"),t("li",null,"more object creation"),t("li",null,"more garbage collection"),t("li",null,"more memory usage")],-1),Tt=t("p",null,[e("With help of "),t("code",null,"immutable.js"),e(", object creation/garbage collection/memory usage can be alleviated.")],-1),Pt=t("p",null,[e("For example, in vanilla.js, "),t("code",null,"map2 === map1"),e(" become "),t("code",null,"false"),e(", but in immutable.js "),t("code",null,"map2 === map1"),e(" become "),t("code",null,"true"),e(" (copy free due to immutable data).")],-1),Ct=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(" map1 "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"{"),e(),t("span",{class:"token string"},"'b'"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token number"},"2"),e(),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token keyword"},"const"),e(" map2 "),t("span",{class:"token operator"},"="),e(" map1"),t("span",{class:"token punctuation"},"."),e("set"),t("span",{class:"token punctuation"},"{"),e(),t("span",{class:"token string"},"'b'"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token number"},"2"),e(),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br")])],-1),It=t("h3",{id:"closure"},[t("a",{class:"header-anchor",href:"#closure","aria-hidden":"true"},"#"),e(" Closure")],-1),_t=t("p",null,"Closure is a function that remembers the variables from the place where it is defined (lexical scope), regardless of where it is executed later:",-1),At=t("ul",null,[t("li",null,"函数外部不可对函数内部进行赋值或引用"),t("li",null,"函数中的闭包函数可对函数进行赋值或引用(函数对于闭包来说是外部, 即内部引用外部)"),t("li",null,"特权性质: 从外部通过闭包方法访问内部(函数作用域)局部变量 (private getter)"),t("li",null,"Local Scope -> Outer Functions Scope -> Global Scope."),t("li",null,"Closure Performance: avoid unnecessary closure creation."),t("li",null,"The stale closure captures variables that have outdated values.")],-1),Et=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token comment"},"// global scope"),e("\n"),t("span",{class:"token keyword"},"var"),e(" e "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token number"},"10"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token function"},"sum"),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"a"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"return"),e(),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"b"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"return"),e(),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"c"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"// outer functions scope"),e("\n "),t("span",{class:"token keyword"},"return"),e(),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"d"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"// local scope"),e("\n "),t("span",{class:"token keyword"},"return"),e(" a "),t("span",{class:"token operator"},"+"),e(" b "),t("span",{class:"token operator"},"+"),e(" c "),t("span",{class:"token operator"},"+"),e(" d "),t("span",{class:"token operator"},"+"),e(" e"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\nconsole"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),t("span",{class:"token function"},"sum"),t("span",{class:"token punctuation"},"("),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},"("),t("span",{class:"token number"},"2"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},"("),t("span",{class:"token number"},"3"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},"("),t("span",{class:"token number"},"4"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},"// log 20"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br")])],-1),Ot=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token comment"},"// BAD"),e("\n"),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token function"},"MyObject"),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},[e("name"),t("span",{class:"token punctuation"},","),e(" message")]),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"this"),t("span",{class:"token punctuation"},"."),e("name "),t("span",{class:"token operator"},"="),e(" name"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"toString"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"this"),t("span",{class:"token punctuation"},"."),e("message "),t("span",{class:"token operator"},"="),e(" message"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"toString"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"this"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function-variable function"},"getName"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"return"),e(),t("span",{class:"token keyword"},"this"),t("span",{class:"token punctuation"},"."),e("name"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token keyword"},"this"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function-variable function"},"getMessage"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"return"),e(),t("span",{class:"token keyword"},"this"),t("span",{class:"token punctuation"},"."),e("message"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token comment"},"// GOOD: avoid unnecessary"),e("\n"),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token function"},"MyObject"),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},[e("name"),t("span",{class:"token punctuation"},","),e(" message")]),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"this"),t("span",{class:"token punctuation"},"."),e("name "),t("span",{class:"token operator"},"="),e(" name"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"toString"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"this"),t("span",{class:"token punctuation"},"."),e("message "),t("span",{class:"token operator"},"="),e(" message"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"toString"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n"),t("span",{class:"token class-name"},"MyObject"),t("span",{class:"token punctuation"},"."),e("prototype"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function-variable function"},"getName"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"return"),e(),t("span",{class:"token keyword"},"this"),t("span",{class:"token punctuation"},"."),e("name"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token class-name"},"MyObject"),t("span",{class:"token punctuation"},"."),e("prototype"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function-variable function"},"getMessage"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"return"),e(),t("span",{class:"token keyword"},"this"),t("span",{class:"token punctuation"},"."),e("message"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br")])],-1),Mt=t("h4",{id:"闭包函数的结构"},[t("a",{class:"header-anchor",href:"#闭包函数的结构","aria-hidden":"true"},"#"),e(" 闭包函数的结构")],-1),Dt=t("ul",null,[t("li",null,"优先级: this > 局部变量 > 形参 > arguments > 函数名"),t("li",null,[t("code",null,"innerFunc()"),e(" has access to "),t("code",null,"outerVar"),e(" from its lexical scope, even being "),t("strong",null,"executed outside of its lexical scope"),e(".")])],-1),Lt=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[e("unction "),t("span",{class:"token function"},"outerFunc"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"let"),e(" outerVar "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token string"},"'I am outside!'"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token function"},"innerFunc"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),e("outerVar"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token comment"},'// => logs "I am outside!"'),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n\n "),t("span",{class:"token keyword"},"return"),e(" innerFunc"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token keyword"},"const"),e(" myInnerFunc "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token function"},"outerFunc"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token function"},"myInnerFunc"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br")])],-1),Wt=t("h3",{id:"partial-application"},[t("a",{class:"header-anchor",href:"#partial-application","aria-hidden":"true"},"#"),e(" Partial Application")],-1),Nt=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token function-variable function"},"partialFromBind"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},[e("fn"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token operator"},"..."),e("args")]),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"return"),e(),t("span",{class:"token function"},"fn"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"bind"),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"null"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token operator"},"..."),e("args"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token function-variable function"},"partial"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},[e("fn"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token operator"},"..."),e("args")]),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"return"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},[t("span",{class:"token operator"},"..."),e("rest")]),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"return"),e(),t("span",{class:"token function"},"fn"),t("span",{class:"token punctuation"},"("),t("span",{class:"token operator"},"..."),e("args"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token operator"},"..."),e("rest"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br")])],-1),Rt=t("h3",{id:"currying"},[t("a",{class:"header-anchor",href:"#currying","aria-hidden":"true"},"#"),e(" Currying")],-1),zt=t("p",null,"chain of multiple single argument functions",-1),Bt=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token function-variable function"},"add"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"x"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"y"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(" x "),t("span",{class:"token operator"},"+"),e(" y"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br")])],-1),Ft=t("div",{class:"language-javascript line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token function"},"curry"),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"fn"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"const"),e(" slice "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token class-name"},"Array"),t("span",{class:"token punctuation"},"."),e("prototype"),t("span",{class:"token punctuation"},"."),e("slice"),t("span",{class:"token punctuation"},","),e("\n stored_args "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token function"},"slice"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"call"),t("span",{class:"token punctuation"},"("),e("arguments"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token keyword"},"return"),e(),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"const"),e(" new_args "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token function"},"slice"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"call"),t("span",{class:"token punctuation"},"("),e("arguments"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},","),e("\n args "),t("span",{class:"token operator"},"="),e(" stored_args"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"concat"),t("span",{class:"token punctuation"},"("),e("new_args"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"return"),e(),t("span",{class:"token function"},"fn"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"apply"),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"null"),t("span",{class:"token punctuation"},","),e(" args"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token keyword"},"const"),e(" addOne "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token function"},"curry"),t("span",{class:"token punctuation"},"("),e("add"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token comment"},"// addOne(3) === 4;"),e("\n"),t("span",{class:"token keyword"},"const"),e(" addFive "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token function"},"curry"),t("span",{class:"token punctuation"},"("),e("addOne"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"3"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token comment"},"// addFive(4) === 9;"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br")])],-1),Ht=t("h2",{id:"internal-javascript"},[t("a",{class:"header-anchor",href:"#internal-javascript","aria-hidden":"true"},"#"),e(" Internal JavaScript")],-1),qt=t("p",null,"Under the hood",-1),Jt=t("h3",{id:"variables-lifecycle"},[t("a",{class:"header-anchor",href:"#variables-lifecycle","aria-hidden":"true"},"#"),e(" Variables Lifecycle")],-1),Ut=t("ul",null,[t("li",null,[e("Creation phase ("),t("strong",null,"Hoisting"),e(") "),t("ul",null,[t("li",null,"Declaration phase: 在作用域中注册变量"),t("li",null,[e("Initialization phase: 分配内存, 在作用域中绑定变量 ("),t("code",null,"undefined"),e(")")])])]),t("li",null,"Execution phase/Assignment phase")],-1),Gt=t("h3",{id:"execution-context"},[t("a",{class:"header-anchor",href:"#execution-context","aria-hidden":"true"},"#"),e(" Execution Context")],-1),$t=t("h4",{id:"global-execution-context"},[t("a",{class:"header-anchor",href:"#global-execution-context","aria-hidden":"true"},"#"),e(" Global Execution Context")],-1),Vt=t("ul",null,[t("li",null,[e("create global object ("),t("code",null,"window"),e(")")]),t("li",null,[e("create "),t("code",null,"this"),e(" object(refer to "),t("code",null,"window"),e(")")]),t("li",null,[e("declare and initialize variable("),t("code",null,"undefined"),e(")/function, store them into memory")])],-1),Kt=t("h4",{id:"function-execution-context"},[t("a",{class:"header-anchor",href:"#function-execution-context","aria-hidden":"true"},"#"),e(" Function Execution Context")],-1),Yt=t("ul",null,[t("li",null,"create arguments object"),t("li",null,[e("create "),t("code",null,"this"),e(" object")]),t("li",null,[e("declare and initialize variable("),t("code",null,"undefined"),e(")/function, store them into memory")])],-1),Xt=t("p",null,[e("如果 JavaScript 引擎在函数执行上下文中找不到变量, 它会在最近的父级执行上下文中查找该变量. 这个查找链将会一直持续, 直到引擎查找到全局执行上下文. 这种情况下, 如果全局执行上下文也没有该变量, 那么将会抛出引用错误 (Reference Error). 子函数“包含”它父级函数的变量环境,把这个概念称为"),t("strong",null,"闭包(Closure)"),e(", 即使父级函数执行环境已经从执行栈弹出了, 子函数还是可以访问父级函数变量 x (通过作用域链).")],-1),Zt=t("h3",{id:"event-loop"},[t("a",{class:"header-anchor",href:"#event-loop","aria-hidden":"true"},"#"),e(" Event Loop")],-1),Qt=t("h4",{id:"browser-event-loop"},[t("a",{class:"header-anchor",href:"#browser-event-loop","aria-hidden":"true"},"#"),e(" Browser Event Loop")],-1),ne=t("p",null,[t("img",{src:"/awesome-notes/assets/EventLoop.30d3251e.jpg",alt:"Event Loop"})],-1),se=t("p",null,[e("The job of the "),t("strong",null,"event loop"),e(" is to look into the call stack and determine if the call stack is empty or not. If the "),t("strong",null,"call stack"),e(" is empty, it looks into the "),t("strong",null,"ES6 job queue"),e(" and "),t("strong",null,"message queue"),e(" to see if there’s any pending call back waiting to be executed:")],-1),ae=t("ul",null,[t("li",null,[e("ES6 job queue: used by "),t("code",null,"Promises"),e(" (higher priority)")]),t("li",null,[e("message queue: used by "),t("code",null,"setTimeout"),e(", "),t("code",null,"DOM events")]),t("li",null,"微任务 Microtask,有特权, 可以插队: process.nextTick, Promises.then (Promise 构造函数是同步函数), Object.observer, MutationObserver"),t("li",null,"宏任务 Macrotask,没有特权: setTimeout, setInterval, setImmediate, I/O, MessageChannel, postMessage, UI rendering, UI Interaction Events"),t("li",null,"Microtask 优先于 Macrotask"),t("li",null,"浏览器为了能够使得 JS 内部 (macro)task 与 DOM 任务能够有序的执行, 会在一个 (macro)task 执行结束后, 在下一个 (macro)task 执行开始前, 对页面进行重新渲染. 当 JS 引擎从任务队列中取出一个宏任务来执行, 如果执行过程中有遇到微任务, 那么执行完该宏任务就会去执行宏任务内的所有微任务, 然后更新 UI. 后面就是再从任务队列中取出下一个宏任务来继续执行, 以此类推.")],-1),te=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"for"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"let"),e(" ii "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token number"},"0"),t("span",{class:"token punctuation"},";"),e(" ii "),t("span",{class:"token operator"},"<"),e(" macrotask"),t("span",{class:"token punctuation"},"."),e("length"),t("span",{class:"token punctuation"},";"),e(" ii"),t("span",{class:"token operator"},"++"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token function"},"eval"),t("span",{class:"token punctuation"},"("),e("macrotask"),t("span",{class:"token punctuation"},"["),e("ii"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token keyword"},"if"),e(),t("span",{class:"token punctuation"},"("),e("microtask"),t("span",{class:"token punctuation"},"."),e("length "),t("span",{class:"token operator"},"!="),e(),t("span",{class:"token number"},"0"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"// process all microtasks"),e("\n "),t("span",{class:"token keyword"},"for"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"let"),e(" __i "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token number"},"0"),t("span",{class:"token punctuation"},";"),e(" __i "),t("span",{class:"token operator"},"<"),e(" microtask"),t("span",{class:"token punctuation"},"."),e("length"),t("span",{class:"token punctuation"},";"),e(" __i"),t("span",{class:"token operator"},"++"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token function"},"eval"),t("span",{class:"token punctuation"},"("),e("microtask"),t("span",{class:"token punctuation"},"["),e("__i"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n\n "),t("span",{class:"token comment"},"// empty microtask"),e("\n microtask "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"["),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n\n "),t("span",{class:"token comment"},"// next macrotask in next loop iteration"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br")])],-1),ee=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token function-variable function"},"bar"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'bar'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token function-variable function"},"baz"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'baz'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token function-variable function"},"foo"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'foo'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token function"},"setTimeout"),t("span",{class:"token punctuation"},"("),e("bar"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"0"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"new"),e(),t("span",{class:"token class-name"},"Promise"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},[e("resolve"),t("span",{class:"token punctuation"},","),e(" reject")]),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token function"},"resolve"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'Promise resolved'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),e("\n "),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"then"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"res"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(" console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),e("res"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),e("\n "),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"catch"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"err"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(" console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),e("err"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token function"},"baz"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token function"},"foo"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token comment"},"// foo"),e("\n"),t("span",{class:"token comment"},"// baz"),e("\n"),t("span",{class:"token comment"},"// Promised resolved"),e("\n"),t("span",{class:"token comment"},"// bar"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br"),t("span",{class:"line-number"},"25"),t("br")])],-1),oe=t("p",null,[e("As above code, using "),t("code",null,"setTimeout"),e(" with "),t("code",null,"0"),e(" seconds timer helps to defer execution of "),t("code",null,"Promise"),e(" and "),t("code",null,"bar"),e(" until the "),t("strong",null,"stack"),e(" is "),t("strong",null,"empty"),e(".")],-1),ce=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[e("console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'1'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token function"},"setTimeout"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),t("span",{class:"token number"},"2"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n Promise"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"resolve"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"then"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),t("span",{class:"token number"},"3"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n process"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"nextTick"),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token function"},"foo"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),t("span",{class:"token number"},"4"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\nPromise"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"resolve"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"then"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),t("span",{class:"token number"},"5"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token function"},"setTimeout"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),t("span",{class:"token number"},"6"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n Promise"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"resolve"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"then"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),t("span",{class:"token number"},"7"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\nprocess"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"nextTick"),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token function"},"foo"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),t("span",{class:"token number"},"8"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n process"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"nextTick"),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token function"},"foo"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),t("span",{class:"token number"},"9"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\nconsole"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'10'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token comment"},"// 1 10 8 9 5 7 2 3 4 6"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br"),t("span",{class:"line-number"},"25"),t("br"),t("span",{class:"line-number"},"26"),t("br"),t("span",{class:"line-number"},"27"),t("br"),t("span",{class:"line-number"},"28"),t("br"),t("span",{class:"line-number"},"29"),t("br"),t("span",{class:"line-number"},"30"),t("br"),t("span",{class:"line-number"},"31"),t("br")])],-1),le=t("p",null,"Promise 构造函数本身是同步函数",-1),pe=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[e("console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'script start'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token keyword"},"const"),e(" promise1 "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"new"),e(),t("span",{class:"token class-name"},"Promise"),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"resolve"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'promise1'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token function"},"resolve"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'promise1 end'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"then"),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'promise2'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token function"},"setTimeout"),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'setTimeout'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\nconsole"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'script end'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token comment"},"// 输出顺序: script start->promise1->promise1 end->script end->promise2->setTimeout"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br")])],-1),ue=t("p",null,[t("code",null,"await a(); b()"),e(" 等价于 "),t("code",null,"Promise(a()).then(b())"),e(": a 是同步执行, b 是 microtask")],-1),re=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"async"),e(),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token function"},"async1"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'async1 start'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"await"),e(),t("span",{class:"token function"},"async2"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'async1 end'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n"),t("span",{class:"token keyword"},"async"),e(),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token function"},"async2"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'async2'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\nconsole"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'script start'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token function"},"setTimeout"),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'setTimeout'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"0"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token function"},"async1"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token keyword"},"new"),e(),t("span",{class:"token class-name"},"Promise"),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"resolve"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'promise1'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token function"},"resolve"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"then"),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'promise2'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\nconsole"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'script end'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token comment"},"/*\nscript start\nasync1 start\nasync2\npromise1\nscript end\nasync1 end\npromise2\nsetTimeout\n*/"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br"),t("span",{class:"line-number"},"25"),t("br"),t("span",{class:"line-number"},"26"),t("br"),t("span",{class:"line-number"},"27"),t("br"),t("span",{class:"line-number"},"28"),t("br"),t("span",{class:"line-number"},"29"),t("br"),t("span",{class:"line-number"},"30"),t("br"),t("span",{class:"line-number"},"31"),t("br"),t("span",{class:"line-number"},"32"),t("br"),t("span",{class:"line-number"},"33"),t("br"),t("span",{class:"line-number"},"34"),t("br"),t("span",{class:"line-number"},"35"),t("br"),t("span",{class:"line-number"},"36"),t("br")])],-1),ie=t("p",null,"当调用栈没有同步函数时, 直接执行任务队列里的函数",-1),ke=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token function"},"test"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'start'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token function"},"setTimeout"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'children2'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n Promise"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"resolve"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"then"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'children2-1'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"0"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token function"},"setTimeout"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'children3'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n Promise"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"resolve"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"then"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'children3-1'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"0"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n Promise"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"resolve"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"then"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'children1'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'end'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token function"},"test"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token comment"},"// start"),e("\n"),t("span",{class:"token comment"},"// end"),e("\n"),t("span",{class:"token comment"},"// children1"),e("\n"),t("span",{class:"token comment"},"// children2"),e("\n"),t("span",{class:"token comment"},"// children2-1"),e("\n"),t("span",{class:"token comment"},"// children3"),e("\n"),t("span",{class:"token comment"},"// children3-1"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br"),t("span",{class:"line-number"},"25"),t("br"),t("span",{class:"line-number"},"26"),t("br"),t("span",{class:"line-number"},"27"),t("br"),t("span",{class:"line-number"},"28"),t("br"),t("span",{class:"line-number"},"29"),t("br"),t("span",{class:"line-number"},"30"),t("br"),t("span",{class:"line-number"},"31"),t("br"),t("span",{class:"line-number"},"32"),t("br")])],-1),be=t("h4",{id:"node-event-loop"},[t("a",{class:"header-anchor",href:"#node-event-loop","aria-hidden":"true"},"#"),e(" Node Event Loop")],-1),me=t("p",null,"Node.js can run I/O operations in a non-blocking way, meaning other code (and even other I/O operations) can be executed while an I/O operation is in progress.",-1),de=t("p",null,"Instead of having to ‘wait’ for an I/O operation to complete (and essentially waste CPU cycles sitting idle), Node.js can use the time to execute other tasks.",-1),ge=t("p",null,[e("When the I/O operation completes, "),t("strong",null,"event loop"),e(" give back control to the piece of code that is waiting for the result of that I/O operation.")],-1),he=t("p",null,[e("The Node.js execution model was designed to cater to the needs of most web servers, which tend to be "),t("strong",null,"I/O-intensive"),e(" (due to non-blocking I/O).")],-1),fe=t("h2",{id:"browser-internal"},[t("a",{class:"header-anchor",href:"#browser-internal","aria-hidden":"true"},"#"),e(" Browser Internal")],-1),ye=t("ul",null,[t("li",null,"Chrome: Blink (based on Webkit) + V8"),t("li",null,"Firefox: Gecko + SpiderMonkey"),t("li",null,"Safari: Webkit + JavaScriptCore (Nitro)"),t("li",null,"Edge: Trident/EdgeHTML + Chakra -> Chromium")],-1),we=t("h3",{id:"browser-process"},[t("a",{class:"header-anchor",href:"#browser-process","aria-hidden":"true"},"#"),e(" Browser Process")],-1),ve=t("ul",null,[t("li",null,"浏览器进程: 主要负责界面显示、用户交互、子进程管理,同时提供存储等功能."),t("li",null,"GPU 进程: 实现 3D CSS, 绘制 UI 界面."),t("li",null,"网络进程:主要负责页面的网络资源加载."),t("li",null,"渲染进程:核心任务是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页, 排版引擎 Blink 和 JavaScript 引擎 V8 都是运行在该进程中. 默认情况下, Chrome 会为每个 Tab 标签创建一个渲染进程. 出于安全考虑, 渲染进程都是运行在沙箱模式下."),t("li",null,"插件进程:主要是负责插件的运行, 因插件易崩溃,所以需要通过隔离以保证插件进程崩溃不会对浏览器和页面造成影响.")],-1),xe=t("h3",{id:"render-engine"},[t("a",{class:"header-anchor",href:"#render-engine","aria-hidden":"true"},"#"),e(" Render Engine")],-1),je=t("ul",null,[t("li",null,"Download HTML"),t("li",null,"Parser/Script"),t("li",null,"DOM and CSSOM Construction"),t("li",null,"Render Tree = DOM Tree + Styled Tree"),t("li",null,"Layout"),t("li",null,"Paint"),t("li",null,"Composite"),t("li",null,[t("a",{href:"https://developer.chrome.com/blog/renderingng-architecture",target:"_blank",rel:"noopener noreferrer"},"Chrome Rendering Architecture")])],-1),Se=t("p",null,[t("a",{href:"https://sia.codes/posts/render-blocking-resources/#critical-render-path-js",target:"_blank",rel:"noopener noreferrer"},[t("img",{src:"/awesome-notes/assets/CriticalRenderPath.9e821854.svg",alt:"Critical Render Path"})])],-1),Te=t("h4",{id:"html-parser"},[t("a",{class:"header-anchor",href:"#html-parser","aria-hidden":"true"},"#"),e(" HTML Parser")],-1),Pe=t("p",null,"DTD is context-sensitive grammar. Use State Machine pattern to implement a tokenizer",-1),Ce=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[e("Data "),t("span",{class:"token operator"},"-"),t("span",{class:"token operator"},">"),e(" Tag Open "),t("span",{class:"token operator"},"-"),t("span",{class:"token operator"},">"),e(" Tag Name "),t("span",{class:"token operator"},"-"),t("span",{class:"token operator"},">"),e(" Tag Close "),t("span",{class:"token operator"},"-"),t("span",{class:"token operator"},">"),e(" Data\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br")])],-1),Ie=t("p",null,"tokenizer send tokens to constructor, constructing DOM tree",-1),_e=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[e("initial "),t("span",{class:"token operator"},"-"),t("span",{class:"token operator"},">"),e(" before "),t("span",{class:"token constant"},"HTML"),e(),t("span",{class:"token operator"},"-"),t("span",{class:"token operator"},">"),e(" before head "),t("span",{class:"token operator"},"-"),t("span",{class:"token operator"},">"),e(),t("span",{class:"token keyword"},"in"),e(" head "),t("span",{class:"token operator"},"-"),t("span",{class:"token operator"},">"),e(" after head\n"),t("span",{class:"token operator"},"-"),t("span",{class:"token operator"},">"),e(),t("span",{class:"token keyword"},"in"),e(" body "),t("span",{class:"token operator"},"-"),t("span",{class:"token operator"},">"),e(" after body "),t("span",{class:"token operator"},"-"),t("span",{class:"token operator"},">"),e(" after after body "),t("span",{class:"token operator"},"-"),t("span",{class:"token operator"},">"),e(),t("span",{class:"token constant"},"EOF"),e(" token\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br")])],-1),Ae=t("h4",{id:"css-parser"},[t("a",{class:"header-anchor",href:"#css-parser","aria-hidden":"true"},"#"),e(" CSS Parser")],-1),Ee=t("p",null,"CSS is context-free grammar. Webkit use flex/bison (bottom-to-up), Gecko use up-to-bottom.",-1),Oe=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[e("ruleSet\n "),t("span",{class:"token operator"},":"),e(" selector "),t("span",{class:"token punctuation"},"["),e(),t("span",{class:"token string"},"','"),e(),t("span",{class:"token constant"},"S"),t("span",{class:"token operator"},"*"),e(" selector "),t("span",{class:"token punctuation"},"]"),t("span",{class:"token operator"},"*"),e("\n "),t("span",{class:"token string"},"'{'"),e(),t("span",{class:"token constant"},"S"),t("span",{class:"token operator"},"*"),e(" declaration "),t("span",{class:"token punctuation"},"["),e(),t("span",{class:"token string"},"';'"),e(),t("span",{class:"token constant"},"S"),t("span",{class:"token operator"},"*"),e(" declaration "),t("span",{class:"token punctuation"},"]"),t("span",{class:"token operator"},"*"),e(),t("span",{class:"token string"},"'}'"),e(),t("span",{class:"token constant"},"S"),t("span",{class:"token operator"},"*"),e("\n "),t("span",{class:"token punctuation"},";"),e("\nselector\n "),t("span",{class:"token operator"},":"),e(" simple_selector "),t("span",{class:"token punctuation"},"["),e(" combinator selector "),t("span",{class:"token operator"},"|"),e(),t("span",{class:"token constant"},"S"),t("span",{class:"token operator"},"+"),e(),t("span",{class:"token punctuation"},"["),e(" combinator"),t("span",{class:"token operator"},"?"),e(" selector "),t("span",{class:"token punctuation"},"]"),t("span",{class:"token operator"},"?"),e(),t("span",{class:"token punctuation"},"]"),t("span",{class:"token operator"},"?"),e("\n "),t("span",{class:"token punctuation"},";"),e("\nsimple_selector\n "),t("span",{class:"token operator"},":"),e(" element_name "),t("span",{class:"token punctuation"},"["),e(),t("span",{class:"token constant"},"HASH"),e(),t("span",{class:"token operator"},"|"),e(),t("span",{class:"token keyword"},"class"),e(),t("span",{class:"token operator"},"|"),e(" attrib "),t("span",{class:"token operator"},"|"),e(" pseudo "),t("span",{class:"token punctuation"},"]"),t("span",{class:"token operator"},"*"),e("\n "),t("span",{class:"token operator"},"|"),e(),t("span",{class:"token punctuation"},"["),e(),t("span",{class:"token constant"},"HASH"),e(),t("span",{class:"token operator"},"|"),e(),t("span",{class:"token keyword"},"class"),e(),t("span",{class:"token operator"},"|"),e(" attrib "),t("span",{class:"token operator"},"|"),e(" pseudo "),t("span",{class:"token punctuation"},"]"),t("span",{class:"token operator"},"+"),e("\n "),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token keyword"},"class"),e("\n "),t("span",{class:"token operator"},":"),e(),t("span",{class:"token string"},"'.'"),e(),t("span",{class:"token constant"},"IDENT"),e("\n "),t("span",{class:"token punctuation"},";"),e("\nelement_name\n "),t("span",{class:"token operator"},":"),e(),t("span",{class:"token constant"},"IDENT"),e(),t("span",{class:"token operator"},"|"),e(),t("span",{class:"token string"},"'*'"),e("\n "),t("span",{class:"token punctuation"},";"),e("\nattrib\n "),t("span",{class:"token operator"},":"),e(),t("span",{class:"token string"},"'['"),e(),t("span",{class:"token constant"},"S"),t("span",{class:"token operator"},"*"),e(),t("span",{class:"token constant"},"IDENT"),e(),t("span",{class:"token constant"},"S"),t("span",{class:"token operator"},"*"),e(),t("span",{class:"token punctuation"},"["),e(),t("span",{class:"token punctuation"},"["),e(),t("span",{class:"token string"},"'='"),e(),t("span",{class:"token operator"},"|"),e(),t("span",{class:"token constant"},"INCLUDES"),e(),t("span",{class:"token operator"},"|"),e(),t("span",{class:"token constant"},"DASHMATCH"),e(),t("span",{class:"token punctuation"},"]"),e(),t("span",{class:"token constant"},"S"),t("span",{class:"token operator"},"*"),e("\n "),t("span",{class:"token punctuation"},"["),e(),t("span",{class:"token constant"},"IDENT"),e(),t("span",{class:"token operator"},"|"),e(),t("span",{class:"token constant"},"STRING"),e(),t("span",{class:"token punctuation"},"]"),e(),t("span",{class:"token constant"},"S"),t("span",{class:"token operator"},"*"),e(),t("span",{class:"token punctuation"},"]"),e(),t("span",{class:"token string"},"']'"),e("\n "),t("span",{class:"token punctuation"},";"),e("\npseudo\n "),t("span",{class:"token operator"},":"),e(),t("span",{class:"token string"},"':'"),e(),t("span",{class:"token punctuation"},"["),e(),t("span",{class:"token constant"},"IDENT"),e(),t("span",{class:"token operator"},"|"),e(),t("span",{class:"token constant"},"FUNCTION"),e(),t("span",{class:"token constant"},"S"),t("span",{class:"token operator"},"*"),e(),t("span",{class:"token punctuation"},"["),t("span",{class:"token constant"},"IDENT"),e(),t("span",{class:"token constant"},"S"),t("span",{class:"token operator"},"*"),t("span",{class:"token punctuation"},"]"),e(),t("span",{class:"token string"},"')'"),e(),t("span",{class:"token punctuation"},"]"),e("\n "),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br")])],-1),Me=t("h4",{id:"render-blocking-resources"},[t("a",{class:"header-anchor",href:"#render-blocking-resources","aria-hidden":"true"},"#"),e(" Render Blocking Resources")],-1),De=t("p",null,"Render blocking resources are files that 'press pause' on the critical rendering path. They interrupt one or more of the steps:",-1),Le=t("ul",null,[t("li",null,"HTML is technically render blocking resources (but not usually the cause of rendering performance problem)"),t("li",null,"CSS is render blocking: render tree can't continue until both the CSSOM and DOM are created."),t("li",null,"JavaScript can be render blocking: when browser encounters a script meant to run synchronously, it will stop DOM creation until script finished."),t("li",null,"If CSS appears before a script, the script will not be executed until the CSSOM is created: CSSOM -> CSS block JS -> JS block HTML parser."),t("li",null,"Images and fonts are not render blocking.")],-1),We=t("h5",{id:"render-blocking-best-practice"},[t("a",{class:"header-anchor",href:"#render-blocking-best-practice","aria-hidden":"true"},"#"),e(" Render Blocking Best Practice")],-1),Ne=t("ul",null,[t("li",null,"Reduce CSS and JavaScript bytes."),t("li",null,"Lazy loading non-critical CSS and JavaScript."),t("li",null,[e("Use the "),t("code",null,"defer"),e(", "),t("code",null,"async"),e(", or "),t("code",null,"module"),e(" attribute on scripts.")])],-1),Re=t("h4",{id:"layout"},[t("a",{class:"header-anchor",href:"#layout","aria-hidden":"true"},"#"),e(" Layout")],-1),ze=t("p",null,"为避免对所有细小更改都进行整体布局,浏览器采用了一种“dirty 位”系统。 如果某个呈现器发生了更改,或者将自身及其子代标注为“dirty”,则需要进行布局:",-1),Be=t("ul",null,[t("li",null,"父呈现器确定自己的宽度"),t("li",null,[e("父呈现器依次处理子呈现器,并且: "),t("ul",null,[t("li",null,"放置子呈现器(设置 x,y 坐标)"),t("li",null,"如果有必要,调用子呈现器的布局(如果子呈现器是 dirty 的,或者这是全局布局,或出于其他某些原因), 这会计算子呈现器的高度")])]),t("li",null,"父呈现器根据子呈现器的累加高度以及边距和补白的高度来设置自身高度,此值也可供父呈现器的父呈现器使用"),t("li",null,"将其 dirty 位设置为 false")],-1),Fe=t("h4",{id:"paint"},[t("a",{class:"header-anchor",href:"#paint","aria-hidden":"true"},"#"),e(" Paint")],-1),He=t("p",null,"Paint Order:",-1),qe=t("ul",null,[t("li",null,"背景颜色"),t("li",null,"背景图片"),t("li",null,"边框"),t("li",null,"子代"),t("li",null,"轮廓")],-1),Je=t("h2",{id:"effective-javascript"},[t("a",{class:"header-anchor",href:"#effective-javascript","aria-hidden":"true"},"#"),e(" Effective JavaScript")],-1),Ue=t("h3",{id:"memory-leak"},[t("a",{class:"header-anchor",href:"#memory-leak","aria-hidden":"true"},"#"),e(" Memory Leak")],-1),Ge=t("ul",null,[t("li",null,"useless global vars (bind to window or document)"),t("li",null,"useless DOM reference"),t("li",null,[e("incorrect closure "),t("ul",null,[t("li",null,"useless callback functions"),t("li",null,"forgotten timer from setTimeout/setInterval")])]),t("li",null,"forgotten event listener"),t("li",null,"forgotten subscriber"),t("li",null,"forgotten console log"),t("li",null,"forgotten Set/Map (while WeakSet/WeakMap don't bother GC)"),t("li",null,"circular reference")],-1),$e=t("h3",{id:"禁用特性"},[t("a",{class:"header-anchor",href:"#禁用特性","aria-hidden":"true"},"#"),e(" 禁用特性")],-1),Ve=t("ul",null,[t("li",null,"with () {}"),t("li",null,"eval()"),t("li",null,"少用 new"),t("li",null,"少用 continue"),t("li",null,"少用 forEach()")],-1),Ke=t("h3",{id:"局部变量-函数参数"},[t("a",{class:"header-anchor",href:"#局部变量-函数参数","aria-hidden":"true"},"#"),e(" 局部变量/函数参数")],-1),Ye=t("ul",null,[t("li",null,"局部变量引用全局变量/全局变量作为参数传入函数: 加快符号解析"),t("li",null,"局部变量缓存 DOM 元素"),t("li",null,"局部变量缓存布局信息"),t("li",null,"局部变量引用嵌套成员: 加快原型链查找"),t("li",null,"局部变量引用方法时,应注意会动态改变 this 指针")],-1),Xe=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token constant"},"DOM"),e(),t("span",{class:"token operator"},"="),e(" tazimi"),t("span",{class:"token punctuation"},"."),e("util"),t("span",{class:"token punctuation"},"."),e("Dom"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token constant"},"DOM"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"method"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"call"),t("span",{class:"token punctuation"},"("),t("span",{class:"token comment"},"/* 关注 this 指针*/"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br")])],-1),Ze=t("h3",{id:"字符串"},[t("a",{class:"header-anchor",href:"#字符串","aria-hidden":"true"},"#"),e(" 字符串")],-1),Qe=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[e("str "),t("span",{class:"token operator"},"="),e(" str "),t("span",{class:"token operator"},"+"),e(),t("span",{class:"token string"},"'one'"),e(),t("span",{class:"token operator"},"+"),e(),t("span",{class:"token string"},"'two'"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br")])],-1),no=t("h3",{id:"函数"},[t("a",{class:"header-anchor",href:"#函数","aria-hidden":"true"},"#"),e(" 函数")],-1),so=t("h4",{id:"作用域链"},[t("a",{class:"header-anchor",href:"#作用域链","aria-hidden":"true"},"#"),e(" 作用域链")],-1),ao=t("p",null,"由于作用域链的关系,标识符解析时,寻找局部变量速度远快于寻找全局变量速度.故应将全局变量作为参数传入函数进行调用,不但效率高,而且易于维护与测试. 即 利用局部变量引用全局变量,加快标识符解析",-1),to=t("h3",{id:"循环"},[t("a",{class:"header-anchor",href:"#循环","aria-hidden":"true"},"#"),e(" 循环")],-1),eo=t("h4",{id:"倒序循环可提升性能"},[t("a",{class:"header-anchor",href:"#倒序循环可提升性能","aria-hidden":"true"},"#"),e(" 倒序循环可提升性能")],-1),oo=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"for"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"let"),e(" i "),t("span",{class:"token operator"},"="),e(" item"),t("span",{class:"token punctuation"},"."),e("length"),t("span",{class:"token punctuation"},";"),e(" i"),t("span",{class:"token operator"},"--"),t("span",{class:"token punctuation"},";"),e(),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token function"},"process"),t("span",{class:"token punctuation"},"("),e("items"),t("span",{class:"token punctuation"},"["),e("i"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token keyword"},"let"),e(" j "),t("span",{class:"token operator"},"="),e(" items"),t("span",{class:"token punctuation"},"."),e("length"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token keyword"},"while"),e(),t("span",{class:"token punctuation"},"("),e("j"),t("span",{class:"token operator"},"--"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token function"},"process"),t("span",{class:"token punctuation"},"("),e("items"),t("span",{class:"token punctuation"},"["),e("i"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token keyword"},"let"),e(" k "),t("span",{class:"token operator"},"="),e(" items"),t("span",{class:"token punctuation"},"."),e("length"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token keyword"},"do"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token function"},"process"),t("span",{class:"token punctuation"},"("),e("items"),t("span",{class:"token punctuation"},"["),e("k"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token keyword"},"while"),e(),t("span",{class:"token punctuation"},"("),e("k"),t("span",{class:"token operator"},"--"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br")])],-1),co=t("h4",{id:"duff-s-device"},[t("a",{class:"header-anchor",href:"#duff-s-device","aria-hidden":"true"},"#"),e(" Duff's Device")],-1),lo=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"let"),e(" i "),t("span",{class:"token operator"},"="),e(" items"),t("span",{class:"token punctuation"},"."),e("length "),t("span",{class:"token operator"},"%"),e(),t("span",{class:"token number"},"8"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token keyword"},"while"),e(),t("span",{class:"token punctuation"},"("),e("i"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token function"},"process"),t("span",{class:"token punctuation"},"("),e("items"),t("span",{class:"token punctuation"},"["),e("i"),t("span",{class:"token operator"},"--"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\ni "),t("span",{class:"token operator"},"="),e(" Math"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"floor"),t("span",{class:"token punctuation"},"("),e("items"),t("span",{class:"token punctuation"},"."),e("length "),t("span",{class:"token operator"},"/"),e(),t("span",{class:"token number"},"8"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token keyword"},"while"),e(),t("span",{class:"token punctuation"},"("),e("i"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token function"},"process"),t("span",{class:"token punctuation"},"("),e("items"),t("span",{class:"token punctuation"},"["),e("i"),t("span",{class:"token operator"},"--"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token function"},"process"),t("span",{class:"token punctuation"},"("),e("items"),t("span",{class:"token punctuation"},"["),e("i"),t("span",{class:"token operator"},"--"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token function"},"process"),t("span",{class:"token punctuation"},"("),e("items"),t("span",{class:"token punctuation"},"["),e("i"),t("span",{class:"token operator"},"--"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token function"},"process"),t("span",{class:"token punctuation"},"("),e("items"),t("span",{class:"token punctuation"},"["),e("i"),t("span",{class:"token operator"},"--"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token function"},"process"),t("span",{class:"token punctuation"},"("),e("items"),t("span",{class:"token punctuation"},"["),e("i"),t("span",{class:"token operator"},"--"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token function"},"process"),t("span",{class:"token punctuation"},"("),e("items"),t("span",{class:"token punctuation"},"["),e("i"),t("span",{class:"token operator"},"--"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token function"},"process"),t("span",{class:"token punctuation"},"("),e("items"),t("span",{class:"token punctuation"},"["),e("i"),t("span",{class:"token operator"},"--"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token function"},"process"),t("span",{class:"token punctuation"},"("),e("items"),t("span",{class:"token punctuation"},"["),e("i"),t("span",{class:"token operator"},"--"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br")])],-1),po=t("h3",{id:"exception"},[t("a",{class:"header-anchor",href:"#exception","aria-hidden":"true"},"#"),e(" Exception")],-1),uo=t("h4",{id:"call-stack-overflow"},[t("a",{class:"header-anchor",href:"#call-stack-overflow","aria-hidden":"true"},"#"),e(" Call Stack Overflow")],-1),ro=t("p",null,"调用栈尺寸限制异常,应立即定位在代码中的递归实例上",-1),io=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"try"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token function"},"recursion"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token keyword"},"catch"),e(),t("span",{class:"token punctuation"},"("),e("ex"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"error"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'error info'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br")])],-1),ko=t("h3",{id:"event-delegation"},[t("a",{class:"header-anchor",href:"#event-delegation","aria-hidden":"true"},"#"),e(" Event Delegation")],-1),bo=t("ul",null,[t("li",null,"事件委托利用的是事件冒泡机制,只制定一事件处理程序,就可以管理某一类型的所有事件"),t("li",null,"使用事件委托,只需在 DOM 树中尽量最高的层次上添加一个事件处理程序"),t("li",null,"increases performance and reduces memory consumption"),t("li",null,"no need to register new event listeners for newer children"),t("li",null,"DOM Event: Event Capturing (default false) -> Event Target -> Event Bubbling (default true).")],-1),mo=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[e("window"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function-variable function"},"onload"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"const"),e(" oUl "),t("span",{class:"token operator"},"="),e(" document"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"getElementById"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'ul'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"const"),e(" aLi "),t("span",{class:"token operator"},"="),e(" oUl"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"getElementsByTagName"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'li'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n oUl"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function-variable function"},"onmouseover"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"e"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"const"),e(" e "),t("span",{class:"token operator"},"="),e(" e "),t("span",{class:"token operator"},"||"),e(" window"),t("span",{class:"token punctuation"},"."),e("event"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"const"),e(" target "),t("span",{class:"token operator"},"="),e(" e"),t("span",{class:"token punctuation"},"."),e("target "),t("span",{class:"token operator"},"||"),e(" e"),t("span",{class:"token punctuation"},"."),e("srcElement"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token comment"},"//alert(target.innerHTML);"),e("\n\n "),t("span",{class:"token keyword"},"if"),e(),t("span",{class:"token punctuation"},"("),e("target"),t("span",{class:"token punctuation"},"."),e("nodeName"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"toLowerCase"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=="),e(),t("span",{class:"token string"},"'li'"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n target"),t("span",{class:"token punctuation"},"."),e("style"),t("span",{class:"token punctuation"},"."),e("background "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token string"},"'red'"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n\n "),t("span",{class:"token comment"},"// 阻止默认行为并取消冒泡"),e("\n "),t("span",{class:"token keyword"},"if"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"typeof"),e(" e"),t("span",{class:"token punctuation"},"."),e("preventDefault "),t("span",{class:"token operator"},"==="),e(),t("span",{class:"token string"},"'function'"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n e"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"preventDefault"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n e"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"stopPropagation"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token keyword"},"else"),e(),t("span",{class:"token punctuation"},"{"),e("\n e"),t("span",{class:"token punctuation"},"."),e("returnValue "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token boolean"},"false"),t("span",{class:"token punctuation"},";"),e("\n e"),t("span",{class:"token punctuation"},"."),e("cancelBubble "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token boolean"},"true"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n\n oUl"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function-variable function"},"onmouseout"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"e"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"const"),e(" e "),t("span",{class:"token operator"},"="),e(" e "),t("span",{class:"token operator"},"||"),e(" window"),t("span",{class:"token punctuation"},"."),e("event"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"const"),e(" target "),t("span",{class:"token operator"},"="),e(" e"),t("span",{class:"token punctuation"},"."),e("target "),t("span",{class:"token operator"},"||"),e(" e"),t("span",{class:"token punctuation"},"."),e("srcElement"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token comment"},"//alert(target.innerHTML);"),e("\n\n "),t("span",{class:"token keyword"},"if"),e(),t("span",{class:"token punctuation"},"("),e("target"),t("span",{class:"token punctuation"},"."),e("nodeName"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"toLowerCase"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=="),e(),t("span",{class:"token string"},"'li'"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n target"),t("span",{class:"token punctuation"},"."),e("style"),t("span",{class:"token punctuation"},"."),e("background "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token string"},"''"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n\n "),t("span",{class:"token comment"},"// 阻止默认行为并取消冒泡"),e("\n "),t("span",{class:"token keyword"},"if"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"typeof"),e(" e"),t("span",{class:"token punctuation"},"."),e("preventDefault "),t("span",{class:"token operator"},"==="),e(),t("span",{class:"token string"},"'function'"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n e"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"preventDefault"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n e"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"stopPropagation"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token keyword"},"else"),e(),t("span",{class:"token punctuation"},"{"),e("\n e"),t("span",{class:"token punctuation"},"."),e("returnValue "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token boolean"},"false"),t("span",{class:"token punctuation"},";"),e("\n e"),t("span",{class:"token punctuation"},"."),e("cancelBubble "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token boolean"},"true"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br"),t("span",{class:"line-number"},"25"),t("br"),t("span",{class:"line-number"},"26"),t("br"),t("span",{class:"line-number"},"27"),t("br"),t("span",{class:"line-number"},"28"),t("br"),t("span",{class:"line-number"},"29"),t("br"),t("span",{class:"line-number"},"30"),t("br"),t("span",{class:"line-number"},"31"),t("br"),t("span",{class:"line-number"},"32"),t("br"),t("span",{class:"line-number"},"33"),t("br"),t("span",{class:"line-number"},"34"),t("br"),t("span",{class:"line-number"},"35"),t("br"),t("span",{class:"line-number"},"36"),t("br"),t("span",{class:"line-number"},"37"),t("br"),t("span",{class:"line-number"},"38"),t("br"),t("span",{class:"line-number"},"39"),t("br"),t("span",{class:"line-number"},"40"),t("br"),t("span",{class:"line-number"},"41"),t("br"),t("span",{class:"line-number"},"42"),t("br"),t("span",{class:"line-number"},"43"),t("br"),t("span",{class:"line-number"},"44"),t("br")])],-1),go=t("h3",{id:"缓存模式"},[t("a",{class:"header-anchor",href:"#缓存模式","aria-hidden":"true"},"#"),e(" 缓存模式")],-1),ho=t("p",null,"缓存对象属性与 DOM 对象",-1),fo=t("h3",{id:"加载脚本"},[t("a",{class:"header-anchor",href:"#加载脚本","aria-hidden":"true"},"#"),e(" 加载脚本")],-1),yo=t("p",null,"合并脚本后再进行高级加载技术",-1),wo=t("h4",{id:"延迟加载"},[t("a",{class:"header-anchor",href:"#延迟加载","aria-hidden":"true"},"#"),e(" 延迟加载")],-1),vo=t("div",{class:"language-html line-numbers-mode"},[t("pre",null,[t("code",null,[e("... The full body of the page ...\n"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("script")]),t("span",{class:"token punctuation"},">")]),t("span",{class:"token script"},[t("span",{class:"token language-javascript"},[e("\nwindow"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function-variable function"},"onload"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"const"),e(" script "),t("span",{class:"token operator"},"="),e(" document"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"createElement"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},'"script"'),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n script"),t("span",{class:"token punctuation"},"."),e("src "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token string"},'"all_lazy_20100426.js"'),t("span",{class:"token punctuation"},";"),e("\n document"),t("span",{class:"token punctuation"},"."),e("documentElement"),t("span",{class:"token punctuation"},"."),e("firstChild"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"appendChild"),t("span",{class:"token punctuation"},"("),e("script"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("script")]),t("span",{class:"token punctuation"},">")]),e("\n"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("body")]),t("span",{class:"token punctuation"},">")]),e("\n"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("html")]),t("span",{class:"token punctuation"},">")]),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br")])],-1),xo=t("h4",{id:"动态加载"},[t("a",{class:"header-anchor",href:"#动态加载","aria-hidden":"true"},"#"),e(" 动态加载")],-1),jo=t("div",{class:"language-javascript line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token function"},"requireScript"),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},[e("file"),t("span",{class:"token punctuation"},","),e(" callback")]),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"const"),e(" script "),t("span",{class:"token operator"},"="),e(" document"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"getElementsByTagName"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'script'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},"["),t("span",{class:"token number"},"0"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"const"),e(" newJS "),t("span",{class:"token operator"},"="),e(" document"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"createElement"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'script'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token comment"},"// IE"),e("\n newJS"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function-variable function"},"onreadystatechange"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"if"),e(),t("span",{class:"token punctuation"},"("),e("newJS"),t("span",{class:"token punctuation"},"."),e("readyState "),t("span",{class:"token operator"},"==="),e(),t("span",{class:"token string"},"'loaded'"),e(),t("span",{class:"token operator"},"||"),e(" newJS"),t("span",{class:"token punctuation"},"."),e("readyState "),t("span",{class:"token operator"},"==="),e(),t("span",{class:"token string"},"'complete'"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n newJS"),t("span",{class:"token punctuation"},"."),e("onreadystatechange "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"null"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token function"},"callback"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token comment"},"// others"),e("\n newJS"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function-variable function"},"onload"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token function"},"callback"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token comment"},"// 添加至html页面"),e("\n newJS"),t("span",{class:"token punctuation"},"."),e("src "),t("span",{class:"token operator"},"="),e(" file"),t("span",{class:"token punctuation"},";"),e("\n script"),t("span",{class:"token punctuation"},"."),e("parentNode"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"insertBefore"),t("span",{class:"token punctuation"},"("),e("newJS"),t("span",{class:"token punctuation"},","),e(" script"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token function"},"requireScript"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'the_rest.js'"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n Application"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"init"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br")])],-1),So=t("h3",{id:"dom-performance"},[t("a",{class:"header-anchor",href:"#dom-performance","aria-hidden":"true"},"#"),e(" DOM Performance")],-1),To=t("ul",null,[t("li",null,"局部变量缓存 DOM 元素"),t("li",null,"局部变量缓存布局信息")],-1),Po=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(" btn "),t("span",{class:"token operator"},"="),e(" document"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"getElementById"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'btn'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br")])],-1),Co=t("ul",null,[t("li",null,"HTML Collection 转化成数组再操作")],-1),Io=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token function"},"toArray"),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"coll"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"for"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"let"),e(" i "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token number"},"0"),t("span",{class:"token punctuation"},","),e(" a "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"["),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},","),e(" len "),t("span",{class:"token operator"},"="),e(" coll"),t("span",{class:"token punctuation"},"."),e("length"),t("span",{class:"token punctuation"},";"),e(" i "),t("span",{class:"token operator"},"<"),e(" len"),t("span",{class:"token punctuation"},";"),e(" i"),t("span",{class:"token operator"},"++"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n a"),t("span",{class:"token punctuation"},"["),e("i"),t("span",{class:"token punctuation"},"]"),e(),t("span",{class:"token operator"},"="),e(" coll"),t("span",{class:"token punctuation"},"["),e("i"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n\n "),t("span",{class:"token keyword"},"return"),e(" a"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br")])],-1),_o=t("ul",null,[t("li",null,"children 优于 childNodes"),t("li",null,"childElementCount 优于 childNodes.length"),t("li",null,"firstElementChild 优于 firstChild"),t("li",null,"lastElementChild 优于 lastChild"),t("li",null,[e("nextElementSibling 优于 nextSibling 优于 "),t("code",null,"childNodes[next]")]),t("li",null,"previousElementSibling 优于 previousSibling")],-1),Ao=t("h4",{id:"重排与重绘"},[t("a",{class:"header-anchor",href:"#重排与重绘","aria-hidden":"true"},"#"),e(" 重排与重绘")],-1),Eo=t("ul",null,[t("li",null,"重排: 重新构造渲染树"),t("li",null,"重绘: 重新绘制受影响部分")],-1),Oo=t("p",null,[t("strong",null,"获取"),e("或改变布局的操作会导致渲染树"),t("strong",null,"变化队列"),e('刷新,执行渲染队列中的"待处理变化",重排 DOM 元素')],-1),Mo=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[e("offsetTop "),t("span",{class:"token operator"},"/"),e(" Left "),t("span",{class:"token operator"},"/"),e(" Width "),t("span",{class:"token operator"},"/"),e(" Height"),t("span",{class:"token punctuation"},";"),e("\nscrollTop "),t("span",{class:"token operator"},"/"),e(" Left "),t("span",{class:"token operator"},"/"),e(" Width "),t("span",{class:"token operator"},"/"),e(" Height"),t("span",{class:"token punctuation"},";"),e("\nclientTop "),t("span",{class:"token operator"},"/"),e(" Left "),t("span",{class:"token operator"},"/"),e(" Width "),t("span",{class:"token operator"},"/"),e(" Height"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token function"},"getComputedStyle"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br")])],-1),Do=t("h4",{id:"批量修改-dom"},[t("a",{class:"header-anchor",href:"#批量修改-dom","aria-hidden":"true"},"#"),e(" 批量修改 DOM")],-1),Lo=t("ul",null,[t("li",null,'先 display="none", 修改完成后,display=""'),t("li",null,"使待修改 DOM 元素脱离标准文档流(改变布局/定位方式),可减少其他元素的重绘次数"),t("li",null,"document.createDocumentFragment()")],-1),Wo=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(" fragment "),t("span",{class:"token operator"},"="),e(" document"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"createDocumentFragment"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token function"},"appendDataToElement"),t("span",{class:"token punctuation"},"("),e("fragment"),t("span",{class:"token punctuation"},","),e(" data"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\ndocument"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"getElementById"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'myList'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"appendChild"),t("span",{class:"token punctuation"},"("),e("fragment"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br")])],-1),No=t("ul",null,[t("li",null,"oldNode.cloneNode(true);")],-1),Ro=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(" old "),t("span",{class:"token operator"},"="),e(" document"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"getElementById"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'myList'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token keyword"},"const"),e(" clone "),t("span",{class:"token operator"},"="),e(" old"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"cloneNode"),t("span",{class:"token punctuation"},"("),t("span",{class:"token boolean"},"true"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token function"},"appendDataToElement"),t("span",{class:"token punctuation"},"("),e("clone"),t("span",{class:"token punctuation"},","),e(" data"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\nold"),t("span",{class:"token punctuation"},"."),e("parentNode"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"replaceChild"),t("span",{class:"token punctuation"},"("),e("clone"),t("span",{class:"token punctuation"},","),e(" old"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br")])],-1),zo=t("h4",{id:"animation-frame"},[t("a",{class:"header-anchor",href:"#animation-frame","aria-hidden":"true"},"#"),e(" Animation Frame")],-1),Bo=t("p",null,[e("run scripts as early as possible: "),t("code",null,"requestAnimationFrame()"),e(" runs after the CPU work is done (UI events and JS scripts), and just before the frame is rendered (layout, paint, composite etc.).")],-1),Fo=t("h3",{id:"css"},[t("a",{class:"header-anchor",href:"#css","aria-hidden":"true"},"#"),e(" CSS")],-1),Ho=t("p",null,"在 js 中(除定位属性) 外,不直接操作 element.style.attr/element.cssText:",-1),qo=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[e("element"),t("span",{class:"token punctuation"},"."),e("classList"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"add"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'className'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\nelement"),t("span",{class:"token punctuation"},"."),e("className "),t("span",{class:"token operator"},"+="),e(),t("span",{class:"token string"},"' className'"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br")])],-1),Jo=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[e("script "),t("span",{class:"token operator"},"-"),t("span",{class:"token operator"},">"),e(" style "),t("span",{class:"token operator"},"-"),t("span",{class:"token operator"},">"),e(" layout "),t("span",{class:"token operator"},"-"),t("span",{class:"token operator"},">"),e(" paint "),t("span",{class:"token operator"},"-"),t("span",{class:"token operator"},">"),e(" composite\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br")])],-1),Uo=t("p",null,[e("Make "),t("code",null,"script"),e(" stage become: read then write. Interleaved read and write will trigger multiple times of re-layout/repaint/re-composite.")],-1),Go=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token comment"},"// bad"),e("\n"),t("span",{class:"token comment"},"// Forced Synchronous Layout"),e("\nread css "),t("span",{class:"token operator"},"-"),t("span",{class:"token operator"},">"),e(" write "),t("span",{class:"token function"},"css"),e(),t("span",{class:"token punctuation"},"("),e("re"),t("span",{class:"token operator"},"-"),e("layout"),t("span",{class:"token operator"},"/"),e("paint"),t("span",{class:"token operator"},"/"),e("composite"),t("span",{class:"token punctuation"},")"),e("\n"),t("span",{class:"token operator"},"-"),t("span",{class:"token operator"},">"),e(" read css "),t("span",{class:"token operator"},"-"),t("span",{class:"token operator"},">"),e(" write "),t("span",{class:"token function"},"css"),e(),t("span",{class:"token punctuation"},"("),e("re"),t("span",{class:"token operator"},"-"),e("layout"),t("span",{class:"token operator"},"/"),e("paint"),t("span",{class:"token operator"},"/"),e("composite"),t("span",{class:"token punctuation"},")"),e("\n"),t("span",{class:"token operator"},"-"),t("span",{class:"token operator"},">"),e(" read css "),t("span",{class:"token operator"},"-"),t("span",{class:"token operator"},">"),e(" write "),t("span",{class:"token function"},"css"),e(),t("span",{class:"token punctuation"},"("),e("re"),t("span",{class:"token operator"},"-"),e("layout"),t("span",{class:"token operator"},"/"),e("paint"),t("span",{class:"token operator"},"/"),e("composite"),t("span",{class:"token punctuation"},")"),e("\n\n"),t("span",{class:"token comment"},"// good"),e("\nread css "),t("span",{class:"token operator"},"-"),t("span",{class:"token operator"},">"),e(" write "),t("span",{class:"token function"},"css"),e(),t("span",{class:"token punctuation"},"("),e("only re"),t("span",{class:"token operator"},"-"),e("layout"),t("span",{class:"token operator"},"/"),e("paint"),t("span",{class:"token operator"},"/"),e("composite once"),t("span",{class:"token punctuation"},")"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br")])],-1),$o=t("h3",{id:"定时器-防止脚本阻塞"},[t("a",{class:"header-anchor",href:"#定时器-防止脚本阻塞","aria-hidden":"true"},"#"),e(" 定时器(防止脚本阻塞)")],-1),Vo=t("p",null,"JavaScript 代码与 UI 共享线程",-1),Ko=t("p",null,"setTimeout()/setInterval()",-1),Yo=t("ul",null,[t("li",null,"第二个参数: 不是执行时间, 是加入执行队列时间"),t("li",null,"若其他位于执行队列中的函数执行时间超过延时,则用户感觉不到延时的存在"),t("li",null,"模拟有间隙的循环,使得 UI 更新得以进入浏览器线程的执行队列中")],-1),Xo=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(" button "),t("span",{class:"token operator"},"="),e(" document"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"getElementById"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'myButton'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\nbutton"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function-variable function"},"onclick"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token function"},"oneMethod"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token function"},"setTimeout"),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n document"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"getElementById"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'notice'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},"."),e("style"),t("span",{class:"token punctuation"},"."),e("color "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token string"},"'red'"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"250"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br")])],-1),Zo=t("ul",null,[t("li",null,"分解任务")],-1),Qo=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token function"},"saveDocument"),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"id"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"// 利用闭包封装待执行任务"),e("\n "),t("span",{class:"token keyword"},"const"),e(" tasks "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"["),e("openDocument"),t("span",{class:"token punctuation"},","),e(" writeText"),t("span",{class:"token punctuation"},","),e(" closeDocument"),t("span",{class:"token punctuation"},","),e(" updateUI"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token function"},"setTimeout"),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"// 执行下一个任务"),e("\n "),t("span",{class:"token keyword"},"const"),e(" task "),t("span",{class:"token operator"},"="),e(" tasks"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"shift"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token function"},"task"),t("span",{class:"token punctuation"},"("),e("id"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token comment"},"// 检查是否还有其他任务"),e("\n "),t("span",{class:"token keyword"},"if"),e(),t("span",{class:"token punctuation"},"("),e("tasks"),t("span",{class:"token punctuation"},"."),e("length "),t("span",{class:"token operator"},">"),e(),t("span",{class:"token number"},"0"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"// 递归调用(每次参数不同)"),e("\n "),t("span",{class:"token function"},"setTimeout"),t("span",{class:"token punctuation"},"("),e("arguments"),t("span",{class:"token punctuation"},"."),e("callee"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"25"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"25"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br")])],-1),nc=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token function"},"processArray"),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},[e("items"),t("span",{class:"token punctuation"},","),e(" process"),t("span",{class:"token punctuation"},","),e(" callback")]),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"// 克隆原数组"),e("\n "),t("span",{class:"token keyword"},"const"),e(" todo "),t("span",{class:"token operator"},"="),e(" items"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"concat"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token function"},"setTimeout"),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token function"},"process"),t("span",{class:"token punctuation"},"("),e("todo"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"shift"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token keyword"},"if"),e(),t("span",{class:"token punctuation"},"("),e("todo"),t("span",{class:"token punctuation"},"."),e("length "),t("span",{class:"token operator"},">"),e(),t("span",{class:"token number"},"0"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token function"},"setTimeout"),t("span",{class:"token punctuation"},"("),e("arguments"),t("span",{class:"token punctuation"},"."),e("callee"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"25"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token keyword"},"else"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token function"},"callback"),t("span",{class:"token punctuation"},"("),e("items"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"25"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br")])],-1),sc=t("ul",null,[t("li",null,"批处理任务")],-1),ac=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token function"},"timedProcessArray"),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},[e("items"),t("span",{class:"token punctuation"},","),e(" process"),t("span",{class:"token punctuation"},","),e(" callback")]),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"// 克隆原始数组"),e("\n "),t("span",{class:"token keyword"},"const"),e(" todo "),t("span",{class:"token operator"},"="),e(" items"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"concat"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token function"},"setTimeout"),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"const"),e(" start "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token operator"},"+"),t("span",{class:"token keyword"},"new"),e(),t("span",{class:"token class-name"},"Date"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token comment"},"// 一次批处理任务持续 0.05s"),e("\n "),t("span",{class:"token keyword"},"do"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token function"},"process"),t("span",{class:"token punctuation"},"("),e("todo"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"shift"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token keyword"},"while"),e(),t("span",{class:"token punctuation"},"("),e("todo"),t("span",{class:"token punctuation"},"."),e("length "),t("span",{class:"token operator"},"<"),e(),t("span",{class:"token number"},"0"),e(),t("span",{class:"token operator"},"&&"),e(),t("span",{class:"token operator"},"+"),t("span",{class:"token keyword"},"new"),e(),t("span",{class:"token class-name"},"Date"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"-"),e(" start "),t("span",{class:"token operator"},"<"),e(),t("span",{class:"token number"},"50"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token keyword"},"if"),e(),t("span",{class:"token punctuation"},"("),e("todo"),t("span",{class:"token punctuation"},"."),e("length "),t("span",{class:"token operator"},">"),e(),t("span",{class:"token number"},"0"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token function"},"setTimeout"),t("span",{class:"token punctuation"},"("),e("arguments"),t("span",{class:"token punctuation"},"."),e("callee"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"25"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token keyword"},"else"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token function"},"callback"),t("span",{class:"token punctuation"},"("),e("items"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token number"},"25"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br")])],-1),tc=t("h3",{id:"计时器"},[t("a",{class:"header-anchor",href:"#计时器","aria-hidden":"true"},"#"),e(" 计时器")],-1),ec=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token comment"},"/*\n * usage: start -> stop -> getTime\n */"),e("\n"),t("span",{class:"token keyword"},"const"),e(" Timer "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"{"),e("\n _data"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token punctuation"},"{"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),e("\n\n "),t("span",{class:"token function-variable function"},"start"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token keyword"},"function"),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"key"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n Timer"),t("span",{class:"token punctuation"},"."),e("_data"),t("span",{class:"token punctuation"},"["),e("key"),t("span",{class:"token punctuation"},"]"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"new"),e(),t("span",{class:"token class-name"},"Date"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token function-variable function"},"stop"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token keyword"},"function"),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"key"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"const"),e(" time "),t("span",{class:"token operator"},"="),e(" Timer"),t("span",{class:"token punctuation"},"."),e("_data"),t("span",{class:"token punctuation"},"["),e("key"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token keyword"},"if"),e(),t("span",{class:"token punctuation"},"("),e("time"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n Timer"),t("span",{class:"token punctuation"},"."),e("_data"),t("span",{class:"token punctuation"},"["),e("key"),t("span",{class:"token punctuation"},"]"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"new"),e(),t("span",{class:"token class-name"},"Date"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"-"),e(" time"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token function-variable function"},"getTime"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token keyword"},"function"),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"key"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"return"),e(" Timer"),t("span",{class:"token punctuation"},"."),e("_data"),t("span",{class:"token punctuation"},"["),e("key"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br")])],-1),oc=t("h3",{id:"web-worker"},[t("a",{class:"header-anchor",href:"#web-worker","aria-hidden":"true"},"#"),e(" Web Worker")],-1),cc=t("h4",{id:"运行环境"},[t("a",{class:"header-anchor",href:"#运行环境","aria-hidden":"true"},"#"),e(" 运行环境")],-1),lc=t("ul",null,[t("li",null,"navigation 对象: appName, appVersion, userAgent, platform"),t("li",null,"location 对象: 所有属性只读"),t("li",null,"ECMAScript 对象: Object/Array/Date"),t("li",null,"XMLHttpRequest 方法"),t("li",null,"setTimeout/setInterval 方法"),t("li",null,"self 对象: 指向全局 worker 对象"),t("li",null,"importScripts 方法: 加载外部依赖"),t("li",null,"close 方法: 停止 worker")],-1),pc=t("h4",{id:"web-worker-loader"},[t("a",{class:"header-anchor",href:"#web-worker-loader","aria-hidden":"true"},"#"),e(" Web Worker Loader")],-1),uc=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token comment"},"// 文件名为index.js"),e("\n"),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token function"},"work"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token function-variable function"},"onmessage"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},[t("span",{class:"token punctuation"},"{"),e(" data"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token punctuation"},"{"),e(" jobId"),t("span",{class:"token punctuation"},","),e(" message "),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token punctuation"},"}")]),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'i am worker, receive:-----'"),e(),t("span",{class:"token operator"},"+"),e(" message"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token function"},"postMessage"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"{"),e(" jobId"),t("span",{class:"token punctuation"},","),e(" result"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token string"},"'message from worker'"),e(),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token function-variable function"},"makeWorker"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"f"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"let"),e(" pendingJobs "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"{"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token keyword"},"const"),e(" worker "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"new"),e(),t("span",{class:"token class-name"},"Worker"),t("span",{class:"token punctuation"},"("),e("\n "),t("span",{class:"token constant"},"URL"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"createObjectURL"),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"new"),e(),t("span",{class:"token class-name"},"Blob"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"["),t("span",{class:"token template-string"},[t("span",{class:"token template-punctuation string"},"`"),t("span",{class:"token string"},"("),t("span",{class:"token interpolation"},[t("span",{class:"token interpolation-punctuation punctuation"},"${"),e("f"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"toString"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token interpolation-punctuation punctuation"},"}")]),t("span",{class:"token string"},")()"),t("span",{class:"token template-punctuation string"},"`")]),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),e("\n "),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n worker"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function-variable function"},"onmessage"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},[t("span",{class:"token punctuation"},"{"),e(" data"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token punctuation"},"{"),e(" result"),t("span",{class:"token punctuation"},","),e(" jobId "),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token punctuation"},"}")]),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"// 调用 resolve, 改变 Promise 状态"),e("\n pendingJobs"),t("span",{class:"token punctuation"},"["),e("jobId"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},"("),e("result"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"delete"),e(" pendingJobs"),t("span",{class:"token punctuation"},"["),e("jobId"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token keyword"},"return"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},[t("span",{class:"token operator"},"..."),e("message")]),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e("\n "),t("span",{class:"token keyword"},"new"),e(),t("span",{class:"token class-name"},"Promise"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"resolve"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"const"),e(" jobId "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token function"},"String"),t("span",{class:"token punctuation"},"("),e("Math"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"random"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n pendingJobs"),t("span",{class:"token punctuation"},"["),e("jobId"),t("span",{class:"token punctuation"},"]"),e(),t("span",{class:"token operator"},"="),e(" resolve"),t("span",{class:"token punctuation"},";"),e("\n worker"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"postMessage"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"{"),e(" jobId"),t("span",{class:"token punctuation"},","),e(" message "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token keyword"},"const"),e(" testWorker "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token function"},"makeWorker"),t("span",{class:"token punctuation"},"("),e("work"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token function"},"testWorker"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'message from main thread'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"then"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"message"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'i am main thread, i receive:-----'"),e(),t("span",{class:"token operator"},"+"),e(" message"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br"),t("span",{class:"line-number"},"25"),t("br"),t("span",{class:"line-number"},"26"),t("br"),t("span",{class:"line-number"},"27"),t("br"),t("span",{class:"line-number"},"28"),t("br"),t("span",{class:"line-number"},"29"),t("br"),t("span",{class:"line-number"},"30"),t("br"),t("span",{class:"line-number"},"31"),t("br"),t("span",{class:"line-number"},"32"),t("br"),t("span",{class:"line-number"},"33"),t("br"),t("span",{class:"line-number"},"34"),t("br")])],-1),rc=t("h4",{id:"worker-实例"},[t("a",{class:"header-anchor",href:"#worker-实例","aria-hidden":"true"},"#"),e(" worker 实例")],-1),ic=t("ul",null,[t("li",null,"先 on ,后 post"),t("li",null,"main.js/worker.js 的 onmessage 与 postMessage 相互触发")],-1),kc=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token comment"},"/*\n * JSONParser.js\n */"),e("\nself"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function-variable function"},"onmessage"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"event"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"const"),e(" jsonText "),t("span",{class:"token operator"},"="),e(" event"),t("span",{class:"token punctuation"},"."),e("data"),t("span",{class:"token punctuation"},","),e("\n jsonData "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token constant"},"JSON"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"parse"),t("span",{class:"token punctuation"},"("),e("jsonText"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n self"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"postMessage"),t("span",{class:"token punctuation"},"("),e("jsonData"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br")])],-1),bc=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token comment"},"/*\n * main.js\n */"),e("\n"),t("span",{class:"token keyword"},"const"),e(" worker "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"new"),e(),t("span",{class:"token class-name"},"Worker"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'JSONParser.js'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\nworker"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function-variable function"},"onmessage"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"event"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"const"),e(" jsonData "),t("span",{class:"token operator"},"="),e(" event"),t("span",{class:"token punctuation"},"."),e("data"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token function"},"evaluateData"),t("span",{class:"token punctuation"},"("),e("jsonData"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n\nworker"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"postMessage"),t("span",{class:"token punctuation"},"("),e("jsonText"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br")])],-1),mc=t("h3",{id:"ajax"},[t("a",{class:"header-anchor",href:"#ajax","aria-hidden":"true"},"#"),e(" Ajax")],-1),dc=t("h4",{id:"数据格式"},[t("a",{class:"header-anchor",href:"#数据格式","aria-hidden":"true"},"#"),e(" 数据格式")],-1),gc=t("table",null,[t("thead",null,[t("tr",null,[t("th",{style:{"text-align":"left"}},"Format"),t("th",{style:{"text-align":"right"}},"Size (bytes)"),t("th",{style:{"text-align":"right"}},"Download (ms)"),t("th",{style:{"text-align":"right"}},"Parse (ms)")])]),t("tbody",null,[t("tr",null,[t("td",{style:{"text-align":"left"}},"Verbose XML"),t("td",{style:{"text-align":"right"}},"582,960"),t("td",{style:{"text-align":"right"}},"999.4"),t("td",{style:{"text-align":"right"}},"343.1")]),t("tr",null,[t("td",{style:{"text-align":"left"}},"Verbose JSON-P"),t("td",{style:{"text-align":"right"}},"487,913"),t("td",{style:{"text-align":"right"}},"598.2"),t("td",{style:{"text-align":"right"}},"0.0")]),t("tr",null,[t("td",{style:{"text-align":"left"}},"Simple XML"),t("td",{style:{"text-align":"right"}},"437,960"),t("td",{style:{"text-align":"right"}},"475.1"),t("td",{style:{"text-align":"right"}},"83.1")]),t("tr",null,[t("td",{style:{"text-align":"left"}},"Verbose JSON"),t("td",{style:{"text-align":"right"}},"487,895"),t("td",{style:{"text-align":"right"}},"527.7"),t("td",{style:{"text-align":"right"}},"26.7")]),t("tr",null,[t("td",{style:{"text-align":"left"}},"Simple JSON"),t("td",{style:{"text-align":"right"}},"392,895"),t("td",{style:{"text-align":"right"}},"498.7"),t("td",{style:{"text-align":"right"}},"29.0")]),t("tr",null,[t("td",{style:{"text-align":"left"}},"Simple JSON-P"),t("td",{style:{"text-align":"right"}},"392,913"),t("td",{style:{"text-align":"right"}},"454.0"),t("td",{style:{"text-align":"right"}},"3.1")]),t("tr",null,[t("td",{style:{"text-align":"left"}},"Array JSON"),t("td",{style:{"text-align":"right"}},"292,895"),t("td",{style:{"text-align":"right"}},"305.4"),t("td",{style:{"text-align":"right"}},"18.6")]),t("tr",null,[t("td",{style:{"text-align":"left"}},"Array JSON-P"),t("td",{style:{"text-align":"right"}},"292,912"),t("td",{style:{"text-align":"right"}},"316.0"),t("td",{style:{"text-align":"right"}},"3.4")]),t("tr",null,[t("td",{style:{"text-align":"left"}},"Custom Format (script insertion)"),t("td",{style:{"text-align":"right"}},"222,912"),t("td",{style:{"text-align":"right"}},"66.3"),t("td",{style:{"text-align":"right"}},"11.7")]),t("tr",null,[t("td",{style:{"text-align":"left"}},"Custom Format (XHR)"),t("td",{style:{"text-align":"right"}},"222,892"),t("td",{style:{"text-align":"right"}},"63.1"),t("td",{style:{"text-align":"right"}},"14.5")])])],-1),hc=t("h4",{id:"ajax-缓存"},[t("a",{class:"header-anchor",href:"#ajax-缓存","aria-hidden":"true"},"#"),e(" Ajax 缓存")],-1),fc=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(" localCache "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"{"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token function"},"xhrRequest"),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},[e("url"),t("span",{class:"token punctuation"},","),e(" callback")]),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"// Check the local cache for this URL."),e("\n "),t("span",{class:"token keyword"},"if"),e(),t("span",{class:"token punctuation"},"("),e("localCache"),t("span",{class:"token punctuation"},"["),e("url"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n callback"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"success"),t("span",{class:"token punctuation"},"("),e("localCache"),t("span",{class:"token punctuation"},"["),e("url"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"return"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n\n "),t("span",{class:"token comment"},"// If this URL wasn't found in the cache, make the request."),e("\n "),t("span",{class:"token keyword"},"const"),e(" req "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token function"},"createXhrObject"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n req"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function-variable function"},"onerror"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n callback"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"error"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n\n req"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function-variable function"},"onreadystatechange"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"if"),e(),t("span",{class:"token punctuation"},"("),e("req"),t("span",{class:"token punctuation"},"."),e("readyState "),t("span",{class:"token operator"},"=="),e(),t("span",{class:"token number"},"4"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"if"),e(),t("span",{class:"token punctuation"},"("),e("req"),t("span",{class:"token punctuation"},"."),e("responseText "),t("span",{class:"token operator"},"==="),e(),t("span",{class:"token string"},"''"),e(),t("span",{class:"token operator"},"||"),e(" req"),t("span",{class:"token punctuation"},"."),e("status "),t("span",{class:"token operator"},"=="),e(),t("span",{class:"token string"},"'404'"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n callback"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"error"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"return"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n\n "),t("span",{class:"token comment"},"// Store the response on the local cache."),e("\n localCache"),t("span",{class:"token punctuation"},"["),e("url"),t("span",{class:"token punctuation"},"]"),e(),t("span",{class:"token operator"},"="),e(" req"),t("span",{class:"token punctuation"},"."),e("responseText"),t("span",{class:"token punctuation"},";"),e("\n callback"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"success"),t("span",{class:"token punctuation"},"("),e("req"),t("span",{class:"token punctuation"},"."),e("responseText"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\nreq"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"open"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'GET'"),t("span",{class:"token punctuation"},","),e(" url"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token boolean"},"true"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token comment"},"// req.set();"),e("\nreq"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"send"),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"null"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br"),t("span",{class:"line-number"},"25"),t("br"),t("span",{class:"line-number"},"26"),t("br"),t("span",{class:"line-number"},"27"),t("br"),t("span",{class:"line-number"},"28"),t("br"),t("span",{class:"line-number"},"29"),t("br"),t("span",{class:"line-number"},"30"),t("br"),t("span",{class:"line-number"},"31"),t("br"),t("span",{class:"line-number"},"32"),t("br"),t("span",{class:"line-number"},"33"),t("br")])],-1),yc=t("h3",{id:"reduce-repeat-manipulation"},[t("a",{class:"header-anchor",href:"#reduce-repeat-manipulation","aria-hidden":"true"},"#"),e(" Reduce Repeat Manipulation")],-1),wc=t("ul",null,[t("li",null,"特性/浏览器检测代码只运行一次"),t("li",null,"惰性定义模式/自定义模式")],-1),vc=t("h4",{id:"debounce-and-throttle"},[t("a",{class:"header-anchor",href:"#debounce-and-throttle","aria-hidden":"true"},"#"),e(" Debounce and Throttle")],-1),xc=t("p",null,"防抖动和节流本质是不一样的:",-1),jc=t("ul",null,[t("li",null,"debounce: 防抖动是将多次执行变为最后一次执行 (可用于检测某个连续的 DOM 操作结束, 如 scroll 停止)"),t("li",null,"throttle: 节流是将多次执行变成每隔一段时间执行 (保证一定时间内只执行一次)")],-1),Sc=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token comment"},"// 这个是用来获取当前时间戳的"),e("\n"),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token function"},"now"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"return"),e(),t("span",{class:"token operator"},"+"),t("span",{class:"token keyword"},"new"),e(),t("span",{class:"token class-name"},"Date"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n\n"),t("span",{class:"token comment"},"/**\n * 防抖函数,返回函数连续调用时,空闲时间必须大于或等于 wait,func 才会执行\n *\n * @param {function} func 回调函数\n * @param {number} wait 表示时间窗口的间隔\n * @param {boolean} immediate 设置为 true 时,是否立即调用函数\n * @return {function} 返回客户调用函数\n */"),e("\n"),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token function"},"debounce"),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},[e("func"),t("span",{class:"token punctuation"},","),e(" wait "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token number"},"50"),t("span",{class:"token punctuation"},","),e(" immediate "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token boolean"},"true")]),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"let"),e(" timer"),t("span",{class:"token punctuation"},","),e(" context"),t("span",{class:"token punctuation"},","),e(" args"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token comment"},"// 延迟执行函数"),e("\n "),t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token function-variable function"},"later"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e("\n "),t("span",{class:"token function"},"setTimeout"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"// 延迟函数执行完毕,清空缓存的定时器序号"),e("\n timer "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"null"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token comment"},"// 延迟执行的情况下,函数会在延迟函数中执行"),e("\n "),t("span",{class:"token comment"},"// 使用到之前缓存的参数和上下文"),e("\n "),t("span",{class:"token keyword"},"if"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token operator"},"!"),e("immediate"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token function"},"func"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"apply"),t("span",{class:"token punctuation"},"("),e("context"),t("span",{class:"token punctuation"},","),e(" args"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n context "),t("span",{class:"token operator"},"="),e(" args "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"null"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),e(" wait"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token comment"},"// 这里返回的函数是每次实际调用的函数"),e("\n "),t("span",{class:"token keyword"},"return"),e(),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},[t("span",{class:"token operator"},"..."),e("params")]),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"// 如果没有创建延迟执行函数(later),就创建一个"),e("\n "),t("span",{class:"token keyword"},"if"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token operator"},"!"),e("timer"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n timer "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token function"},"later"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token comment"},"// 如果是立即执行,调用函数"),e("\n "),t("span",{class:"token comment"},"// 否则缓存参数和调用上下文"),e("\n "),t("span",{class:"token keyword"},"if"),e(),t("span",{class:"token punctuation"},"("),e("immediate"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token function"},"func"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"apply"),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"this"),t("span",{class:"token punctuation"},","),e(" params"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token keyword"},"else"),e(),t("span",{class:"token punctuation"},"{"),e("\n context "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"this"),t("span",{class:"token punctuation"},";"),e("\n args "),t("span",{class:"token operator"},"="),e(" params"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token keyword"},"else"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"// 如果已有延迟执行函数(later),调用的时候清除原来的并重新设定一个"),e("\n "),t("span",{class:"token comment"},"// 这样做延迟函数会重新计时"),e("\n "),t("span",{class:"token function"},"clearTimeout"),t("span",{class:"token punctuation"},"("),e("timer"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n timer "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token function"},"later"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br"),t("span",{class:"line-number"},"25"),t("br"),t("span",{class:"line-number"},"26"),t("br"),t("span",{class:"line-number"},"27"),t("br"),t("span",{class:"line-number"},"28"),t("br"),t("span",{class:"line-number"},"29"),t("br"),t("span",{class:"line-number"},"30"),t("br"),t("span",{class:"line-number"},"31"),t("br"),t("span",{class:"line-number"},"32"),t("br"),t("span",{class:"line-number"},"33"),t("br"),t("span",{class:"line-number"},"34"),t("br"),t("span",{class:"line-number"},"35"),t("br"),t("span",{class:"line-number"},"36"),t("br"),t("span",{class:"line-number"},"37"),t("br"),t("span",{class:"line-number"},"38"),t("br"),t("span",{class:"line-number"},"39"),t("br"),t("span",{class:"line-number"},"40"),t("br"),t("span",{class:"line-number"},"41"),t("br"),t("span",{class:"line-number"},"42"),t("br"),t("span",{class:"line-number"},"43"),t("br"),t("span",{class:"line-number"},"44"),t("br"),t("span",{class:"line-number"},"45"),t("br"),t("span",{class:"line-number"},"46"),t("br"),t("span",{class:"line-number"},"47"),t("br"),t("span",{class:"line-number"},"48"),t("br"),t("span",{class:"line-number"},"49"),t("br"),t("span",{class:"line-number"},"50"),t("br")])],-1),Tc=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token comment"},"// simple throttle"),e("\n"),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token function"},"throttle"),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"action"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"let"),e(" isRunning "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token boolean"},"false"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"return"),e(),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"if"),e(),t("span",{class:"token punctuation"},"("),e("isRunning"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token keyword"},"return"),t("span",{class:"token punctuation"},";"),e("\n isRunning "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token boolean"},"true"),t("span",{class:"token punctuation"},";"),e("\n window"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"requestAnimationFrame"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token function"},"action"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n isRunning "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token boolean"},"false"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br")])],-1),Pc=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token comment"},"/**\n * underscore 节流函数,返回函数连续调用时,func 执行频率限定为 次 / wait\n *\n * @param {function} func 回调函数\n * @param {number} wait 表示时间窗口的间隔\n * @param {object} options 如果想忽略开始函数的的调用,传入{leading: false}。\n * 如果想忽略结尾函数的调用,传入{trailing: false}\n * 两者不能共存,否则函数不能执行\n * @return {function} 返回客户调用函数\n */"),e("\n_"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function-variable function"},"throttle"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},[e("func"),t("span",{class:"token punctuation"},","),e(" wait"),t("span",{class:"token punctuation"},","),e(" options")]),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"var"),e(" context"),t("span",{class:"token punctuation"},","),e(" args"),t("span",{class:"token punctuation"},","),e(" result"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"var"),e(" timeout "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"null"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token comment"},"// 之前的时间戳"),e("\n "),t("span",{class:"token keyword"},"var"),e(" previous "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token number"},"0"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token comment"},"// 如果 options 没传则设为空对象"),e("\n "),t("span",{class:"token keyword"},"if"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token operator"},"!"),e("options"),t("span",{class:"token punctuation"},")"),e(" options "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"{"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token comment"},"// 定时器回调函数"),e("\n "),t("span",{class:"token keyword"},"var"),e(),t("span",{class:"token function-variable function"},"later"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"// 如果设置了 leading,就将 previous 设为 0"),e("\n "),t("span",{class:"token comment"},"// 用于下面函数的第一个 if 判断"),e("\n previous "),t("span",{class:"token operator"},"="),e(" options"),t("span",{class:"token punctuation"},"."),e("leading "),t("span",{class:"token operator"},"==="),e(),t("span",{class:"token boolean"},"false"),e(),t("span",{class:"token operator"},"?"),e(),t("span",{class:"token number"},"0"),e(),t("span",{class:"token operator"},":"),e(" _"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"now"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token comment"},"// 置空一是为了防止内存泄漏,二是为了下面的定时器判断"),e("\n timeout "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"null"),t("span",{class:"token punctuation"},";"),e("\n result "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token function"},"func"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"apply"),t("span",{class:"token punctuation"},"("),e("context"),t("span",{class:"token punctuation"},","),e(" args"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"if"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token operator"},"!"),e("timeout"),t("span",{class:"token punctuation"},")"),e(" context "),t("span",{class:"token operator"},"="),e(" args "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"null"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"return"),e(),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"// 获得当前时间戳"),e("\n "),t("span",{class:"token keyword"},"var"),e(" now "),t("span",{class:"token operator"},"="),e(" _"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"now"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token comment"},"// 首次进入前者肯定为 true"),e("\n "),t("span",{class:"token comment"},"// 如果需要第一次不执行函数"),e("\n "),t("span",{class:"token comment"},"// 就将上次时间戳设为当前的"),e("\n "),t("span",{class:"token comment"},"// 这样在接下来计算 remaining 的值时会大于0"),e("\n "),t("span",{class:"token keyword"},"if"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token operator"},"!"),e("previous "),t("span",{class:"token operator"},"&&"),e(" options"),t("span",{class:"token punctuation"},"."),e("leading "),t("span",{class:"token operator"},"==="),e(),t("span",{class:"token boolean"},"false"),t("span",{class:"token punctuation"},")"),e(" previous "),t("span",{class:"token operator"},"="),e(" now"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token comment"},"// 计算剩余时间"),e("\n "),t("span",{class:"token keyword"},"var"),e(" remaining "),t("span",{class:"token operator"},"="),e(" wait "),t("span",{class:"token operator"},"-"),e(),t("span",{class:"token punctuation"},"("),e("now "),t("span",{class:"token operator"},"-"),e(" previous"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n context "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"this"),t("span",{class:"token punctuation"},";"),e("\n args "),t("span",{class:"token operator"},"="),e(" arguments"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token comment"},"// 如果当前调用已经大于上次调用时间 + wait"),e("\n "),t("span",{class:"token comment"},"// 或者用户手动调了时间"),e("\n "),t("span",{class:"token comment"},"// 如果设置了 trailing,只会进入这个条件"),e("\n "),t("span",{class:"token comment"},"// 如果没有设置 leading,那么第一次会进入这个条件"),e("\n "),t("span",{class:"token comment"},"// 还有一点,你可能会觉得开启了定时器那么应该不会进入这个 if 条件了"),e("\n "),t("span",{class:"token comment"},"// 其实还是会进入的,因为定时器的延时"),e("\n "),t("span",{class:"token comment"},"// 并不是准确的时间,很可能你设置了2秒"),e("\n "),t("span",{class:"token comment"},"// 但是他需要2.2秒才触发,这时候就会进入这个条件"),e("\n "),t("span",{class:"token keyword"},"if"),e(),t("span",{class:"token punctuation"},"("),e("remaining "),t("span",{class:"token operator"},"<="),e(),t("span",{class:"token number"},"0"),e(),t("span",{class:"token operator"},"||"),e(" remaining "),t("span",{class:"token operator"},">"),e(" wait"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"// 如果存在定时器就清理掉否则会调用二次回调"),e("\n "),t("span",{class:"token keyword"},"if"),e(),t("span",{class:"token punctuation"},"("),e("timeout"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token function"},"clearTimeout"),t("span",{class:"token punctuation"},"("),e("timeout"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n timeout "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"null"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n previous "),t("span",{class:"token operator"},"="),e(" now"),t("span",{class:"token punctuation"},";"),e("\n result "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token function"},"func"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"apply"),t("span",{class:"token punctuation"},"("),e("context"),t("span",{class:"token punctuation"},","),e(" args"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"if"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token operator"},"!"),e("timeout"),t("span",{class:"token punctuation"},")"),e(" context "),t("span",{class:"token operator"},"="),e(" args "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"null"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e(),t("span",{class:"token keyword"},"else"),e(),t("span",{class:"token keyword"},"if"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token operator"},"!"),e("timeout "),t("span",{class:"token operator"},"&&"),e(" options"),t("span",{class:"token punctuation"},"."),e("trailing "),t("span",{class:"token operator"},"!=="),e(),t("span",{class:"token boolean"},"false"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"// 判断是否设置了定时器和 trailing"),e("\n "),t("span",{class:"token comment"},"// 没有的话就开启一个定时器"),e("\n "),t("span",{class:"token comment"},"// 并且不能不能同时设置 leading 和 trailing"),e("\n timeout "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token function"},"setTimeout"),t("span",{class:"token punctuation"},"("),e("later"),t("span",{class:"token punctuation"},","),e(" remaining"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token keyword"},"return"),e(" result"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br"),t("span",{class:"line-number"},"25"),t("br"),t("span",{class:"line-number"},"26"),t("br"),t("span",{class:"line-number"},"27"),t("br"),t("span",{class:"line-number"},"28"),t("br"),t("span",{class:"line-number"},"29"),t("br"),t("span",{class:"line-number"},"30"),t("br"),t("span",{class:"line-number"},"31"),t("br"),t("span",{class:"line-number"},"32"),t("br"),t("span",{class:"line-number"},"33"),t("br"),t("span",{class:"line-number"},"34"),t("br"),t("span",{class:"line-number"},"35"),t("br"),t("span",{class:"line-number"},"36"),t("br"),t("span",{class:"line-number"},"37"),t("br"),t("span",{class:"line-number"},"38"),t("br"),t("span",{class:"line-number"},"39"),t("br"),t("span",{class:"line-number"},"40"),t("br"),t("span",{class:"line-number"},"41"),t("br"),t("span",{class:"line-number"},"42"),t("br"),t("span",{class:"line-number"},"43"),t("br"),t("span",{class:"line-number"},"44"),t("br"),t("span",{class:"line-number"},"45"),t("br"),t("span",{class:"line-number"},"46"),t("br"),t("span",{class:"line-number"},"47"),t("br"),t("span",{class:"line-number"},"48"),t("br"),t("span",{class:"line-number"},"49"),t("br"),t("span",{class:"line-number"},"50"),t("br"),t("span",{class:"line-number"},"51"),t("br"),t("span",{class:"line-number"},"52"),t("br"),t("span",{class:"line-number"},"53"),t("br"),t("span",{class:"line-number"},"54"),t("br"),t("span",{class:"line-number"},"55"),t("br"),t("span",{class:"line-number"},"56"),t("br"),t("span",{class:"line-number"},"57"),t("br"),t("span",{class:"line-number"},"58"),t("br"),t("span",{class:"line-number"},"59"),t("br"),t("span",{class:"line-number"},"60"),t("br"),t("span",{class:"line-number"},"61"),t("br"),t("span",{class:"line-number"},"62"),t("br"),t("span",{class:"line-number"},"63"),t("br"),t("span",{class:"line-number"},"64"),t("br"),t("span",{class:"line-number"},"65"),t("br")])],-1),Cc=t("h4",{id:"animation-frame-throttling"},[t("a",{class:"header-anchor",href:"#animation-frame-throttling","aria-hidden":"true"},"#"),e(" Animation Frame Throttling")],-1),Ic=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"let"),e(" frameId "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token number"},"0"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token keyword"},"let"),e(" ticking "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token boolean"},"false"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token function-variable function"},"handleResize"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token parameter"},"event"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"if"),e(),t("span",{class:"token punctuation"},"("),e("ticking"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token keyword"},"return"),t("span",{class:"token punctuation"},";"),e("\n ticking "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token boolean"},"true"),t("span",{class:"token punctuation"},";"),e("\n frameId "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token function"},"requestAnimationFrame"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token function"},"handleUpdate"),t("span",{class:"token punctuation"},"("),e("event"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token function-variable function"},"handleUpdate"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token parameter"},"event"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'resize update'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token operator"},"..."),e("\n\n ticking "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token boolean"},"false"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token function"},"useEffect"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n window"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"addEventListener"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'resize'"),t("span",{class:"token punctuation"},","),e(" handleResize"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token function"},"handleUpdate"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n "),t("span",{class:"token keyword"},"return"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n window"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"removeEventListener"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'resize'"),t("span",{class:"token punctuation"},","),e(" handleResize"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token function"},"cancelAnimationFrame"),t("span",{class:"token punctuation"},"("),e("frameId"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br"),t("span",{class:"line-number"},"25"),t("br"),t("span",{class:"line-number"},"26"),t("br")])],-1),_c=t("h3",{id:"first-paint-time"},[t("a",{class:"header-anchor",href:"#first-paint-time","aria-hidden":"true"},"#"),e(" First Paint Time")],-1),Ac=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[e("document"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"addEventListener"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'DOMContentLoaded'"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'DOM 挂载时间: '"),t("span",{class:"token punctuation"},","),e(" Date"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"now"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"-"),e(" timerStart"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token comment"},"// 性能日志上报"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\nwindow"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"addEventListener"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'load'"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'所有资源加载完成时间: '"),t("span",{class:"token punctuation"},","),e(" Date"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"now"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"-"),e(" timerStart"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token comment"},"// 性能日志上报"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br")])],-1),Ec=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token comment"},"// 计算加载时间"),e("\n"),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token function"},"getPerformanceTiming"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"const"),e(" performance "),t("span",{class:"token operator"},"="),e(" window"),t("span",{class:"token punctuation"},"."),e("performance"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"if"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token operator"},"!"),e("performance"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token comment"},"// 当前浏览器不支持"),e("\n console"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'你的浏览器不支持 performance 接口'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"return"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n\n "),t("span",{class:"token keyword"},"const"),e(" t "),t("span",{class:"token operator"},"="),e(" performance"),t("span",{class:"token punctuation"},"."),e("timing"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"const"),e(" times "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"{"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token comment"},"//【重要】页面加载完成的时间"),e("\n "),t("span",{class:"token comment"},"//【原因】这几乎代表了用户等待页面可用的时间"),e("\n times"),t("span",{class:"token punctuation"},"."),e("loadPage "),t("span",{class:"token operator"},"="),e(" t"),t("span",{class:"token punctuation"},"."),e("loadEventEnd "),t("span",{class:"token operator"},"-"),e(" t"),t("span",{class:"token punctuation"},"."),e("navigationStart"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token comment"},"//【重要】解析 DOM 树结构的时间"),e("\n "),t("span",{class:"token comment"},"//【原因】反省下你的 DOM 树嵌套是不是太多了!"),e("\n times"),t("span",{class:"token punctuation"},"."),e("domReady "),t("span",{class:"token operator"},"="),e(" t"),t("span",{class:"token punctuation"},"."),e("domComplete "),t("span",{class:"token operator"},"-"),e(" t"),t("span",{class:"token punctuation"},"."),e("responseEnd"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token comment"},"//【重要】重定向的时间"),e("\n "),t("span",{class:"token comment"},"//【原因】拒绝重定向!比如,http://example.com/ 就不该写成 http://example.com"),e("\n times"),t("span",{class:"token punctuation"},"."),e("redirect "),t("span",{class:"token operator"},"="),e(" t"),t("span",{class:"token punctuation"},"."),e("redirectEnd "),t("span",{class:"token operator"},"-"),e(" t"),t("span",{class:"token punctuation"},"."),e("redirectStart"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token comment"},"//【重要】DNS 查询时间"),e("\n "),t("span",{class:"token comment"},"//【原因】DNS 预加载做了么?页面内是不是使用了太多不同的域名导致域名查询的时间太长?"),e("\n "),t("span",{class:"token comment"},"// 可使用 HTML5 Prefetch 预查询 DNS ,见:[HTML5 prefetch](http://segmentfault.com/a/1190000000633364)"),e("\n times"),t("span",{class:"token punctuation"},"."),e("lookupDomain "),t("span",{class:"token operator"},"="),e(" t"),t("span",{class:"token punctuation"},"."),e("domainLookupEnd "),t("span",{class:"token operator"},"-"),e(" t"),t("span",{class:"token punctuation"},"."),e("domainLookupStart"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token comment"},"//【重要】读取页面第一个字节的时间"),e("\n "),t("span",{class:"token comment"},"//【原因】这可以理解为用户拿到你的资源占用的时间,加异地机房了么,加CDN 处理了么?加带宽了么?加 CPU 运算速度了么?"),e("\n "),t("span",{class:"token comment"},"// TTFB 即 Time To First Byte 的意思"),e("\n "),t("span",{class:"token comment"},"// 维基百科:https://en.wikipedia.org/wiki/Time_To_First_Byte"),e("\n times"),t("span",{class:"token punctuation"},"."),e("ttfb "),t("span",{class:"token operator"},"="),e(" t"),t("span",{class:"token punctuation"},"."),e("responseStart "),t("span",{class:"token operator"},"-"),e(" t"),t("span",{class:"token punctuation"},"."),e("navigationStart"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token comment"},"//【重要】内容加载完成的时间"),e("\n "),t("span",{class:"token comment"},"//【原因】页面内容经过 gzip 压缩了么,静态资源 css/js 等压缩了么?"),e("\n times"),t("span",{class:"token punctuation"},"."),e("request "),t("span",{class:"token operator"},"="),e(" t"),t("span",{class:"token punctuation"},"."),e("responseEnd "),t("span",{class:"token operator"},"-"),e(" t"),t("span",{class:"token punctuation"},"."),e("requestStart"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token comment"},"//【重要】执行 onload 回调函数的时间"),e("\n "),t("span",{class:"token comment"},"//【原因】是否太多不必要的操作都放到 onload 回调函数里执行了,考虑过延迟加载、按需加载的策略么?"),e("\n times"),t("span",{class:"token punctuation"},"."),e("loadEvent "),t("span",{class:"token operator"},"="),e(" t"),t("span",{class:"token punctuation"},"."),e("loadEventEnd "),t("span",{class:"token operator"},"-"),e(" t"),t("span",{class:"token punctuation"},"."),e("loadEventStart"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token comment"},"// DNS 缓存时间"),e("\n times"),t("span",{class:"token punctuation"},"."),e("appCache "),t("span",{class:"token operator"},"="),e(" t"),t("span",{class:"token punctuation"},"."),e("domainLookupStart "),t("span",{class:"token operator"},"-"),e(" t"),t("span",{class:"token punctuation"},"."),e("fetchStart"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token comment"},"// 卸载页面的时间"),e("\n times"),t("span",{class:"token punctuation"},"."),e("unloadEvent "),t("span",{class:"token operator"},"="),e(" t"),t("span",{class:"token punctuation"},"."),e("unloadEventEnd "),t("span",{class:"token operator"},"-"),e(" t"),t("span",{class:"token punctuation"},"."),e("unloadEventStart"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token comment"},"// TCP 建立连接完成握手的时间"),e("\n times"),t("span",{class:"token punctuation"},"."),e("connect "),t("span",{class:"token operator"},"="),e(" t"),t("span",{class:"token punctuation"},"."),e("connectEnd "),t("span",{class:"token operator"},"-"),e(" t"),t("span",{class:"token punctuation"},"."),e("connectStart"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"return"),e(" times"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br"),t("span",{class:"line-number"},"22"),t("br"),t("span",{class:"line-number"},"23"),t("br"),t("span",{class:"line-number"},"24"),t("br"),t("span",{class:"line-number"},"25"),t("br"),t("span",{class:"line-number"},"26"),t("br"),t("span",{class:"line-number"},"27"),t("br"),t("span",{class:"line-number"},"28"),t("br"),t("span",{class:"line-number"},"29"),t("br"),t("span",{class:"line-number"},"30"),t("br"),t("span",{class:"line-number"},"31"),t("br"),t("span",{class:"line-number"},"32"),t("br"),t("span",{class:"line-number"},"33"),t("br"),t("span",{class:"line-number"},"34"),t("br"),t("span",{class:"line-number"},"35"),t("br"),t("span",{class:"line-number"},"36"),t("br"),t("span",{class:"line-number"},"37"),t("br"),t("span",{class:"line-number"},"38"),t("br"),t("span",{class:"line-number"},"39"),t("br"),t("span",{class:"line-number"},"40"),t("br"),t("span",{class:"line-number"},"41"),t("br"),t("span",{class:"line-number"},"42"),t("br"),t("span",{class:"line-number"},"43"),t("br")])],-1),Oc=t("h3",{id:"算数逻辑运算"},[t("a",{class:"header-anchor",href:"#算数逻辑运算","aria-hidden":"true"},"#"),e(" 算数逻辑运算")],-1),Mc=t("h4",{id:"位操作"},[t("a",{class:"header-anchor",href:"#位操作","aria-hidden":"true"},"#"),e(" 位操作")],-1),Dc=t("ul",null,[t("li",null,[e("i%2 => "),t("code",null,"i&0x1")]),t("li",null,"位掩码")],-1),Lc=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token constant"},"OPTION_A"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token constant"},"OPTION_B"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token number"},"2"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token constant"},"OPTION_C"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token number"},"4"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token constant"},"OPTION_D"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token number"},"8"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token constant"},"OPTION_E"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token number"},"16"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token keyword"},"const"),e(" options "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token constant"},"OPTION_A"),e(),t("span",{class:"token operator"},"|"),e(),t("span",{class:"token constant"},"OPTION_C"),e(),t("span",{class:"token operator"},"|"),e(),t("span",{class:"token constant"},"OPTION_D"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br")])],-1),Wc=t("h4",{id:"math-对象"},[t("a",{class:"header-anchor",href:"#math-对象","aria-hidden":"true"},"#"),e(" Math 对象")],-1),Nc=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[e("Math"),t("span",{class:"token punctuation"},"."),t("span",{class:"token constant"},"E"),t("span",{class:"token punctuation"},";"),e("\nMath"),t("span",{class:"token punctuation"},"."),t("span",{class:"token constant"},"LN10"),t("span",{class:"token punctuation"},";"),e("\nMath"),t("span",{class:"token punctuation"},"."),t("span",{class:"token constant"},"LN2"),t("span",{class:"token punctuation"},";"),e("\nMath"),t("span",{class:"token punctuation"},"."),t("span",{class:"token constant"},"LOG2E"),t("span",{class:"token punctuation"},";"),e("\nMath"),t("span",{class:"token punctuation"},"."),t("span",{class:"token constant"},"LOG10E"),t("span",{class:"token punctuation"},";"),e("\nMath"),t("span",{class:"token punctuation"},"."),t("span",{class:"token constant"},"PI"),t("span",{class:"token punctuation"},";"),e("\nMath"),t("span",{class:"token punctuation"},"."),t("span",{class:"token constant"},"SQRT1_2"),t("span",{class:"token punctuation"},";"),e("\nMath"),t("span",{class:"token punctuation"},"."),t("span",{class:"token constant"},"SQRT2"),t("span",{class:"token punctuation"},";"),e("\n\nMath"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"abs"),t("span",{class:"token punctuation"},"("),e("num"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\nMath"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"exp"),t("span",{class:"token punctuation"},"("),e("num"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\nMath"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),e("num"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\nMath"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"pow"),t("span",{class:"token punctuation"},"("),e("num"),t("span",{class:"token punctuation"},","),e(" power"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\nMath"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"sqrt"),t("span",{class:"token punctuation"},"("),e("num"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\nMath"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"acos"),t("span",{class:"token punctuation"},"("),e("x"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\nMath"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"asin"),t("span",{class:"token punctuation"},"("),e("x"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\nMath"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"atan"),t("span",{class:"token punctuation"},"("),e("x"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\nMath"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"atan2"),t("span",{class:"token punctuation"},"("),e("y"),t("span",{class:"token punctuation"},","),e(" x"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\nMath"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"cos"),t("span",{class:"token punctuation"},"("),e("x"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\nMath"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"sin"),t("span",{class:"token punctuation"},"("),e("x"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\nMath"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"tan"),t("span",{class:"token punctuation"},"("),e("x"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br"),t("span",{class:"line-number"},"20"),t("br"),t("span",{class:"line-number"},"21"),t("br")])],-1),Rc=t("h2",{id:"browser-performance"},[t("a",{class:"header-anchor",href:"#browser-performance","aria-hidden":"true"},"#"),e(" Browser Performance")],-1),zc=t("ul",null,[t("li",null,[t("a",{href:"https://zhuanlan.zhihu.com/p/41017888",target:"_blank",rel:"noopener noreferrer"},"Performance 工具指北")])],-1),Bc=t("h3",{id:"browser-caches"},[t("a",{class:"header-anchor",href:"#browser-caches","aria-hidden":"true"},"#"),e(" Browser Caches")],-1),Fc=t("ul",null,[t("li",null,[t("a",{href:"https://github.com/ljianshu/Blog/issues/23",target:"_blank",rel:"noopener noreferrer"},"Dive into Browser Caches")])],-1),Hc=t("p",null,"从缓存位置上来说分为四种, 并且各自有优先级, 当依次查找缓存且都没有命中的时候, 才会去请求网络:",-1),qc=t("ul",null,[t("li",null,"Service Worker: PWA"),t("li",null,"(In-) Memory Cache: reload Tab page"),t("li",null,"(On-) Disk Cache: big files"),t("li",null,"Push Cache: HTTP/2")],-1),Jc=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[e("self"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"addEventListener"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'install'"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"event"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"async"),e(),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token function"},"buildCache"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"const"),e(" cache "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"await"),e(" caches"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"open"),t("span",{class:"token punctuation"},"("),e("cacheName"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"return"),e(" cache"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"addAll"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"["),t("span",{class:"token string"},"'/main.css'"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'/main.mjs'"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token string"},"'/offline.html'"),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n event"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"waitUntil"),t("span",{class:"token punctuation"},"("),t("span",{class:"token function"},"buildCache"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\nself"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"addEventListener"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'fetch'"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"event"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"async"),e(),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token function"},"cachedFetch"),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"event"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"const"),e(" cache "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"await"),e(" caches"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"open"),t("span",{class:"token punctuation"},"("),e("cacheName"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"let"),e(" response "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"await"),e(" cache"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"match"),t("span",{class:"token punctuation"},"("),e("event"),t("span",{class:"token punctuation"},"."),e("request"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"if"),e(),t("span",{class:"token punctuation"},"("),e("response"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token keyword"},"return"),e(" response"),t("span",{class:"token punctuation"},";"),e("\n response "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"await"),e(),t("span",{class:"token function"},"fetch"),t("span",{class:"token punctuation"},"("),e("event"),t("span",{class:"token punctuation"},"."),e("request"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n cache"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"put"),t("span",{class:"token punctuation"},"("),e("event"),t("span",{class:"token punctuation"},"."),e("request"),t("span",{class:"token punctuation"},","),e(" response"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"clone"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token keyword"},"return"),e(" response"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n event"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"respondWith"),t("span",{class:"token punctuation"},"("),t("span",{class:"token function"},"cachedFetch"),t("span",{class:"token punctuation"},"("),e("event"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br"),t("span",{class:"line-number"},"16"),t("br"),t("span",{class:"line-number"},"17"),t("br"),t("span",{class:"line-number"},"18"),t("br"),t("span",{class:"line-number"},"19"),t("br")])],-1),Uc=t("h4",{id:"http-cache"},[t("a",{class:"header-anchor",href:"#http-cache","aria-hidden":"true"},"#"),e(" HTTP Cache")],-1),Gc=t("p",null,[e("浏览器缓存,也称 HTTP 缓存, 分为强缓存和协商缓存. 优先级较高的是强缓存, 在命中强缓存失败的情况下或者"),t("code",null,"Cache-Control: no-cache"),e("时, 才会走协商缓存.")],-1),$c=t("p",null,[e("强缓存是利用 HTTP 头中的 Expires 和 Cache-Control 两个字段来控制的. 强缓存中, 当请求再次发出时, 浏览器会根据其中的 expires 和 cache-control 判断目标资源是否 "),t("code",null,"命中"),e(" 强缓存, 若命中则直接从缓存中获取资源, 不会再与服务端发生通信. Cache-Control 相对于 expires 更加准确,它的优先级也更高. 当 Cache-Control 与 expires 同时出现时,以 Cache-Control 为准.")],-1),Vc=t("div",{class:"language-bash line-numbers-mode"},[t("pre",null,[t("code",null,[e("expires: Wed, "),t("span",{class:"token number"},"12"),e(" Sep "),t("span",{class:"token number"},"2019"),e(" 06:12:18 GMT\ncache-control: max-age"),t("span",{class:"token operator"},"="),t("span",{class:"token number"},"31536000"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br")])],-1),Kc=t("p",null,[e("协商缓存机制下, 浏览器需要向服务器去询问缓存的相关信息, 进而判断是重新发起请求、下载完整的响应, 还是从本地获取缓存的资源. 如果服务端提示缓存资源未改动 (Not Modified), 资源会被重定向到浏览器缓存, 这种情况下网络请求对应的状态码是 "),t("code",null,"304"),e(".")],-1),Yc=t("p",null,"Last-Modified 是一个时间戳, 如果启用了协商缓存, 它会在首次请求时随着 Response Headers 返回:",-1),Xc=t("div",{class:"language-bash line-numbers-mode"},[t("pre",null,[t("code",null,[e("Last-Modified: Fri, "),t("span",{class:"token number"},"27"),e(" Oct "),t("span",{class:"token number"},"2017"),e(" 06:35:57 GMT\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br")])],-1),Zc=t("p",null,"随后每次请求时, 会带上一个叫 If-Modified-Since 的时间戳字段, 它的值正是上一次 response 返回给它的 last-modified 值:",-1),Qc=t("div",{class:"language-bash line-numbers-mode"},[t("pre",null,[t("code",null,[e("If-Modified-Since: Fri, "),t("span",{class:"token number"},"27"),e(" Oct "),t("span",{class:"token number"},"2017"),e(" 06:35:57 GMT\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br")])],-1),nl=t("p",null,"服务器可能无法正确感知文件的变化 (未实际改动或改动过快), 为了解决这样的问题, Etag 作为 Last-Modified 的补充出现了. Etag 是由服务器为每个资源生成的唯一的标识字符串, 这个标识字符串可以是基于文件内容编码的, 因此 Etag 能够精准地感知文件的变化.",-1),sl=t("h4",{id:"code-caching"},[t("a",{class:"header-anchor",href:"#code-caching","aria-hidden":"true"},"#"),e(" Code Caching")],-1),al=t("ul",null,[t("li",null,[e("cold run: "),t("code",null,"download -> compile -> store into on-disk cache")]),t("li",null,[e("warm run: "),t("code",null,"fetch from browser cache -> compile -> store metadata")]),t("li",null,[e("hot run: "),t("code",null,"fetch scripts and metadata from browser cache -> skip compile")]),t("li",null,"positive case: IIFE function heuristics"),t("li",null,[e("passive case: too small ("),t("code",null,"< 1KB"),e(") and inline scripts")])],-1),tl=t("h3",{id:"browser-performance-monitoring"},[t("a",{class:"header-anchor",href:"#browser-performance-monitoring","aria-hidden":"true"},"#"),e(" Browser Performance Monitoring")],-1),el=t("p",null,"前端性能监控分为两种方式, 一种叫做合成监控 (Synthetic Monitoring, SYN), 另一种是真实用户监控 (Real User Monitoring, RUM).",-1),ol=t("h4",{id:"synthetic-monitoring"},[t("a",{class:"header-anchor",href:"#synthetic-monitoring","aria-hidden":"true"},"#"),e(" Synthetic Monitoring")],-1),cl=t("p",null,"在一个模拟场景里, 去提交一个需要做性能审计的页面, 通过一系列的工具、规则去运行你的页面, 提取一些性能指标, 得出一个审计报告.",-1),ll=t("p",null,"常见的工具有 Google 的 Lighthouse,WebPageTest,PageSpeed 等",-1),pl=t("table",null,[t("thead",null,[t("tr",null,[t("th",{style:{"text-align":"left"}},"优点"),t("th",{style:{"text-align":"center"}},"缺点")])]),t("tbody",null,[t("tr",null,[t("td",{style:{"text-align":"left"}},"实现简单"),t("td",{style:{"text-align":"center"}},"无法还原全部真实场景")]),t("tr",null,[t("td",{style:{"text-align":"left"}},"能采集到丰富的数据,如硬件指标或瀑布图"),t("td",{style:{"text-align":"center"}},"登录等场景需要额外解决")]),t("tr",null,[t("td",{style:{"text-align":"left"}},"不影响真实用户的访问性能"),t("td",{style:{"text-align":"center"}},"单次数据不够稳定")]),t("tr",null,[t("td",{style:{"text-align":"left"}},"可以提供页面加载幻灯片等可视化分析途径"),t("td",{style:{"text-align":"center"}},"数据量较小,无法发挥更大价值")])])],-1),ul=t("h4",{id:"real-user-monitoring"},[t("a",{class:"header-anchor",href:"#real-user-monitoring","aria-hidden":"true"},"#"),e(" Real User Monitoring")],-1),rl=t("p",null,"用户在页面访问之后就会产生各种各样的性能指标, 之后会将这些性能指标上传的我们的日志服务器上, 进行数据的提起清洗加工, 最后在监控平台上进行展示和分析的一个过程.",-1),il=t("ul",null,[t("li",null,"真实用户监控的优缺点")],-1),kl=t("table",null,[t("thead",null,[t("tr",null,[t("th",{style:{"text-align":"left"}},"优点"),t("th",{style:{"text-align":"left"}},"缺点")])]),t("tbody",null,[t("tr",null,[t("td",{style:{"text-align":"left"}},"无需配置模拟条件,完全还原真实场景"),t("td",{style:{"text-align":"left"}},"影响真实用户的访问性能及流量消耗")]),t("tr",null,[t("td",{style:{"text-align":"left"}},"不存在登录等需要额外解决的场景"),t("td",{style:{"text-align":"left"}},"无法采集硬件相关指标")]),t("tr",null,[t("td",{style:{"text-align":"left"}},"数据样本足够庞大,可以减少统计误差"),t("td",{style:{"text-align":"left"}},"无法采集完整的资源加载瀑布图")]),t("tr",null,[t("td",{style:{"text-align":"left"}},"新年数据可与其它数据关联,产生更大价值"),t("td",{style:{"text-align":"left"}},"无法可视化展示加载过程")])])],-1),bl=t("h4",{id:"difference-between-syn-and-rum"},[t("a",{class:"header-anchor",href:"#difference-between-syn-and-rum","aria-hidden":"true"},"#"),e(" Difference between SYN and RUM")],-1),ml=t("table",null,[t("thead",null,[t("tr",null,[t("th",{style:{"text-align":"left"}},"对比项"),t("th",{style:{"text-align":"left"}},"合成监控"),t("th",{style:{"text-align":"left"}},"真实用户监控")])]),t("tbody",null,[t("tr",null,[t("td",{style:{"text-align":"left"}},"实现难度及成本"),t("td",{style:{"text-align":"left"}},"较低"),t("td",{style:{"text-align":"left"}},"较高")]),t("tr",null,[t("td",{style:{"text-align":"left"}},"采集数据丰富度"),t("td",{style:{"text-align":"left"}},"丰富"),t("td",{style:{"text-align":"left"}},"基础")]),t("tr",null,[t("td",{style:{"text-align":"left"}},"数据样本量"),t("td",{style:{"text-align":"left"}},"较小"),t("td",{style:{"text-align":"left"}},"大(视业务体量)")]),t("tr",null,[t("td",{style:{"text-align":"left"}},"适合场景"),t("td",{style:{"text-align":"left"}},"定性分析, 小数据量分析"),t("td",{style:{"text-align":"left"}},"定量分析, 业务数据深度挖掘")])])],-1),dl=t("h4",{id:"performance-monitoring-methods"},[t("a",{class:"header-anchor",href:"#performance-monitoring-methods","aria-hidden":"true"},"#"),e(" Performance Monitoring Methods")],-1),gl=t("p",null,"在真实用户性能数据采集时, 要关注四个方面的东西:",-1),hl=t("ul",null,[t("li",null,"使用标准的 API"),t("li",null,"定义合适的指标"),t("li",null,"采集正确的数据"),t("li",null,"上报关联的维度")],-1),fl=t("h4",{id:"monitoring-standard-api"},[t("a",{class:"header-anchor",href:"#monitoring-standard-api","aria-hidden":"true"},"#"),e(" Monitoring Standard API")],-1),yl=t("p",null,"采集性能数据时先抹平 Navigation Timing spec 差异 优先使用 PerformanceTimeline API (在复杂场景,亦可考虑优先使用 PerformanceObserver)",-1),wl=t("h4",{id:"monitoring-statistics-data"},[t("a",{class:"header-anchor",href:"#monitoring-statistics-data","aria-hidden":"true"},"#"),e(" Monitoring Statistics Data")],-1),vl=t("p",null,"First Meaningful Paint: 首次有效渲染时长, 它的一个核心的想法是渲染并不一定代表着用户看到了主要内容, Load 也不一定代表用户看到主要内容. 假设当一个网页的 DOM 结构发生剧烈的变化的时候, 就是这个网页主要内容出现的时候, 那么在这样的一个时间点上, 就是用户看到主要内容的一个时间点.",-1),xl=t("p",null,"它的优点是相对校准的估算出内容渲染时间, 贴近用户感知. 但缺点是无原生 API 支持, 算法推导时 DOM 节点不含权重.",-1),jl=t("ul",null,[t("li",null,"First Contentful Paint (FCP)"),t("li",null,"First Meaningful Paint (FMP)"),t("li",null,"Largest Contentful Paint (LCP)"),t("li",null,"First Input Delay (FID)"),t("li",null,"Time to Interactive (TOI)")],-1),Sl=t("h4",{id:"monitoring-report-dimension"},[t("a",{class:"header-anchor",href:"#monitoring-report-dimension","aria-hidden":"true"},"#"),e(" Monitoring Report Dimension")],-1),Tl=t("p",null,"不同的页面操作/页面打开方式/浏览器环境都会对我们页面加载的性能会有影响, 需要上报这些维度的数据, 以便深入性能分析:",-1),Pl=t("ul",null,[t("li",null,"当前页面是否可见"),t("li",null,"页面加载方式: 直接打开/刷新打开/前进后退打开"),t("li",null,"是否启用 HTTP2"),t("li",null,"是否启用 Service Worker")],-1),Cl=t("h4",{id:"speed-tools"},[t("a",{class:"header-anchor",href:"#speed-tools","aria-hidden":"true"},"#"),e(" Speed Tools")],-1),Il=t("ul",null,[t("li",null,[t("a",{href:"https://developers.google.com/web/fundamentals/performance/speed-tools",target:"_blank",rel:"noopener noreferrer"},"Speedup Tools")]),t("li",null,[t("a",{href:"https://github.com/GoogleChromeLabs/first-input-delay",target:"_blank",rel:"noopener noreferrer"},"FID Tracking")]),t("li",null,[t("a",{href:"https://developers.google.com/speed/pagespeed/insights",target:"_blank",rel:"noopener noreferrer"},"PageSpeed Insights")]),t("li",null,[t("a",{href:"https://github.com/GoogleChrome/lighthouse",target:"_blank",rel:"noopener noreferrer"},"Lighthouse audit tab)")])],-1),_l=t("h3",{id:"data-format-and-size"},[t("a",{class:"header-anchor",href:"#data-format-and-size","aria-hidden":"true"},"#"),e(" Data Format and Size")],-1),Al=t("ul",null,[t("li",null,[t("a",{href:"https://www.keycdn.com/blog/optimize-images-for-web",target:"_blank",rel:"noopener noreferrer"},"optimize images for web")]),t("li",null,[t("a",{href:"https://evilmartians.com/chronicles/images-done-right-web-graphics-good-to-the-last-byte-optimization-techniques",target:"_blank",rel:"noopener noreferrer"},"Images Optimization Techniques")])],-1),El=t("h4",{id:"images-format"},[t("a",{class:"header-anchor",href:"#images-format","aria-hidden":"true"},"#"),e(" Images Format")],-1),Ol=t("p",null,[e("mp4 smaller than gif ("),t("code",null,"ffmpeg"),e(")")],-1),Ml=t("div",{class:"language-html line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token comment"},"\x3c!-- ffmpeg -i dog.gif dog.mp4 --\x3e"),e("\n"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("video")]),e(),t("span",{class:"token attr-name"},"autoplay"),e(),t("span",{class:"token attr-name"},"loop"),e(),t("span",{class:"token attr-name"},"muted"),e(),t("span",{class:"token attr-name"},"playsinline"),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("source")]),e(),t("span",{class:"token attr-name"},"src"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("dog.mp4"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"type"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("video/mp4"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token punctuation"},"/>")]),e("\n"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("video")]),t("span",{class:"token punctuation"},">")]),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br")])],-1),Dl=t("p",null,"WebP 25-35% smaller than jpg/png",-1),Ll=t("div",{class:"language-html line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("picture")]),t("span",{class:"token punctuation"},">")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("source")]),e(),t("span",{class:"token attr-name"},"type"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("image/webp"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"srcset"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("flower.webp"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token punctuation"},"/>")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("source")]),e(),t("span",{class:"token attr-name"},"type"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("image/jpeg"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"srcset"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("flower.jpg"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token punctuation"},"/>")]),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("img")]),e(),t("span",{class:"token attr-name"},"src"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("flower.jpg"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token punctuation"},"/>")]),e("\n"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("picture")]),t("span",{class:"token punctuation"},">")]),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br")])],-1),Wl=t("h4",{id:"images-compression"},[t("a",{class:"header-anchor",href:"#images-compression","aria-hidden":"true"},"#"),e(" Images Compression")],-1),Nl=t("ul",null,[t("li",null,[t("a",{href:"https://github.com/Klathmon/imagemin-webpack-plugin",target:"_blank",rel:"noopener noreferrer"},"Imagemin")])],-1),Rl=t("h4",{id:"images-scaling"},[t("a",{class:"header-anchor",href:"#images-scaling","aria-hidden":"true"},"#"),e(" Images Scaling")],-1),zl=t("p",null,"responsive images: provide 3~5 different sizes reduce image transfer sizes by average of ~20%",-1),Bl=t("ul",null,[t("li",null,[t("a",{href:"https://github.com/lovell/sharp",target:"_blank",rel:"noopener noreferrer"},"Sharp")]),t("li",null,[t("a",{href:"https://github.com/oliver-moran/jimp",target:"_blank",rel:"noopener noreferrer"},"Jimp")])],-1),Fl=t("div",{class:"language-html line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("img")]),e("\n "),t("span",{class:"token attr-name"},"srcset"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("flower-small.jpg 480w, flower-large.jpg 1080w"),t("span",{class:"token punctuation"},'"')]),e("\n "),t("span",{class:"token attr-name"},"sizes"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("50vw"),t("span",{class:"token punctuation"},'"')]),e("\n "),t("span",{class:"token attr-name"},"src"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("flower-large.jpg"),t("span",{class:"token punctuation"},'"')]),e("\n"),t("span",{class:"token punctuation"},"/>")]),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br")])],-1),Hl=t("h3",{id:"data-loading"},[t("a",{class:"header-anchor",href:"#data-loading","aria-hidden":"true"},"#"),e(" Data Loading")],-1),ql=t("ul",null,[t("li",null,[t("a",{href:"https://developers.google.com/web/fundamentals/performance/resource-prioritization",target:"_blank",rel:"noopener noreferrer"},"Resources Priority")])],-1),Jl=t("h4",{id:"data-loading-tips"},[t("a",{class:"header-anchor",href:"#data-loading-tips","aria-hidden":"true"},"#"),e(" Data Loading Tips")],-1),Ul=t("ul",null,[t("li",null,"非必要静态资源上传 CDN"),t("li",null,"冷启动开启数据预拉取"),t("li",null,"页面路由切换时进行数据预拉取 (并缓存数据)")],-1),Gl=t("h4",{id:"data-preloading"},[t("a",{class:"header-anchor",href:"#data-preloading","aria-hidden":"true"},"#"),e(" Data Preloading")],-1),$l=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token operator"},"<"),e("link rel"),t("span",{class:"token operator"},"="),t("span",{class:"token string"},'"preload"'),e(),t("span",{class:"token keyword"},"as"),t("span",{class:"token operator"},"="),t("span",{class:"token string"},'"script"'),e(" href"),t("span",{class:"token operator"},"="),t("span",{class:"token string"},'"critical.js"'),t("span",{class:"token operator"},">"),e("\n"),t("span",{class:"token operator"},"<"),e("link rel"),t("span",{class:"token operator"},"="),t("span",{class:"token string"},'"modulepreload"'),e(" href"),t("span",{class:"token operator"},"="),t("span",{class:"token string"},'"critical-module.mjs"'),t("span",{class:"token operator"},">"),e("\n\n"),t("span",{class:"token operator"},"<"),e("link rel"),t("span",{class:"token operator"},"="),t("span",{class:"token string"},'"preload"'),e(),t("span",{class:"token keyword"},"as"),t("span",{class:"token operator"},"="),t("span",{class:"token string"},'"image"'),e(" href"),t("span",{class:"token operator"},"="),t("span",{class:"token string"},'"..."'),t("span",{class:"token operator"},">"),e("\n"),t("span",{class:"token operator"},"<"),e("link rel"),t("span",{class:"token operator"},"="),t("span",{class:"token string"},'"preload"'),e(),t("span",{class:"token keyword"},"as"),t("span",{class:"token operator"},"="),t("span",{class:"token string"},'"font"'),e(" href"),t("span",{class:"token operator"},"="),t("span",{class:"token string"},'"..."'),e(" crossorigin"),t("span",{class:"token operator"},">"),e("\n"),t("span",{class:"token operator"},"<"),e("link rel"),t("span",{class:"token operator"},"="),t("span",{class:"token string"},'"preload"'),e(),t("span",{class:"token keyword"},"as"),t("span",{class:"token operator"},"="),t("span",{class:"token string"},'"fetch"'),e(" href"),t("span",{class:"token operator"},"="),t("span",{class:"token string"},'"..."'),e(" crossorigin"),t("span",{class:"token operator"},">"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br")])],-1),Vl=t("h4",{id:"images-lazy-loading"},[t("a",{class:"header-anchor",href:"#images-lazy-loading","aria-hidden":"true"},"#"),e(" Images Lazy Loading")],-1),Kl=t("p",null,"Lazy Loading Polyfill:",-1),Yl=t("div",{class:"language-html line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("img")]),e(),t("span",{class:"token attr-name"},"data-src"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("flower.jpg"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"class"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("lazyload"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token punctuation"},"/>")]),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br")])],-1),Xl=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[e("window"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"addEventListener"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'scroll'"),t("span",{class:"token punctuation"},","),e(),t("span",{class:"token keyword"},"function"),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"event"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n Array"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"from"),t("span",{class:"token punctuation"},"("),e("document"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"querySelectorAll"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'.lazyload'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"forEach"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"image"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"if"),e(),t("span",{class:"token punctuation"},"("),e("image"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"slideIntoView"),t("span",{class:"token punctuation"},"("),e("event"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"getBoundingClientRect"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n image"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"setAttribute"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'src'"),t("span",{class:"token punctuation"},","),e(" image"),t("span",{class:"token punctuation"},"."),e("dataset"),t("span",{class:"token punctuation"},"."),e("src"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br")])],-1),Zl=t("p",null,"Observer Lazy Loading:",-1),Ql=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(" observer "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token keyword"},"new"),e(),t("span",{class:"token class-name"},"IntersectionObserver"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"nodes"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n nodes"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"forEach"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"v"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token keyword"},"if"),e(),t("span",{class:"token punctuation"},"("),e("v"),t("span",{class:"token punctuation"},"."),e("isIntersecting"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token punctuation"},"{"),e("\n v"),t("span",{class:"token punctuation"},"."),e("target"),t("span",{class:"token punctuation"},"."),e("src "),t("span",{class:"token operator"},"="),e(" v"),t("span",{class:"token punctuation"},"."),e("target"),t("span",{class:"token punctuation"},"."),e("dataset"),t("span",{class:"token punctuation"},"."),e("src"),t("span",{class:"token punctuation"},";"),e("\n observer"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"unobserve"),t("span",{class:"token punctuation"},"("),e("v"),t("span",{class:"token punctuation"},"."),e("target"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token keyword"},"const"),e(" images "),t("span",{class:"token operator"},"="),e(" document"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"querySelectorAll"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'img.lazyload'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\nimages"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"forEach"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},"v"),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(" observer"),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"observe"),t("span",{class:"token punctuation"},"("),e("v"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br")])],-1),np=t("p",null,"Native Lazy Loading:",-1),sp=t("div",{class:"language-html line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("img")]),e(),t("span",{class:"token attr-name"},"src"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("flower.jpg"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"lazyload"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("auto"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token punctuation"},"/>")]),e("\n"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("img")]),e(),t("span",{class:"token attr-name"},"src"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("flower.jpg"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"lazyload"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("on"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token punctuation"},"/>")]),e("\n"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("img")]),e(),t("span",{class:"token attr-name"},"src"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("flower.jpg"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"lazyload"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("off"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token punctuation"},"/>")]),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br")])],-1),ap=t("h4",{id:"javascript-lazy-loading"},[t("a",{class:"header-anchor",href:"#javascript-lazy-loading","aria-hidden":"true"},"#"),e(" JavaScript Lazy Loading")],-1),tp=t("ul",null,[t("li",null,[t("a",{href:"https://addyosmani.com/blog/script-priorities",target:"_blank",rel:"noopener noreferrer"},"Script Priorities")]),t("li",null,[t("code",null,"async"),e(": downloads the script during parsing the document, but will "),t("strong",null,"pause"),e(" the parser to execute the script.")]),t("li",null,[t("code",null,"defer"),e(": downloads the script while the document is still parsing, but waits until the document has finished parsing before executing it ("),t("strong",null,"in order"),e(").")]),t("li",null,[e("If the script is independent, use "),t("code",null,"async"),e(".")]),t("li",null,[e("If the scripts rely on each other, use "),t("code",null,"defer"),e(".")]),t("li",null,[e("If put JavaScript in "),t("code",null,""),e(", in such script can't access DOM directly (DOM haven't get parsed).")])],-1),ep=t("p",null,[e("Best practice: lazy loading scripts not execute immediately. ("),t("strong",null,"Chrome Coverage Devtools"),e(")")],-1),op=t("p",null,[t("a",{href:"https://sia.codes/posts/render-blocking-resources/#deep-dive%3A-optimizing-javascript-for-the-critical-rendering-path",target:"_blank",rel:"noopener noreferrer"},[t("img",{src:"/awesome-notes/assets/ScriptingType.562e5309.svg",alt:"Scripting Type"})])],-1),cp=t("div",{class:"language-html line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("script")]),e(),t("span",{class:"token attr-name"},"src"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("myScript.js"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),t("span",{class:"token script"}),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("script")]),t("span",{class:"token punctuation"},">")]),e("\n"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("script")]),e(),t("span",{class:"token attr-name"},"src"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("myScript.js"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"async"),t("span",{class:"token punctuation"},">")]),t("span",{class:"token script"}),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("script")]),t("span",{class:"token punctuation"},">")]),e("\n"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("script")]),e(),t("span",{class:"token attr-name"},"src"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("myScript.js"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token attr-name"},"defer"),t("span",{class:"token punctuation"},">")]),t("span",{class:"token script"}),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("script")]),t("span",{class:"token punctuation"},">")]),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br")])],-1),lp=t("div",{class:"language-jsx line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token keyword"},"const"),e(" DetailsComponent "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token function"},"lazy"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token keyword"},"import"),t("span",{class:"token punctuation"},"("),t("span",{class:"token string"},"'./details'"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token keyword"},"const"),e(),t("span",{class:"token function-variable function"},"PageComponent"),e(),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),e(),t("span",{class:"token operator"},"=>"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),t("span",{class:"token class-name"},"Suspense")]),e(),t("span",{class:"token attr-name"},"fallback"),t("span",{class:"token script language-javascript"},[t("span",{class:"token script-punctuation punctuation"},"="),t("span",{class:"token punctuation"},"{"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("div")]),t("span",{class:"token punctuation"},">")]),t("span",{class:"token plain-text"},"Loading..."),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),e("div")]),t("span",{class:"token punctuation"},">")]),t("span",{class:"token punctuation"},"}")]),t("span",{class:"token punctuation"},">")]),t("span",{class:"token plain-text"},"\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),t("span",{class:"token class-name"},"DetailsComponent")]),e(),t("span",{class:"token punctuation"},"/>")]),t("span",{class:"token plain-text"},"\n "),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},""),t("span",{class:"token class-name"},"Suspense")]),t("span",{class:"token punctuation"},">")]),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br")])],-1),pp=t("h4",{id:"prefetch"},[t("a",{class:"header-anchor",href:"#prefetch","aria-hidden":"true"},"#"),e(" PreFetch")],-1),up=t("div",{class:"language-html line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("link")]),e(),t("span",{class:"token attr-name"},"rel"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("preload"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token punctuation"},"/>")]),e(),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),e("link")]),e(),t("span",{class:"token attr-name"},"rel"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),e("prefetch"),t("span",{class:"token punctuation"},'"')]),e(),t("span",{class:"token punctuation"},"/>")]),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br")])],-1),rp=t("p",null,[t("a",{href:"https://addyosmani.com/blog/what-not-to-prefetch-prerender",target:"_blank",rel:"noopener noreferrer"},"Why not to PreFetch and PreRender"),e(":")],-1),ip=t("ul",null,[t("li",null,"avoid prefetching pages for authentication"),t("li",null,"avoid over-prefetching to limit accidental DOS"),t("li",null,"avoid prefetching pages key to checkout"),t("li",null,"avoid prefetching large resources"),t("li",null,"avoid prefetching cross-origin resources")],-1),kp=t("h4",{id:"babel-config-for-javascript"},[t("a",{class:"header-anchor",href:"#babel-config-for-javascript","aria-hidden":"true"},"#"),e(" Babel Config for JavaScript")],-1),bp=t("div",{class:"language-json line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},'"presets"'),t("span",{class:"token operator"},":"),e(),t("span",{class:"token punctuation"},"["),e("\n "),t("span",{class:"token punctuation"},"["),e("\n "),t("span",{class:"token string"},'"@babel/preset-env"'),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},'"targets"'),t("span",{class:"token operator"},":"),e(),t("span",{class:"token punctuation"},"{"),e("\n "),t("span",{class:"token property"},'"esmodules"'),t("span",{class:"token operator"},":"),e(),t("span",{class:"token boolean"},"true"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token property"},'"node"'),t("span",{class:"token operator"},":"),e(),t("span",{class:"token string"},'">= 8"'),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token property"},'"browsers"'),t("span",{class:"token operator"},":"),e(),t("span",{class:"token string"},'"> 0.25%"'),e("\n "),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),e("\n "),t("span",{class:"token property"},'"useBuiltIns"'),t("span",{class:"token operator"},":"),e(),t("span",{class:"token string"},'"usage"'),e("\n "),t("span",{class:"token punctuation"},"}"),e("\n "),t("span",{class:"token punctuation"},"]"),e("\n "),t("span",{class:"token punctuation"},"]"),e("\n"),t("span",{class:"token punctuation"},"}"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br"),t("span",{class:"line-number"},"13"),t("br"),t("span",{class:"line-number"},"14"),t("br"),t("span",{class:"line-number"},"15"),t("br")])],-1),mp=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token operator"},"<"),e("script type"),t("span",{class:"token operator"},"="),t("span",{class:"token string"},'"module"'),e(" src"),t("span",{class:"token operator"},"="),t("span",{class:"token string"},'"main.mjs"'),t("span",{class:"token operator"},">"),t("span",{class:"token operator"},"<"),t("span",{class:"token operator"},"/"),e("script"),t("span",{class:"token operator"},">"),e("\n"),t("span",{class:"token operator"},"<"),e("script nomodule src"),t("span",{class:"token operator"},"="),t("span",{class:"token string"},'"legacy.js"'),t("span",{class:"token operator"},">"),t("span",{class:"token operator"},"<"),t("span",{class:"token operator"},"/"),e("script"),t("span",{class:"token operator"},">"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br")])],-1),dp=t("h3",{id:"v8-good-parts"},[t("a",{class:"header-anchor",href:"#v8-good-parts","aria-hidden":"true"},"#"),e(" V8 Good Parts")],-1),gp=t("ul",null,[t("li",null,"source code (parser) AST (interpreter) bytecode"),t("li",null,"send profiling data from bytecode to optimizing compiler, generate optimized code"),t("li",null,[t("strong",null,"Ignition"),e(" interpreter")]),t("li",null,[t("strong",null,"TurboFan"),e(" optimizing compiler (2 for SpiderMonkey/Edge, 3 for Safari)")])],-1),hp=t("h4",{id:"object-shape"},[t("a",{class:"header-anchor",href:"#object-shape","aria-hidden":"true"},"#"),e(" Object Shape")],-1),fp=t("ul",null,[t("li",null,[t("a",{href:"https://mathiasbynens.be/notes/shapes-ics",target:"_blank",rel:"noopener noreferrer"},"Shapes ICS")])],-1),yp=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token comment"},"// o1 and o2 have the same shape"),e("\n"),t("span",{class:"token comment"},"// JSObject(1, 2) => Shape('x', 'y')"),e("\n"),t("span",{class:"token comment"},"// JSObject(3, 4) => Shape('x', 'y')"),e("\n"),t("span",{class:"token comment"},"// 'x' => 0 Offset, Writable, Enumerable, Configurable"),e("\n"),t("span",{class:"token comment"},"// 'y' => 1 Offset, Writable, Enumerable, Configurable"),e("\n"),t("span",{class:"token keyword"},"const"),e(" o1 "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"{"),e(" x"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},","),e(" y"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token number"},"2"),e(),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n"),t("span",{class:"token keyword"},"const"),e(" o2 "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"{"),e(" x"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token number"},"3"),t("span",{class:"token punctuation"},","),e(" y"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token number"},"4"),e(),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br")])],-1),wp=t("p",null,"Shape Transform",-1),vp=t("div",{class:"language-js line-numbers-mode"},[t("pre",null,[t("code",null,[t("span",{class:"token comment"},"// Shape chain: Shape(empty) => Shape(x) => Shape(x, y)"),e("\n"),t("span",{class:"token keyword"},"const"),e(" o "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"{"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\no"),t("span",{class:"token punctuation"},"."),e("x "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},";"),e("\no"),t("span",{class:"token punctuation"},"."),e("y "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token number"},"2"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token comment"},"// Shape chain: Shape(empty) => Shape(y) => Shape(y, x)"),e("\n"),t("span",{class:"token keyword"},"const"),e(" o "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"{"),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\no"),t("span",{class:"token punctuation"},"."),e("y "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token number"},"2"),t("span",{class:"token punctuation"},";"),e("\no"),t("span",{class:"token punctuation"},"."),e("x "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token number"},"1"),t("span",{class:"token punctuation"},";"),e("\n\n"),t("span",{class:"token comment"},"// Shape chain: Shape(x)"),e("\n"),t("span",{class:"token keyword"},"const"),e(" o "),t("span",{class:"token operator"},"="),e(),t("span",{class:"token punctuation"},"{"),e(" x"),t("span",{class:"token operator"},":"),e(),t("span",{class:"token number"},"1"),e(),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),e("\n")])]),t("div",{class:"line-numbers-wrapper"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br"),t("span",{class:"line-number"},"10"),t("br"),t("span",{class:"line-number"},"11"),t("br"),t("span",{class:"line-number"},"12"),t("br")])],-1),xp=t("p",null,"array shape: Shape('length'), 'length' => 0 Offset, Writable",-1),jp=t("h4",{id:"inline-cache"},[t("a",{class:"header-anchor",href:"#inline-cache","aria-hidden":"true"},"#"),e(" Inline Cache")],-1),Sp=t("p",null,"V8 use ICs to memorize information (same shape) where to find properties on objects:",-1),Tp=t("ul",null,[t("li",null,"always initialize objects in the same way (generate the same shape)"),t("li",null,"don't add property to objects dynamically (invalid inline cache)"),t("li",null,"don't mess with property attributes of array elements")],-1),Pp=t("h4",{id:"v8-perf-tools"},[t("a",{class:"header-anchor",href:"#v8-perf-tools","aria-hidden":"true"},"#"),e(" V8 Perf Tools")],-1),Cp=t("ul",null,[t("li",null,[t("a",{href:"https://github.com/thlorenz/deoptigate",target:"_blank",rel:"noopener noreferrer"},"Deoptigate")]),t("li",null,[t("a",{href:"https://github.com/thlorenz/turbolizer",target:"_blank",rel:"noopener noreferrer"},"Turbolizer")]),t("li",null,[t("a",{href:"https://github.com/thlorenz/v8-map-processor",target:"_blank",rel:"noopener noreferrer"},"v8 map processor")])],-1),Ip=t("h4",{id:"awesome-v8-performance-tutorial"},[t("a",{class:"header-anchor",href:"#awesome-v8-performance-tutorial","aria-hidden":"true"},"#"),e(" Awesome V8 Performance Tutorial")],-1),_p=t("ul",null,[t("li",null,[t("a",{href:"https://github.com/thlorenz/v8-perf",target:"_blank",rel:"noopener noreferrer"},"v8 perf")])],-1),Ap=t("h3",{id:"perf-and-analysis-tools"},[t("a",{class:"header-anchor",href:"#perf-and-analysis-tools","aria-hidden":"true"},"#"),e(" Perf and Analysis Tools")],-1),Ep=t("ul",null,[t("li",null,[t("a",{href:"https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference",target:"_blank",rel:"noopener noreferrer"},"Chrome DevTools")]),t("li",null,[t("a",{href:"https://developers.google.com/web/tools/chrome-user-experience-report",target:"_blank",rel:"noopener noreferrer"},"Chrome UX Report")])],-1),Op=t("p",null,"Audits of Chrome: PWA, best practices, SEO, performance, device simulator",-1),Mp=t("h4",{id:"inspect-android-device"},[t("a",{class:"header-anchor",href:"#inspect-android-device","aria-hidden":"true"},"#"),e(" Inspect Android Device")],-1),Dp=t("ul",null,[t("li",null,"enable development mode and USB debugging in Android Device"),t("li",null,"link Android and PC with USB cable"),t("li",null,[e("open "),t("code",null,"chrome://inspect/#devices"),e(" to start inspecting")])],-1),Lp=t("h3",{id:"performance-best-practice"},[t("a",{class:"header-anchor",href:"#performance-best-practice","aria-hidden":"true"},"#"),e(" Performance Best Practice")],-1),Wp=t("ul",null,[t("li",null,"use monomorphic objects due to shape and inline caches"),t("li",null,"use monomorphic function in hot code paths"),t("li",null,"resource optimization"),t("li",null,"code splitting"),t("li",null,"lazy loading"),t("li",null,"offline caching (PWA)")],-1),Np=t("h4",{id:"performant-tips-for-fcp"},[t("a",{class:"header-anchor",href:"#performant-tips-for-fcp","aria-hidden":"true"},"#"),e(" Performant Tips for FCP")],-1),Rp=t("p",null,"First Contentful Paint:",-1),zp=t("ul",null,[t("li",null,[e("Add the "),t("code",null,"defer"),e(" or "),t("code",null,"async"),e(" attributes to "),t("code",null,"
+
+
+