【設計模式】javascript 外觀模式的應用與實踐

##外觀模式1

html {overflow-x: initial !important;}:root { --bg-color:#ffffff; --文字顏色:#333333; --選擇文字背景顏色:#B5D6FC; --選擇文字字體顏色：自動； --monospace:"Lucida Console",Consolas,"Courier",monospace; } html { 字體大小：14px;背景顏色：var(--bg-color);顏色：var(--文字顏色)；字型系列：「Helvetica Neue」、Helvetica、Arial、sans-serif； -webkit-font-smoothing：抗鋸齒； } 正文 { 邊距：0px;內邊距：0px；高度：自動；底部：0px；頂部：0px；左：0px；右：0px；字體大小：1rem；行高：1.42857；溢出-x：隱藏；背景：繼承；選項卡大小：4； } iframe { 邊距：自動； } a.url { 斷字：全部中斷； } a：活動，a：懸停{輪廓：0px; } .in-text-selection,::selection { 文字陰影：無；背景：var(--select-text-bg-color);顏色：var(--選擇文字字體顏色)； } #write { 邊距：0px 自動；高度：自動；寬度：繼承；斷詞：正常；溢出換行：斷字；位置：相對；空白：正常；溢出-x：可見；頂部填充：40px； } #write.first-line-indent p { 文字縮排：2em; } #write.first-line-indent li p, #write.first-line-indent p * { text-indent: 0px; } #write.first-line-indent li { margin-left: 2em; } .for-image #write { 左填充：8px;右內邊距：8px； } body.typora-export { padding-left: 30px;右內邊距：30px； } .typora-export .footnote-line, .typora-export li, .typora-export p { 空白：預換行； } @media 螢幕和（最大寬度：500px）{ body.typora-export { 左填充：0px;右內邊距：0px； } #write { 左填充：20px;右內邊距：20px； } .CodeMirror-sizer { margin-left: 0px !important; } .CodeMirror-gutters { 顯示：無！ } } #write li > 圖:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { 位置：相對； } img { 最大寬度：100%;垂直對齊：居中； } 按鈕、輸入、選擇、文字區域 { 顏色：繼承；字體：繼承； } 輸入[類型=“複選框”]，輸入[類型=“無線電”] { 行高：正常；內邊距：0px； } *, ::after, ::before { box-sizing: border-box; } #write h1, #write h2, #write h3, #write h4, #write h5, #write h6, #write p, #write pre { 寬度: 繼承; } #write h1, #write h2, #write h3, #write h4, #write h5, #write h6, #write p { 位置：相對; } p { 行高：繼承； } h1、h2、h3、h4、h5、h6 { 中斷後：避免頁；闖入的：避免；孤兒：4； } p { 孤兒：4； } h1 { 字體大小：2rem; } h2 { 字體大小：1.8rem; } h3 { 字體大小：1.6rem; } h4 { 字體大小：1.4rem; } h5 { 字體大小：1.2rem; } h6 { 字體大小：1rem; } .md-math-block, .md-rawblock, h1, h2, h3, h4, h5, h6, p { 頂部邊距: 1rem;邊距底部：1rem； } .hidden { 顯示：無； } .md-blockmeta { 顏色: rgb(204, 204, 204);字體粗細：700；字體樣式：斜體； } a { 遊標：指針； } su.md-footnote { 填充：2px 4px;背景顏色: rgba(238, 238, 238, 0.7);顏色：RGB(85,85,85)；邊框半徑：4px；遊標：指針； } super.md-footnote a，sup.md-footnote a:hover { 顏色：繼承；文字轉換：繼承；文字裝飾：繼承； } #write input[type="checkbox"] { 遊標：指標；寬度：繼承；高度：繼承； } 圖 { 溢出-x: 自動;邊距：1.2em 0px；最大寬度：計算（100% 16px）；內邊距：0px； } 圖>表{邊距：0px！ } tr { 內部突破：避免；中斷後：自動； } thead { 顯示：表頭組； } 表 { 邊框折疊：折疊；邊框間距：0px；寬度：100%；溢出：自動；闖入：自動；文字對齊：左對齊； } table.md-table td { 最小寬度：32px; } .CodeMirror-gutters { 右邊框：0px;背景顏色：繼承； } .CodeMirror-linenumber { 使用者選擇：無； } .CodeMirror { 文字對齊：左； } .CodeMirror-placeholder { 不透明度：0.3; } .CodeMirror pre { 填充：0px 4px; } .CodeMirror-lines { 填充：0px; } div.hr:焦點{ 遊標: 無; } #write pre { 空白：預換行； } #write.fences-no-line-wrapping pre { 空白：pre; } #write pre.ty-contain-cm { 空白：正常； } .CodeMirror-gutters { margin-right: 4px; } .md-fences { 字體大小：0.9rem;顯示：塊；闖入的：避免；文字對齊：左對齊；溢出：可見；空白：前；背景：繼承；位置：相對！ } .md-diagram-panel { 寬度：100%；上邊距：10px；文字對齊：居中；頂部填充：0px；底部填充：8px；溢出-x：自動； } #write .md-fences.mock-cm { 空白：預換行； } .md-fences.md-fences-with-lineno { 左填充：0px; } #write.fences-no-line-wrapping .md-fences.mock-cm { 空白：pre;溢出-x：自動； } .md-fences.mock-cm.md-fences-with-lineno { 左填充：8px; } .CodeMirror-line, twitterwidget { 內部中斷：避免； } .footnotes { 不透明度：0.8；字體大小：0.9rem；上邊距：1em；下邊距：1em； } .footnotes .footnotes { 頂部邊距：0px; }.md-重置{邊距：0px;內邊距：0px；邊框：0px；輪廓：0px；垂直對齊：頂部；背景：0px 0px；文字裝飾：無；文字陰影：無；浮動：無；位置：靜態；寬度：自動；高度：自動；空白：nowrap；遊標：繼承； -webkit-tap-highlight-color：透明；行高：正常；字體粗細：400；文字對齊：左對齊； box-sizing：內容框；方向： ltr； } li div { 頂部填充：0px; } blockquote { 邊距：1rem 0px; } li .mathjax-block, li p { 邊距: 0.5rem 0px; } li { 邊距：0px;位置：相對； } blockquote > :last-child { margin-bottom: 0px; } blockquote > :first-child, li > :first-child { margin-top: 0px; } .footnotes-area { 顏色: rgb(136, 136, 136);上邊距：0.714rem；底部填充：0.143rem；空白：正常； } #write .footnote-line { 空白：預換行； } @媒體印刷{ body, html { 邊框: 1px 實心透明;身高：99%；中斷之後的：避免；中斷之前：避免；字體變體連字：非通用連字； } #write { 邊距頂部：0px;頂部填充：0px；邊框顏色：透明！ } .typora-export * { -webkit-print-color-調整：精確； } html.blink-to-pdf { 字體大小：13px; } .typora-export #write { padding-left: 32px;右內邊距：32px；底部填充：0px；中斷之後的：避免； } .typora-export #write::after { 高度：0px; } } .footnote-line { 頂部邊距：0.714em；字體大小：0.7em； } a img, img a { 遊標: 指標; } pre.md-meta-block { 字體大小：0.8rem;最小高度：0.8rem；空白：預換行；背景：rgb(204, 204, 204);顯示：塊；溢出-x：隱藏； } p > .md-image:only-child:not(.md-img-error) img, p > img:only-child { 顯示：區塊；保證金：自動； } #write.first-line-indent p > .md-image:only-child:not(.md-img-error) img { left: -2em;位置：相對； } p > .md-image:only-child { 顯示：內聯區塊；寬度：100%； } #write .MathJax_Display { 邊距：0.8em 0px 0px; } .md-math-block { 寬度：100%； } .md-math-block:not(:empty)::after { 顯示：無； } [contenteditable="true"]:active, [contenteditable="true"]:focus, [contenteditable="false"]:active, [contenteditable="false"]:focus { 大綱: 0px;盒子陰影：無； } .md-task-list-item { 位置：相對；清單樣式類型：無； } .task-list-item.md-task-list-item { 左填充：0px; } .md-task-list-item > 輸入 { 位置：絕對；頂部：0px；左：0px；左邊距：-1.2em；上邊距：calc(1em - 10px)；邊框：無； } .math { 字體大小：1rem; } .md-toc { 最小高度：3.58rem;位置：相對；字體大小：0.9rem；邊框半徑：10px； } .md-toc-content { 位置：相對；左邊距：0px； } .md-toc-content::after, .md-toc::after { 顯示：無； } .md-toc-item { 顯示：塊；顏色: rgb(65, 131, 196); } .md-toc-item a { 文字裝飾：無； } .md-toc-inner:hover { 文字裝飾: 底線; } .md-toc-inner { 顯示：內聯塊；遊標：指針； } .md-toc-h1 .md-toc-inner { 左邊距：0px;字體粗細：700； } .md-toc-h2 .md-toc-inner { 左邊距：2em; } .md-toc-h3 .md-toc-inner { 左邊距：4em； } .md-toc-h4 .md-toc-inner { 左邊距：6em； } .md-toc-h5 .md-toc-inner { 左邊距：8em； } .md-toc-h6 .md-toc-inner { 左邊距：10em; } @media 螢幕和（最大寬度：48em）{ .md-toc-h3 .md-toc-inner { 左邊距：3.5em; } .md-toc-h4 .md-toc-inner { 左邊距：5em； } .md-toc-h5 .md-toc-inner { 左邊距：6.5em; } .md-toc-h6 .md-toc-inner { 左邊距：8em； } } a.md-toc-inner { 字體大小：繼承；字體樣式：繼承；字體粗細：繼承；行高：繼承； } .footnote-line a:not(.reversefootnote) { 顏色: 繼承; } .md-attr { 顯示：無； } .md-fn-count::after { 內容：「。」; } 程式碼，pre，samp，tt { 字型系列：var（--monospace）; } kbd { 邊距：0px 0.1em;填充：0.1em 0.6em；字體大小：0.8em；顏色：rgb(36,39,41)；背景：rgb(255, 255, 255);邊框: 1px 實心 rgb(173, 179, 185);邊框半徑：3px；框陰影：rgba(12, 13, 14, 0.2) 0px 1px 0px, rgb(255, 255, 255) 0px 0px 0px 2px 插入；空白：nowrap；垂直對齊：居中； } .md-comment { 顏色: rgb(162, 127, 3);不透明度：0.8；字型系列：var(--等寬字); } 代碼 { 文字對齊：左；垂直對齊：初始； } a.md-print-anchor { 空白：pre !important;邊框寬度：初始！邊框樣式：無！邊框顏色：初始！顯示：內聯塊！位置：絕對！寬度：1px！右：0px！輪廓：0px！背景：0px 0px！文字裝飾：初始！文字陰影：初始！ } .md-inline-math .MathJax_SVG .noError { 顯示：無！ } .html-for-mac .inline-math-svg .MathJax_SVG { 垂直對齊：0.2px; } .md-math-block .MathJax_SVG_Display { 文字對齊：中心；邊距：0 像素；位置：相對；文字縮排：0px；最大寬度：無；最大高度：無；最小高度：0px；最小寬度：100%；寬度：自動；溢出-y：隱藏；顯示：塊！ }.MathJax_SVG_Display，.md-inline-math .MathJax_SVG_Display { 寬度：自動；邊距：繼承；顯示：內聯塊！ } .MathJax_SVG .MJX-monospace { 字型系列：var(--monospace); } .MathJax_SVG .MJX-sans-serif { 字型系列：sans-serif; } .MathJax_SVG { 顯示：內嵌；字體樣式：正常；字體粗細：400；行高：正常；變焦：90%；文字縮排：0px；文字對齊：左對齊；文字轉換：無；字母間距：正常；字間距：正常；溢出換行：正常；空白：nowrap；浮動：無；方向： ltr；最大寬度：無；最大高度：無；最小寬度：0px；最小高度：0px；邊框：0px；內邊距：0px；邊距：0 像素； } .MathJax_SVG * { 過渡：無 0 緩和 0； } .MathJax_SVG_Display svg { 垂直對齊：中間！邊距底部：0px！頂邊距：0px！ } .os-windows.monocolor-emoji .md-emoji { font-family: "Segoe UI 符號", sans-serif; } .md-diagram-panel > svg { 最大寬度：100%； } [lang =「流」] svg，[lang =「美人魚」] svg { 最大寬度：100％；高度：自動； } [lang="美人魚"] .node text { font-size: 1rem; } 表 tr th { border-bottom: 0px; } 視訊 { 最大寬度：100%；顯示：塊；邊距：0px 自動； } iframe { 最大寬度：100%;寬度：100%；邊框：無； } .highlight td, .highlight tr { 邊框: 0px; } svg[id^="mermaidChart"] { 行高: 1em; } 標記 { 背景: rgb(255, 255, 0);顏色: rgb(0, 0, 0); } .md-html-inline .md-plain、.md-html-inline 強、標記 .md-inline-math、標記強 { 顏色：繼承； } 標記 .md-meta { 顏色: rgb(0, 0, 0);不透明度：0.3！ } .CodeMirror { 高度：自動； } .CodeMirror.cm-s-inner { 背景：繼承； } .CodeMirror-scroll { 溢出：自動隱藏； z 索引：3； } .CodeMirror-gutter-filler, .CodeMirror-scrollbar-filler { 背景顏色: rgb(255, 255, 255); } .CodeMirror-gutters { border-right: 1px 實心 rgb(221, 221, 221);背景：繼承；空白：nowrap； } .CodeMirror-linenumber { 填充：0px 3px 0px 5px;文字對齊：右對齊；顏色: RGB(153, 153, 153); } .cm-s-inner .cm-keyword { 顏色: rgb(119, 0, 136); } .cm-s-inner .cm-atom, .cm-s-inner.cm-atom { 顏色: rgb(34, 17, 153); } .cm-s-inner .cm-number { 顏色: rgb(17, 102, 68); } .cm-s-inner .cm-def { 顏色: rgb(0, 0, 255); } .cm-s-inner .cm-variable { 顏色: rgb(0, 0, 0); } .cm-s-inner .cm-variable-2 { 顏色: rgb(0, 85, 170); } .cm-s-inner .cm-variable-3 { 顏色: rgb(0, 136, 85); } .cm-s-inner .cm-string { 顏色: rgb(170, 17, 17); } .cm-s-inner .cm-property { 顏色: rgb(0, 0, 0); } .cm-s-inner .cm-operator { 顏色: rgb(152, 26, 26); } .cm-s-inner .cm-comment, .cm-s-inner.cm-comment { 顏色: rgb(170, 85, 0); } .cm-s-inner .cm-string-2 { 顏色: rgb(255, 85, 0); } .cm-s-inner .cm-meta { 顏色: rgb(85, 85, 85); } .cm-s-inner .cm-qualifier { 顏色: rgb(85, 85, 85); } .cm-s-inner .cm-builtin { 顏色: rgb(51, 0, 170); } .cm-s-inner .cm-bracket { 顏色: rgb(153, 153, 119); } .cm-s-inner .cm-tag { 顏色: rgb(17, 119, 0); } .cm-s-inner .cm-attribute { 顏色: rgb(0, 0, 204); } .cm-s-inner .cm-header, .cm-s-inner.cm-header { 顏色: rgb(0, 0, 255); } .cm-s-inner .cm-quote, .cm-s-inner.cm-quote { 顏色: rgb(0, 153, 0); } .cm-s-inner .cm-hr, .cm-s-inner.cm-hr { 顏色: rgb(153, 153, 153); } .cm-s-inner .cm-link, .cm-s-inner.cm-link { 顏色: rgb(0, 0, 204); } .cm-負片 { 顏色: rgb(221, 68, 68); } .cm-正 { 顏色: rgb(34, 153, 34); } .cm-header, .cm-strong { 字體粗細：700; } .cm-del { 文字裝飾：穿梭； } .cm-em { 字體樣式：斜體； } .cm-link { 文字裝飾：底線； } .cm-error { 顏色：紅色； } .cm-invalidchar { 顏色：紅色； } .cm-constant { 顏色: rgb(38, 139, 210); } .cm-定義 { 顏色: rgb(181, 137, 0); } div.CodeMirror span.CodeMirror-matchingbracket { 顏色: rgb(0, 255, 0); } div.CodeMirror span.CodeMirror-nonmatchingbracket { 顏色: rgb(255, 34, 34); } .cm-s-inner .CodeMirror-activeline-background { 背景：繼承； } .CodeMirror { 位置：相對；溢出：隱藏； } .CodeMirror-scroll { 高度: 100%;輪廓：0px；位置：相對；框大小：內容框；背景：繼承； } .CodeMirror-sizer { 位置：相對； } .CodeMirror-gutter-filler、.CodeMirror-hscrollbar、.CodeMirror-scrollbar-filler、.CodeMirror-vscrollbar { 位置：絕對； z 索引：6；顯示：無； } .CodeMirror-vscrollbar { 右：0px;頂部：0px；溢出：隱藏； } .CodeMirror-hscrollbar { 底部：0px;左：0px；溢出：隱藏； } .CodeMirror-scrollbar-filler { 右：0px;底部：0px； } .CodeMirror-gutter-filler { 左：0px;底部：0px； } .CodeMirror-gutters { 位置：絕對；左：0px；頂部：0px；底部填充：30px； z 索引：3； } .CodeMirror-gutter { 空白：正常；高度：100%； box-sizing：內容框；底部填充：30px；下邊距：-32px；顯示：內聯塊； } .CodeMirror-gutter-wrapper { 位置：絕對； z 索引：4；背景：0px 0px！邊框：無！ } .CodeMirror-gutter-background { 位置：絕對；頂部：0px；底部：0px； z 索引：4； }.CodeMirror-gutter-elt { 位置：絕對；遊標：預設； z 索引：4； } .CodeMirror-lines { 遊標：文字； } .CodeMirror pre { 邊框半徑：0px;邊框寬度：0px；背景：0px 0px；字體系列：繼承；字體大小：繼承；邊距：0 像素；空白：前；溢出換行：正常；顏色：繼承； z 索引：2；位置：相對；溢出：可見； } .CodeMirror-wrap pre { 溢出換行：斷字；空白：預換行；斷詞：正常； } .CodeMirror-code pre { border-right: 30px 實心透明;寬度：適合內容； } .CodeMirror-wrap .CodeMirror-code pre { border-right: none;寬度：自動； } .CodeMirror-linebackground { 位置：絕對；左：0px；右：0px；頂部：0px；底部：0px； z 索引：0； } .CodeMirror-linewidget { 位置：相對； z 索引：2；溢出：自動； } .CodeMirror-wrap .CodeMirror-scroll { 溢出-x：隱藏； } .CodeMirror-measure { 位置：絕對；寬度：100%；高度：0 像素；溢出：隱藏；可見性：隱藏； } .CodeMirror-measure pre { 位置：靜態； } .CodeMirror div.CodeMirror-cursor { 位置：絕對；可見性：隱藏；右邊界：無；寬度：0 像素； } .CodeMirror div.CodeMirror-cursor { 可見性：隱藏； } .CodeMirror-focused div.CodeMirror-cursor { 可見性：繼承； } .cm-搜尋 { 背景: rgba(255, 255, 0, 0.4); } @媒體印刷{ .CodeMirror div.CodeMirror-cursor { 可見性：隱藏； } } ：根 { --side-bar-bg-color: #fafafa; --控製文字顏色：#777； } @include-when-export url(https://fonts.loli.net/css?family=Open Sans:400italic,700italic,700,400&subset=latin,latin-ext); html{ 字體大小：16px； } 身體 { 字體系列：「Open Sans」、「Clear Sans」、「Helvetica Neue」、Helvetica、Arial、sans-serif； 顏色: RGB(51, 51, 51); 行高：1.6； } ＃寫 { 最大寬度：860px； 保證金：0 自動； 內邊距：30px； 底部填充：100px； } @media only 螢幕和（最小寬度：1400px）{ ＃寫 { 最大寬度：1024px； } } @media only 螢幕和（最小寬度：1800px）{ ＃寫 { 最大寬度：1200px； } } #write > ul:第一個孩子， #write > ol:第一個孩子{ 上邊距：30px； } A { 顏色：#4183C4； } h1, 小時2, 小時3， 小時4, 小時5, h6 { 位置：相對； 上邊距：1rem； 邊距底部：1rem； 字體粗細：粗體； 行高：1.4； 遊標：文字； } h1：懸停a.anchor， h2：懸停a.anchor， h3：懸停a.anchor， h4：懸停a.anchor， h5：懸停a.anchor， h6:懸停 a.anchor { 文字裝飾：無； } h1 TT， h1代碼{ 字體大小：繼承； } 小時2 tt， h2 代碼 { 字體大小：繼承； } h3 TT， h3代碼{ 字體大小：繼承； } 小時4TT， h4代碼{ 字體大小：繼承； } h5 TT， h5代碼{ 字體大小：繼承； } h6 TT， h6代碼{ 字體大小：繼承； } h1 { 底部填充：.3em； 字體大小：2.25em； 行高：1.2； 邊框底部：1px 實線#eee； } h2 { 底部填充：.3em； 字體大小：1.75em； 行高：1.225； 邊框底部：1px 實線#eee； } h3 { 字體大小：1.5em； 行高：1.43； } h4 { 字體大小：1.25em； } h5 { 字體大小：1em； } h6 { 字體大小：1em； 顏色：#777； } p, 區塊引用， 烏爾， 哦， DL， 桌子{ 保證金：0.8em 0； } 麗 > 奧爾, li>ul { 保證金：0 0； } 小時{ 高度：2px； 填充：0； 邊距：16px 0； 背景顏色：#e7e7e7； 邊框：0 無； 溢出：隱藏； box-sizing：內容框； } li p.first { 顯示：內聯塊； } 烏爾， 奧爾{ 左內邊距：30px； } ul：第一個孩子， ol:第一個孩子 { 上邊距：0； } ul：最後一個孩子， ol:最後一個孩子{ 底部邊距：0； } 區塊引用 { 左邊框：4px 實線#dfe2e5； 內邊距：0 15px； 顏色：#777777； } 區塊引用 區塊引用 { 右填充：0； } 桌子 { 填充：0； 斷詞：首字母； } 表 tr { 頂部邊框：1px 實線#dfe2e5； 保證金：0； 填充：0； } 表 tr：第 n 個子級（2n）， 頭{ 背景顏色：#f8f8f8； } 表 tr th { 字體粗細：粗體； 邊框：1px實線#dfe2e5； 邊框底部：0； 保證金：0； 內邊距：6 像素 13 像素； } 表 tr td { 邊框：1px實線#dfe2e5； 保證金：0； 內邊距：6 像素 13 像素； } 表 tr th：第一個孩子， 表 tr td:第一個子項 { 上邊距：0； } 表 tr th：最後一個子項， 表 tr td:最後一個子項 { 底部邊距：0； } .CodeMirror-lines { 左內邊距：4px； } .code-tooltip { 盒子陰影：0 1px 1px 0 rgba(0,28,36,.3); 頂部邊框：1px 實線#eef2f2； } .md-柵欄， 程式碼， TT { 邊框：1px實線#e7eaed； 背景顏色：#f8f8f8； 邊框半徑：3px； 填充：0； 內邊距：2px 4px 0px 4px； 字體大小：0.9em； } 代碼 { 背景顏色：#f3f4f4； 內邊距：0 2 像素 0 2 像素； } .md-柵欄{ 下邊距：15px； 上邊距：15px； 頂部填充：8px； 底部填充：6px； } .md-任務清單-項目>輸入{ 左邊距：-1.3em； } @媒體印刷{ html{ 字體大小：13px； } 桌子， 預{ 內部分頁：避免； } 預{ 自動換行：斷詞； } } .md-柵欄{ 背景顏色：#f8f8f8； }#write pre.md-meta-block { 填充：1rem； 字體大小：85%； 行高：1.45； 背景顏色：#f7f7f7； 邊框：0； 邊框半徑：3px； 顏色：#777777； 邊距頂部：0！ } .mathjax-block>.code-tooltip { 底部：.375rem； } .md-mathjax-中線{ 背景：#fafafa； } #write>h3.md-focus:之前{ 左：-1.5625rem； 頂部：.375rem； } #write>h4.md-focus:之前{ 左：-1.5625rem； 上圖：.285714286rem； } #write>h5.md-focus:之前{ 左：-1.5625rem； 上圖：.285714286rem； } #write>h6.md-focus:之前{ 左：-1.5625rem； 上圖：.285714286rem； } .md-圖像>.md-元 { /*邊框：1px實心#ddd;*/ 邊框半徑：3px； 內邊距：2 像素 0 像素 0 像素 4 像素； 字體大小：0.9em； 顏色：繼承； } .md-標籤{ 顏色：#a7a7a7； 不透明度：1； } .md-目錄{ 上邊距：20px； 底部填充：20px； } .sidebar-tabs { 底部邊框：無； } #typora-quick-open { 邊框：1px實線#ddd； 背景顏色：#f8f8f8； } #typora-quick-open-item { 背景顏色：#FAFAFA； 邊框顏色：#FEFEFE #e5e5e5 #e5e5e5 #eee； 邊框樣式：實心； 邊框寬度：1px； } /**對焦模式*/ .on-focus-模式塊引用 { 左邊框顏色: rgba(85, 85, 85, 0.12); } 標題、.context-menu、.megamenu-內容、頁尾{ 字體系列：「Segoe UI」、「Arial」、sans-serif； } .file-node-content：懸停.file-node-icon， .file-node-content：懸停 .file-node-open-state{ 可見性：可見； } .mac-seamless-mode #typora-sidebar { 背景顏色：#fafafa； 背景顏色：var(--side-bar-bg-color); } .md-lang { 顏色：#b4654d； } .html-for-mac .context-menu { --item-hover-bg-color: #E6F0FE; } #md-通知.btn { 邊框：0； } .dropdown-menu .divider { 邊框顏色：#e5e5e5； } .ty-首選項 .window-內容 { 背景顏色：#fafafa； } .ty-首選項 .nav-group-item.active { 白顏色; 背景：#999； }

定義

介面面模式，外觀模式外觀模式提供了一個統一的接口，用於存取子系統中的一組接口，定義一組高層介面讓子系統更易用。大幅修改，使用者度也變得簡單。 ，但並不符合使用者直接使用子系統，使用更複雜的功能。系統，這樣可能會給人一種感覺，業務方一定是這麼用的，不會產生bug，從而讓人麻痺，所以，使用外觀模式，也要同時對子系統做好保護。實際上違反了設計模式中的開閉原則，如果我們要修改業務邏輯，常用業務方也需要進行程式碼。一樣的，但是我們的子系統又非常複雜，我們可以考慮封裝一個外觀，讓業務方更容易接入。應用場景。 。

#

xclass FetchMusic {  get resources() {    return [      { id: 1, title: "The Fragile" },      { id: 2, title: "Alladin Sane" },      { id: 3, title: "OK Computer" },    ];  }  fetch(id) {    return this.resources.find((item) => item.id === id);  }}class GetMovie {  constructor(id) {    return this.resources.find((item) => item.id === id);  }  get resources() {    return [      { id: 1, title: "Apocalypse Now" },      { id: 2, title: "Die Hard" },      { id: 3, title: "Big Lebowski" },    ];  }}const getTvShow = function (id) {  const resources = [    { id: 1, title: "Twin Peaks" },    { id: 2, title: "Luther" },    { id: 3, title: "The Simpsons" },  ];  return resources.find((item) => item.id === id);};const booksResource = [  { id: 1, title: "Ulysses" },  { id: 2, title: "Ham on Rye" },  { id: 3, title: "Quicksilver" },];

外觀類別：為內部類別建立簡潔統一的外觀介面

xxxxxxxxxxconst TYPE_MUSIC = "music";const TYPE_MOVIE = "movie";const TYPE_TV = "tv";const TYPE_BOOK = "book";class CultureFacade {  constructor(type) {    this.type = type;  }  _findMusic(id) {    const db = new FetchMusic();    return db.fetch(id);  }  _findMovie(id) {    return new GetMovie(id);  }  _findTVShow(id) {    return getTvShow(id);  }  _findBook(id) {    return booksResource.find((item) => item.id === id);  }  get _error() {    return { status: 404, error: `No item with this id found` };  }  _tryToReturn(func, id) {    const result = func.call(this, id);    return new Promise((ok, err) =>      !!result && JSON.stringify(result) !== "{}"        ? ok(result)        : err(this._error)    );  }  get(id) {    switch (this.type) {      case TYPE_MUSIC: {        return this._tryToReturn(this._findMusic, id);      }      case TYPE_MOVIE: {        return this._tryToReturn(this._findMovie, id);      }      case TYPE_TV: {        return this._tryToReturn(this._findTVShow, id);      }      case TYPE_BOOK: {        return this._tryToReturn(this._findBook, id);      }      default: {        throw new Error("No type set!");      }    }  }}

客戶呼叫：無論音樂、影片、 tv、book 內部子系統是怎麼樣的，都可以用同樣的方式呼叫實作。完成大多數公司使用微服務的開發模式，外觀模式正好契合這樣的開發模式。大，太小都不好。的可重複使用性，但針對特殊情況，允許提供語音的門面接口，來提供更易用的接口。

以上是【設計模式】javascript 外觀模式的應用與實踐的詳細內容。更多資訊請關注PHP中文網其他相關文章！