<section id="nice" data-tool="mdnice编辑器" data-website="https://www.mdnice.com" style="font-size: 16px; color: black; line-height: 1.6; word-spacing: 0px; letter-spacing: 0px; word-break: break-word; word-wrap: break-word; text-align: left; font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; margin-top: 0; padding: 0;"><h2 data-tool="mdnice编辑器" style="padding: 0px; color: black; font-weight: bold; font-size: 20px; margin-top: 24px; margin-bottom: 12px;"><span class="prefix" style="display: none;"></span><span class="content" style="color: #e7642b; text-align: center; display: block; background-color: #e7642b; color: white; padding: 3px 11px; border-radius: 1px;">JavaScript 设计模式 之旅</span><span class="suffix"></span></h2>
<h3 data-tool="mdnice编辑器" style="padding: 0px; margin-top: 24px; margin-bottom: 12px; font-weight: bold; font-size: 18px; color: #424B5D;"><span class="prefix" style="display: none;"></span><span class="content">设计模式开篇</span><span class="suffix" style="display: none;"></span></h3>
<blockquote data-tool="mdnice编辑器" style="display: block; font-size: 0.9em; overflow: auto; overflow-scrolling: touch; border-left: 3px solid rgba(0, 0, 0, 0.4); color: #6a737d; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; margin: 0 8px; border: none; background: #ffffff; box-shadow: 0 1px 2px -2px rgba(0,0,0,.16), 0 3px 6px 0 rgba(0,0,0,.12), 0 5px 12px 4px rgba(0,0,0,.09);">
<p style="padding-top: 8px; padding-bottom: 8px; word-spacing: 3px; letter-spacing: 1px; margin: 0px; font-size: 14px; color: #424B5D; line-height: 24px;">日常开发中，我们都很注重开发技巧，好的开发 技巧可以事半功倍得解决此刻的问题。</p>
<p style="padding-top: 8px; padding-bottom: 8px; word-spacing: 3px; letter-spacing: 1px; margin: 0px; font-size: 14px; color: #424B5D; line-height: 24px;">那么这些技巧如何来得呢？</p>
<p style="padding-top: 8px; padding-bottom: 8px; word-spacing: 3px; letter-spacing: 1px; margin: 0px; font-size: 14px; color: #424B5D; line-height: 24px;">我的理解： 经过不断踩坑，解BUG，总结出来一些处理对应问题解决方案，这就所谓的 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; padding-left: 0; padding-right: 0; background: transparent; border-radius: 0; color: #eb6161; border-bottom: 1px solid #eb6161;">技巧</code>。</p>
<p style="padding-top: 8px; padding-bottom: 8px; word-spacing: 3px; letter-spacing: 1px; margin: 0px; font-size: 14px; color: #424B5D; line-height: 24px;">说起设计模式，其实我们日常开始中也经常用到，只是你不知道用的<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; padding-left: 0; padding-right: 0; background: transparent; border-radius: 0; color: #eb6161; border-bottom: 1px solid #eb6161;">解决方案方案</code>对应的<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; padding-left: 0; padding-right: 0; background: transparent; border-radius: 0; color: #eb6161; border-bottom: 1px solid #eb6161;">设计模式名称</code>.</p>
</blockquote>
<h3 data-tool="mdnice编辑器" style="padding: 0px; margin-top: 24px; margin-bottom: 12px; font-weight: bold; font-size: 18px; color: #424B5D;"><span class="prefix" style="display: none;"></span><span class="content">学习设计模式的作用</span><span class="suffix" style="display: none;"></span></h3>
<blockquote data-tool="mdnice编辑器" style="display: block; font-size: 0.9em; overflow: auto; overflow-scrolling: touch; border-left: 3px solid rgba(0, 0, 0, 0.4); color: #6a737d; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; margin: 0 8px; border: none; background: #ffffff; box-shadow: 0 1px 2px -2px rgba(0,0,0,.16), 0 3px 6px 0 rgba(0,0,0,.12), 0 5px 12px 4px rgba(0,0,0,.09);">
<p style="padding-top: 8px; padding-bottom: 8px; word-spacing: 3px; letter-spacing: 1px; margin: 0px; font-size: 14px; color: #424B5D; line-height: 24px;">在软件设计中，模式是一些经过了大量实际项目验证的优秀解决方案。熟悉这些模式的程序员，对某些模式的理解也会自然的形成条件反射。当遇到合适的场景出现时，可以快速找到对应的模式来处理当前的问题。</p>
</blockquote>
<h3 data-tool="mdnice编辑器" style="padding: 0px; margin-top: 24px; margin-bottom: 12px; font-weight: bold; font-size: 18px; color: #424B5D;"><span class="prefix" style="display: none;"></span><span class="content">单例模式</span><span class="suffix" style="display: none;"></span></h3>
<blockquote data-tool="mdnice编辑器" style="display: block; font-size: 0.9em; overflow: auto; overflow-scrolling: touch; border-left: 3px solid rgba(0, 0, 0, 0.4); color: #6a737d; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; margin: 0 8px; border: none; background: #ffffff; box-shadow: 0 1px 2px -2px rgba(0,0,0,.16), 0 3px 6px 0 rgba(0,0,0,.12), 0 5px 12px 4px rgba(0,0,0,.09);">
<p style="padding-top: 8px; padding-bottom: 8px; word-spacing: 3px; letter-spacing: 1px; margin: 0px; font-size: 14px; color: #424B5D; line-height: 24px;">定义： 保证 类 仅有 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; padding-left: 0; padding-right: 0; background: transparent; border-radius: 0; color: #eb6161; border-bottom: 1px solid #eb6161;">一个实例</code>，并可以全局访问这个<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; padding-left: 0; padding-right: 0; background: transparent; border-radius: 0; color: #eb6161; border-bottom: 1px solid #eb6161;">实例</code>.</p>
<p style="padding-top: 8px; padding-bottom: 8px; word-spacing: 3px; letter-spacing: 1px; margin: 0px; font-size: 14px; color: #424B5D; line-height: 24px;"><code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; padding-left: 0; padding-right: 0; background: transparent; border-radius: 0; color: #eb6161; border-bottom: 1px solid #eb6161;">全局变量</code> 不是 单例模式，但是在JavaScript 中， 我们经常把单例模式当作全局变量使用。</p>
<p style="padding-top: 8px; padding-bottom: 8px; word-spacing: 3px; letter-spacing: 1px; margin: 0px; font-size: 14px; color: #424B5D; line-height: 24px;">因为它满足单例模式的两点：</p>
<ul style="margin-top: 8px; margin-bottom: 8px; list-style-type: disc; font-size: 15px; margin: 0; padding-left: 24px; color: #424B5D;">
<li><section style="margin-top: 5px; margin-bottom: 5px; text-align: left; font-weight: 500; margin: 4px 0; line-height: 24px; color: #424B5D;">创建的全局变量是独一无二的</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; text-align: left; font-weight: 500; margin: 4px 0; line-height: 24px; color: #424B5D;">它可以全局访问这个变量实例</section></li></ul>
</blockquote>
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px; margin: 12px auto; border-radius: 5px; box-shadow: 0 1px 2px -2px rgba(0,0,0,.16), 0 3px 6px 0 rgba(0,0,0,.12), 0 5px 12px 4px rgba(0,0,0,.09) !important;"><span style="display: block; background: url(https://imgkr.cn-bj.ufileos.com/97e4eed2-a992-4976-acf0-ccb6fb34d308.png); height: 30px; width: 100%; background-size: 40px; background-repeat: no-repeat; background-color: #1E1E1E; margin-bottom: -7px; border-radius: 5px; background-position: 10px 10px;"></span><code class="hljs" style="overflow-x: auto; padding: 16px; color: #DCDCDC; display: block; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; padding-top: 15px; background: #1E1E1E; border-radius: 5px;"><span class="hljs-comment" style="color: #57A64A; font-style: italic; line-height: 26px;">// login.js</span>
<span/><span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">var</span> loginInfo = {
<span/> <span class="hljs-attr" style="color: #9CDCFE; line-height: 26px;">username</span>: <span class="hljs-string" style="color: #D69D85; line-height: 26px;">''</span>,
<span/> <span class="hljs-attr" style="color: #9CDCFE; line-height: 26px;">token</span>: <span class="hljs-string" style="color: #D69D85; line-height: 26px;">''</span>,
<span/> .......
<span/>}
<span/>
<span/>
<span/>
<span/><span class="hljs-comment" style="color: #57A64A; font-style: italic; line-height: 26px;">//login.vue</span>
<span/>
<span/><span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">import</span> logins <span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">from</span> <span class="hljs-string" style="color: #D69D85; line-height: 26px;">'./login.js'</span>
<span/>
<span/>logins.name = <span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">this</span>.username
<span/></code></pre>
<blockquote data-tool="mdnice编辑器" style="display: block; font-size: 0.9em; overflow: auto; overflow-scrolling: touch; border-left: 3px solid rgba(0, 0, 0, 0.4); color: #6a737d; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; margin: 0 8px; border: none; background: #ffffff; box-shadow: 0 1px 2px -2px rgba(0,0,0,.16), 0 3px 6px 0 rgba(0,0,0,.12), 0 5px 12px 4px rgba(0,0,0,.09);">
<p style="padding-top: 8px; padding-bottom: 8px; word-spacing: 3px; letter-spacing: 1px; margin: 0px; font-size: 14px; color: #424B5D; line-height: 24px;">但是它也有缺点，容易造成命名空间污染。</p>
<p style="padding-top: 8px; padding-bottom: 8px; word-spacing: 3px; letter-spacing: 1px; margin: 0px; font-size: 14px; color: #424B5D; line-height: 24px;">定义的<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; padding-left: 0; padding-right: 0; background: transparent; border-radius: 0; color: #eb6161; border-bottom: 1px solid #eb6161;">全局变量多了</code>, 会覆盖掉之前定义的<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; padding-left: 0; padding-right: 0; background: transparent; border-radius: 0; color: #eb6161; border-bottom: 1px solid #eb6161;">全局变量</code>,这样会造成不必要的<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; padding-left: 0; padding-right: 0; background: transparent; border-radius: 0; color: #eb6161; border-bottom: 1px solid #eb6161;">BUG</code>.</p>
</blockquote>
<h4 data-tool="mdnice编辑器" style="padding: 0px; margin-top: 24px; margin-bottom: 12px; font-weight: bold; font-size: 16px; color: #424B5D;"><span class="prefix" style="display: none;"></span><span class="content">如何处理命名空间污染呢？</span><span class="suffix" style="display: none;"></span></h4>
<blockquote data-tool="mdnice编辑器" style="display: block; font-size: 0.9em; overflow: auto; overflow-scrolling: touch; border-left: 3px solid rgba(0, 0, 0, 0.4); color: #6a737d; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; margin: 0 8px; border: none; background: #ffffff; box-shadow: 0 1px 2px -2px rgba(0,0,0,.16), 0 3px 6px 0 rgba(0,0,0,.12), 0 5px 12px 4px rgba(0,0,0,.09);">
<p style="padding-top: 8px; padding-bottom: 8px; word-spacing: 3px; letter-spacing: 1px; margin: 0px; font-size: 14px; color: #424B5D; line-height: 24px;">如何处理呢？</p>
<ul style="margin-top: 8px; margin-bottom: 8px; list-style-type: disc; font-size: 15px; margin: 0; padding-left: 24px; color: #424B5D;">
<li><section style="margin-top: 5px; margin-bottom: 5px; text-align: left; font-weight: 500; margin: 4px 0; line-height: 24px; color: #424B5D;">1.使用命名空间</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; text-align: left; font-weight: 500; margin: 4px 0; line-height: 24px; color: #424B5D;">2.使用闭包封装私有变量</section></li></ul>
</blockquote>
<h4 data-tool="mdnice编辑器" style="padding: 0px; margin-top: 24px; margin-bottom: 12px; font-weight: bold; font-size: 16px; color: #424B5D;"><span class="prefix" style="display: none;"></span><span class="content">命名空间</span><span class="suffix" style="display: none;"></span></h4>
<blockquote data-tool="mdnice编辑器" style="display: block; font-size: 0.9em; overflow: auto; overflow-scrolling: touch; border-left: 3px solid rgba(0, 0, 0, 0.4); color: #6a737d; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; margin: 0 8px; border: none; background: #ffffff; box-shadow: 0 1px 2px -2px rgba(0,0,0,.16), 0 3px 6px 0 rgba(0,0,0,.12), 0 5px 12px 4px rgba(0,0,0,.09);">
<p style="padding-top: 8px; padding-bottom: 8px; word-spacing: 3px; letter-spacing: 1px; margin: 0px; font-size: 14px; color: #424B5D; line-height: 24px;">对象自变量的形式：</p>
</blockquote>
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px; margin: 12px auto; border-radius: 5px; box-shadow: 0 1px 2px -2px rgba(0,0,0,.16), 0 3px 6px 0 rgba(0,0,0,.12), 0 5px 12px 4px rgba(0,0,0,.09) !important;"><span style="display: block; background: url(https://imgkr.cn-bj.ufileos.com/97e4eed2-a992-4976-acf0-ccb6fb34d308.png); height: 30px; width: 100%; background-size: 40px; background-repeat: no-repeat; background-color: #1E1E1E; margin-bottom: -7px; border-radius: 5px; background-position: 10px 10px;"></span><code class="hljs" style="overflow-x: auto; padding: 16px; color: #DCDCDC; display: block; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; padding-top: 15px; background: #1E1E1E; border-radius: 5px;"><span class="hljs-comment" style="color: #57A64A; font-style: italic; line-height: 26px;">// login.js</span>
<span/><span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">export</span> <span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">default</span> <span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">var</span> loginInfo = {
<span/> <span class="hljs-attr" style="color: #9CDCFE; line-height: 26px;">names</span>:<span class="hljs-string" style="color: #D69D85; line-height: 26px;">''</span> ,
<span/> <span class="hljs-attr" style="color: #9CDCFE; line-height: 26px;">token</span>: <span class="hljs-string" style="color: #D69D85; line-height: 26px;">''</span>,
<span/> <span class="hljs-attr" style="color: #9CDCFE; line-height: 26px;">setName</span>: <span class="hljs-function" style="color: #DCDCDC; line-height: 26px;"><span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">function</span> (<span class="hljs-params" style="color: #DCDCDC; line-height: 26px;">name</span>) </span>{
<span/> <span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">this</span>.names = name
<span/> },
<span/> <span class="hljs-attr" style="color: #9CDCFE; line-height: 26px;">getName</span>: <span class="hljs-function" style="color: #DCDCDC; line-height: 26px;"><span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">function</span> (<span class="hljs-params" style="color: #DCDCDC; line-height: 26px;"></span>) </span>{
<span/> <span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">return</span> <span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">this</span>.name
<span/> }
<span/>}
<span/>
<span/>
<span/><span class="hljs-comment" style="color: #57A64A; font-style: italic; line-height: 26px;">//login.vue</span>
<span/><span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">import</span> logins <span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">from</span> <span class="hljs-string" style="color: #D69D85; line-height: 26px;">'./login.js'</span>
<span/>
<span/>logins.token = <span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">this</span>.token
<span/></code></pre>
<h4 data-tool="mdnice编辑器" style="padding: 0px; margin-top: 24px; margin-bottom: 12px; font-weight: bold; font-size: 16px; color: #424B5D;"><span class="prefix" style="display: none;"></span><span class="content">使用闭包封装私有变量</span><span class="suffix" style="display: none;"></span></h4>
<blockquote data-tool="mdnice编辑器" style="display: block; font-size: 0.9em; overflow: auto; overflow-scrolling: touch; border-left: 3px solid rgba(0, 0, 0, 0.4); color: #6a737d; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; margin: 0 8px; border: none; background: #ffffff; box-shadow: 0 1px 2px -2px rgba(0,0,0,.16), 0 3px 6px 0 rgba(0,0,0,.12), 0 5px 12px 4px rgba(0,0,0,.09);">
<p style="padding-top: 8px; padding-bottom: 8px; word-spacing: 3px; letter-spacing: 1px; margin: 0px; font-size: 14px; color: #424B5D; line-height: 24px;">把一些变量封装在闭包内部，只暴露一些接口跟外界通信。</p>
<p style="padding-top: 8px; padding-bottom: 8px; word-spacing: 3px; letter-spacing: 1px; margin: 0px; font-size: 14px; color: #424B5D; line-height: 24px;">外界是访问不到 内部定义的私有变量的，这样就避免了全局命令污染。</p>
</blockquote>
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px; margin: 12px auto; border-radius: 5px; box-shadow: 0 1px 2px -2px rgba(0,0,0,.16), 0 3px 6px 0 rgba(0,0,0,.12), 0 5px 12px 4px rgba(0,0,0,.09) !important;"><span style="display: block; background: url(https://imgkr.cn-bj.ufileos.com/97e4eed2-a992-4976-acf0-ccb6fb34d308.png); height: 30px; width: 100%; background-size: 40px; background-repeat: no-repeat; background-color: #1E1E1E; margin-bottom: -7px; border-radius: 5px; background-position: 10px 10px;"></span><code class="hljs" style="overflow-x: auto; padding: 16px; color: #DCDCDC; display: block; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; padding-top: 15px; background: #1E1E1E; border-radius: 5px;"><span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">var</span> user = (<span class="hljs-function" style="color: #DCDCDC; line-height: 26px;"><span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">function</span> (<span class="hljs-params" style="color: #DCDCDC; line-height: 26px;"></span>) </span>{
<span/> <span class="hljs-comment" style="color: #57A64A; font-style: italic; line-height: 26px;">//外界是访问不了 _name _age </span>
<span/> <span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">var</span> _name = <span class="hljs-string" style="color: #D69D85; line-height: 26px;">'张三'</span>,
<span/> _age = <span class="hljs-number" style="color: #B8D7A3; line-height: 26px;">22</span>;
<span/>
<span/> <span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">return</span> {
<span/> <span class="hljs-comment" style="color: #57A64A; font-style: italic; line-height: 26px;">//这块留给外界通信用</span>
<span/> getUserInfo: <span class="hljs-function" style="color: #DCDCDC; line-height: 26px;"><span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">function</span> (<span class="hljs-params" style="color: #DCDCDC; line-height: 26px;"></span>) </span>{
<span/> <span class="hljs-built_in" style="color: #4EC9B0; line-height: 26px;">console</span>.log(<span class="hljs-string" style="color: #D69D85; line-height: 26px;">`姓名为：<span class="hljs-subst" style="color: #DCDCDC; line-height: 26px;">${_name}</span>,年龄为:<span class="hljs-subst" style="color: #DCDCDC; line-height: 26px;">${_age}</span>`</span>)
<span/> }
<span/> }
<span/>})()
<span/>
<span/>user.getUserInfo()
<span/></code></pre>
<h4 data-tool="mdnice编辑器" style="padding: 0px; margin-top: 24px; margin-bottom: 12px; font-weight: bold; font-size: 16px; color: #424B5D;"><span class="prefix" style="display: none;"></span><span class="content">通用的惰性单例模式</span><span class="suffix" style="display: none;"></span></h4>
<blockquote data-tool="mdnice编辑器" style="display: block; font-size: 0.9em; overflow: auto; overflow-scrolling: touch; border-left: 3px solid rgba(0, 0, 0, 0.4); color: #6a737d; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; margin: 0 8px; border: none; background: #ffffff; box-shadow: 0 1px 2px -2px rgba(0,0,0,.16), 0 3px 6px 0 rgba(0,0,0,.12), 0 5px 12px 4px rgba(0,0,0,.09);">
<p style="padding-top: 8px; padding-bottom: 8px; word-spacing: 3px; letter-spacing: 1px; margin: 0px; font-size: 14px; color: #424B5D; line-height: 24px;">在该执行的情况下，执行操作步骤 / <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; padding-left: 0; padding-right: 0; background: transparent; border-radius: 0; color: #eb6161; border-bottom: 1px solid #eb6161;">DOM</code>.</p>
<p style="padding-top: 8px; padding-bottom: 8px; word-spacing: 3px; letter-spacing: 1px; margin: 0px; font-size: 14px; color: #424B5D; line-height: 24px;">优点： 节约了性能。</p>
</blockquote>
<h5 data-tool="mdnice编辑器" style="padding: 0px; margin-top: 24px; margin-bottom: 12px; font-weight: bold; font-size: 16px; color: #424B5D;"><span class="prefix" style="display: none;"></span><span class="content">场景1</span><span class="suffix" style="display: none;"></span></h5>
<blockquote data-tool="mdnice编辑器" style="display: block; font-size: 0.9em; overflow: auto; overflow-scrolling: touch; border-left: 3px solid rgba(0, 0, 0, 0.4); color: #6a737d; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; margin: 0 8px; border: none; background: #ffffff; box-shadow: 0 1px 2px -2px rgba(0,0,0,.16), 0 3px 6px 0 rgba(0,0,0,.12), 0 5px 12px 4px rgba(0,0,0,.09);">
<p style="padding-top: 8px; padding-bottom: 8px; word-spacing: 3px; letter-spacing: 1px; margin: 0px; font-size: 14px; color: #424B5D; line-height: 24px;">有时候，例如登陆弹窗，在加载首页的同时，它会渲染这个页的全部<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; padding-left: 0; padding-right: 0; background: transparent; border-radius: 0; color: #eb6161; border-bottom: 1px solid #eb6161;">DOM</code>，如果首页DOM 内容多，加载速度也会相应的很慢，有很多不需要DOM提前渲染。</p>
<p style="padding-top: 8px; padding-bottom: 8px; word-spacing: 3px; letter-spacing: 1px; margin: 0px; font-size: 14px; color: #424B5D; line-height: 24px;">这时，可以通过惰性单例模式来解决此问题，例如单击了登陆按钮，才会创建登陆弹窗的DOM，并且记录此次点击状态，如果下次还要打开，只是更改 DOM 的 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; padding-left: 0; padding-right: 0; background: transparent; border-radius: 0; color: #eb6161; border-bottom: 1px solid #eb6161;">style</code> 的 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; padding-left: 0; padding-right: 0; background: transparent; border-radius: 0; color: #eb6161; border-bottom: 1px solid #eb6161;">display</code> 属性即可。 这样节约了首页加载时间，提升页面性能。</p>
</blockquote>
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px; margin: 12px auto; border-radius: 5px; box-shadow: 0 1px 2px -2px rgba(0,0,0,.16), 0 3px 6px 0 rgba(0,0,0,.12), 0 5px 12px 4px rgba(0,0,0,.09) !important;"><span style="display: block; background: url(https://imgkr.cn-bj.ufileos.com/97e4eed2-a992-4976-acf0-ccb6fb34d308.png); height: 30px; width: 100%; background-size: 40px; background-repeat: no-repeat; background-color: #1E1E1E; margin-bottom: -7px; border-radius: 5px; background-position: 10px 10px;"></span><code class="hljs" style="overflow-x: auto; padding: 16px; color: #DCDCDC; display: block; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; padding-top: 15px; background: #1E1E1E; border-radius: 5px;"><span class="hljs-comment" style="color: #57A64A; font-style: italic; line-height: 26px;">// 定义全局通用单例模式</span>
<span/><span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">var</span> getSingle = <span class="hljs-function" style="color: #DCDCDC; line-height: 26px;"><span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">function</span> (<span class="hljs-params" style="color: #DCDCDC; line-height: 26px;">fn</span>) </span>{
<span/> <span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">var</span> result;
<span/> <span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">return</span> <span class="hljs-function" style="color: #DCDCDC; line-height: 26px;"><span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">function</span> (<span class="hljs-params" style="color: #DCDCDC; line-height: 26px;"></span>) </span>{
<span/> <span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">return</span> result || (result = fn.apply(<span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">this</span>, <span class="hljs-built_in" style="color: #4EC9B0; line-height: 26px;">arguments</span>));
<span/> }
<span/>}
<span/>
<span/><span class="hljs-comment" style="color: #57A64A; font-style: italic; line-height: 26px;">// 创建登陆窗口</span>
<span/><span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">var</span> createLoginLayer = <span class="hljs-function" style="color: #DCDCDC; line-height: 26px;"><span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">function</span>(<span class="hljs-params" style="color: #DCDCDC; line-height: 26px;"></span>) </span>{
<span/> <span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">var</span> div = <span class="hljs-built_in" style="color: #4EC9B0; line-height: 26px;">document</span>.createElement(<span class="hljs-string" style="color: #D69D85; line-height: 26px;">'div'</span>)
<span/> div.innerHTML = <span class="hljs-string" style="color: #D69D85; line-height: 26px;">'登陆框'</span>
<span/> div.style.display = <span class="hljs-string" style="color: #D69D85; line-height: 26px;">'none'</span>
<span/> <span class="hljs-built_in" style="color: #4EC9B0; line-height: 26px;">document</span>.body.appendChild(div)
<span/> <span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">return</span> div
<span/>}
<span/>
<span/><span class="hljs-comment" style="color: #57A64A; font-style: italic; line-height: 26px;">// 创建单例模式 登陆框</span>
<span/><span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">var</span> createSingleLoginLayer = getSingle(createLoginLayer);
<span/>
<span/><span class="hljs-built_in" style="color: #4EC9B0; line-height: 26px;">document</span>.getElementById(<span class="hljs-string" style="color: #D69D85; line-height: 26px;">'btn'</span>).onclick = <span class="hljs-function" style="color: #DCDCDC; line-height: 26px;"><span class="hljs-params" style="color: #DCDCDC; line-height: 26px;">()</span> =></span> {
<span/> <span class="hljs-comment" style="color: #57A64A; font-style: italic; line-height: 26px;">// 获取单例模式中 返回得登陆框</span>
<span/> <span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">var</span> loginLayer = createSingleLoginLayer();
<span/> <span class="hljs-comment" style="color: #57A64A; font-style: italic; line-height: 26px;">// 改变样式</span>
<span/> loginLayer.style.display = <span class="hljs-string" style="color: #D69D85; line-height: 26px;">'block'</span>
<span/>}
<span/></code></pre>
<h5 data-tool="mdnice编辑器" style="padding: 0px; margin-top: 24px; margin-bottom: 12px; font-weight: bold; font-size: 16px; color: #424B5D;"><span class="prefix" style="display: none;"></span><span class="content">场景2</span><span class="suffix" style="display: none;"></span></h5>
<blockquote data-tool="mdnice编辑器" style="display: block; font-size: 0.9em; overflow: auto; overflow-scrolling: touch; border-left: 3px solid rgba(0, 0, 0, 0.4); color: #6a737d; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; margin: 0 8px; border: none; background: #ffffff; box-shadow: 0 1px 2px -2px rgba(0,0,0,.16), 0 3px 6px 0 rgba(0,0,0,.12), 0 5px 12px 4px rgba(0,0,0,.09);">
<p style="padding-top: 8px; padding-bottom: 8px; word-spacing: 3px; letter-spacing: 1px; margin: 0px; font-size: 14px; color: #424B5D; line-height: 24px;">创建唯一的 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; padding-left: 0; padding-right: 0; background: transparent; border-radius: 0; color: #eb6161; border-bottom: 1px solid #eb6161;">iframe</code> 用于加载第三方页面</p>
</blockquote>
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px; margin: 12px auto; border-radius: 5px; box-shadow: 0 1px 2px -2px rgba(0,0,0,.16), 0 3px 6px 0 rgba(0,0,0,.12), 0 5px 12px 4px rgba(0,0,0,.09) !important;"><span style="display: block; background: url(https://imgkr.cn-bj.ufileos.com/97e4eed2-a992-4976-acf0-ccb6fb34d308.png); height: 30px; width: 100%; background-size: 40px; background-repeat: no-repeat; background-color: #1E1E1E; margin-bottom: -7px; border-radius: 5px; background-position: 10px 10px;"></span><code class="hljs" style="overflow-x: auto; padding: 16px; color: #DCDCDC; display: block; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; padding-top: 15px; background: #1E1E1E; border-radius: 5px;"><span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">var</span> createSingleIframe = getSingle( <span class="hljs-function" style="color: #DCDCDC; line-height: 26px;"><span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">function</span>(<span class="hljs-params" style="color: #DCDCDC; line-height: 26px;"></span>) </span>{
<span/> <span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">var</span> iframe = <span class="hljs-built_in" style="color: #4EC9B0; line-height: 26px;">document</span>.createElement(<span class="hljs-string" style="color: #D69D85; line-height: 26px;">'iframe'</span>);
<span/> <span class="hljs-built_in" style="color: #4EC9B0; line-height: 26px;">document</span>.body.appendChild(iframe)
<span/> <span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">return</span> iframe
<span/>})
<span/>
<span/><span class="hljs-built_in" style="color: #4EC9B0; line-height: 26px;">document</span>.getElementById(<span class="hljs-string" style="color: #D69D85; line-height: 26px;">'redirect'</span>).onclick = <span class="hljs-function" style="color: #DCDCDC; line-height: 26px;"><span class="hljs-params" style="color: #DCDCDC; line-height: 26px;">()</span> =></span> {
<span/> <span class="hljs-keyword" style="color: #569CD6; line-height: 26px;">var</span> iframeLayer = createSingleIframe();
<span/> iframeLayer.src = <span class="hljs-string" style="color: #D69D85; line-height: 26px;">'http://www.baidu.com'</span>
<span/>}
<span/></code></pre>
<p id="nice-suffix-juejin-container" class="nice-suffix-juejin-container" data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; font-size: 16px; line-height: 26px; word-spacing: 3px; letter-spacing: 1px; color: #424B5D; margin-top: 20px !important;">本文使用 <a href="https://mdnice.com/?from=juejin" style="text-decoration: none; word-wrap: break-word; font-weight: bold; color: #eb6161; border-bottom: 1px solid #eb6161;"><span style="margin-right: 6px;">👉</span>mdnice</a> 排版</p></section>
参考资料
<a href="https://book.douban.com/subject/26382780/"> <<JavaScript 设计模式与开发实践>> </a>
<br>
<br>
本文内容如有错的地方，欢迎各位大佬指正，学习了😆
