##外觀模式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中文網其他相關文章！
