Commit 15503db9 authored by caihaifei's avatar caihaifei

update.

parent e47248b0
Pipeline #15358 failed with stage
......@@ -3,5 +3,4 @@ Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
\ No newline at end of file
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="format-detection" content="telephone=no"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link rel="icon" href="/images/icons/favicon-16x16.png?v=2.6.2" type="image/png" sizes="16x16"><link rel="icon" href="/images/icons/favicon-32x32.png?v=2.6.2" type="image/png" sizes="32x32"><meta name="description" content="缓存是一种保存资源副本并在下次请求时直接使用该副本的技术 缓存的种类 ​ 我相信只要你经常使用某个浏览器(Chrome,Firefox,IE等),肯定知道这些浏览器在设置里面都是有个清除缓存功能,这个功能存在的作用就是删除存储在你本地磁盘上资源副本,也就是清除缓存。缓存存在的意义就是当用户点击back按钮或是再次去访问某个页面的时候能够更快的响应">
<meta property="og:type" content="article">
<meta property="og:title" content="前端缓存">
<meta property="og:url" content="http://example.com/2021/11/11/%E5%89%8D%E7%AB%AF%E7%BC%93%E5%AD%98/index.html">
<meta property="og:site_name" content="易服智享前端团队技术分享">
<meta property="og:description" content="缓存是一种保存资源副本并在下次请求时直接使用该副本的技术 缓存的种类 ​ 我相信只要你经常使用某个浏览器(Chrome,Firefox,IE等),肯定知道这些浏览器在设置里面都是有个清除缓存功能,这个功能存在的作用就是删除存储在你本地磁盘上资源副本,也就是清除缓存。缓存存在的意义就是当用户点击back按钮或是再次去访问某个页面的时候能够更快的响应">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://cdn.nlark.com/yuque/0/2021/svg/1207482/1636550297609-0dfb5f49-e0fa-4945-8b59-055ee7461460.svg#clientId=u72078c95-c63b-4&from=paste&id=ubf82cf4e&margin=%5Bobject%20Object%5D&originHeight=795&originWidth=782&originalType=url&ratio=1&status=done&style=shadow&taskId=ub8a50233-3f0a-4ec3-8318-2e1f72589ae">
<meta property="article:published_time" content="2021-11-11T02:00:00.000Z">
<meta property="article:modified_time" content="2022-03-15T07:57:48.489Z">
<meta property="article:author" content="易服智享前端团队">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://cdn.nlark.com/yuque/0/2021/svg/1207482/1636550297609-0dfb5f49-e0fa-4945-8b59-055ee7461460.svg#clientId=u72078c95-c63b-4&from=paste&id=ubf82cf4e&margin=%5Bobject%20Object%5D&originHeight=795&originWidth=782&originalType=url&ratio=1&status=done&style=shadow&taskId=ub8a50233-3f0a-4ec3-8318-2e1f72589ae"><title>前端缓存 | 易服智享前端团队技术分享</title><link ref="canonical" href="http://example.com/2021/11/11/%E5%89%8D%E7%AB%AF%E7%BC%93%E5%AD%98/"><link rel="dns-prefetch" href="https://cdn.jsdelivr.net"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.12.1/css/all.min.css" type="text/css"><link rel="stylesheet" href="/css/index.css?v=2.6.2"><script>var Stun = window.Stun || {};
var CONFIG = {
root: '/',
algolia: undefined,
assistSearch: undefined,
fontIcon: {"prompt":{"success":"fas fa-check-circle","info":"fas fa-arrow-circle-right","warning":"fas fa-exclamation-circle","error":"fas fa-times-circle"},"copyBtn":"fas fa-copy"},
sidebar: {"offsetTop":"20px","tocMaxDepth":6},
header: undefined,
postWidget: {"endText":true},
nightMode: {"enable":true},
back2top: {"enable":true},
codeblock: {"style":"default","highlight":"light","wordWrap":false},
reward: false,
fancybox: false,
zoomImage: {"gapAside":"20px"},
galleryWaterfall: undefined,
lazyload: false,
pjax: undefined,
externalLink: {"icon":{"enable":true,"name":"fas fa-external-link-alt"}},
shortcuts: undefined,
prompt: {"copyButton":"复制","copySuccess":"复制成功","copyError":"复制失败"},
sourcePath: {"js":"js","css":"css","images":"images"},
};
window.CONFIG = CONFIG;</script><meta name="generator" content="Hexo 5.4.1"></head><body><div class="container" id="container"><header class="header" id="header"><div class="header-inner header-inner--height header-inner--bgcolor"><nav class="header-nav header-nav--sticky"><div class="header-nav-inner"><div class="header-nav-menubtn"><i class="fas fa-bars"></i></div><div class="header-nav-menu"><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/"><span class="header-nav-menu-item__icon"><i class="fas fa-home"></i></span><span class="header-nav-menu-item__text">首页</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/archives/"><span class="header-nav-menu-item__icon"><i class="fas fa-folder-open"></i></span><span class="header-nav-menu-item__text">归档</span></a></div></div><div class="header-nav-mode"><div class="mode"><div class="mode-track"><span class="mode-track-moon"></span><span class="mode-track-sun"></span></div><div class="mode-thumb"></div></div></div></div></nav></div></header><main class="main" id="main"><div class="main-inner"><div class="content-wrap" id="content-wrap"><div class="content" id="content"><!-- Just used to judge whether it is an article page--><div id="is-post"></div><div class="post"><header class="post-header"><h1 class="post-title">前端缓存</h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2021-11-11</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2022-03-15</span></span></div></header><div class="post-body"><p><strong>缓存是一种保存资源副本并在下次请求时直接使用该副本的技术</strong></p>
<h2 id="缓存的种类" >
<a href="#缓存的种类" class="heading-link"><i class="fas fa-link"></i></a><a href="#缓存的种类" class="headerlink" title="缓存的种类"></a>缓存的种类</h2>
<p></p>
<p>我相信只要你经常使用某个浏览器(Chrome,Firefox,IE等),肯定知道这些浏览器在设置里面都是有个清除缓存功能,这个功能存在的作用就是删除存储在你本地磁盘上资源副本,也就是清除缓存。<br>缓存存在的意义就是当用户点击back按钮或是再次去访问某个页面的时候能够更快的响应。尤其是在多页应用的网站中,如果你在多个页面使用了一张相同的图片,那么缓存这张图片就变得特别的有用。</p>
<span id="more"></span>
<h3 id="代理服务器缓存" >
<a href="#代理服务器缓存" class="heading-link"><i class="fas fa-link"></i></a><a href="#代理服务器缓存" class="headerlink" title="代理服务器缓存"></a>代理服务器缓存</h3>
<p>代理服务器缓存原理和浏览器端类似,但规模要大得多,因为是为成千上万的用户提供缓存机制,大公司和大型的ISP提供商通常会将它们设立在防火墙上或是作为一个独立的设备来运营。<br>由于缓存服务器不是客户端或是源服务器的一部分,它们存在于网络中,请求路由必须经过它们才会生效,所以实际上你可以去手动设置浏览器的代理,或是通过一个中间服务器来进行转发,这样用户自然就察觉不到代理服务器的存在了。<br>代理服务器缓存就是一个共享缓存,不只为一个用户服务,经常为大量用户使用,因此在减少相应时间和带宽使用方面很有效:因为同一个缓存可能会被重用多次。</p>
<h3 id="网关缓存" >
<a href="#网关缓存" class="heading-link"><i class="fas fa-link"></i></a><a href="#网关缓存" class="headerlink" title="网关缓存"></a>网关缓存</h3>
<p>也被称为代理缓存或反向代理缓存,网关也是一个中间服务器,网关缓存一般是网站管理员自己部署,从让网站拥有更好的性能。🙂<br>CDNS(网络内容分发商)分布网关缓存到整个(或部分)互联网上,并出售缓存服务给需要的网站,比如国内的七牛云、又拍云都有这种服务。</p>
<h3 id="数据库缓存" >
<a href="#数据库缓存" class="heading-link"><i class="fas fa-link"></i></a><a href="#数据库缓存" class="headerlink" title="数据库缓存"></a>数据库缓存</h3>
<p>数据库缓存是指当我们的应用极其复杂,表自然也很繁杂,我们必须进行频繁的进行数据库查询,这样可能导致数据库不堪重负,一个好的办法就是将查询后的数据放到内存中,下一次查询直接从内存中取就好了。关于数据库缓存本篇不会展开。<br></p>
<h2 id="浏览器的缓存策略" >
<a href="#浏览器的缓存策略" class="heading-link"><i class="fas fa-link"></i></a><a href="#浏览器的缓存策略" class="headerlink" title="浏览器的缓存策略"></a>浏览器的缓存策略</h2>
<blockquote>
<p>浏览器对于缓存的处理是根据第一次请求资源时返回的响应头来确定的。</p>
</blockquote>
<figure class="highlight http"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">Age:23146</span><br><span class="line">Cache-Control:max-age=2592000</span><br><span class="line">Date:Tue, 28 Nov 2021 12:26:41 GMT</span><br><span class="line">ETag:W/&quot;5a1cf09a-63c6&quot;</span><br><span class="line">Expires:Thu, 28 Dec 2021 05:27:45 GMT</span><br><span class="line">Last-Modified:Tue, 28 Nov 2017 05:14:02 GMT</span><br><span class="line">Vary:Accept-Encoding</span><br></pre></td></tr></table></div></figure>
<h3 id="强缓存阶段" >
<a href="#强缓存阶段" class="heading-link"><i class="fas fa-link"></i></a><a href="#强缓存阶段" class="headerlink" title="强缓存阶段"></a>强缓存阶段</h3>
<p>以上请求头来自百度首页某个CSS文件的响应头。去除了一些和缓存无关的字段,只保留了以上部分。Expires是HTTP/1.0中的定义缓存的字段,它规定了缓存过期的一个绝对时间。Cache-Control:max-age=2592000是HTTP/1.1定义的关于缓存的字段,它规定了缓存过期的一个相对时间。<br>这就是强缓存阶段,当浏览器再次试图访问这个CSS文件,发现有这个文件的缓存,那么就判断根据上一次的响应判断是否过期,如果没过期,使用缓存。否则重新加载文件。</p>
<h3 id="协商缓存阶段" >
<a href="#协商缓存阶段" class="heading-link"><i class="fas fa-link"></i></a><a href="#协商缓存阶段" class="headerlink" title="协商缓存阶段"></a>协商缓存阶段</h3>
<p>利用ETag和Last-Modified这两个字段浏览器可以进入协商缓存阶段,当浏览器再次试图访问这个CSS文件,发现缓存过期,于是会在本次请求的请求头里携带If-Moified-Since和If-None-Match这两个字段,服务器通过这两个字段来判断资源是否有修改,如果有修改则返回状态码200和新的内容,如果没有修改返回状态码304,浏览器收到200状态码,该咋处理就咋处理(相当于首次访问这个文件了),发现返回304,于是知道了本地缓存虽然过期但仍然可以用,于是加载本地缓存。然后根据新的返回的响应头来设置缓存。</p>
<figure class="highlight http"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">If-Moified-Since</span><span class="punctuation">: </span>Tue, 28 Nov 2017 05:14:02 GMT</span><br><span class="line"><span class="attribute">If-None-Match</span><span class="punctuation">: </span>W/&quot;5a1cf09a-63c6&quot;</span><br></pre></td></tr></table></div></figure>
<h3 id="启发式缓存阶段" >
<a href="#启发式缓存阶段" class="heading-link"><i class="fas fa-link"></i></a><a href="#启发式缓存阶段" class="headerlink" title="启发式缓存阶段"></a>启发式缓存阶段</h3>
<figure class="highlight http"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">Age:23146</span><br><span class="line"><span class="attribute">Cache-Control</span><span class="punctuation">: </span>public</span><br><span class="line">Date:Tue, 28 Nov 2017 12:26:41 GMT</span><br><span class="line">Last-Modified:Tue, 28 Nov 2017 05:14:02 GMT</span><br><span class="line">Vary:Accept-Encoding</span><br></pre></td></tr></table></div></figure>
<p>根据响应头中2个时间字段 Date 和 Last-Modified 之间的时间差值,取其值的10%作为缓存时间周期。<br>这就是启发式缓存阶段。这个阶段很容让人忽视,但实际上每时每刻都在发挥着作用。所以在今后的开发过程中如果遇到那种默认缓存的坑,不要生气,浏览器只是在遵循启发式缓存协议而已。<br><img src="https://cdn.nlark.com/yuque/0/2021/svg/1207482/1636550297609-0dfb5f49-e0fa-4945-8b59-055ee7461460.svg#clientId=u72078c95-c63b-4&from=paste&id=ubf82cf4e&margin=%5Bobject%20Object%5D&originHeight=795&originWidth=782&originalType=url&ratio=1&status=done&style=shadow&taskId=ub8a50233-3f0a-4ec3-8318-2e1f72589ae"></p>
<h2 id="浏览器缓存控制" >
<a href="#浏览器缓存控制" class="heading-link"><i class="fas fa-link"></i></a><a href="#浏览器缓存控制" class="headerlink" title="浏览器缓存控制"></a>浏览器缓存控制</h2>
<h3 id="Cache-Control" >
<a href="#Cache-Control" class="heading-link"><i class="fas fa-link"></i></a><a href="#Cache-Control" class="headerlink" title="Cache-Control"></a>Cache-Control</h3>
<h5 id="请求指令" >
<a href="#请求指令" class="heading-link"><i class="fas fa-link"></i></a><a href="#请求指令" class="headerlink" title="请求指令"></a>请求指令</h5>
<div class="table-container"><table>
<thead>
<tr>
<th>指令</th>
<th>参数</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>no-cache</td>
<td></td>
<td>强制源服务器再次验证</td>
</tr>
<tr>
<td>no-store</td>
<td></td>
<td>不缓存请求或是响应的任何内容</td>
</tr>
<tr>
<td>max-age=[秒]</td>
<td>缓存时长,单位是秒</td>
<td>缓存的时长,也是响应的最大的Age值</td>
</tr>
<tr>
<td>min-fresh=[秒]</td>
<td>必需</td>
<td>期望在指定时间内响应仍然有效</td>
</tr>
<tr>
<td>no-transform</td>
<td></td>
<td>代理不可更改媒体类型</td>
</tr>
<tr>
<td>only-if-cached</td>
<td></td>
<td>从缓存获取</td>
</tr>
<tr>
<td>cache-extension</td>
<td></td>
<td>新的指令标记(token)</td>
</tr>
</tbody></table></div>
<h5 id="响应指令" >
<a href="#响应指令" class="heading-link"><i class="fas fa-link"></i></a><a href="#响应指令" class="headerlink" title="响应指令"></a>响应指令</h5>
<div class="table-container"><table>
<thead>
<tr>
<th>指令</th>
<th>参数</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>public</td>
<td></td>
<td>任意一方都能缓存该资源(客户端、代理服务器等)</td>
</tr>
<tr>
<td>private</td>
<td>可省略</td>
<td>只能特定用户缓存该资源</td>
</tr>
<tr>
<td>no-cache</td>
<td>可省略</td>
<td>缓存前必须先确认其有效性</td>
</tr>
<tr>
<td>no-store</td>
<td></td>
<td>不缓存请求或响应的任何内容</td>
</tr>
<tr>
<td>no-transform</td>
<td></td>
<td>代理不可更改媒体类型</td>
</tr>
<tr>
<td>must-revalidate</td>
<td></td>
<td>可缓存但必须再向源服务器进确认</td>
</tr>
<tr>
<td>proxy-revalidate</td>
<td></td>
<td>要求中间缓存服务器对缓存的响应有效性再进行确认</td>
</tr>
<tr>
<td>max-age=[秒]</td>
<td>缓存时长,单位是秒</td>
<td>缓存的时长,也是响应的最大的Age值</td>
</tr>
<tr>
<td>s-maxage=[秒]</td>
<td>必需</td>
<td>公共缓存服务器响应的最大Age值</td>
</tr>
<tr>
<td>cache-extension</td>
<td>-</td>
<td>新指令标记(token)</td>
</tr>
</tbody></table></div>
<h2 id="服务端缓存控制" >
<a href="#服务端缓存控制" class="heading-link"><i class="fas fa-link"></i></a><a href="#服务端缓存控制" class="headerlink" title="服务端缓存控制"></a>服务端缓存控制</h2>
<p>当Expires和Cache-Control:max-age=xxx同时存在的时候取决于缓存服务器应用的HTTP版本。应用HTTP/1.1版本的服务器会优先处理max-age,忽略Expires,而应用HTTP/1.0版本的缓存服务器则会优先处理Expires而忽略max-age。</p>
<h2 id="用户操作行为对缓存的影响" >
<a href="#用户操作行为对缓存的影响" class="heading-link"><i class="fas fa-link"></i></a><a href="#用户操作行为对缓存的影响" class="headerlink" title="用户操作行为对缓存的影响"></a>用户操作行为对缓存的影响</h2>
<div class="table-container"><table>
<thead>
<tr>
<th>操作</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>打开新窗口</td>
<td>如果指定cache-control的值为private、no-cache、must-revalidate,那么打开新窗口访问时都会重新访问服务器。而如果指定了max-age值,那么在此值内的时间里就不会重新访问服务器,例如:Cache-control: max-age=5 表示当访问此网页后的5秒内不会去再次访问服务器.</td>
</tr>
<tr>
<td>在地址栏回车</td>
<td>如果值为private或must-revalidate,则只有第一次访问时会访问服务器,以后就不再访问。如果值为no-cache,那么每次都会访问。如果值为max-age,则在过期之前不会重复访问。</td>
</tr>
<tr>
<td>按后退按扭</td>
<td>如果值为private、must-revalidate、max-age,则不会重访问,而如果为no-cache,则每次都重复访问.</td>
</tr>
<tr>
<td>按刷新按扭</td>
<td>无论为何值,都会重复访问.(可能返回状态码:200、304,这个不同浏览器处理是不一样的,FireFox正常,Chrome则会启用缓存(200 from cache))</td>
</tr>
<tr>
<td>按强制刷新按钮</td>
<td>当做首次进入重新请求(返回状态码200)</td>
</tr>
</tbody></table></div>
<h2 id="HTML5的缓存" >
<a href="#HTML5的缓存" class="heading-link"><i class="fas fa-link"></i></a><a href="#HTML5的缓存" class="headerlink" title="HTML5的缓存"></a>HTML5的缓存</h2>
<p>这部分准确的说应该叫离线存储。现在比较普遍用的是Appcache,但Appcache已经从web标准移除了,在可预见的未来里,ServiceWorker可能会是一个比较适合的解决方案。</p>
<h3 id="Appcache" >
<a href="#Appcache" class="heading-link"><i class="fas fa-link"></i></a><a href="#Appcache" class="headerlink" title="Appcache"></a>Appcache</h3>
<p>这是HTML5的一个新特性,通过离线存储达到用户在没有网络连接的情况下也能访问页面的功能。离线状态下即使用户点击刷新都能正常加载文档。<br>使用方法如下,在HTML文件中引入appcache文件:</p>
<figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">manifest</span>=<span class="string">&quot;manifest.appcache&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">title</span>&gt;</span>***<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;root&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></div></figure>
<p>web 应用中的 manifest 特性可以指定为缓存清单文件的相对路径或一个绝对 URL(绝对 URL 必须与应用同源)。缓存清单文件可以使用任意扩展名,但传输它的 MIME 类型必须为 text/cache-manifest。<br>下面是一个完整的缓存清单文件的示例。</p>
<figure class="highlight http"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">CACHE MANIFEST</span><br><span class="line"># 注释:需要缓存的文件,无论在线与否,均从缓存里读取</span><br><span class="line"># v1 2017-11-30</span><br><span class="line"># This is another comment</span><br><span class="line">/static/logo.png</span><br><span class="line"></span><br><span class="line"># 注释:不缓存的文件,始终从网络获取</span><br><span class="line"><span class="attribute">NETWORK</span>:</span><br><span class="line">example.js</span><br><span class="line"></span><br><span class="line"># 注释:获取不到资源时的备选路径,如index.html访问失败,则返回404页面</span><br><span class="line"><span class="attribute">FALLBACK</span>:</span><br><span class="line">index.html 404.html</span><br></pre></td></tr></table></div></figure>
<p><strong>注意:</strong>主页一定会被缓存起来的,因为AppCache主要是用来做离线应用的,如果主页不缓存就无法离线查看了,因此把index.html添加到NETWORK中是不起效果的。<br>实际上这个特性已经web标准中删除,但现在为止还有很多浏览器支持它,所以这里提一下。<br>AppCache之所以不受待见我想了下面几个原因:</p>
<ol>
<li> 一旦使用了manifest后,没办法清空这些缓存,只能更新缓存,或者得用户自己去清空浏览器的缓存; </li>
<li> 假如更新的资源中有一个资源更新失败了,那么所有的资源就会全部更新失败,将用回上一版本的缓存 </li>
<li> 主页会被强制缓存(使用了manifest的页面),并且无法清除 </li>
<li> appache文件可能会无法被及时更新,因为各大浏览器对于appcache文件的处理方式不同 </li>
<li> 以上几个弊端一旦出问题,会让用户抓狂更会让开发者抓狂
<h1 id="实现html页面如何不缓存js" >
<a href="#实现html页面如何不缓存js" class="heading-link"><i class="fas fa-link"></i></a><a href="#实现html页面如何不缓存js" class="headerlink" title="实现html页面如何不缓存js"></a>实现html页面如何不缓存js</h1>
不缓存JS的方法其实挺简单,下面给出代码。<br>原理就是可以给页面后面设定个不同的值,让页面保持没错访问的不同即可达到不缓存的目的了。但是这种方式解决不了代理服务器缓存。<figure class="highlight javascript"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">write</span>(<span class="string">&quot;&lt;script type=&#x27;text/javascript&#x27; src=&#x27;/storage/exam/js/js_url.js?ver=&quot;</span>+<span class="title class_">Math</span>.<span class="title function_">random</span>()+<span class="string">&quot;&#x27;&gt;&lt;\/script&gt;&quot;</span>);</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure></li>
</ol>
</div><footer class="post-footer"><div class="post-ending ending"><div class="ending__text">------ 本文结束,感谢您的阅读 ------</div></div><div class="post-copyright copyright"><div class="copyright-author"><span class="copyright-author__name">本文作者: </span><span class="copyright-author__value"><a href="http://example.com">易服智享前端团队</a></span></div><div class="copyright-link"><span class="copyright-link__name">本文链接: </span><span class="copyright-link__value"><a href="http://example.com/2021/11/11/%E5%89%8D%E7%AB%AF%E7%BC%93%E5%AD%98/">http://example.com/2021/11/11/%E5%89%8D%E7%AB%AF%E7%BC%93%E5%AD%98/</a></span></div><div class="copyright-notice"><span class="copyright-notice__name">版权声明: </span><span class="copyright-notice__value">本博客所有文章除特别声明外,均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" rel="external nofollow" target="_blank">BY-NC-SA</a> 许可协议。转载请注明出处!</span></div></div><nav class="post-paginator paginator"><div class="paginator-prev"><a class="paginator-prev__link" href="/2021/11/12/%E5%8A%A0%E5%AF%86%E6%96%B9%E5%BC%8F%E6%A6%82%E8%BF%B0%20/"><span class="paginator-prev__icon"><i class="fas fa-angle-left"></i></span><span class="paginator-prev__text">加密方式概述</span></a></div></nav></footer></div></div></div><div class="sidebar-wrap" id="sidebar-wrap"><aside class="sidebar" id="sidebar"><div class="sidebar-nav"><span class="sidebar-nav-toc current">文章目录</span><span class="sidebar-nav-ov">站点概览</span></div><section class="sidebar-toc"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BC%93%E5%AD%98%E7%9A%84%E7%A7%8D%E7%B1%BB"><span class="toc-number">1.</span> <span class="toc-text">
缓存的种类</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BB%A3%E7%90%86%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%BC%93%E5%AD%98"><span class="toc-number">1.1.</span> <span class="toc-text">
代理服务器缓存</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%BD%91%E5%85%B3%E7%BC%93%E5%AD%98"><span class="toc-number">1.2.</span> <span class="toc-text">
网关缓存</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E6%8D%AE%E5%BA%93%E7%BC%93%E5%AD%98"><span class="toc-number">1.3.</span> <span class="toc-text">
数据库缓存</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84%E7%BC%93%E5%AD%98%E7%AD%96%E7%95%A5"><span class="toc-number">2.</span> <span class="toc-text">
浏览器的缓存策略</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%BC%BA%E7%BC%93%E5%AD%98%E9%98%B6%E6%AE%B5"><span class="toc-number">2.1.</span> <span class="toc-text">
强缓存阶段</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8D%8F%E5%95%86%E7%BC%93%E5%AD%98%E9%98%B6%E6%AE%B5"><span class="toc-number">2.2.</span> <span class="toc-text">
协商缓存阶段</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%90%AF%E5%8F%91%E5%BC%8F%E7%BC%93%E5%AD%98%E9%98%B6%E6%AE%B5"><span class="toc-number">2.3.</span> <span class="toc-text">
启发式缓存阶段</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BC%93%E5%AD%98%E6%8E%A7%E5%88%B6"><span class="toc-number">3.</span> <span class="toc-text">
浏览器缓存控制</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Cache-Control"><span class="toc-number">3.1.</span> <span class="toc-text">
Cache-Control</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E8%AF%B7%E6%B1%82%E6%8C%87%E4%BB%A4"><span class="toc-number">3.1.0.1.</span> <span class="toc-text">
请求指令</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%93%8D%E5%BA%94%E6%8C%87%E4%BB%A4"><span class="toc-number">3.1.0.2.</span> <span class="toc-text">
响应指令</span></a></li></ol></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%9C%8D%E5%8A%A1%E7%AB%AF%E7%BC%93%E5%AD%98%E6%8E%A7%E5%88%B6"><span class="toc-number">4.</span> <span class="toc-text">
服务端缓存控制</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%94%A8%E6%88%B7%E6%93%8D%E4%BD%9C%E8%A1%8C%E4%B8%BA%E5%AF%B9%E7%BC%93%E5%AD%98%E7%9A%84%E5%BD%B1%E5%93%8D"><span class="toc-number">5.</span> <span class="toc-text">
用户操作行为对缓存的影响</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#HTML5%E7%9A%84%E7%BC%93%E5%AD%98"><span class="toc-number">6.</span> <span class="toc-text">
HTML5的缓存</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Appcache"><span class="toc-number">6.1.</span> <span class="toc-text">
Appcache</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%AE%9E%E7%8E%B0html%E9%A1%B5%E9%9D%A2%E5%A6%82%E4%BD%95%E4%B8%8D%E7%BC%93%E5%AD%98js"><span class="toc-number"></span> <span class="toc-text">
实现html页面如何不缓存js</span></a></section><!-- ov = overview--><section class="sidebar-ov hide"><div class="sidebar-ov-author"><div class="sidebar-ov-author__avatar"><img class="sidebar-ov-author__avatar_img" src="/images/icons/stun-logo.svg" alt="avatar"></div><p class="sidebar-ov-author__text">易服前端</p></div><div class="sidebar-ov-state"><a class="sidebar-ov-state-item sidebar-ov-state-item--posts" href="/archives/"><div class="sidebar-ov-state-item__count">4</div><div class="sidebar-ov-state-item__name">归档</div></a></div><div class="sidebar-ov-cc"><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" target="_blank" rel="noopener" data-popover="知识共享许可协议" data-popover-pos="up"><img src="/images/cc-by-nc-sa.svg"></a></div></section><div class="sidebar-reading"><div class="sidebar-reading-info"><span class="sidebar-reading-info__text">你已阅读了 </span><span class="sidebar-reading-info__num">0</span><span class="sidebar-reading-info__perc">%</span></div><div class="sidebar-reading-line"></div></div></aside></div><div class="clearfix"></div></div></main><footer class="footer" id="footer"><div class="footer-inner"><div><span>Copyright © 2022</span><span class="footer__icon"><i class="fas fa-heart"></i></span><span>易服智享前端团队</span></div><div><span><a href="http://hexo.io/" title="Hexo" target="_blank" rel="noopener">Hexo</a> 强力驱动</span><span> v5.4.1</span><span class="footer__devider">|</span><span>主题 - <a href="https://github.com/liuyib/hexo-theme-stun/" title="Stun" target="_blank" rel="noopener">Stun</a></span><span> v2.6.2</span></div></div></footer><div class="loading-bar" id="loading-bar"><div class="loading-bar__progress"></div></div><div class="back2top" id="back2top"><span class="back2top__icon"><i class="fas fa-rocket"></i></span></div></div><script src="https://cdn.jsdelivr.net/npm/jquery@v3.4.1/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@1.5.2/velocity.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@1.5.2/velocity.ui.min.js"></script><script src="/js/utils.js?v=2.6.2"></script><script src="/js/stun-boot.js?v=2.6.2"></script><script src="/js/scroll.js?v=2.6.2"></script><script src="/js/header.js?v=2.6.2"></script><script src="/js/sidebar.js?v=2.6.2"></script></body></html>
\ No newline at end of file
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="format-detection" content="telephone=no"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link rel="icon" href="/images/icons/favicon-16x16.png?v=2.6.2" type="image/png" sizes="16x16"><link rel="icon" href="/images/icons/favicon-32x32.png?v=2.6.2" type="image/png" sizes="32x32"><meta name="description" content="简单了解面向对象编程(oop)和常见的几种设计模式 背景: 1、软件设计开发过程中疑难问题: 软件复杂庞大 难以维护阶 版本迭代需求变更 软件设计开发中存在很多其他的问题,上面只是从程序开发和设计的角度看到的部分问题。需求解决上面软件开发中的问题,就要求我们编写(设计)的软件具有很好的可读性、可维护性和可扩展性。我们需要保证代码具有高内聚低耦合,">
<meta property="og:type" content="article">
<meta property="og:title" content="简单了解面向对象编程(oop)和常见的几种设计模式">
<meta property="og:url" content="http://example.com/2021/12/03/%E7%AE%80%E5%8D%95%E4%BA%86%E8%A7%A3oop%E7%BC%96%E7%A8%8B%E6%80%9D%E6%83%B3%E5%92%8C%E5%B8%B8%E8%A7%81%E7%9A%84%E5%87%A0%E7%A7%8D%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/index.html">
<meta property="og:site_name" content="易服智享前端团队技术分享">
<meta property="og:description" content="简单了解面向对象编程(oop)和常见的几种设计模式 背景: 1、软件设计开发过程中疑难问题: 软件复杂庞大 难以维护阶 版本迭代需求变更 软件设计开发中存在很多其他的问题,上面只是从程序开发和设计的角度看到的部分问题。需求解决上面软件开发中的问题,就要求我们编写(设计)的软件具有很好的可读性、可维护性和可扩展性。我们需要保证代码具有高内聚低耦合,">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://img-blog.csdnimg.cn/57c61fe541c747a18ec9022302617df1.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5aSc6L2p57Sr6K-t,size_16,color_FFFFFF,t_70,g_se,x_16#pic_center">
<meta property="article:published_time" content="2021-12-03T02:00:00.000Z">
<meta property="article:modified_time" content="2022-03-15T07:56:38.618Z">
<meta property="article:author" content="易服智享前端团队">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://img-blog.csdnimg.cn/57c61fe541c747a18ec9022302617df1.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5aSc6L2p57Sr6K-t,size_16,color_FFFFFF,t_70,g_se,x_16#pic_center"><title>简单了解面向对象编程(oop)和常见的几种设计模式 | 易服智享前端团队技术分享</title><link ref="canonical" href="http://example.com/2021/12/03/%E7%AE%80%E5%8D%95%E4%BA%86%E8%A7%A3oop%E7%BC%96%E7%A8%8B%E6%80%9D%E6%83%B3%E5%92%8C%E5%B8%B8%E8%A7%81%E7%9A%84%E5%87%A0%E7%A7%8D%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/"><link rel="dns-prefetch" href="https://cdn.jsdelivr.net"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.12.1/css/all.min.css" type="text/css"><link rel="stylesheet" href="/css/index.css?v=2.6.2"><script>var Stun = window.Stun || {};
var CONFIG = {
root: '/',
algolia: undefined,
assistSearch: undefined,
fontIcon: {"prompt":{"success":"fas fa-check-circle","info":"fas fa-arrow-circle-right","warning":"fas fa-exclamation-circle","error":"fas fa-times-circle"},"copyBtn":"fas fa-copy"},
sidebar: {"offsetTop":"20px","tocMaxDepth":6},
header: undefined,
postWidget: {"endText":true},
nightMode: {"enable":true},
back2top: {"enable":true},
codeblock: {"style":"default","highlight":"light","wordWrap":false},
reward: false,
fancybox: false,
zoomImage: {"gapAside":"20px"},
galleryWaterfall: undefined,
lazyload: false,
pjax: undefined,
externalLink: {"icon":{"enable":true,"name":"fas fa-external-link-alt"}},
shortcuts: undefined,
prompt: {"copyButton":"复制","copySuccess":"复制成功","copyError":"复制失败"},
sourcePath: {"js":"js","css":"css","images":"images"},
};
window.CONFIG = CONFIG;</script><meta name="generator" content="Hexo 5.4.1"></head><body><div class="container" id="container"><header class="header" id="header"><div class="header-inner header-inner--height header-inner--bgcolor"><nav class="header-nav header-nav--sticky"><div class="header-nav-inner"><div class="header-nav-menubtn"><i class="fas fa-bars"></i></div><div class="header-nav-menu"><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/"><span class="header-nav-menu-item__icon"><i class="fas fa-home"></i></span><span class="header-nav-menu-item__text">首页</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/archives/"><span class="header-nav-menu-item__icon"><i class="fas fa-folder-open"></i></span><span class="header-nav-menu-item__text">归档</span></a></div></div><div class="header-nav-mode"><div class="mode"><div class="mode-track"><span class="mode-track-moon"></span><span class="mode-track-sun"></span></div><div class="mode-thumb"></div></div></div></div></nav></div></header><main class="main" id="main"><div class="main-inner"><div class="content-wrap" id="content-wrap"><div class="content" id="content"><!-- Just used to judge whether it is an article page--><div id="is-post"></div><div class="post"><header class="post-header"><h1 class="post-title">简单了解面向对象编程(oop)和常见的几种设计模式</h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2021-12-03</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2022-03-15</span></span></div></header><div class="post-body">
<h2 id="简单了解面向对象编程(oop)和常见的几种设计模式" >
<a href="#简单了解面向对象编程(oop)和常见的几种设计模式" class="heading-link"><i class="fas fa-link"></i></a><a href="#简单了解面向对象编程(oop)和常见的几种设计模式" class="headerlink" title="简单了解面向对象编程(oop)和常见的几种设计模式"></a>简单了解面向对象编程(oop)和常见的几种设计模式</h2>
<p><em><strong>背景:</strong></em></p>
<p>1、软件设计开发过程中疑难问题:</p>
<ul>
<li>软件复杂庞大 </li>
<li>难以维护阶</li>
<li><pre><code>版本迭代需求变更
</code></pre>
</li>
</ul>
<p>软件设计开发中存在很多其他的问题,上面只是从程序开发和设计的角度看到的部分问题。需求解决上面软件开发中的问题,就要求我们编写(设计)的软件具有很好的可读性、可维护性和可扩展性。我们需要保证代码具有高内聚低耦合,这里我们使用了OOP编程思想。</p>
<span id="more"></span>
<p><em><strong>oop四大基本特性:</strong></em></p>
<ul>
<li>抽象:提取现实世界中某事物的关键特性,为该事物构建模型的过程。对同一事物在不同的需求下,需要提取的特性可能不一样。得到的抽象模型中一般包含:属性(数据)和操作(行为)。这个抽象模型我们称之为类。对类进行实例化得到对象。</li>
<li>封装:封装可以使类具有独立性和隔离性;保证类的高内聚。只暴露给类外部或者子类必须的属性和操作。类封装的实现依赖类的修饰符(public、protected和private等)</li>
<li>继承:对现有类的一种复用机制。一个类如果继承现有的类,则这个类将拥有被继承类的所有非私有特性(属性和操作)。这里指的继承包含:类的继承和接口的实现。</li>
<li>多态:多态是在继承的基础上实现的。多态的三个要素:继承、重写和父类引用指向子类对象。父类引用指向不同的子类对象时,调用相同的方法,呈现出不同的行为;就是类多态特性。多态可以分成编译时多态和运行时多态。</li>
</ul>
<p> <em><strong>24种设计模式:</strong></em><br><img src="https://img-blog.csdnimg.cn/57c61fe541c747a18ec9022302617df1.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5aSc6L2p57Sr6K-t,size_16,color_FFFFFF,t_70,g_se,x_16#pic_center" style="width: image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,tepx;height: t_Q1NETiBA5aSc6L2p57Sr6K-t,size_16,color_FFFFFF,t_70,g_se,px;" alt="在这里插入图片描述"><br><em><strong>常见的几种设计模式:</strong></em></p>
<p>1、构造函数模式</p>
<figure class="highlight javascript"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 构造一个动物的函数 </span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">Animal</span>(<span class="params">name, color</span>)&#123;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">name</span> = name;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">color</span> = color;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">getName</span> = <span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">name</span>;</span><br><span class="line"> &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 实例一个对象</span></span><br><span class="line"><span class="keyword">var</span> cat = <span class="keyword">new</span> <span class="title class_">Animal</span>(<span class="string">&#x27;&#x27;</span>, <span class="string">&#x27;白色&#x27;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>( cat.<span class="title function_">getName</span>() );</span><br></pre></td></tr></table></div></figure>
<p>2、工厂模式</p>
<figure class="highlight javascript"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 工厂模式</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">Animal</span>(<span class="params">opts</span>)&#123;</span><br><span class="line"> <span class="keyword">var</span> obj = <span class="keyword">new</span> <span class="title class_">Object</span>();</span><br><span class="line"> obj.<span class="property">name</span> = opts.<span class="property">name</span>;</span><br><span class="line"> obj.<span class="property">color</span> = opts.<span class="property">color</span>;</span><br><span class="line"> obj.<span class="property">getInfo</span> = <span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line"> <span class="keyword">return</span> <span class="string">&#x27;名称:&#x27;</span>+obj.<span class="property">name</span> +<span class="string">&#x27;, 颜色:&#x27;</span>+ obj.<span class="property">color</span>;</span><br><span class="line"> &#125;</span><br><span class="line"> <span class="keyword">return</span> obj;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> cat = <span class="title class_">Animal</span>(&#123;<span class="attr">name</span>: <span class="string">&#x27;波斯猫&#x27;</span>, <span class="attr">color</span>: <span class="string">&#x27;白色&#x27;</span>&#125;);</span><br><span class="line">cat.<span class="title function_">getInfo</span>();</span><br></pre></td></tr></table></div></figure>
<p>3、模块模式</p>
<figure class="highlight javascript"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 模块模式 = 封装大部分代码,只暴露必需接口</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">var</span> <span class="title class_">Car</span> = (<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line"> <span class="keyword">var</span> name = <span class="string">&#x27;法拉利&#x27;</span>;</span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">sayName</span>(<span class="params"></span>)&#123;</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>( name );</span><br><span class="line"> &#125;</span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">getColor</span>(<span class="params">name</span>)&#123;</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>( name );</span><br><span class="line"> &#125;</span><br><span class="line"> <span class="keyword">return</span> &#123;</span><br><span class="line"> <span class="attr">name</span>: sayName,</span><br><span class="line"> <span class="attr">color</span>: getColor</span><br><span class="line"> &#125;</span><br><span class="line">&#125;)();</span><br><span class="line"><span class="title class_">Car</span>.<span class="title function_">name</span>();</span><br><span class="line"><span class="title class_">Car</span>.<span class="title function_">color</span>(<span class="string">&#x27;红色&#x27;</span>);</span><br></pre></td></tr></table></div></figure>
<p>4、混合模式</p>
<figure class="highlight javascript"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 混合模式 = 原型模式 + 构造函数模式</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">Animal</span>(<span class="params">name, color</span>)&#123;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">name</span> = name;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">color</span> = color;</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>( <span class="variable language_">this</span>.<span class="property">name</span> + <span class="variable language_">this</span>.<span class="property">color</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title class_">Animal</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">getInfo</span> = <span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;名称:&#x27;</span>+ <span class="variable language_">this</span>.<span class="property">name</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">largeCat</span>(<span class="params">name, color</span>)&#123;</span><br><span class="line"> <span class="title class_">Animal</span>.<span class="title function_">call</span>(<span class="literal">null</span>, name, color);</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">color</span> = color;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">largeCat.<span class="property"><span class="keyword">prototype</span></span> = <span class="title function_">create</span>(<span class="title class_">Animal</span>.<span class="property"><span class="keyword">prototype</span></span>);</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">create</span> (parentObj)&#123;</span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">F</span>(<span class="params"></span>)&#123;&#125;</span><br><span class="line"> F.<span class="property"><span class="keyword">prototype</span></span> = parentObj;</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="title function_">F</span>();</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">largeCat.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">getColor</span> = <span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">color</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> cat = <span class="keyword">new</span> <span class="title function_">largeCat</span>(<span class="string">&quot;Persian&quot;</span>, <span class="string">&quot;白色&quot;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>( cat )</span><br></pre></td></tr></table></div></figure>
<p>5、单例模式</p>
<figure class="highlight javascript"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 在执行当前 Single 只获得唯一一个对象</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">var</span> <span class="title class_">Single</span> = (<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line"> <span class="keyword">var</span> instance;</span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">init</span>(<span class="params"></span>) &#123;</span><br><span class="line"> <span class="comment">//define private methods and properties</span></span><br><span class="line"> <span class="comment">//do something</span></span><br><span class="line"> <span class="keyword">return</span> &#123;</span><br><span class="line"> <span class="comment">//define public methods and properties</span></span><br><span class="line"> &#125;;</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> &#123;</span><br><span class="line"> <span class="comment">// 获取实例</span></span><br><span class="line"> <span class="attr">getInstance</span>:<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line"> <span class="keyword">if</span>(!instance)&#123;</span><br><span class="line"> instance = <span class="title function_">init</span>();</span><br><span class="line"> &#125;</span><br><span class="line"> <span class="keyword">return</span> instance;</span><br><span class="line"> &#125;</span><br><span class="line"> &#125;</span><br><span class="line">&#125;)();</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> obj1 = <span class="title class_">Single</span>.<span class="title function_">getInstance</span>();</span><br><span class="line"><span class="keyword">var</span> obj2 = <span class="title class_">Single</span>.<span class="title function_">getInstance</span>();</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj1 === obj2);</span><br></pre></td></tr></table></div></figure>
<p>6、发布订阅模式</p>
<figure class="highlight javascript"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 发布订阅模式</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">var</span> <span class="title class_">EventCenter</span> = (<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line"> <span class="keyword">var</span> events = &#123;&#125;;</span><br><span class="line"> <span class="comment">/*</span></span><br><span class="line"><span class="comment"> &#123;</span></span><br><span class="line"><span class="comment"> my_event: [&#123;handler: function(data)&#123;xxx&#125;&#125;, &#123;handler: function(data)&#123;yyy&#125;&#125;]</span></span><br><span class="line"><span class="comment"> &#125;</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"> <span class="comment">// 绑定事件 添加回调</span></span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">on</span>(<span class="params">evt, handler</span>)&#123;</span><br><span class="line"> events[evt] = events[evt] || [];</span><br><span class="line"> events[evt].<span class="title function_">push</span>(&#123;</span><br><span class="line"> <span class="attr">handler</span>:handler</span><br><span class="line"> &#125;)</span><br><span class="line"> &#125;</span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">fire</span>(<span class="params">evt, arg</span>)&#123;</span><br><span class="line"> <span class="keyword">if</span>(!events[evt])&#123;</span><br><span class="line"> <span class="keyword">return</span> </span><br><span class="line"> &#125;</span><br><span class="line"> <span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>; i &lt; events[evt].<span class="property">length</span>; i++)&#123;</span><br><span class="line"> events[evt][i].<span class="title function_">handler</span>(arg);</span><br><span class="line"> &#125;</span><br><span class="line"> &#125;</span><br><span class="line"> <span class="keyword">function</span> <span class="title function_">off</span>(<span class="params">evt</span>)&#123;</span><br><span class="line"> <span class="keyword">delete</span> events[evt];</span><br><span class="line"> &#125;</span><br><span class="line"> <span class="keyword">return</span> &#123;</span><br><span class="line"> <span class="attr">on</span>:on,</span><br><span class="line"> <span class="attr">fire</span>:fire,</span><br><span class="line"> <span class="attr">off</span>:off</span><br><span class="line"> &#125;</span><br><span class="line">&#125;());</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> number = <span class="number">1</span>;</span><br><span class="line"><span class="title class_">EventCenter</span>.<span class="title function_">on</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span>(<span class="params">data</span>)&#123;</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;click 事件&#x27;</span> + data + number++ +<span class="string">&#x27;&#x27;</span>);</span><br><span class="line">&#125;);</span><br><span class="line"><span class="title class_">EventCenter</span>.<span class="title function_">off</span>(<span class="string">&#x27;click&#x27;</span>); <span class="comment">// 只绑定一次</span></span><br><span class="line"><span class="title class_">EventCenter</span>.<span class="title function_">on</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span>(<span class="params">data</span>)&#123;</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;click 事件&#x27;</span> + data + number++ +<span class="string">&#x27;&#x27;</span>);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="title class_">EventCenter</span>.<span class="title function_">fire</span>(<span class="string">&#x27;click&#x27;</span>, <span class="string">&#x27;绑定&#x27;</span>);</span><br></pre></td></tr></table></div></figure>
</div><footer class="post-footer"><div class="post-ending ending"><div class="ending__text">------ 本文结束,感谢您的阅读 ------</div></div><div class="post-copyright copyright"><div class="copyright-author"><span class="copyright-author__name">本文作者: </span><span class="copyright-author__value"><a href="http://example.com">易服智享前端团队</a></span></div><div class="copyright-link"><span class="copyright-link__name">本文链接: </span><span class="copyright-link__value"><a href="http://example.com/2021/12/03/%E7%AE%80%E5%8D%95%E4%BA%86%E8%A7%A3oop%E7%BC%96%E7%A8%8B%E6%80%9D%E6%83%B3%E5%92%8C%E5%B8%B8%E8%A7%81%E7%9A%84%E5%87%A0%E7%A7%8D%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/">http://example.com/2021/12/03/%E7%AE%80%E5%8D%95%E4%BA%86%E8%A7%A3oop%E7%BC%96%E7%A8%8B%E6%80%9D%E6%83%B3%E5%92%8C%E5%B8%B8%E8%A7%81%E7%9A%84%E5%87%A0%E7%A7%8D%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/</a></span></div><div class="copyright-notice"><span class="copyright-notice__name">版权声明: </span><span class="copyright-notice__value">本博客所有文章除特别声明外,均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" rel="external nofollow" target="_blank">BY-NC-SA</a> 许可协议。转载请注明出处!</span></div></div><nav class="post-paginator paginator"><div class="paginator-prev"><a class="paginator-prev__link" href="/2022/03/15/babel-basic/"><span class="paginator-prev__icon"><i class="fas fa-angle-left"></i></span><span class="paginator-prev__text">Babel编译基础</span></a></div><div class="paginator-next"><a class="paginator-next__link" href="/2021/11/12/%E5%8A%A0%E5%AF%86%E6%96%B9%E5%BC%8F%E6%A6%82%E8%BF%B0%20/"><span class="paginator-prev__text">加密方式概述</span><span class="paginator-next__icon"><i class="fas fa-angle-right"></i></span></a></div></nav></footer></div></div></div><div class="sidebar-wrap" id="sidebar-wrap"><aside class="sidebar" id="sidebar"><div class="sidebar-nav"><span class="sidebar-nav-toc current">文章目录</span><span class="sidebar-nav-ov">站点概览</span></div><section class="sidebar-toc"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%AE%80%E5%8D%95%E4%BA%86%E8%A7%A3%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%BC%96%E7%A8%8B%EF%BC%88oop%EF%BC%89%E5%92%8C%E5%B8%B8%E8%A7%81%E7%9A%84%E5%87%A0%E7%A7%8D%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F"><span class="toc-number">1.</span> <span class="toc-text">
简单了解面向对象编程(oop)和常见的几种设计模式</span></a></li></ol></section><!-- ov = overview--><section class="sidebar-ov hide"><div class="sidebar-ov-author"><div class="sidebar-ov-author__avatar"><img class="sidebar-ov-author__avatar_img" src="/images/icons/stun-logo.svg" alt="avatar"></div><p class="sidebar-ov-author__text">易服前端</p></div><div class="sidebar-ov-state"><a class="sidebar-ov-state-item sidebar-ov-state-item--posts" href="/archives/"><div class="sidebar-ov-state-item__count">4</div><div class="sidebar-ov-state-item__name">归档</div></a></div><div class="sidebar-ov-cc"><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" target="_blank" rel="noopener" data-popover="知识共享许可协议" data-popover-pos="up"><img src="/images/cc-by-nc-sa.svg"></a></div></section><div class="sidebar-reading"><div class="sidebar-reading-info"><span class="sidebar-reading-info__text">你已阅读了 </span><span class="sidebar-reading-info__num">0</span><span class="sidebar-reading-info__perc">%</span></div><div class="sidebar-reading-line"></div></div></aside></div><div class="clearfix"></div></div></main><footer class="footer" id="footer"><div class="footer-inner"><div><span>Copyright © 2022</span><span class="footer__icon"><i class="fas fa-heart"></i></span><span>易服智享前端团队</span></div><div><span><a href="http://hexo.io/" title="Hexo" target="_blank" rel="noopener">Hexo</a> 强力驱动</span><span> v5.4.1</span><span class="footer__devider">|</span><span>主题 - <a href="https://github.com/liuyib/hexo-theme-stun/" title="Stun" target="_blank" rel="noopener">Stun</a></span><span> v2.6.2</span></div></div></footer><div class="loading-bar" id="loading-bar"><div class="loading-bar__progress"></div></div><div class="back2top" id="back2top"><span class="back2top__icon"><i class="fas fa-rocket"></i></span></div></div><script src="https://cdn.jsdelivr.net/npm/jquery@v3.4.1/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@1.5.2/velocity.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@1.5.2/velocity.ui.min.js"></script><script src="/js/utils.js?v=2.6.2"></script><script src="/js/stun-boot.js?v=2.6.2"></script><script src="/js/scroll.js?v=2.6.2"></script><script src="/js/header.js?v=2.6.2"></script><script src="/js/sidebar.js?v=2.6.2"></script></body></html>
\ No newline at end of file
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="format-detection" content="telephone=no"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link rel="icon" href="/images/icons/favicon-16x16.png?v=2.6.2" type="image/png" sizes="16x16"><link rel="icon" href="/images/icons/favicon-32x32.png?v=2.6.2" type="image/png" sizes="32x32"><meta name="description" content="操作指南 前端项目工程化不断迭代更新,新的语法功能、特性让代码的书写变得更加舒服、简洁、易读、可维护。然而,对于浏览器的语法兼容性,却并不能很好的完美兼容新提出的语法、特性,不同版本的浏览器对于兼容语法方面也有着较大的差异。这时候,babel的出现可以说是应运而生,通过对于es2015+的语法进行编译适配,可以让我们更好的关注于业务本省、用最简洁">
<meta property="og:type" content="article">
<meta property="og:title" content="Babel编译基础">
<meta property="og:url" content="http://example.com/2022/03/15/babel-basic/index.html">
<meta property="og:site_name" content="易服智享前端团队技术分享">
<meta property="og:description" content="操作指南 前端项目工程化不断迭代更新,新的语法功能、特性让代码的书写变得更加舒服、简洁、易读、可维护。然而,对于浏览器的语法兼容性,却并不能很好的完美兼容新提出的语法、特性,不同版本的浏览器对于兼容语法方面也有着较大的差异。这时候,babel的出现可以说是应运而生,通过对于es2015+的语法进行编译适配,可以让我们更好的关注于业务本省、用最简洁">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2022-03-15T07:58:00.000Z">
<meta property="article:modified_time" content="2022-03-15T07:58:07.668Z">
<meta property="article:author" content="易服智享前端团队">
<meta name="twitter:card" content="summary"><title>Babel编译基础 | 易服智享前端团队技术分享</title><link ref="canonical" href="http://example.com/2022/03/15/babel-basic/"><link rel="dns-prefetch" href="https://cdn.jsdelivr.net"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.12.1/css/all.min.css" type="text/css"><link rel="stylesheet" href="/css/index.css?v=2.6.2"><script>var Stun = window.Stun || {};
var CONFIG = {
root: '/',
algolia: undefined,
assistSearch: undefined,
fontIcon: {"prompt":{"success":"fas fa-check-circle","info":"fas fa-arrow-circle-right","warning":"fas fa-exclamation-circle","error":"fas fa-times-circle"},"copyBtn":"fas fa-copy"},
sidebar: {"offsetTop":"20px","tocMaxDepth":6},
header: undefined,
postWidget: {"endText":true},
nightMode: {"enable":true},
back2top: {"enable":true},
codeblock: {"style":"default","highlight":"light","wordWrap":false},
reward: false,
fancybox: false,
zoomImage: {"gapAside":"20px"},
galleryWaterfall: undefined,
lazyload: false,
pjax: undefined,
externalLink: {"icon":{"enable":true,"name":"fas fa-external-link-alt"}},
shortcuts: undefined,
prompt: {"copyButton":"复制","copySuccess":"复制成功","copyError":"复制失败"},
sourcePath: {"js":"js","css":"css","images":"images"},
};
window.CONFIG = CONFIG;</script><meta name="generator" content="Hexo 5.4.1"></head><body><div class="container" id="container"><header class="header" id="header"><div class="header-inner header-inner--height header-inner--bgcolor"><nav class="header-nav header-nav--sticky"><div class="header-nav-inner"><div class="header-nav-menubtn"><i class="fas fa-bars"></i></div><div class="header-nav-menu"><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/"><span class="header-nav-menu-item__icon"><i class="fas fa-home"></i></span><span class="header-nav-menu-item__text">首页</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/archives/"><span class="header-nav-menu-item__icon"><i class="fas fa-folder-open"></i></span><span class="header-nav-menu-item__text">归档</span></a></div></div><div class="header-nav-mode"><div class="mode"><div class="mode-track"><span class="mode-track-moon"></span><span class="mode-track-sun"></span></div><div class="mode-thumb"></div></div></div></div></nav></div></header><main class="main" id="main"><div class="main-inner"><div class="content-wrap" id="content-wrap"><div class="content" id="content"><!-- Just used to judge whether it is an article page--><div id="is-post"></div><div class="post"><header class="post-header"><h1 class="post-title">Babel编译基础</h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2022-03-15</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2022-03-15</span></span></div></header><div class="post-body">
<h2 id="操作指南" >
<a href="#操作指南" class="heading-link"><i class="fas fa-link"></i></a><a href="#操作指南" class="headerlink" title="操作指南"></a>操作指南</h2>
<p>前端项目工程化不断迭代更新,新的语法功能、特性让代码的书写变得更加舒服、简洁、易读、可维护。然而,对于浏览器的语法兼容性,却并不能很好的完美兼容新提出的语法、特性,不同版本的浏览器对于兼容语法方面也有着较大的差异。这时候,babel的出现可以说是应运而生,通过对于es2015+的语法进行编译适配,可以让我们更好的关注于业务本省、用最简洁的的代码完成需求,而不需要关注不同版本之间的兼容问题。Babel可以在不同测场景有着不同的使用,如下介绍的则是在cli(命令行)环境下,如何使用babel为我们的项目实现编译兼容。</p>
<ol>
<li>安装babel<figure class="highlight plaintext"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ npm init</span><br><span class="line">$ npm install --save-dev @babel/core @babel/cli</span><br></pre></td></tr></table></div></figure></li>
</ol>
<p>@babel/cli: babel自带的cli工具,可通过命令编译文件<br>@babel/core: babel功能核心库,babel转换核心库,可做一些中间操作</p>
<ol start="2">
<li>创建配置文件 babel.config.json/babel.config.js/.babelrc</li>
</ol>
<p>配置文件用于配置babel的部分预设功能</p>
<figure class="highlight json"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// babel.config.json</span></span><br><span class="line"></span><br><span class="line"><span class="punctuation">&#123;</span></span><br><span class="line"> <span class="attr">&quot;presets&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">&quot;@babel/preset-env&quot;</span><span class="punctuation">]</span> <span class="comment">// 启动 es6语法转换功能</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br><span class="line"></span><br></pre></td></tr></table></div></figure>
<p>如上配置需要安装 <strong>@babel/preset-env</strong>库,</p>
<figure class="highlight shell"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_"></span></span><br><span class="line"><span class="meta prompt_">$ </span><span class="language-bash">npm install --save-dev @babel/preset-env</span></span><br><span class="line"></span><br></pre></td></tr></table></div></figure>
<p>3、 创建一个js文件</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// Expression bodies</span></span><br><span class="line"><span class="keyword">var</span> odds = evens.<span class="title function_">map</span>(<span class="function"><span class="params">v</span> =&gt;</span> v + <span class="number">1</span>);</span><br><span class="line"><span class="keyword">var</span> nums = evens.<span class="title function_">map</span>(<span class="function">(<span class="params">v, i</span>) =&gt;</span> v + i);</span><br><span class="line"></span><br><span class="line"><span class="comment">// Statement bodies</span></span><br><span class="line">nums.<span class="title function_">forEach</span>(<span class="function"><span class="params">v</span> =&gt;</span> &#123;</span><br><span class="line"> <span class="keyword">if</span> (v % <span class="number">5</span> === <span class="number">0</span>)</span><br><span class="line"> fives.<span class="title function_">push</span>(v);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// Lexical this</span></span><br><span class="line"><span class="keyword">var</span> bob = &#123;</span><br><span class="line"> <span class="attr">_name</span>: <span class="string">&quot;Bob&quot;</span>,</span><br><span class="line"> <span class="attr">_friends</span>: [],</span><br><span class="line"> <span class="title function_">printFriends</span>(<span class="params"></span>) &#123;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_friends</span>.<span class="title function_">forEach</span>(<span class="function"><span class="params">f</span> =&gt;</span></span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">_name</span> + <span class="string">&quot; knows &quot;</span> + f));</span><br><span class="line"> &#125;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// Lexical arguments</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">square</span>(<span class="params"></span>) &#123;</span><br><span class="line"> <span class="keyword">let</span> <span class="title function_">example</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line"> <span class="keyword">let</span> numbers = [];</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> number <span class="keyword">of</span> <span class="variable language_">arguments</span>) &#123;</span><br><span class="line"> numbers.<span class="title function_">push</span>(number * number);</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> numbers;</span><br><span class="line"> &#125;;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> <span class="title function_">example</span>();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title function_">square</span>(<span class="number">2</span>, <span class="number">4</span>, <span class="number">7.5</span>, <span class="number">8</span>, <span class="number">11.5</span>, <span class="number">21</span>); <span class="comment">// returns: [4, 16, 56.25, 64, 132.25, 441]</span></span><br><span class="line"></span><br></pre></td></tr></table></div></figure>
<p>4、 编译js</p>
<ul>
<li><p>添加编译脚本<br>在package.json中添加:</p>
<figure class="highlight json"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">&quot;scripts&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line"> <span class="attr">&quot;test&quot;</span><span class="punctuation">:</span> <span class="string">&quot;echo \&quot;Error: no test specified\&quot; &amp;&amp; exit 1&quot;</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">&quot;build:babel&quot;</span><span class="punctuation">:</span> <span class="string">&quot;babel src -d lib&quot;</span></span><br><span class="line"><span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br></pre></td></tr></table></div></figure></li>
<li><p>运行编译脚本</p>
</li>
</ul>
<figure class="highlight plaintext"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ npm run build:babel</span><br><span class="line"></span><br></pre></td></tr></table></div></figure>
<ul>
<li>编译结果</li>
</ul>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&quot;use strict&quot;</span>;</span><br><span class="line"><span class="comment">// lib/syntax.js</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">_createForOfIteratorHelper</span>(<span class="params">o, allowArrayLike</span>) &#123; <span class="keyword">var</span> it = <span class="keyword">typeof</span> <span class="title class_">Symbol</span> !== <span class="string">&quot;undefined&quot;</span> &amp;&amp; o[<span class="title class_">Symbol</span>.<span class="property">iterator</span>] || o[<span class="string">&quot;@@iterator&quot;</span>]; <span class="keyword">if</span> (!it) &#123; <span class="keyword">if</span> (<span class="title class_">Array</span>.<span class="title function_">isArray</span>(o) || (it = <span class="title function_">_unsupportedIterableToArray</span>(o)) || allowArrayLike &amp;&amp; o &amp;&amp; <span class="keyword">typeof</span> o.<span class="property">length</span> === <span class="string">&quot;number&quot;</span>) &#123; <span class="keyword">if</span> (it) o = it; <span class="keyword">var</span> i = <span class="number">0</span>; <span class="keyword">var</span> F = <span class="keyword">function</span> <span class="title function_">F</span>(<span class="params"></span>) &#123;&#125;; <span class="keyword">return</span> &#123; <span class="attr">s</span>: F, <span class="attr">n</span>: <span class="keyword">function</span> <span class="title function_">n</span>(<span class="params"></span>) &#123; <span class="keyword">if</span> (i &gt;= o.<span class="property">length</span>) <span class="keyword">return</span> &#123; <span class="attr">done</span>: <span class="literal">true</span> &#125;; <span class="keyword">return</span> &#123; <span class="attr">done</span>: <span class="literal">false</span>, <span class="attr">value</span>: o[i++] &#125;; &#125;, <span class="attr">e</span>: <span class="keyword">function</span> <span class="title function_">e</span>(<span class="params">_e</span>) &#123; <span class="keyword">throw</span> _e; &#125;, <span class="attr">f</span>: F &#125;; &#125; <span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">TypeError</span>(<span class="string">&quot;Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.&quot;</span>); &#125; <span class="keyword">var</span> normalCompletion = <span class="literal">true</span>, didErr = <span class="literal">false</span>, err; <span class="keyword">return</span> &#123; <span class="attr">s</span>: <span class="keyword">function</span> <span class="title function_">s</span>(<span class="params"></span>) &#123; it = it.<span class="title function_">call</span>(o); &#125;, <span class="attr">n</span>: <span class="keyword">function</span> <span class="title function_">n</span>(<span class="params"></span>) &#123; <span class="keyword">var</span> step = it.<span class="title function_">next</span>(); normalCompletion = step.<span class="property">done</span>; <span class="keyword">return</span> step; &#125;, <span class="attr">e</span>: <span class="keyword">function</span> <span class="title function_">e</span>(<span class="params">_e2</span>) &#123; didErr = <span class="literal">true</span>; err = _e2; &#125;, <span class="attr">f</span>: <span class="keyword">function</span> <span class="title function_">f</span>(<span class="params"></span>) &#123; <span class="keyword">try</span> &#123; <span class="keyword">if</span> (!normalCompletion &amp;&amp; it[<span class="string">&quot;return&quot;</span>] != <span class="literal">null</span>) it[<span class="string">&quot;return&quot;</span>](); &#125; <span class="keyword">finally</span> &#123; <span class="keyword">if</span> (didErr) <span class="keyword">throw</span> err; &#125; &#125; &#125;; &#125;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">_unsupportedIterableToArray</span>(<span class="params">o, minLen</span>) &#123; <span class="keyword">if</span> (!o) <span class="keyword">return</span>; <span class="keyword">if</span> (<span class="keyword">typeof</span> o === <span class="string">&quot;string&quot;</span>) <span class="keyword">return</span> <span class="title function_">_arrayLikeToArray</span>(o, minLen); <span class="keyword">var</span> n = <span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">toString</span>.<span class="title function_">call</span>(o).<span class="title function_">slice</span>(<span class="number">8</span>, -<span class="number">1</span>); <span class="keyword">if</span> (n === <span class="string">&quot;Object&quot;</span> &amp;&amp; o.<span class="property">constructor</span>) n = o.<span class="property">constructor</span>.<span class="property">name</span>; <span class="keyword">if</span> (n === <span class="string">&quot;Map&quot;</span> || n === <span class="string">&quot;Set&quot;</span>) <span class="keyword">return</span> <span class="title class_">Array</span>.<span class="title function_">from</span>(o); <span class="keyword">if</span> (n === <span class="string">&quot;Arguments&quot;</span> || <span class="regexp">/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/</span>.<span class="title function_">test</span>(n)) <span class="keyword">return</span> <span class="title function_">_arrayLikeToArray</span>(o, minLen); &#125;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">_arrayLikeToArray</span>(<span class="params">arr, len</span>) &#123; <span class="keyword">if</span> (len == <span class="literal">null</span> || len &gt; arr.<span class="property">length</span>) len = arr.<span class="property">length</span>; <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>, arr2 = <span class="keyword">new</span> <span class="title class_">Array</span>(len); i &lt; len; i++) &#123; arr2[i] = arr[i]; &#125; <span class="keyword">return</span> arr2; &#125;</span><br><span class="line"><span class="comment">// Expression bodies</span></span><br><span class="line"><span class="keyword">var</span> odds = evens.<span class="title function_">map</span>(<span class="keyword">function</span> (<span class="params">v</span>) &#123; <span class="keyword">return</span> v + <span class="number">1</span>;&#125;);</span><br><span class="line"><span class="keyword">var</span> nums = evens.<span class="title function_">map</span>(<span class="keyword">function</span> (<span class="params">v, i</span>) &#123;<span class="keyword">return</span> v + i;&#125;); <span class="comment">// Statement bodies</span></span><br><span class="line">nums.<span class="title function_">forEach</span>(<span class="keyword">function</span> (<span class="params">v</span>) &#123;</span><br><span class="line"> <span class="keyword">if</span> (v % <span class="number">5</span> === <span class="number">0</span>) fives.<span class="title function_">push</span>(v);</span><br><span class="line">&#125;); <span class="comment">// Lexical this</span></span><br><span class="line"><span class="keyword">var</span> bob = &#123;</span><br><span class="line"> <span class="attr">_name</span>: <span class="string">&quot;Bob&quot;</span>,</span><br><span class="line"> <span class="attr">_friends</span>: [],</span><br><span class="line"> <span class="attr">printFriends</span>: <span class="keyword">function</span> <span class="title function_">printFriends</span>(<span class="params"></span>) &#123;</span><br><span class="line"> <span class="keyword">var</span> _this = <span class="variable language_">this</span>;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_friends</span>.<span class="title function_">forEach</span>(<span class="keyword">function</span> (<span class="params">f</span>) &#123;</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">console</span>.<span class="title function_">log</span>(_this.<span class="property">_name</span> + <span class="string">&quot; knows &quot;</span> + f);</span><br><span class="line"> &#125;);</span><br><span class="line"> &#125;</span><br><span class="line">&#125;; <span class="comment">// Lexical arguments</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">square</span>(<span class="params"></span>) &#123;</span><br><span class="line"> <span class="keyword">var</span> _arguments = <span class="variable language_">arguments</span>;</span><br><span class="line"> <span class="keyword">var</span> example = <span class="keyword">function</span> <span class="title function_">example</span>(<span class="params"></span>) &#123;</span><br><span class="line"> <span class="keyword">var</span> numbers = [];</span><br><span class="line"> <span class="keyword">var</span> _iterator = <span class="title function_">_createForOfIteratorHelper</span>(_arguments),</span><br><span class="line"> _step;</span><br><span class="line"> <span class="keyword">try</span> &#123;</span><br><span class="line"> <span class="keyword">for</span> (_iterator.<span class="title function_">s</span>(); !(_step = _iterator.<span class="title function_">n</span>()).<span class="property">done</span>;) &#123;</span><br><span class="line"> <span class="keyword">var</span> number = _step.<span class="property">value</span>;</span><br><span class="line"> numbers.<span class="title function_">push</span>(number * number);</span><br><span class="line"> &#125;</span><br><span class="line"> &#125; <span class="keyword">catch</span> (err) &#123;</span><br><span class="line"> _iterator.<span class="title function_">e</span>(err);</span><br><span class="line"> &#125; <span class="keyword">finally</span> &#123;</span><br><span class="line"> _iterator.<span class="title function_">f</span>();</span><br><span class="line"> &#125;</span><br><span class="line"> <span class="keyword">return</span> numbers;</span><br><span class="line"> &#125;;</span><br><span class="line"> <span class="keyword">return</span> <span class="title function_">example</span>();</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">square</span>(<span class="number">2</span>, <span class="number">4</span>, <span class="number">7.5</span>, <span class="number">8</span>, <span class="number">11.5</span>, <span class="number">21</span>); <span class="comment">// returns: [4, 16, 56.25, 64, 132.25, 441]</span></span><br></pre></td></tr></table></div></figure>
<p>上面可以发现,使用@babel/preset预设编译可以完成es6的语法代码的转译(let、var、for…in、for…of等),但对于es6中新增的api功能并不能完成编译(Array.map、Array.forEach、Promise等)。为此,我们需要对于es6中新增的api进行单独的转译(本篇暂不介绍)。</p>
<p>源码示例:<span class="exturl"><a class="exturl__link" target="_blank" rel="noopener" href="https://github.com/amikoj/babelDemo/tree/main/sourceJs" >GITHUB</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span></p>
</div><footer class="post-footer"><div class="post-ending ending"><div class="ending__text">------ 本文结束,感谢您的阅读 ------</div></div><div class="post-copyright copyright"><div class="copyright-author"><span class="copyright-author__name">本文作者: </span><span class="copyright-author__value"><a href="http://example.com">易服智享前端团队</a></span></div><div class="copyright-link"><span class="copyright-link__name">本文链接: </span><span class="copyright-link__value"><a href="http://example.com/2022/03/15/babel-basic/">http://example.com/2022/03/15/babel-basic/</a></span></div><div class="copyright-notice"><span class="copyright-notice__name">版权声明: </span><span class="copyright-notice__value">本博客所有文章除特别声明外,均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" rel="external nofollow" target="_blank">BY-NC-SA</a> 许可协议。转载请注明出处!</span></div></div><nav class="post-paginator paginator"><div class="paginator-next"><a class="paginator-next__link" href="/2021/12/03/%E7%AE%80%E5%8D%95%E4%BA%86%E8%A7%A3oop%E7%BC%96%E7%A8%8B%E6%80%9D%E6%83%B3%E5%92%8C%E5%B8%B8%E8%A7%81%E7%9A%84%E5%87%A0%E7%A7%8D%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/"><span class="paginator-prev__text">简单了解面向对象编程(oop)和常见的几种设计模式</span><span class="paginator-next__icon"><i class="fas fa-angle-right"></i></span></a></div></nav></footer></div></div></div><div class="sidebar-wrap" id="sidebar-wrap"><aside class="sidebar" id="sidebar"><div class="sidebar-nav"><span class="sidebar-nav-toc current">文章目录</span><span class="sidebar-nav-ov">站点概览</span></div><section class="sidebar-toc"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%93%8D%E4%BD%9C%E6%8C%87%E5%8D%97"><span class="toc-number">1.</span> <span class="toc-text">
操作指南</span></a></li></ol></section><!-- ov = overview--><section class="sidebar-ov hide"><div class="sidebar-ov-author"><div class="sidebar-ov-author__avatar"><img class="sidebar-ov-author__avatar_img" src="/images/icons/stun-logo.svg" alt="avatar"></div><p class="sidebar-ov-author__text">易服前端</p></div><div class="sidebar-ov-state"><a class="sidebar-ov-state-item sidebar-ov-state-item--posts" href="/archives/"><div class="sidebar-ov-state-item__count">4</div><div class="sidebar-ov-state-item__name">归档</div></a></div><div class="sidebar-ov-cc"><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" target="_blank" rel="noopener" data-popover="知识共享许可协议" data-popover-pos="up"><img src="/images/cc-by-nc-sa.svg"></a></div></section><div class="sidebar-reading"><div class="sidebar-reading-info"><span class="sidebar-reading-info__text">你已阅读了 </span><span class="sidebar-reading-info__num">0</span><span class="sidebar-reading-info__perc">%</span></div><div class="sidebar-reading-line"></div></div></aside></div><div class="clearfix"></div></div></main><footer class="footer" id="footer"><div class="footer-inner"><div><span>Copyright © 2022</span><span class="footer__icon"><i class="fas fa-heart"></i></span><span>易服智享前端团队</span></div><div><span><a href="http://hexo.io/" title="Hexo" target="_blank" rel="noopener">Hexo</a> 强力驱动</span><span> v5.4.1</span><span class="footer__devider">|</span><span>主题 - <a href="https://github.com/liuyib/hexo-theme-stun/" title="Stun" target="_blank" rel="noopener">Stun</a></span><span> v2.6.2</span></div></div></footer><div class="loading-bar" id="loading-bar"><div class="loading-bar__progress"></div></div><div class="back2top" id="back2top"><span class="back2top__icon"><i class="fas fa-rocket"></i></span></div></div><script src="https://cdn.jsdelivr.net/npm/jquery@v3.4.1/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@1.5.2/velocity.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@1.5.2/velocity.ui.min.js"></script><script src="/js/utils.js?v=2.6.2"></script><script src="/js/stun-boot.js?v=2.6.2"></script><script src="/js/scroll.js?v=2.6.2"></script><script src="/js/header.js?v=2.6.2"></script><script src="/js/sidebar.js?v=2.6.2"></script></body></html>
\ No newline at end of file
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="format-detection" content="telephone=no"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link rel="icon" href="/images/icons/favicon-16x16.png?v=2.6.2" type="image/png" sizes="16x16"><link rel="icon" href="/images/icons/favicon-32x32.png?v=2.6.2" type="image/png" sizes="32x32"><meta property="og:type" content="website">
<meta property="og:title" content="易服智享前端团队技术分享">
<meta property="og:url" content="http://example.com/archives/2021/11/index.html">
<meta property="og:site_name" content="易服智享前端团队技术分享">
<meta property="og:locale" content="zh_CN">
<meta property="article:author" content="易服智享前端团队">
<meta name="twitter:card" content="summary"><title>归档 | 易服智享前端团队技术分享</title><link ref="canonical" href="http://example.com/archives/2021/11/index.html"><link rel="dns-prefetch" href="https://cdn.jsdelivr.net"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.12.1/css/all.min.css" type="text/css"><link rel="stylesheet" href="/css/index.css?v=2.6.2"><script>var Stun = window.Stun || {};
var CONFIG = {
root: '/',
algolia: undefined,
assistSearch: undefined,
fontIcon: {"prompt":{"success":"fas fa-check-circle","info":"fas fa-arrow-circle-right","warning":"fas fa-exclamation-circle","error":"fas fa-times-circle"},"copyBtn":"fas fa-copy"},
sidebar: {"offsetTop":"20px","tocMaxDepth":6},
header: undefined,
postWidget: {"endText":true},
nightMode: {"enable":true},
back2top: {"enable":true},
codeblock: {"style":"default","highlight":"light","wordWrap":false},
reward: false,
fancybox: false,
zoomImage: {"gapAside":"20px"},
galleryWaterfall: undefined,
lazyload: false,
pjax: undefined,
externalLink: {"icon":{"enable":true,"name":"fas fa-external-link-alt"}},
shortcuts: undefined,
prompt: {"copyButton":"复制","copySuccess":"复制成功","copyError":"复制失败"},
sourcePath: {"js":"js","css":"css","images":"images"},
};
window.CONFIG = CONFIG;</script><meta name="generator" content="Hexo 5.4.1"></head><body><div class="container" id="container"><header class="header" id="header"><div class="header-inner header-inner--height header-inner--bgcolor"><nav class="header-nav header-nav--sticky"><div class="header-nav-inner"><div class="header-nav-menubtn"><i class="fas fa-bars"></i></div><div class="header-nav-menu"><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/"><span class="header-nav-menu-item__icon"><i class="fas fa-home"></i></span><span class="header-nav-menu-item__text">首页</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/archives/"><span class="header-nav-menu-item__icon"><i class="fas fa-folder-open"></i></span><span class="header-nav-menu-item__text">归档</span></a></div></div><div class="header-nav-mode"><div class="mode"><div class="mode-track"><span class="mode-track-moon"></span><span class="mode-track-sun"></span></div><div class="mode-thumb"></div></div></div></div></nav></div></header><main class="main" id="main"><div class="main-inner"><div class="content-wrap" id="content-wrap"><div class="content" id="content"><div class="archive"><div class="archive-total">目前共计 4 篇文章,继续加油!</div><section class="timeline"><time class="timeline-item timeline-item--year">2022</time><article class="timeline-item"><time class="timeline-item__time">03-15</time><h2 class="timeline-item__title"><a class="timeline-item__link" href="/2022/03/15/babel-basic/">Babel编译基础</a></h2></article><time class="timeline-item timeline-item--year">2021</time><article class="timeline-item"><time class="timeline-item__time">12-03</time><h2 class="timeline-item__title"><a class="timeline-item__link" href="/2021/12/03/%E7%AE%80%E5%8D%95%E4%BA%86%E8%A7%A3oop%E7%BC%96%E7%A8%8B%E6%80%9D%E6%83%B3%E5%92%8C%E5%B8%B8%E8%A7%81%E7%9A%84%E5%87%A0%E7%A7%8D%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/">简单了解面向对象编程(oop)和常见的几种设计模式</a></h2></article><article class="timeline-item"><time class="timeline-item__time">11-12</time><h2 class="timeline-item__title"><a class="timeline-item__link" href="/2021/11/12/%E5%8A%A0%E5%AF%86%E6%96%B9%E5%BC%8F%E6%A6%82%E8%BF%B0%20/">加密方式概述</a></h2></article><article class="timeline-item"><time class="timeline-item__time">11-11</time><h2 class="timeline-item__title"><a class="timeline-item__link" href="/2021/11/11/%E5%89%8D%E7%AB%AF%E7%BC%93%E5%AD%98/">前端缓存</a></h2></article></section></div></div></div><div class="sidebar-wrap" id="sidebar-wrap"><aside class="sidebar" id="sidebar"><section class="sidebar-toc hide"></section><!-- ov = overview--><section class="sidebar-ov"><div class="sidebar-ov-author"><div class="sidebar-ov-author__avatar"><img class="sidebar-ov-author__avatar_img" src="/images/icons/stun-logo.svg" alt="avatar"></div><p class="sidebar-ov-author__text">易服前端</p></div><div class="sidebar-ov-state"><a class="sidebar-ov-state-item sidebar-ov-state-item--posts" href="/archives/"><div class="sidebar-ov-state-item__count">4</div><div class="sidebar-ov-state-item__name">归档</div></a></div><div class="sidebar-ov-cc"><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" target="_blank" rel="noopener" data-popover="知识共享许可协议" data-popover-pos="up"><img src="/images/cc-by-nc-sa.svg"></a></div></section></aside></div><div class="clearfix"></div></div></main><footer class="footer" id="footer"><div class="footer-inner"><div><span>Copyright © 2022</span><span class="footer__icon"><i class="fas fa-heart"></i></span><span>易服智享前端团队</span></div><div><span><a href="http://hexo.io/" title="Hexo" target="_blank" rel="noopener">Hexo</a> 强力驱动</span><span> v5.4.1</span><span class="footer__devider">|</span><span>主题 - <a href="https://github.com/liuyib/hexo-theme-stun/" title="Stun" target="_blank" rel="noopener">Stun</a></span><span> v2.6.2</span></div></div></footer><div class="loading-bar" id="loading-bar"><div class="loading-bar__progress"></div></div><div class="back2top" id="back2top"><span class="back2top__icon"><i class="fas fa-rocket"></i></span></div></div><script src="https://cdn.jsdelivr.net/npm/jquery@v3.4.1/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@1.5.2/velocity.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@1.5.2/velocity.ui.min.js"></script><script src="/js/utils.js?v=2.6.2"></script><script src="/js/stun-boot.js?v=2.6.2"></script><script src="/js/scroll.js?v=2.6.2"></script><script src="/js/header.js?v=2.6.2"></script><script src="/js/sidebar.js?v=2.6.2"></script></body></html>
\ No newline at end of file
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="format-detection" content="telephone=no"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link rel="icon" href="/images/icons/favicon-16x16.png?v=2.6.2" type="image/png" sizes="16x16"><link rel="icon" href="/images/icons/favicon-32x32.png?v=2.6.2" type="image/png" sizes="32x32"><meta property="og:type" content="website">
<meta property="og:title" content="易服智享前端团队技术分享">
<meta property="og:url" content="http://example.com/archives/2021/12/index.html">
<meta property="og:site_name" content="易服智享前端团队技术分享">
<meta property="og:locale" content="zh_CN">
<meta property="article:author" content="易服智享前端团队">
<meta name="twitter:card" content="summary"><title>归档 | 易服智享前端团队技术分享</title><link ref="canonical" href="http://example.com/archives/2021/12/index.html"><link rel="dns-prefetch" href="https://cdn.jsdelivr.net"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.12.1/css/all.min.css" type="text/css"><link rel="stylesheet" href="/css/index.css?v=2.6.2"><script>var Stun = window.Stun || {};
var CONFIG = {
root: '/',
algolia: undefined,
assistSearch: undefined,
fontIcon: {"prompt":{"success":"fas fa-check-circle","info":"fas fa-arrow-circle-right","warning":"fas fa-exclamation-circle","error":"fas fa-times-circle"},"copyBtn":"fas fa-copy"},
sidebar: {"offsetTop":"20px","tocMaxDepth":6},
header: undefined,
postWidget: {"endText":true},
nightMode: {"enable":true},
back2top: {"enable":true},
codeblock: {"style":"default","highlight":"light","wordWrap":false},
reward: false,
fancybox: false,
zoomImage: {"gapAside":"20px"},
galleryWaterfall: undefined,
lazyload: false,
pjax: undefined,
externalLink: {"icon":{"enable":true,"name":"fas fa-external-link-alt"}},
shortcuts: undefined,
prompt: {"copyButton":"复制","copySuccess":"复制成功","copyError":"复制失败"},
sourcePath: {"js":"js","css":"css","images":"images"},
};
window.CONFIG = CONFIG;</script><meta name="generator" content="Hexo 5.4.1"></head><body><div class="container" id="container"><header class="header" id="header"><div class="header-inner header-inner--height header-inner--bgcolor"><nav class="header-nav header-nav--sticky"><div class="header-nav-inner"><div class="header-nav-menubtn"><i class="fas fa-bars"></i></div><div class="header-nav-menu"><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/"><span class="header-nav-menu-item__icon"><i class="fas fa-home"></i></span><span class="header-nav-menu-item__text">首页</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/archives/"><span class="header-nav-menu-item__icon"><i class="fas fa-folder-open"></i></span><span class="header-nav-menu-item__text">归档</span></a></div></div><div class="header-nav-mode"><div class="mode"><div class="mode-track"><span class="mode-track-moon"></span><span class="mode-track-sun"></span></div><div class="mode-thumb"></div></div></div></div></nav></div></header><main class="main" id="main"><div class="main-inner"><div class="content-wrap" id="content-wrap"><div class="content" id="content"><div class="archive"><div class="archive-total">目前共计 4 篇文章,继续加油!</div><section class="timeline"><time class="timeline-item timeline-item--year">2022</time><article class="timeline-item"><time class="timeline-item__time">03-15</time><h2 class="timeline-item__title"><a class="timeline-item__link" href="/2022/03/15/babel-basic/">Babel编译基础</a></h2></article><time class="timeline-item timeline-item--year">2021</time><article class="timeline-item"><time class="timeline-item__time">12-03</time><h2 class="timeline-item__title"><a class="timeline-item__link" href="/2021/12/03/%E7%AE%80%E5%8D%95%E4%BA%86%E8%A7%A3oop%E7%BC%96%E7%A8%8B%E6%80%9D%E6%83%B3%E5%92%8C%E5%B8%B8%E8%A7%81%E7%9A%84%E5%87%A0%E7%A7%8D%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/">简单了解面向对象编程(oop)和常见的几种设计模式</a></h2></article><article class="timeline-item"><time class="timeline-item__time">11-12</time><h2 class="timeline-item__title"><a class="timeline-item__link" href="/2021/11/12/%E5%8A%A0%E5%AF%86%E6%96%B9%E5%BC%8F%E6%A6%82%E8%BF%B0%20/">加密方式概述</a></h2></article><article class="timeline-item"><time class="timeline-item__time">11-11</time><h2 class="timeline-item__title"><a class="timeline-item__link" href="/2021/11/11/%E5%89%8D%E7%AB%AF%E7%BC%93%E5%AD%98/">前端缓存</a></h2></article></section></div></div></div><div class="sidebar-wrap" id="sidebar-wrap"><aside class="sidebar" id="sidebar"><section class="sidebar-toc hide"></section><!-- ov = overview--><section class="sidebar-ov"><div class="sidebar-ov-author"><div class="sidebar-ov-author__avatar"><img class="sidebar-ov-author__avatar_img" src="/images/icons/stun-logo.svg" alt="avatar"></div><p class="sidebar-ov-author__text">易服前端</p></div><div class="sidebar-ov-state"><a class="sidebar-ov-state-item sidebar-ov-state-item--posts" href="/archives/"><div class="sidebar-ov-state-item__count">4</div><div class="sidebar-ov-state-item__name">归档</div></a></div><div class="sidebar-ov-cc"><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" target="_blank" rel="noopener" data-popover="知识共享许可协议" data-popover-pos="up"><img src="/images/cc-by-nc-sa.svg"></a></div></section></aside></div><div class="clearfix"></div></div></main><footer class="footer" id="footer"><div class="footer-inner"><div><span>Copyright © 2022</span><span class="footer__icon"><i class="fas fa-heart"></i></span><span>易服智享前端团队</span></div><div><span><a href="http://hexo.io/" title="Hexo" target="_blank" rel="noopener">Hexo</a> 强力驱动</span><span> v5.4.1</span><span class="footer__devider">|</span><span>主题 - <a href="https://github.com/liuyib/hexo-theme-stun/" title="Stun" target="_blank" rel="noopener">Stun</a></span><span> v2.6.2</span></div></div></footer><div class="loading-bar" id="loading-bar"><div class="loading-bar__progress"></div></div><div class="back2top" id="back2top"><span class="back2top__icon"><i class="fas fa-rocket"></i></span></div></div><script src="https://cdn.jsdelivr.net/npm/jquery@v3.4.1/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@1.5.2/velocity.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@1.5.2/velocity.ui.min.js"></script><script src="/js/utils.js?v=2.6.2"></script><script src="/js/stun-boot.js?v=2.6.2"></script><script src="/js/scroll.js?v=2.6.2"></script><script src="/js/header.js?v=2.6.2"></script><script src="/js/sidebar.js?v=2.6.2"></script></body></html>
\ No newline at end of file
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="format-detection" content="telephone=no"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link rel="icon" href="/images/icons/favicon-16x16.png?v=2.6.2" type="image/png" sizes="16x16"><link rel="icon" href="/images/icons/favicon-32x32.png?v=2.6.2" type="image/png" sizes="32x32"><meta property="og:type" content="website">
<meta property="og:title" content="易服智享前端团队技术分享">
<meta property="og:url" content="http://example.com/archives/2021/index.html">
<meta property="og:site_name" content="易服智享前端团队技术分享">
<meta property="og:locale" content="zh_CN">
<meta property="article:author" content="易服智享前端团队">
<meta name="twitter:card" content="summary"><title>归档 | 易服智享前端团队技术分享</title><link ref="canonical" href="http://example.com/archives/2021/index.html"><link rel="dns-prefetch" href="https://cdn.jsdelivr.net"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.12.1/css/all.min.css" type="text/css"><link rel="stylesheet" href="/css/index.css?v=2.6.2"><script>var Stun = window.Stun || {};
var CONFIG = {
root: '/',
algolia: undefined,
assistSearch: undefined,
fontIcon: {"prompt":{"success":"fas fa-check-circle","info":"fas fa-arrow-circle-right","warning":"fas fa-exclamation-circle","error":"fas fa-times-circle"},"copyBtn":"fas fa-copy"},
sidebar: {"offsetTop":"20px","tocMaxDepth":6},
header: undefined,
postWidget: {"endText":true},
nightMode: {"enable":true},
back2top: {"enable":true},
codeblock: {"style":"default","highlight":"light","wordWrap":false},
reward: false,
fancybox: false,
zoomImage: {"gapAside":"20px"},
galleryWaterfall: undefined,
lazyload: false,
pjax: undefined,
externalLink: {"icon":{"enable":true,"name":"fas fa-external-link-alt"}},
shortcuts: undefined,
prompt: {"copyButton":"复制","copySuccess":"复制成功","copyError":"复制失败"},
sourcePath: {"js":"js","css":"css","images":"images"},
};
window.CONFIG = CONFIG;</script><meta name="generator" content="Hexo 5.4.1"></head><body><div class="container" id="container"><header class="header" id="header"><div class="header-inner header-inner--height header-inner--bgcolor"><nav class="header-nav header-nav--sticky"><div class="header-nav-inner"><div class="header-nav-menubtn"><i class="fas fa-bars"></i></div><div class="header-nav-menu"><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/"><span class="header-nav-menu-item__icon"><i class="fas fa-home"></i></span><span class="header-nav-menu-item__text">首页</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/archives/"><span class="header-nav-menu-item__icon"><i class="fas fa-folder-open"></i></span><span class="header-nav-menu-item__text">归档</span></a></div></div><div class="header-nav-mode"><div class="mode"><div class="mode-track"><span class="mode-track-moon"></span><span class="mode-track-sun"></span></div><div class="mode-thumb"></div></div></div></div></nav></div></header><main class="main" id="main"><div class="main-inner"><div class="content-wrap" id="content-wrap"><div class="content" id="content"><div class="archive"><div class="archive-total">目前共计 4 篇文章,继续加油!</div><section class="timeline"><time class="timeline-item timeline-item--year">2022</time><article class="timeline-item"><time class="timeline-item__time">03-15</time><h2 class="timeline-item__title"><a class="timeline-item__link" href="/2022/03/15/babel-basic/">Babel编译基础</a></h2></article><time class="timeline-item timeline-item--year">2021</time><article class="timeline-item"><time class="timeline-item__time">12-03</time><h2 class="timeline-item__title"><a class="timeline-item__link" href="/2021/12/03/%E7%AE%80%E5%8D%95%E4%BA%86%E8%A7%A3oop%E7%BC%96%E7%A8%8B%E6%80%9D%E6%83%B3%E5%92%8C%E5%B8%B8%E8%A7%81%E7%9A%84%E5%87%A0%E7%A7%8D%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/">简单了解面向对象编程(oop)和常见的几种设计模式</a></h2></article><article class="timeline-item"><time class="timeline-item__time">11-12</time><h2 class="timeline-item__title"><a class="timeline-item__link" href="/2021/11/12/%E5%8A%A0%E5%AF%86%E6%96%B9%E5%BC%8F%E6%A6%82%E8%BF%B0%20/">加密方式概述</a></h2></article><article class="timeline-item"><time class="timeline-item__time">11-11</time><h2 class="timeline-item__title"><a class="timeline-item__link" href="/2021/11/11/%E5%89%8D%E7%AB%AF%E7%BC%93%E5%AD%98/">前端缓存</a></h2></article></section></div></div></div><div class="sidebar-wrap" id="sidebar-wrap"><aside class="sidebar" id="sidebar"><section class="sidebar-toc hide"></section><!-- ov = overview--><section class="sidebar-ov"><div class="sidebar-ov-author"><div class="sidebar-ov-author__avatar"><img class="sidebar-ov-author__avatar_img" src="/images/icons/stun-logo.svg" alt="avatar"></div><p class="sidebar-ov-author__text">易服前端</p></div><div class="sidebar-ov-state"><a class="sidebar-ov-state-item sidebar-ov-state-item--posts" href="/archives/"><div class="sidebar-ov-state-item__count">4</div><div class="sidebar-ov-state-item__name">归档</div></a></div><div class="sidebar-ov-cc"><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" target="_blank" rel="noopener" data-popover="知识共享许可协议" data-popover-pos="up"><img src="/images/cc-by-nc-sa.svg"></a></div></section></aside></div><div class="clearfix"></div></div></main><footer class="footer" id="footer"><div class="footer-inner"><div><span>Copyright © 2022</span><span class="footer__icon"><i class="fas fa-heart"></i></span><span>易服智享前端团队</span></div><div><span><a href="http://hexo.io/" title="Hexo" target="_blank" rel="noopener">Hexo</a> 强力驱动</span><span> v5.4.1</span><span class="footer__devider">|</span><span>主题 - <a href="https://github.com/liuyib/hexo-theme-stun/" title="Stun" target="_blank" rel="noopener">Stun</a></span><span> v2.6.2</span></div></div></footer><div class="loading-bar" id="loading-bar"><div class="loading-bar__progress"></div></div><div class="back2top" id="back2top"><span class="back2top__icon"><i class="fas fa-rocket"></i></span></div></div><script src="https://cdn.jsdelivr.net/npm/jquery@v3.4.1/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@1.5.2/velocity.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@1.5.2/velocity.ui.min.js"></script><script src="/js/utils.js?v=2.6.2"></script><script src="/js/stun-boot.js?v=2.6.2"></script><script src="/js/scroll.js?v=2.6.2"></script><script src="/js/header.js?v=2.6.2"></script><script src="/js/sidebar.js?v=2.6.2"></script></body></html>
\ No newline at end of file
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="format-detection" content="telephone=no"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link rel="icon" href="/images/icons/favicon-16x16.png?v=2.6.2" type="image/png" sizes="16x16"><link rel="icon" href="/images/icons/favicon-32x32.png?v=2.6.2" type="image/png" sizes="32x32"><meta property="og:type" content="website">
<meta property="og:title" content="易服智享前端团队技术分享">
<meta property="og:url" content="http://example.com/archives/2022/03/index.html">
<meta property="og:site_name" content="易服智享前端团队技术分享">
<meta property="og:locale" content="zh_CN">
<meta property="article:author" content="易服智享前端团队">
<meta name="twitter:card" content="summary"><title>归档 | 易服智享前端团队技术分享</title><link ref="canonical" href="http://example.com/archives/2022/03/index.html"><link rel="dns-prefetch" href="https://cdn.jsdelivr.net"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.12.1/css/all.min.css" type="text/css"><link rel="stylesheet" href="/css/index.css?v=2.6.2"><script>var Stun = window.Stun || {};
var CONFIG = {
root: '/',
algolia: undefined,
assistSearch: undefined,
fontIcon: {"prompt":{"success":"fas fa-check-circle","info":"fas fa-arrow-circle-right","warning":"fas fa-exclamation-circle","error":"fas fa-times-circle"},"copyBtn":"fas fa-copy"},
sidebar: {"offsetTop":"20px","tocMaxDepth":6},
header: undefined,
postWidget: {"endText":true},
nightMode: {"enable":true},
back2top: {"enable":true},
codeblock: {"style":"default","highlight":"light","wordWrap":false},
reward: false,
fancybox: false,
zoomImage: {"gapAside":"20px"},
galleryWaterfall: undefined,
lazyload: false,
pjax: undefined,
externalLink: {"icon":{"enable":true,"name":"fas fa-external-link-alt"}},
shortcuts: undefined,
prompt: {"copyButton":"复制","copySuccess":"复制成功","copyError":"复制失败"},
sourcePath: {"js":"js","css":"css","images":"images"},
};
window.CONFIG = CONFIG;</script><meta name="generator" content="Hexo 5.4.1"></head><body><div class="container" id="container"><header class="header" id="header"><div class="header-inner header-inner--height header-inner--bgcolor"><nav class="header-nav header-nav--sticky"><div class="header-nav-inner"><div class="header-nav-menubtn"><i class="fas fa-bars"></i></div><div class="header-nav-menu"><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/"><span class="header-nav-menu-item__icon"><i class="fas fa-home"></i></span><span class="header-nav-menu-item__text">首页</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/archives/"><span class="header-nav-menu-item__icon"><i class="fas fa-folder-open"></i></span><span class="header-nav-menu-item__text">归档</span></a></div></div><div class="header-nav-mode"><div class="mode"><div class="mode-track"><span class="mode-track-moon"></span><span class="mode-track-sun"></span></div><div class="mode-thumb"></div></div></div></div></nav></div></header><main class="main" id="main"><div class="main-inner"><div class="content-wrap" id="content-wrap"><div class="content" id="content"><div class="archive"><div class="archive-total">目前共计 4 篇文章,继续加油!</div><section class="timeline"><time class="timeline-item timeline-item--year">2022</time><article class="timeline-item"><time class="timeline-item__time">03-15</time><h2 class="timeline-item__title"><a class="timeline-item__link" href="/2022/03/15/babel-basic/">Babel编译基础</a></h2></article><time class="timeline-item timeline-item--year">2021</time><article class="timeline-item"><time class="timeline-item__time">12-03</time><h2 class="timeline-item__title"><a class="timeline-item__link" href="/2021/12/03/%E7%AE%80%E5%8D%95%E4%BA%86%E8%A7%A3oop%E7%BC%96%E7%A8%8B%E6%80%9D%E6%83%B3%E5%92%8C%E5%B8%B8%E8%A7%81%E7%9A%84%E5%87%A0%E7%A7%8D%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/">简单了解面向对象编程(oop)和常见的几种设计模式</a></h2></article><article class="timeline-item"><time class="timeline-item__time">11-12</time><h2 class="timeline-item__title"><a class="timeline-item__link" href="/2021/11/12/%E5%8A%A0%E5%AF%86%E6%96%B9%E5%BC%8F%E6%A6%82%E8%BF%B0%20/">加密方式概述</a></h2></article><article class="timeline-item"><time class="timeline-item__time">11-11</time><h2 class="timeline-item__title"><a class="timeline-item__link" href="/2021/11/11/%E5%89%8D%E7%AB%AF%E7%BC%93%E5%AD%98/">前端缓存</a></h2></article></section></div></div></div><div class="sidebar-wrap" id="sidebar-wrap"><aside class="sidebar" id="sidebar"><section class="sidebar-toc hide"></section><!-- ov = overview--><section class="sidebar-ov"><div class="sidebar-ov-author"><div class="sidebar-ov-author__avatar"><img class="sidebar-ov-author__avatar_img" src="/images/icons/stun-logo.svg" alt="avatar"></div><p class="sidebar-ov-author__text">易服前端</p></div><div class="sidebar-ov-state"><a class="sidebar-ov-state-item sidebar-ov-state-item--posts" href="/archives/"><div class="sidebar-ov-state-item__count">4</div><div class="sidebar-ov-state-item__name">归档</div></a></div><div class="sidebar-ov-cc"><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" target="_blank" rel="noopener" data-popover="知识共享许可协议" data-popover-pos="up"><img src="/images/cc-by-nc-sa.svg"></a></div></section></aside></div><div class="clearfix"></div></div></main><footer class="footer" id="footer"><div class="footer-inner"><div><span>Copyright © 2022</span><span class="footer__icon"><i class="fas fa-heart"></i></span><span>易服智享前端团队</span></div><div><span><a href="http://hexo.io/" title="Hexo" target="_blank" rel="noopener">Hexo</a> 强力驱动</span><span> v5.4.1</span><span class="footer__devider">|</span><span>主题 - <a href="https://github.com/liuyib/hexo-theme-stun/" title="Stun" target="_blank" rel="noopener">Stun</a></span><span> v2.6.2</span></div></div></footer><div class="loading-bar" id="loading-bar"><div class="loading-bar__progress"></div></div><div class="back2top" id="back2top"><span class="back2top__icon"><i class="fas fa-rocket"></i></span></div></div><script src="https://cdn.jsdelivr.net/npm/jquery@v3.4.1/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@1.5.2/velocity.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@1.5.2/velocity.ui.min.js"></script><script src="/js/utils.js?v=2.6.2"></script><script src="/js/stun-boot.js?v=2.6.2"></script><script src="/js/scroll.js?v=2.6.2"></script><script src="/js/header.js?v=2.6.2"></script><script src="/js/sidebar.js?v=2.6.2"></script></body></html>
\ No newline at end of file
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="format-detection" content="telephone=no"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link rel="icon" href="/images/icons/favicon-16x16.png?v=2.6.2" type="image/png" sizes="16x16"><link rel="icon" href="/images/icons/favicon-32x32.png?v=2.6.2" type="image/png" sizes="32x32"><meta property="og:type" content="website">
<meta property="og:title" content="易服智享前端团队技术分享">
<meta property="og:url" content="http://example.com/archives/2022/index.html">
<meta property="og:site_name" content="易服智享前端团队技术分享">
<meta property="og:locale" content="zh_CN">
<meta property="article:author" content="易服智享前端团队">
<meta name="twitter:card" content="summary"><title>归档 | 易服智享前端团队技术分享</title><link ref="canonical" href="http://example.com/archives/2022/index.html"><link rel="dns-prefetch" href="https://cdn.jsdelivr.net"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.12.1/css/all.min.css" type="text/css"><link rel="stylesheet" href="/css/index.css?v=2.6.2"><script>var Stun = window.Stun || {};
var CONFIG = {
root: '/',
algolia: undefined,
assistSearch: undefined,
fontIcon: {"prompt":{"success":"fas fa-check-circle","info":"fas fa-arrow-circle-right","warning":"fas fa-exclamation-circle","error":"fas fa-times-circle"},"copyBtn":"fas fa-copy"},
sidebar: {"offsetTop":"20px","tocMaxDepth":6},
header: undefined,
postWidget: {"endText":true},
nightMode: {"enable":true},
back2top: {"enable":true},
codeblock: {"style":"default","highlight":"light","wordWrap":false},
reward: false,
fancybox: false,
zoomImage: {"gapAside":"20px"},
galleryWaterfall: undefined,
lazyload: false,
pjax: undefined,
externalLink: {"icon":{"enable":true,"name":"fas fa-external-link-alt"}},
shortcuts: undefined,
prompt: {"copyButton":"复制","copySuccess":"复制成功","copyError":"复制失败"},
sourcePath: {"js":"js","css":"css","images":"images"},
};
window.CONFIG = CONFIG;</script><meta name="generator" content="Hexo 5.4.1"></head><body><div class="container" id="container"><header class="header" id="header"><div class="header-inner header-inner--height header-inner--bgcolor"><nav class="header-nav header-nav--sticky"><div class="header-nav-inner"><div class="header-nav-menubtn"><i class="fas fa-bars"></i></div><div class="header-nav-menu"><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/"><span class="header-nav-menu-item__icon"><i class="fas fa-home"></i></span><span class="header-nav-menu-item__text">首页</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/archives/"><span class="header-nav-menu-item__icon"><i class="fas fa-folder-open"></i></span><span class="header-nav-menu-item__text">归档</span></a></div></div><div class="header-nav-mode"><div class="mode"><div class="mode-track"><span class="mode-track-moon"></span><span class="mode-track-sun"></span></div><div class="mode-thumb"></div></div></div></div></nav></div></header><main class="main" id="main"><div class="main-inner"><div class="content-wrap" id="content-wrap"><div class="content" id="content"><div class="archive"><div class="archive-total">目前共计 4 篇文章,继续加油!</div><section class="timeline"><time class="timeline-item timeline-item--year">2022</time><article class="timeline-item"><time class="timeline-item__time">03-15</time><h2 class="timeline-item__title"><a class="timeline-item__link" href="/2022/03/15/babel-basic/">Babel编译基础</a></h2></article><time class="timeline-item timeline-item--year">2021</time><article class="timeline-item"><time class="timeline-item__time">12-03</time><h2 class="timeline-item__title"><a class="timeline-item__link" href="/2021/12/03/%E7%AE%80%E5%8D%95%E4%BA%86%E8%A7%A3oop%E7%BC%96%E7%A8%8B%E6%80%9D%E6%83%B3%E5%92%8C%E5%B8%B8%E8%A7%81%E7%9A%84%E5%87%A0%E7%A7%8D%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/">简单了解面向对象编程(oop)和常见的几种设计模式</a></h2></article><article class="timeline-item"><time class="timeline-item__time">11-12</time><h2 class="timeline-item__title"><a class="timeline-item__link" href="/2021/11/12/%E5%8A%A0%E5%AF%86%E6%96%B9%E5%BC%8F%E6%A6%82%E8%BF%B0%20/">加密方式概述</a></h2></article><article class="timeline-item"><time class="timeline-item__time">11-11</time><h2 class="timeline-item__title"><a class="timeline-item__link" href="/2021/11/11/%E5%89%8D%E7%AB%AF%E7%BC%93%E5%AD%98/">前端缓存</a></h2></article></section></div></div></div><div class="sidebar-wrap" id="sidebar-wrap"><aside class="sidebar" id="sidebar"><section class="sidebar-toc hide"></section><!-- ov = overview--><section class="sidebar-ov"><div class="sidebar-ov-author"><div class="sidebar-ov-author__avatar"><img class="sidebar-ov-author__avatar_img" src="/images/icons/stun-logo.svg" alt="avatar"></div><p class="sidebar-ov-author__text">易服前端</p></div><div class="sidebar-ov-state"><a class="sidebar-ov-state-item sidebar-ov-state-item--posts" href="/archives/"><div class="sidebar-ov-state-item__count">4</div><div class="sidebar-ov-state-item__name">归档</div></a></div><div class="sidebar-ov-cc"><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" target="_blank" rel="noopener" data-popover="知识共享许可协议" data-popover-pos="up"><img src="/images/cc-by-nc-sa.svg"></a></div></section></aside></div><div class="clearfix"></div></div></main><footer class="footer" id="footer"><div class="footer-inner"><div><span>Copyright © 2022</span><span class="footer__icon"><i class="fas fa-heart"></i></span><span>易服智享前端团队</span></div><div><span><a href="http://hexo.io/" title="Hexo" target="_blank" rel="noopener">Hexo</a> 强力驱动</span><span> v5.4.1</span><span class="footer__devider">|</span><span>主题 - <a href="https://github.com/liuyib/hexo-theme-stun/" title="Stun" target="_blank" rel="noopener">Stun</a></span><span> v2.6.2</span></div></div></footer><div class="loading-bar" id="loading-bar"><div class="loading-bar__progress"></div></div><div class="back2top" id="back2top"><span class="back2top__icon"><i class="fas fa-rocket"></i></span></div></div><script src="https://cdn.jsdelivr.net/npm/jquery@v3.4.1/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@1.5.2/velocity.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@1.5.2/velocity.ui.min.js"></script><script src="/js/utils.js?v=2.6.2"></script><script src="/js/stun-boot.js?v=2.6.2"></script><script src="/js/scroll.js?v=2.6.2"></script><script src="/js/header.js?v=2.6.2"></script><script src="/js/sidebar.js?v=2.6.2"></script></body></html>
\ No newline at end of file
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="format-detection" content="telephone=no"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link rel="icon" href="/images/icons/favicon-16x16.png?v=2.6.2" type="image/png" sizes="16x16"><link rel="icon" href="/images/icons/favicon-32x32.png?v=2.6.2" type="image/png" sizes="32x32"><meta property="og:type" content="website">
<meta property="og:title" content="易服智享前端团队技术分享">
<meta property="og:url" content="http://example.com/archives/index.html">
<meta property="og:site_name" content="易服智享前端团队技术分享">
<meta property="og:locale" content="zh_CN">
<meta property="article:author" content="易服智享前端团队">
<meta name="twitter:card" content="summary"><title>归档 | 易服智享前端团队技术分享</title><link ref="canonical" href="http://example.com/archives/index.html"><link rel="dns-prefetch" href="https://cdn.jsdelivr.net"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.12.1/css/all.min.css" type="text/css"><link rel="stylesheet" href="/css/index.css?v=2.6.2"><script>var Stun = window.Stun || {};
var CONFIG = {
root: '/',
algolia: undefined,
assistSearch: undefined,
fontIcon: {"prompt":{"success":"fas fa-check-circle","info":"fas fa-arrow-circle-right","warning":"fas fa-exclamation-circle","error":"fas fa-times-circle"},"copyBtn":"fas fa-copy"},
sidebar: {"offsetTop":"20px","tocMaxDepth":6},
header: undefined,
postWidget: {"endText":true},
nightMode: {"enable":true},
back2top: {"enable":true},
codeblock: {"style":"default","highlight":"light","wordWrap":false},
reward: false,
fancybox: false,
zoomImage: {"gapAside":"20px"},
galleryWaterfall: undefined,
lazyload: false,
pjax: undefined,
externalLink: {"icon":{"enable":true,"name":"fas fa-external-link-alt"}},
shortcuts: undefined,
prompt: {"copyButton":"复制","copySuccess":"复制成功","copyError":"复制失败"},
sourcePath: {"js":"js","css":"css","images":"images"},
};
window.CONFIG = CONFIG;</script><meta name="generator" content="Hexo 5.4.1"></head><body><div class="container" id="container"><header class="header" id="header"><div class="header-inner header-inner--height header-inner--bgcolor"><nav class="header-nav header-nav--sticky"><div class="header-nav-inner"><div class="header-nav-menubtn"><i class="fas fa-bars"></i></div><div class="header-nav-menu"><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/"><span class="header-nav-menu-item__icon"><i class="fas fa-home"></i></span><span class="header-nav-menu-item__text">首页</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/archives/"><span class="header-nav-menu-item__icon"><i class="fas fa-folder-open"></i></span><span class="header-nav-menu-item__text">归档</span></a></div></div><div class="header-nav-mode"><div class="mode"><div class="mode-track"><span class="mode-track-moon"></span><span class="mode-track-sun"></span></div><div class="mode-thumb"></div></div></div></div></nav></div></header><main class="main" id="main"><div class="main-inner"><div class="content-wrap" id="content-wrap"><div class="content" id="content"><div class="archive"><div class="archive-total">目前共计 4 篇文章,继续加油!</div><section class="timeline"><time class="timeline-item timeline-item--year">2022</time><article class="timeline-item"><time class="timeline-item__time">03-15</time><h2 class="timeline-item__title"><a class="timeline-item__link" href="/2022/03/15/babel-basic/">Babel编译基础</a></h2></article><time class="timeline-item timeline-item--year">2021</time><article class="timeline-item"><time class="timeline-item__time">12-03</time><h2 class="timeline-item__title"><a class="timeline-item__link" href="/2021/12/03/%E7%AE%80%E5%8D%95%E4%BA%86%E8%A7%A3oop%E7%BC%96%E7%A8%8B%E6%80%9D%E6%83%B3%E5%92%8C%E5%B8%B8%E8%A7%81%E7%9A%84%E5%87%A0%E7%A7%8D%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/">简单了解面向对象编程(oop)和常见的几种设计模式</a></h2></article><article class="timeline-item"><time class="timeline-item__time">11-12</time><h2 class="timeline-item__title"><a class="timeline-item__link" href="/2021/11/12/%E5%8A%A0%E5%AF%86%E6%96%B9%E5%BC%8F%E6%A6%82%E8%BF%B0%20/">加密方式概述</a></h2></article><article class="timeline-item"><time class="timeline-item__time">11-11</time><h2 class="timeline-item__title"><a class="timeline-item__link" href="/2021/11/11/%E5%89%8D%E7%AB%AF%E7%BC%93%E5%AD%98/">前端缓存</a></h2></article></section></div></div></div><div class="sidebar-wrap" id="sidebar-wrap"><aside class="sidebar" id="sidebar"><section class="sidebar-toc hide"></section><!-- ov = overview--><section class="sidebar-ov"><div class="sidebar-ov-author"><div class="sidebar-ov-author__avatar"><img class="sidebar-ov-author__avatar_img" src="/images/icons/stun-logo.svg" alt="avatar"></div><p class="sidebar-ov-author__text">易服前端</p></div><div class="sidebar-ov-state"><a class="sidebar-ov-state-item sidebar-ov-state-item--posts" href="/archives/"><div class="sidebar-ov-state-item__count">4</div><div class="sidebar-ov-state-item__name">归档</div></a></div><div class="sidebar-ov-cc"><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" target="_blank" rel="noopener" data-popover="知识共享许可协议" data-popover-pos="up"><img src="/images/cc-by-nc-sa.svg"></a></div></section></aside></div><div class="clearfix"></div></div></main><footer class="footer" id="footer"><div class="footer-inner"><div><span>Copyright © 2022</span><span class="footer__icon"><i class="fas fa-heart"></i></span><span>易服智享前端团队</span></div><div><span><a href="http://hexo.io/" title="Hexo" target="_blank" rel="noopener">Hexo</a> 强力驱动</span><span> v5.4.1</span><span class="footer__devider">|</span><span>主题 - <a href="https://github.com/liuyib/hexo-theme-stun/" title="Stun" target="_blank" rel="noopener">Stun</a></span><span> v2.6.2</span></div></div></footer><div class="loading-bar" id="loading-bar"><div class="loading-bar__progress"></div></div><div class="back2top" id="back2top"><span class="back2top__icon"><i class="fas fa-rocket"></i></span></div></div><script src="https://cdn.jsdelivr.net/npm/jquery@v3.4.1/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@1.5.2/velocity.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@1.5.2/velocity.ui.min.js"></script><script src="/js/utils.js?v=2.6.2"></script><script src="/js/stun-boot.js?v=2.6.2"></script><script src="/js/scroll.js?v=2.6.2"></script><script src="/js/header.js?v=2.6.2"></script><script src="/js/sidebar.js?v=2.6.2"></script></body></html>
\ No newline at end of file
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
body {
margin: 0;
}
main {
display: block;
}
h1 {
margin: 0.67em 0;
font-size: 2em;
}
hr {
overflow: visible; /* 2 */
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
}
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
a {
background-color: transparent;
}
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
b,
strong {
font-weight: bolder;
}
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
small {
font-size: 80%;
}
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
img {
border-style: none;
}
button,
input,
optgroup,
select,
textarea {
margin: 0; /* 2 */
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
}
button,
input {
overflow: visible; /* 1 */
}
button,
select {
text-transform: none; /* 1 */
}
button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button;
}
button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
button:-moz-focusring,
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
outline: 1px dotted ButtonText;
}
fieldset {
padding: 0.35em 0.75em 0.625em;
}
legend {
display: table; /* 1 */
box-sizing: border-box; /* 1 */
padding: 0; /* 3 */
max-width: 100%; /* 1 */
white-space: normal; /* 1 */
color: inherit; /* 2 */
}
progress {
vertical-align: baseline;
}
textarea {
overflow: auto;
}
[type='checkbox'],
[type='radio'] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
height: auto;
}
[type='search'] {
outline-offset: -2px; /* 2 */
-webkit-appearance: textfield; /* 1 */
}
[type='search']::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
font: inherit; /* 2 */
-webkit-appearance: button; /* 1 */
}
details {
display: block;
}
summary {
display: list-item;
}
template {
display: none;
}
[hidden] {
display: none;
}
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
body {
margin: 0;
}
main {
display: block;
}
h1 {
margin: 0.67em 0;
font-size: 2em;
}
hr {
overflow: visible; /* 2 */
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
}
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
a {
background-color: transparent;
}
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
b,
strong {
font-weight: bolder;
}
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
small {
font-size: 80%;
}
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
img {
border-style: none;
}
button,
input,
optgroup,
select,
textarea {
margin: 0; /* 2 */
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
}
button,
input {
overflow: visible; /* 1 */
}
button,
select {
text-transform: none; /* 1 */
}
button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button;
}
button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
button:-moz-focusring,
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
outline: 1px dotted ButtonText;
}
fieldset {
padding: 0.35em 0.75em 0.625em;
}
legend {
display: table; /* 1 */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; /* 1 */
padding: 0; /* 3 */
max-width: 100%; /* 1 */
white-space: normal; /* 1 */
color: inherit; /* 2 */
}
progress {
vertical-align: baseline;
}
textarea {
overflow: auto;
}
[type='checkbox'],
[type='radio'] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
height: auto;
}
[type='search'] {
outline-offset: -2px; /* 2 */
-webkit-appearance: textfield; /* 1 */
}
[type='search']::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
font: inherit; /* 2 */
-webkit-appearance: button; /* 1 */
}
details {
display: block;
}
summary {
display: list-item;
}
template {
display: none;
}
[hidden] {
display: none;
}
:root {
--color-gray-100: #fff;
--color-gray-150: #f9f9f9;
--color-gray-200: #f5f6f7;
--color-gray-250: #efefef;
--color-gray-260: #e5e7ea;
--color-gray-300: #dadada;
--color-gray-400: #ccd0d5;
--color-gray-500: #bec3c9;
--color-gray-550: #adadad;
--color-gray-600: #8d949e;
--color-gray-650: #757474;
--color-gray-700: #606770;
--color-gray-800: #444950;
--color-gray-850: #303846;
--color-gray-900: #2c323c;
--color-gray-950: #1c1e21;
--color-font: var(--color-gray-900);
--color-card: var(--color-gray-100);
--color-blue-200: #ebeef5;
}
html.nightmode {
--color-gray-100: #1c1e21;
--color-gray-150: #2c323c;
--color-gray-200: #303846;
--color-gray-250: #444950;
--color-gray-260: #555b64;
--color-gray-300: #606770;
--color-gray-400: #757474;
--color-gray-500: #8d949e;
--color-gray-550: #959595;
--color-gray-600: #bec3c9;
--color-gray-650: #ccd0d5;
--color-gray-700: #dadada;
--color-gray-800: #eaecef;
--color-gray-850: #f5f6f7;
--color-gray-900: #f9f9f9;
--color-gray-950: #fff;
--color-font: var(--color-gray-600);
--color-card: var(--color-gray-150);
--color-blue-200: #444950;
}
::selection {
color: #fff;
background-color: #8be0e1;
}
*,
*::before,
*::after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size: 20px;
}
body {
margin: 0;
padding: 0;
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif, Arial;
font-size: 14px;
line-height: 2;
color: var(--color-font);
background-color: var(--color-gray-250);
}
h1,
h2,
h3,
h4,
h5,
h6 {
padding: 0;
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif, Arial;
font-weight: 700;
line-height: 1.5;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.25em;
}
h4 {
font-size: 1em;
}
h5 {
font-size: 0.875em;
}
h6 {
font-size: 0.85em;
}
p {
margin: 0 0 1rem;
}
a {
text-decoration: none;
color: #058ed2;
background-color: transparent;
outline: none;
cursor: pointer;
}
img,
video,
iframe {
display: block;
margin-right: auto;
margin-left: auto;
max-width: 100%;
}
hr {
margin: 1rem 0;
border: 2px dashed #b8dcfd;
height: 0;
}
blockquote {
margin: 0;
border-left: 5px solid var(--color-gray-300);
padding: 0 1rem;
background-color: var(--color-gray-200);
}
blockquote cite::before {
content: '--';
padding: 0 0.25rem;
}
code {
white-space: normal;
word-wrap: break-word;
word-break: break-word;
border-radius: 3px;
padding: 1px 5px;
font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace;
font-size: 0.95em;
color: var(--color-gray-700);
background-color: var(--color-gray-200);
}
dt {
font-weight: 700;
}
dd {
margin: 0;
padding: 0;
}
table {
border-spacing: 0;
border-collapse: collapse;
width: 100%;
}
th,
td {
border: 1px solid var(--color-blue-200);
padding: 0 5px;
}
acronym,
abbr {
cursor: help;
}
kbd {
display: inline-block;
border: 1px solid var(--color-gray-500);
border-radius: 3px;
padding: 0.1rem 0.2rem;
font-family: consolas, 'Liberation Mono', courier, monospace;
font-size: 0.85em;
font-weight: 700;
line-height: 1;
white-space: nowrap;
color: var(--color-gray-850);
background-color: var(--color-gray-150);
-webkit-box-shadow: 0 -1px 0 var(--color-gray-300) inset;
box-shadow: 0 -1px 0 var(--color-gray-300) inset;
}
.clearfix {
zoom: 1;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
[data-popover] {
position: relative;
}
[data-popover]::before {
position: absolute;
top: 0;
left: 50%;
z-index: 2;
font-family: sans-serif, Arial;
font-size: 14px;
font-weight: normal;
font-style: normal;
line-height: 2;
white-space: nowrap;
color: #fff;
background-color: rgba(0,0,0,0.9);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
text-shadow: none;
-webkit-transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
-moz-transition: opacity 0.2s ease, -moz-transform 0.2s ease;
-o-transition: opacity 0.2s ease, -o-transform 0.2s ease;
-ms-transition: opacity 0.2s ease, -ms-transform 0.2s ease;
transition: opacity 0.2s ease, transform 0.2s ease;
-webkit-transform: translate(-50%, -70%);
-moz-transform: translate(-50%, -70%);
-o-transform: translate(-50%, -70%);
-ms-transform: translate(-50%, -70%);
transform: translate(-50%, -70%);
pointer-events: none;
}
[data-popover]::before {
content: attr(data-popover);
border-radius: 4px;
padding: 0.2rem 0.6rem;
}
@media (min-width: 991.98px) {
[data-popover-pos='up']:hover::before {
opacity: 1;
-ms-filter: none;
filter: none;
-webkit-transform: translate(-50%, -120%);
-moz-transform: translate(-50%, -120%);
-o-transform: translate(-50%, -120%);
-ms-transform: translate(-50%, -120%);
transform: translate(-50%, -120%);
}
}
.stun-message {
position: fixed;
top: 1rem;
left: 50%;
z-index: 2;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-o-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.stun-alert {
position: relative;
border-radius: 3px;
padding: 8px 12px;
font-size: 16px;
line-height: 1rem;
background-color: #fff;
-webkit-box-shadow: 0 4px 12px rgba(0,0,0,0.15);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.stun-alert-success {
color: #52c41a;
}
.stun-alert-success ~ i {
color: #52c41a;
}
.stun-alert-info {
color: #1890ff;
}
.stun-alert-info ~ i {
color: #1890ff;
}
.stun-alert-warning {
color: #faad14;
}
.stun-alert-warning ~ i {
color: #faad14;
}
.stun-alert-error {
color: #f5222d;
}
.stun-alert-error ~ i {
color: #f5222d;
}
.stun-alert-description {
margin-left: 0.5rem;
}
.anime-close::before,
.anime-close::after {
-webkit-transition: -webkit-transform 0.2s ease;
-moz-transition: -moz-transform 0.2s ease;
-o-transition: -o-transform 0.2s ease;
-ms-transition: -ms-transform 0.2s ease;
transition: transform 0.2s ease;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.anime-close::after {
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.anime-close:hover::before,
.anime-close:hover::after {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
}
.container {
white-space: normal;
word-wrap: break-word;
word-break: break-word;
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
overflow: hidden; /* !!! */
position: relative;
min-height: 100vh;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.header {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.footer {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.main {
width: 100%;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
}
.main-inner {
margin: 0 auto;
padding: 20px;
width: 100%;
font-size: 16px;
}
.content-wrap {
width: calc(100% - 330px);
float: left;
}
.content-wrap--noside {
float: none;
margin: 0 auto;
}
.content {
width: 100%;
border-radius: 5px;
padding: 1rem 2rem;
background-color: var(--color-card);
}
.content img {
border: 1px solid var(--color-gray-300);
border-radius: 3px;
padding: 0.2rem;
}
.content h1:hover .heading-link,
.content h2:hover .heading-link,
.content h3:hover .heading-link,
.content h4:hover .heading-link,
.content h5:hover .heading-link,
.content h6:hover .heading-link {
visibility: visible;
}
.heading-link {
display: inline-block;
visibility: hidden;
margin: -10px 0 0 -20px;
padding-right: 5px;
width: 20px;
height: 16px;
font-size: 16px;
line-height: 20px;
vertical-align: middle;
color: var(--color-font);
}
.content-home {
padding: 0 !important;
background-color: transparent;
}
.pullquote.left {
text-align: left;
}
.pullquote.right {
text-align: right;
}
.post-body h1,
.post-body h2 {
border-bottom: 1px solid var(--color-gray-250);
padding-bottom: 0.3em;
}
.table-container {
overflow: auto;
margin-bottom: 1rem;
}
.header-inner {
width: 100%;
font-size: 18px;
background-color: #2d2e30;
}
.header-inner--bgcolor {
background-color: #333;
}
.header-inner--height {
height: 50px !important;
}
.header-nav {
position: relative;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 50px;
-webkit-transition: -webkit-transform 0.2s ease-out, background-color 0.2s ease;
-moz-transition: -moz-transform 0.2s ease-out, background-color 0.2s ease;
-o-transition: -o-transform 0.2s ease-out, background-color 0.2s ease;
-ms-transition: -ms-transform 0.2s ease-out, background-color 0.2s ease;
transition: transform 0.2s ease-out, background-color 0.2s ease;
}
.header-nav--fixed {
position: fixed;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-o-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.header-nav--sticky {
position: fixed;
background-color: #333;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
.header-nav.slider--down {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-o-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.header-nav.slider--up {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
.header-nav.slider--clear {
-webkit-transition: background-color 0.2s ease;
-moz-transition: background-color 0.2s ease;
-o-transition: background-color 0.2s ease;
-ms-transition: background-color 0.2s ease;
transition: background-color 0.2s ease;
}
.header-nav-inner {
margin: 0 auto;
padding: 20px;
padding-top: 0 !important;
padding-bottom: 0 !important;
width: 100%;
height: 100%;
}
.header-nav-menubtn {
display: none;
padding: 0 0.5rem;
line-height: 50px;
color: #f5f6f7;
cursor: pointer;
}
.header-nav-menu-item__link,
.header-nav-submenu-item__link {
display: block;
color: #f5f6f7;
}
.header-nav-menu-item__icon,
.header-nav-submenu-item__icon,
.header-nav-menu-item__text,
.header-nav-submenu-item__text {
margin: 0 3px;
}
.header-nav-menu-item__link {
padding: 0 0.5rem;
-webkit-transition: color 0.2s ease, background-color 0.2s ease;
-moz-transition: color 0.2s ease, background-color 0.2s ease;
-o-transition: color 0.2s ease, background-color 0.2s ease;
-ms-transition: color 0.2s ease, background-color 0.2s ease;
transition: color 0.2s ease, background-color 0.2s ease;
}
.header-nav-menu-item__link:hover {
color: #f4f5f5;
background-color: #999;
}
.header-nav-submenu-item__link {
padding: 0.75rem 0.5rem;
-webkit-transition: color 0.2s ease, background-color 0.2s ease;
-moz-transition: color 0.2s ease, background-color 0.2s ease;
-o-transition: color 0.2s ease, background-color 0.2s ease;
-ms-transition: color 0.2s ease, background-color 0.2s ease;
transition: color 0.2s ease, background-color 0.2s ease;
}
.header-nav-submenu-item__link:hover {
color: #f4f5f5;
background-color: #999;
}
.header-nav-menu {
display: none;
height: 100%;
line-height: 50px;
}
.header-nav-menu-item {
float: left;
position: relative;
margin: 0 1rem 0 0;
height: 50px;
text-align: center;
cursor: pointer;
}
.header-nav-menu-item:last-child {
margin: 0;
}
.header-nav-submenu {
display: none;
position: absolute;
right: -0.5rem;
left: -0.5rem;
width: auto;
background-color: #2d2e30;
}
.header-nav-submenu.hide--force {
display: none !important;
}
.header-nav-submenu-item {
margin: 0;
padding: 0;
width: 100%;
font-size: 18px;
line-height: 1;
text-align: center;
}
.header-nav-mode {
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
float: right;
padding: 0 0.5rem;
height: 100%;
line-height: 50px;
-webkit-box-align: center;
-moz-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.header-banner {
position: relative;
z-index: 0;
width: 100%;
height: 100%;
}
.header-banner-info {
position: absolute;
top: 50%;
left: 0;
padding: 0 0.5rem;
width: 100%;
text-align: center;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.header-banner-info__title {
margin-bottom: 2rem;
font-size: 4rem;
font-weight: 700;
line-height: 1;
color: #f5f6f7;
}
.header-banner-info__subtitle {
font-size: 1.2rem;
font-weight: 400;
color: #f5f6f7;
}
.footer__icon {
display: inline-block;
margin: 0 0.4rem;
font-size: 1em;
color: #f00;
}
.footer-inner {
position: relative;
padding: 1rem;
font-size: 16px;
text-align: center;
color: #f5f6f7;
background-color: #2d2e30;
}
.footer a {
color: #c20808;
-webkit-transition: color 0.2s ease;
-moz-transition: color 0.2s ease;
-o-transition: color 0.2s ease;
-ms-transition: color 0.2s ease;
transition: color 0.2s ease;
}
.footer a:hover {
color: #ed0b0b;
}
.footer__devider {
margin: 0 10px;
}
.sidebar {
border-radius: 5px;
padding: 1rem 2rem;
background-color: var(--color-card);
padding: 1rem;
width: 300px;
font-size: 16px;
}
.sidebar--sticky {
position: fixed;
top: 20px;
z-index: 0;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-o-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.sidebar .hide {
display: none;
}
.sidebar-wrap {
width: 300px;
float: right;
}
.sidebar-nav {
padding-bottom: 1em;
text-align: center;
}
.sidebar-nav-toc,
.sidebar-nav-ov {
border-bottom: 1px solid var(--color-gray-150);
padding: 0.3em 0.5em;
color: var(--color-gray-800);
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
transition: opacity 0.2s;
}
.sidebar-nav-toc:hover,
.sidebar-nav-ov:hover {
color: #fc6423;
cursor: pointer;
}
.sidebar-nav .current {
border-color: #fc6423;
color: #fc6423;
}
.sidebar-toc {
overflow: auto;
position: relative;
max-height: 70vh;
white-space: normal;
word-wrap: break-word;
word-break: break-word;
}
.sidebar-toc .toc-child {
display: none;
}
.sidebar-toc .active > .toc-child {
display: block;
}
.sidebar-toc .current > .toc-child {
display: block;
}
.sidebar-toc .active > a,
.sidebar-toc .current > a {
color: #fc6423;
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
-o-transition: color 0.3s;
-ms-transition: color 0.3s;
transition: color 0.3s;
}
.sidebar-toc ol,
.sidebar-toc li {
list-style: none;
}
.sidebar-toc ol {
margin: 0;
padding-left: 1em;
}
.sidebar-ov-author {
width: 100%;
text-align: center;
}
.sidebar-ov-author__avatar {
margin: 0 auto;
width: 120px;
height: 120px;
}
.sidebar-ov-author__avatar_img {
opacity: 1;
-ms-filter: none;
filter: none;
}
.sidebar-ov-author__avatar:hover .sidebar-ov-author__avatar_img {
-webkit-animation: avatar-turn 0.8s both ease-out;
-moz-animation: avatar-turn 0.8s both ease-out;
-o-animation: avatar-turn 0.8s both ease-out;
-ms-animation: avatar-turn 0.8s both ease-out;
animation: avatar-turn 0.8s both ease-out;
}
@-moz-keyframes avatar-turn {
100% {
-webkit-transform: rotate(1turn);
-moz-transform: rotate(1turn);
-o-transform: rotate(1turn);
-ms-transform: rotate(1turn);
transform: rotate(1turn);
}
}
@-webkit-keyframes avatar-turn {
100% {
-webkit-transform: rotate(1turn);
-moz-transform: rotate(1turn);
-o-transform: rotate(1turn);
-ms-transform: rotate(1turn);
transform: rotate(1turn);
}
}
@-o-keyframes avatar-turn {
100% {
-webkit-transform: rotate(1turn);
-moz-transform: rotate(1turn);
-o-transform: rotate(1turn);
-ms-transform: rotate(1turn);
transform: rotate(1turn);
}
}
@keyframes avatar-turn {
100% {
-webkit-transform: rotate(1turn);
-moz-transform: rotate(1turn);
-o-transform: rotate(1turn);
-ms-transform: rotate(1turn);
transform: rotate(1turn);
}
}
.sidebar-ov-author__text {
margin: 0.5rem 0 0;
font-weight: 600;
}
.sidebar-ov-state {
padding: 0.5rem 0;
text-align: center;
}
.sidebar-ov-state-item {
display: inline-block;
width: 33.3%;
line-height: 1.5em;
-webkit-transition: color 0.2s ease;
-moz-transition: color 0.2s ease;
-o-transition: color 0.2s ease;
-ms-transition: color 0.2s ease;
transition: color 0.2s ease;
}
.sidebar-ov-state-item:not(:last-child) {
border-right: 1px dashed var(--color-gray-300);
}
.sidebar-ov-state-item--posts {
color: #54bcff;
}
.sidebar-ov-state-item--posts:hover {
color: #0090ed;
}
.sidebar-ov-state-item--categories {
color: var(--color-gray-700);
}
.sidebar-ov-state-item--categories:hover {
color: var(--color-gray-900);
}
.sidebar-ov-state-item--tags {
color: #ff8956;
}
.sidebar-ov-state-item--tags:hover {
color: #ef4800;
}
.sidebar-ov-state-item__count {
font-weight: 600;
color: var(--color-gray-950);
}
.sidebar-ov-cc {
padding-top: 0.5rem;
text-align: center;
}
.sidebar-reading {
overflow: hidden;
margin-top: 0.5em;
text-align: center;
}
.sidebar-reading-info {
margin-bottom: 0.3em;
}
.sidebar-reading-line {
width: 100%;
height: 1px;
background-color: #fc6423;
-webkit-transition: -webkit-transform 0.2s ease;
-moz-transition: -moz-transform 0.2s ease;
-o-transition: -o-transform 0.2s ease;
-ms-transition: -ms-transform 0.2s ease;
transition: transform 0.2s ease;
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-o-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
.archive {
margin-left: 1rem;
}
.archive-total {
position: relative;
padding: 0 0 1.5rem 1.5rem;
font-size: calc(1em + 2px);
}
.archive-total::before {
content: '';
position: absolute;
top: 1em;
bottom: -1em;
left: 0;
border-left: 0.2rem dashed var(--color-gray-250);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-o-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.archive-total::after {
content: '';
position: absolute;
top: 1em;
left: 0;
border: 0.15rem solid #6ec5ff;
border-radius: 50%;
width: 0.6rem;
height: 0.6rem;
background-color: var(--color-gray-250);
-webkit-transition: border-color 0.2s ease;
-moz-transition: border-color 0.2s ease;
-o-transition: border-color 0.2s ease;
-ms-transition: border-color 0.2s ease;
transition: border-color 0.2s ease;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.archive-total:hover::after {
border-color: #fc6423;
}
.tagcloud,
.category {
width: 100%;
}
.tagcloud-total,
.category-total {
font-size: calc(1em + 10px);
text-align: center;
cursor: default;
}
.tagcloud {
text-align: center;
}
.tagcloud-item a {
margin: 0 0.4rem;
-webkit-transition: color 0.2s ease;
-moz-transition: color 0.2s ease;
-o-transition: color 0.2s ease;
-ms-transition: color 0.2s ease;
transition: color 0.2s ease;
}
.tagcloud-item a:hover {
color: #fc6423 !important;
}
.category-list-item::before {
color: #49b1f5;
}
.category-list-item:hover::before {
color: #fc6423;
}
.category-list-link {
font-size: 1em;
color: #49b1f5;
-webkit-transition: color 0.2s ease;
-moz-transition: color 0.2s ease;
-o-transition: color 0.2s ease;
-ms-transition: color 0.2s ease;
transition: color 0.2s ease;
}
.category-list-link:hover {
color: #fc6423;
}
.category-list-count {
margin-left: 0.3em;
font-size: 13px;
color: var(--color-gray-600);
}
.category-list-count::before {
content: '(';
}
.category-list-count::after {
content: ')';
}
.categorypage-title,
.tagpage-title {
font-size: 24px;
text-align: center;
}
.categorypage-title__name,
.tagpage-title__name {
color: #49b1f5;
}
.custompage {
width: 100%;
}
.timeline {
position: relative;
}
.timeline::before {
content: '';
position: absolute;
top: 1em;
bottom: 1em;
left: 0;
border-left: 0.2rem solid var(--color-gray-250);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-o-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.timeline-item {
display: block;
position: relative;
margin-bottom: 0.8rem;
padding-left: 1.5rem;
width: 100%;
-webkit-box-align: center;
-moz-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.timeline-item::before {
content: '';
position: absolute;
top: 50%;
left: 0;
border-radius: 50%;
width: 0.3rem;
height: 0.3rem;
background-color: #6ec5ff;
-webkit-transition: background-color 0.2s ease;
-moz-transition: background-color 0.2s ease;
-o-transition: background-color 0.2s ease;
-ms-transition: background-color 0.2s ease;
transition: background-color 0.2s ease;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.timeline-item:hover::before {
background-color: #fc6423;
}
.timeline-item:last-child {
margin-bottom: 0;
}
.timeline-item--year {
font-weight: 700;
}
.timeline-item--year::before {
border: 0.12rem solid #6ec5ff;
width: 0.4rem;
height: 0.4rem;
background-color: var(--color-gray-250);
}
.timeline-item--year:hover::before {
border-color: #fc6423;
background-color: var(--color-gray-250);
}
.timeline-item__time {
display: inline-block;
width: 3.5rem;
vertical-align: middle;
color: #99a9bf;
-webkit-transform: translateY(3%);
-moz-transform: translateY(3%);
-o-transform: translateY(3%);
-ms-transform: translateY(3%);
transform: translateY(3%);
}
.timeline-item__title {
display: inline-block;
margin: 0;
width: calc(100% - 4.5rem);
font-size: 1em;
font-weight: normal;
vertical-align: middle;
}
.timeline-item__link {
color: var(--color-gray-900);
}
.postlist-item {
margin: 0 0 1.5rem;
width: 100%;
border-radius: 5px;
padding: 1rem 2rem;
background-color: var(--color-card);
}
.post-readmore {
margin-top: 1.5rem;
text-align: center;
}
.post-readmore__link {
display: inline-block;
border-radius: 5px;
padding: 0 0.6em;
color: var(--color-gray-200);
background-color: #73c8ff;
-webkit-transition: background-color 0.2s ease;
-moz-transition: background-color 0.2s ease;
-o-transition: background-color 0.2s ease;
-ms-transition: background-color 0.2s ease;
transition: background-color 0.2s ease;
cursor: pointer;
}
.post-readmore__link:hover {
color: var(--color-gray-200);
background-color: #49b1f5;
}
.post-readmore__icon {
margin-left: 0.3rem;
}
.post-header {
position: relative;
margin-bottom: 1rem;
font-size: 1em;
text-align: center;
}
.post-title {
margin: 0;
color: var(--color-gray-950);
cursor: auto;
}
.post-title__link {
position: relative;
color: var(--color-gray-800);
white-space: normal;
word-wrap: break-word;
word-break: break-word;
}
.post-title__link::before {
content: '';
visibility: hidden;
position: absolute;
right: 0;
bottom: -4px;
left: 0;
height: 2px;
background-color: var(--color-gray-800);
-webkit-transition: -webkit-transform 0.2s ease-in-out;
-moz-transition: -moz-transform 0.2s ease-in-out;
-o-transition: -o-transform 0.2s ease-in-out;
-ms-transition: -ms-transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out;
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
-o-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
}
.post-title__link:hover {
color: var(--color-gray-800);
}
.post-title__link:hover::before {
visibility: visible;
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
-o-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
.post-meta-item:not(:first-child)::before {
content: '•';
margin: 0 0.5rem;
color: var(--color-gray-700);
}
.post-meta-item__icon,
.post-meta-item__info,
.post-meta-item__value {
margin: 0 2px;
}
.post-meta-item--createtime {
color: var(--color-gray-700);
}
.post-meta-item--updatetime {
color: #49b1f5;
}
.post-meta-item--visitors {
color: #fc6423;
}
.post-ending {
margin-bottom: 1rem;
}
.post-copyright {
margin-bottom: 1rem;
}
.post-tags {
margin-bottom: 1rem;
}
.post-tags-item {
margin: 0 0.5rem;
}
.post-tags-item:hover {
cursor: pointer;
}
.post-tags-item__icon,
.post-tags-item__link {
margin: 0.1rem;
color: #49b1f5;
-webkit-transition: color 0.2s;
-moz-transition: color 0.2s;
-o-transition: color 0.2s;
-ms-transition: color 0.2s;
transition: color 0.2s;
}
.post-tags-item:hover .post-tags-item__icon,
.post-tags-item:hover .post-tags-item__link {
color: #fc6423;
}
.post-reward {
margin-bottom: 1rem;
}
.post-paginator {
border-top: 1px solid var(--color-gray-250);
padding-top: 1rem;
}
.highlight figcaption span:first-child::before {
margin: 0 0.6rem 0 0;
color: var(--color-gray-550);
}
.highlight.markdown figcaption span:first-child::before {
content: 'markdown';
}
.highlight.md figcaption span:first-child::before {
content: 'md';
}
.highlight.diff figcaption span:first-child::before {
content: 'diff';
}
.highlight.javascript figcaption span:first-child::before {
content: 'javascript';
}
.highlight.js figcaption span:first-child::before {
content: 'js';
}
.highlight.typescript figcaption span:first-child::before {
content: 'typescript';
}
.highlight.ts figcaption span:first-child::before {
content: 'ts';
}
.highlight.java figcaption span:first-child::before {
content: 'java';
}
.highlight.json figcaption span:first-child::before {
content: 'json';
}
.highlight.html figcaption span:first-child::before {
content: 'html';
}
.highlight.xml figcaption span:first-child::before {
content: 'xml';
}
.highlight.css figcaption span:first-child::before {
content: 'css';
}
.highlight.less figcaption span:first-child::before {
content: 'less';
}
.highlight.scss figcaption span:first-child::before {
content: 'scss';
}
.highlight.stylus figcaption span:first-child::before {
content: 'stylus';
}
.highlight.styl figcaption span:first-child::before {
content: 'styl';
}
.highlight.sql figcaption span:first-child::before {
content: 'sql';
}
.highlight.bash figcaption span:first-child::before {
content: 'bash';
}
.highlight.shell figcaption span:first-child::before {
content: 'shell';
}
.highlight.python figcaption span:first-child::before {
content: 'python';
}
.highlight.py figcaption span:first-child::before {
content: 'py';
}
.highlight.ruby figcaption span:first-child::before {
content: 'ruby';
}
.highlight.cpp figcaption span:first-child::before {
content: 'cpp';
}
.highlight.c\+\+ figcaption span:first-child::before {
content: 'c\+\+';
}
.highlight.c\# figcaption span:first-child::before {
content: 'c\#';
}
.highlight.go figcaption span:first-child::before {
content: 'go';
}
.highlight.kotlin figcaption span:first-child::before {
content: 'kotlin';
}
.highlight.kt figcaption span:first-child::before {
content: 'kt';
}
.highlight.objectivec figcaption span:first-child::before {
content: 'objectivec';
}
.highlight.php figcaption span:first-child::before {
content: 'php';
}
.highlight.perl figcaption span:first-child::before {
content: 'perl';
}
.highlight.pl figcaption span:first-child::before {
content: 'pl';
}
.highlight.pm figcaption span:first-child::before {
content: 'pm';
}
.highlight.rust figcaption span:first-child::before {
content: 'rust';
}
.highlight.rs figcaption span:first-child::before {
content: 'rs';
}
.highlight.swift figcaption span:first-child::before {
content: 'swift';
}
.highlight.coffeescript figcaption span:first-child::before {
content: 'coffeescript';
}
.highlight.coffee figcaption span:first-child::before {
content: 'coffee';
}
.highlight.lua figcaption span:first-child::before {
content: 'lua';
}
.highlight.yaml figcaption span:first-child::before {
content: 'yaml';
}
.highlight.yml figcaption span:first-child::before {
content: 'yml';
}
.highlight.nginx figcaption span:first-child::before {
content: 'nginx';
}
.highlight.dockerfile figcaption span:first-child::before {
content: 'dockerfile';
}
.highlight.makefile figcaption span:first-child::before {
content: 'makefile';
}
.highlight {
margin: 0 0 1rem;
border-radius: 0.25rem;
width: 100%;
line-height: 1.7;
color: var(--color-gray-850);
background-color: var(--color-gray-200);
}
.highlight pre,
.highlight code {
font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace;
}
.highlight pre {
margin: 0;
}
.highlight td {
border-width: 0;
}
.highlight figcaption {
position: relative;
width: 100%;
color: var(--color-gray-850);
background-color: var(--color-gray-200);
zoom: 1;
padding: 0.1rem 0;
}
.highlight figcaption:before,
.highlight figcaption:after {
content: "";
display: table;
}
.highlight figcaption:after {
clear: both;
}
.highlight figcaption span:first-child {
float: left;
margin-left: 0.5rem;
color: var(--color-gray-850);
}
.highlight figcaption span.external-link {
float: right;
margin-right: 2em;
}
.highlight figcaption.custom {
min-height: 1.5rem;
border-radius: 0.25rem;
}
.highlight figcaption.custom .custom-lang {
float: left;
margin: 0 0.6rem;
color: var(--color-gray-550);
}
.highlight td.gutter {
border-right: 1px solid var(--color-gray-300);
padding: 0.4rem 0.6rem;
width: 2rem;
background-color: var(--color-gray-200);
border-radius: 0.25rem;
}
.highlight td.gutter pre {
text-align: right;
white-space: nowrap;
color: var(--color-gray-550);
background-color: inherit;
}
.highlight td.code {
padding: 0.5rem 0.6rem;
}
.highlight .marked {
background-color: var(--color-gray-260);
}
.highlight .emphasis {
font-style: italic;
}
.highlight .strong {
font-weight: bold;
}
.highlight .comment {
color: #969896;
}
.highlight .quote,
.highlight .params {
color: var(--color-gray-850);
}
.highlight .selector-tag,
.highlight .template-variable,
.highlight .variable,
.highlight .deletion,
.highlight .regexp,
.highlight .name,
.highlight .tag {
color: #c82829;
}
.highlight .builtin-name,
.highlight .literal,
.highlight .number,
.highlight .type,
.highlight .meta,
.highlight .link {
color: #ee8019;
}
.highlight .class .keyword:first-child + .title,
.highlight .built_in,
.highlight .attribute {
color: #eab700;
}
.highlight .class .keyword ~ .title,
.highlight .string .template-variable,
.highlight .meta-string,
.highlight .tag,
.highlight .class,
.highlight .subst,
.highlight .regexp {
color: #4eb4b4;
}
.highlight .string,
.highlight .symbol,
.highlight .bullet,
.highlight .addition {
color: #4dc14c;
}
.highlight .title,
.highlight .section {
color: #2a75c8;
}
.highlight .meta-keyword,
.highlight .doctag,
.highlight .selector-id,
.highlight .selector-attr,
.highlight .selector-class,
.highlight .selector-pseudo,
.highlight .function,
.highlight .tag .attr,
.highlight .keyword {
color: #be4dbc;
}
.bash .meta,
.rust .meta {
color: #969896;
}
.c\+\+ .built_in,
.cpp .built_in,
.ini .variable,
.ini .literal,
.ini .number,
.less .variable,
.scss .variable,
.styl .variable,
.stylus .variable {
color: var(--color-gray-850);
}
.html .meta,
.xml .meta,
.yaml .attr,
.yml .attr {
color: #c82829;
}
.js .params,
.javascript .params {
color: #ee8019;
}
.json .attr,
.swift .type {
color: #eab700;
}
.variable .variable,
.bash .variable,
.c\+\+ .meta,
.cpp .meta,
.c\# .meta,
.css .number,
.diff .meta {
color: #4eb4b4;
}
.md .section,
.markdown .section,
.py .string .meta,
.python .string .meta {
color: #4dc14c;
}
.bash .built_in,
.css .built_in,
.go .built_in,
.py .meta,
.python .meta,
.shell .meta,
.shell .keyword,
.shell .built_in {
color: #2a75c8;
}
.ini .attr,
.objectivec .meta,
.yaml .type,
.yml .type {
color: #be4dbc;
}
.diff .addition {
color: #292;
background-color: #f0fff4;
}
.diff .deletion {
color: #d44;
background-color: #ffeef0;
}
.nightmode .diff .addition {
background-color: transparent;
}
.nightmode .diff .deletion {
background-color: transparent;
}
.ending {
padding: 1rem 0 0;
text-align: center;
color: var(--color-gray-400);
border-top: 1px dashed var(--color-gray-300);
}
.back2top {
position: fixed;
right: 0;
bottom: 5vh;
-webkit-transition: -webkit-transform 0.2s ease;
-moz-transition: -moz-transform 0.2s ease;
-o-transition: -o-transform 0.2s ease;
-ms-transition: -ms-transform 0.2s ease;
transition: transform 0.2s ease;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-o-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
cursor: pointer;
}
.back2top--show {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-o-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
.back2top--hide {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-o-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
}
.back2top__icon {
display: block;
font-size: 1.2rem;
line-height: 1;
color: #49b1f5;
-webkit-transition: color 0.2s ease;
-moz-transition: color 0.2s ease;
-o-transition: color 0.2s ease;
-ms-transition: color 0.2s ease;
transition: color 0.2s ease;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.back2top__icon:hover {
color: #fc6423;
}
.zoomimg-mask {
position: fixed;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.6);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
.zoomimg {
cursor: zoom-in;
}
.zoomimg--hide {
visibility: hidden;
}
.zoomimg-clone {
position: absolute;
z-index: 2;
background-color: #fff;
cursor: zoom-out;
will-change: transform;
}
.mode {
position: relative;
border: 0;
padding: 0;
line-height: 100%;
background-color: transparent;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.mode--focus .mode-thumb {
-webkit-box-shadow: 0 0 2px 3px #0099e0;
box-shadow: 0 0 2px 3px #0099e0;
}
.mode--checked .mode-thumb {
-webkit-transform: translateX(26px);
-moz-transform: translateX(26px);
-o-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
.mode-track {
border-radius: 30px;
width: 50px;
height: 24px;
font-size: 0;
background-color: #8c8a8a;
}
.mode-track-moon,
.mode-track-sun {
display: inline-block;
position: absolute;
top: 0;
bottom: 0;
width: 25px;
height: 100%;
font-size: 14px;
}
.mode-track-moon::before,
.mode-track-sun::before {
display: block;
width: 100%;
height: 100%;
font-size: 14px;
line-height: 24px;
text-align: center;
}
.mode-track-moon {
left: 0;
}
.mode-track-moon::before {
content: '🌜';
}
.mode-track-sun {
right: 0;
}
.mode-track-sun::before {
content: '🌞';
}
.mode-thumb {
position: absolute;
top: 1px;
left: 1px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #4d4d4d;
border-radius: 50%;
width: 22px;
height: 22px;
background-color: #fafafa;
-webkit-transition: -webkit-transform 0.2s ease;
-moz-transition: -moz-transform 0.2s ease;
-o-transition: -o-transform 0.2s ease;
-ms-transition: -ms-transform 0.2s ease;
transition: transform 0.2s ease;
}
.mode-input {
position: absolute;
border: 0;
width: 0;
height: 0;
}
.reward {
text-align: center;
}
.reward-button {
display: inline-block;
margin: 1rem 0 1.5rem;
border-radius: 6px;
padding: 0.2rem 1rem;
color: #f5f6f7;
background-color: #ff6868;
-webkit-transition: background-color 0.2s ease;
-moz-transition: background-color 0.2s ease;
-o-transition: background-color 0.2s ease;
-ms-transition: background-color 0.2s ease;
transition: background-color 0.2s ease;
cursor: pointer;
}
.reward-button:hover {
background-color: #e45c5c;
}
.reward-qrcode {
display: none;
}
.reward-qrcode-alipay,
.reward-qrcode-wechat {
display: inline-block;
margin: 0 2rem;
}
.reward-qrcode-alipay__img,
.reward-qrcode-wechat__img {
width: 200px;
height: 200px;
}
.reward-qrcode-alipay__text,
.reward-qrcode-wechat__text {
margin: 0.5rem 0;
}
.reward-qrcode-alipay__text {
color: #1caceb;
}
.reward-qrcode-wechat__text {
color: #3cb034;
}
.copyright {
position: relative;
border: 1px solid var(--color-gray-250);
padding: 0.8rem 1rem;
width: 100%;
-webkit-transition: box-shadow 0.2s ease;
-moz-transition: box-shadow 0.2s ease;
-o-transition: box-shadow 0.2s ease;
-ms-transition: box-shadow 0.2s ease;
transition: box-shadow 0.2s ease;
}
.copyright:hover {
-webkit-box-shadow: 0 0 16px 8px var(--color-gray-250);
box-shadow: 0 0 16px 8px var(--color-gray-250);
}
.copyright-author__name,
.copyright-link__name,
.copyright-notice__name {
font-weight: 600;
white-space: normal;
word-wrap: break-word;
word-break: break-word;
}
.copyright-author__value,
.copyright-link__value,
.copyright-notice__value {
color: var(--color-gray-800);
white-space: normal;
word-wrap: normal;
word-break: break-all;
}
.gallery img {
margin-bottom: 10px;
}
.exturl__icon {
margin: 0 0.1em 0 0.3em;
font-size: 0.8em;
color: #aaa;
}
.exturl__link {
white-space: normal;
word-wrap: break-word;
word-break: break-word;
}
.footer .exturl__icon {
color: #fff;
}
.comments {
margin: 1.5rem 0 0;
width: 100%;
border-radius: 5px;
padding: 1rem 2rem;
background-color: var(--color-card);
float: left;
}
.copy-button {
position: absolute;
top: 0;
right: 0;
width: 1.5rem;
height: 1.5rem;
line-height: 1.5rem;
text-align: center;
color: var(--color-gray-800);
cursor: pointer;
}
.copy-button i {
color: var(--color-gray-550);
}
.sticky-top {
position: absolute;
top: 0;
width: 1rem;
height: 1rem;
line-height: 1rem;
text-align: center;
right: 0;
}
.sticky-top__icon {
display: block;
width: 100%;
height: 100%;
color: #999;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.archive .sticky-top {
top: 50%;
right: 0;
left: auto;
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
}
.paginator {
margin-top: 1rem;
text-align: center;
}
.paginator-inner {
border-radius: 5px;
padding: 12px 0;
background-color: var(--color-gray-150);
}
.paginator .page-number,
.paginator .prev,
.paginator .next {
display: inline-block;
margin: 0 0.5em;
border: 1px solid transparent;
border-radius: 3px;
width: 1.5rem;
height: 1.5rem;
line-height: 1.5rem;
text-align: center;
vertical-align: middle;
-webkit-transition: border 0.2s ease;
-moz-transition: border 0.2s ease;
-o-transition: border 0.2s ease;
-ms-transition: border 0.2s ease;
transition: border 0.2s ease;
}
.paginator .page-number:hover,
.paginator .prev:hover,
.paginator .next:hover {
border-color: var(--color-gray-260);
}
.paginator .current {
color: #f4f5f5;
background-color: #49b1f5;
}
.paginator .current:hover {
border-color: transparent;
}
.paginator-prev,
.paginator-next {
width: 100%;
}
.paginator-prev__link,
.paginator-next__link {
white-space: normal;
word-wrap: break-word;
word-break: break-word;
color: #49b1f5;
-webkit-transition: color 0.2s ease;
-moz-transition: color 0.2s ease;
-o-transition: color 0.2s ease;
-ms-transition: color 0.2s ease;
transition: color 0.2s ease;
}
.paginator-prev__link:hover,
.paginator-next__link:hover {
color: #fc6423;
}
.paginator-prev {
text-align: left;
}
.paginator-prev__icon {
margin-right: 0.3rem;
}
.paginator-next {
text-align: right;
}
.paginator-next__icon {
margin-left: 0.3rem;
}
.table-plugin tr {
-webkit-transition: background-color 0.2s ease;
-moz-transition: background-color 0.2s ease;
-o-transition: background-color 0.2s ease;
-ms-transition: background-color 0.2s ease;
transition: background-color 0.2s ease;
}
.table-plugin tr:nth-of-type(even) {
background-color: var(--color-gray-150);
}
.table-plugin tr:hover {
background-color: var(--color-gray-200);
}
.table-plugin th,
.table-plugin td {
min-width: 5rem;
}
.note-plugin {
position: relative;
margin-bottom: 20px;
border: 1px solid var(--color-gray-250);
border-left-width: 6px;
padding: 0 17px;
}
.note-plugin:not(.no-icon) {
padding-left: 40px;
}
.note-plugin h1,
.note-plugin h2,
.note-plugin h3,
.note-plugin h4,
.note-plugin h5,
.note-plugin h6 {
margin: 0;
}
.note-plugin p {
margin: 12px 0;
}
.note-plugin strong {
font-size: 18px;
line-height: 1.75;
}
.note-plugin__icon {
position: absolute;
top: 1em;
left: 12px;
font-size: 18px;
line-height: 1;
}
.note-plugin__icon--default {
color: var(--color-gray-600);
}
.note-plugin__icon--success {
color: #42b983;
}
.note-plugin__icon--info {
color: #4898dd;
}
.note-plugin__icon--warning {
color: #e7c000;
}
.note-plugin__icon--danger {
color: #dc3b3b;
}
.note-plugin.default {
border-left-color: var(--color-gray-600);
}
.note-plugin.default strong {
color: var(--color-gray-600);
}
.note-plugin.success {
border-left-color: #42b983;
}
.note-plugin.success strong {
color: #42b983;
}
.note-plugin.info {
border-left-color: #4898dd;
}
.note-plugin.info strong {
color: #4898dd;
}
.note-plugin.warning {
border-left-color: #e7c000;
}
.note-plugin.warning strong {
color: #e7c000;
}
.note-plugin.danger {
border-left-color: #dc3b3b;
}
.note-plugin.danger strong {
color: #dc3b3b;
}
.friends-plugin {
overflow: hidden;
max-width: 100%;
}
.friends-plugin__item {
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
float: left;
padding: 0.5rem 1rem;
width: 50%;
height: 100px;
-webkit-transition: background-color 0.3s;
-moz-transition: background-color 0.3s;
-o-transition: background-color 0.3s;
-ms-transition: background-color 0.3s;
transition: background-color 0.3s;
-webkit-box-align: center;
-moz-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.friends-plugin__item:hover {
background-color: rgba(73,177,245,0.1);
}
.friends-plugin__item p {
margin: 0;
}
.friends-plugin__item-avatar {
margin: 0 1rem 0 0;
border-radius: 50% !important;
width: 60px;
height: 60px;
}
.friends-plugin__item-info {
overflow: hidden;
width: 100%;
color: var(--color-gray-800);
}
.friends-plugin__item-info__name,
.friends-plugin__item-info__intro {
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
.friends-plugin__item-info__name {
font-weight: 700;
}
.friends-plugin__item-info__intro {
font-size: 0.9em;
color: #999;
}
@media (min-width: 1138px) {
.header-nav-inner {
width: 1138px;
}
.main-inner {
width: 1138px;
}
}
@media (min-width: 991.98px) {
.header-nav-menu {
display: inline-block !important;
opacity: 1 !important;
-ms-filter: none !important;
filter: none !important;
}
.header-nav-submenu {
border-radius: 3px;
}
}
@media (max-width: 991.98px) {
.header-inner {
height: 17rem;
}
.header-banner-info__title {
margin-bottom: 1rem;
}
.header-nav-menubtn {
display: block;
float: left;
}
.header-nav-menu {
overflow: hidden;
position: absolute;
top: 50px;
right: 0;
left: 0;
width: auto;
height: auto;
background-color: #2d2e30;
}
.header-nav-menu-item {
float: none;
overflow: hidden;
margin: 0;
}
.header-nav-menu-item__link {
padding-right: 1.5rem;
padding-left: 1.5rem;
text-align: left;
color: #f4f5f5;
}
.header-nav-submenu {
display: block;
position: initial;
width: 100%;
}
.header-nav-submenu-item__link {
padding-right: 1rem;
padding-left: 3rem;
text-align: left;
}
.content-wrap {
width: 100%;
}
.sidebar-wrap {
display: none;
}
.post-list .post {
margin: 0 0 1rem;
padding: 1rem;
}
}
@media (max-width: 767.98px) {
.header-nav-inner {
padding: 15px;
}
.header-banner-info__title {
margin-bottom: 1rem;
font-size: 3rem;
}
.header-banner-info__subtitle {
font-size: 0.9rem;
}
.main-inner {
padding: 15px;
}
}
@media (max-width: 575.98px) {
.header-inner {
height: 13rem;
}
.header-nav-inner {
padding: 10px;
}
.header-banner-info__title {
margin-bottom: 0.5rem;
font-size: 2rem;
}
.header-banner-info__subtitle {
font-size: 14px;
}
.header-banner-arrow {
bottom: 0.5rem;
}
.main-inner {
padding: 10px;
}
.content,
.comments {
padding: 0.6rem 0.8rem;
font-size: 15px;
}
.archive {
margin-left: 0.5rem;
}
.archive-total {
padding-left: 1rem;
}
.timeline-item {
padding-left: 1rem;
}
.timeline-item__time {
width: 2.75rem;
}
.timeline-item__title {
width: calc(100% - 4rem);
}
.post-list .post {
margin: 0 0 0.8rem;
padding: 0.8rem;
}
.friends-plugin__item {
margin: 0;
padding: 0.5rem 1rem;
width: 100%;
}
}
<svg xmlns="http://www.w3.org/2000/svg" width="273" height="72" x="0" y="0" version="1.0" viewBox="0 0 273 72"><linearGradient id="a" x1="327.272" x2="328.435" y1="-235.03" y2="-236.157" gradientTransform="matrix(94.045 0 0 94.072 -30797.893 22201.137)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#00aeff"/><stop offset="1" stop-color="#3369e7"/></linearGradient><path fill="url(#a)" d="M13.5 3.4h48c4.7 0 8.6 3.8 8.6 8.6v48c0 4.7-3.8 8.6-8.6 8.6h-48c-4.7 0-8.6-3.8-8.6-8.6V12c0-4.7 3.9-8.6 8.6-8.6z"/><path fill="#fff" d="M38.3 19.9c-10.2 0-18.4 8.2-18.4 18.4s8.2 18.4 18.4 18.4 18.4-8.2 18.4-18.4-8.3-18.4-18.4-18.4zm0 31.4c-7.2 0-13-5.8-13-13s5.8-13 13-13 13 5.8 13 13-5.9 13-13 13zm0-23.3v9.7c0 .3.3.5.6.3l8.6-4.4c.2-.1.3-.3.2-.5-1.8-3.1-5.1-5.3-8.9-5.4-.3-.1-.5.1-.5.3zm-12.1-7.1l-1.1-1.1c-1.1-1.1-2.9-1.1-4 0l-1.3 1.3c-1.1 1.1-1.1 2.9 0 4l1.1 1.1c.2.2.4.1.6 0a26.219 26.219 0 0 1 4.7-4.7c.2-.2.2-.4 0-.6zM44.3 18v-2.2c0-1.6-1.3-2.8-2.8-2.8h-6.6c-1.6 0-2.8 1.3-2.8 2.8V18c0 .3.2.4.5.4 1.8-.5 3.8-.8 5.7-.8 1.9 0 3.7.3 5.5.8.2 0 .5-.2.5-.4z"/><path fill="#182359" d="M167.8 53.3c0 5.3-1.3 9.1-4.1 11.6-2.7 2.5-6.8 3.7-12.4 3.7-2 0-6.3-.4-9.6-1.1l1.2-6.1c2.8.6 6.6.8 8.5.8 3.1 0 5.3-.6 6.6-1.9 1.3-1.3 2-3.1 2-5.6v-1.3c-.8.4-1.8.8-3 1.1-1.2.4-2.7.6-4.3.6-2.1 0-4.1-.3-5.8-1-1.8-.7-3.3-1.7-4.5-3-1.2-1.3-2.2-2.9-2.9-4.9-.7-2-1-5.5-1-8 0-2.4.4-5.4 1.1-7.4.8-2 1.8-3.8 3.3-5.2 1.4-1.4 3.2-2.5 5.2-3.4 2-.8 4.4-1.3 7-1.3 2.5 0 4.8.3 7.1.7 2.3.4 4.2.8 5.7 1.2l-.1 30.5zM146.3 38c0 3.2.7 6.8 2.1 8.3s3.3 2.3 5.5 2.3c1.2 0 2.4-.2 3.5-.5s2-.7 2.6-1.2V27.7c-.6-.1-2.9-.6-5.1-.7-2.8-.1-4.9 1.1-6.4 2.9-1.4 1.9-2.2 5.1-2.2 8.1zm58.2 0c0 2.6-.4 4.6-1.1 6.7s-1.9 4-3.3 5.5-3.1 2.7-5.1 3.5c-2 .8-5 1.3-6.5 1.3s-4.5-.5-6.5-1.3-3.6-2-5-3.5-2.5-3.4-3.3-5.5-1.2-4.1-1.2-6.7.4-5.1 1.1-7.3 1.9-4 3.3-5.5 3.1-2.7 5.1-3.5c2-.8 4.1-1.2 6.4-1.2s4.5.4 6.5 1.2c2 .8 3.7 2 5.1 3.5 1.4 1.5 2.5 3.3 3.3 5.5.7 2.2 1.2 4.7 1.2 7.3zm-7.9 0c0-3.3-.7-6.1-2.2-8.1-1.4-2-3.4-2.9-6-2.9-2.5 0-4.5 1-6 2.9-1.4 2-2.1 4.7-2.1 8.1 0 3.4.7 5.7 2.1 7.6 1.4 2 3.4 2.9 6 2.9 2.5 0 4.5-1 6-2.9 1.4-1.9 2.2-4.2 2.2-7.6zm25.1 17.1C209 55.2 209 44.9 209 43.2V6.7l7.7-1.2v36.3c0 .9 0 6.8 5 6.8v6.5zm13.6 0h-7.8V21.7l7.8-1.2v34.6zm-3.9-38.2c2.6 0 4.7-2.1 4.7-4.7s-2.1-4.7-4.7-4.7-4.7 2.1-4.7 4.7 2.1 4.7 4.7 4.7zm23.2 3.6c2.5 0 4.7.3 6.4.9 1.7.6 3.1 1.5 4.2 2.6 1 1.1 1.8 2.7 2.2 4.3.5 1.6.7 3.4.7 5.4v19.9c-1.2.3-3 .6-5.4.9-2.4.4-5.1.5-8.1.5-2 0-3.8-.2-5.5-.6-1.7-.4-3.1-1-4.2-1.8-1.2-.8-2.1-1.9-2.7-3.3-.7-1.3-1-3.2-1-5.2 0-1.9.4-3.1 1.1-4.4.8-1.3 1.8-2.4 3-3.2 1.3-.8 2.7-1.4 4.4-1.8 1.7-.4 3.4-.5 5.3-.5.8 0 1.7.1 2.7.2.9.1 1.9.3 3 .5v-1.3c0-.9-.1-1.7-.3-2.5-.2-.8-.6-1.5-1.1-2.1-.5-.6-1.2-1.1-2.1-1.4s-2-.6-3.3-.6c-1.8 0-3.4.2-4.9.5-1.5.3-2.7.6-3.6.9l-.9-6.3c1-.3 2.4-.7 4.3-1s3.7-.6 5.8-.6zm.6 28.1c2.4 0 4.1-.1 5.4-.4v-7.9c-.4-.1-1-.3-1.9-.4s-1.7-.2-2.7-.2c-.8 0-1.7.1-2.6.2-.9.1-1.7.4-2.4.7-.7.3-1.3.8-1.7 1.4-.4.6-.6 1-.6 1.9 0 1.8.6 2.9 1.8 3.6 1.2.7 2.8 1.1 4.7 1.1zM102.7 20.7c2.5 0 4.7.3 6.4.9s3.1 1.5 4.2 2.6c1 1.1 1.8 2.7 2.2 4.3.5 1.6.7 3.4.7 5.4v19.9c-1.2.3-3 .6-5.4.9-2.4.4-5.1.5-8.1.5-2 0-3.8-.2-5.5-.6-1.7-.4-3.1-1-4.2-1.8-1.2-.8-2.1-1.9-2.7-3.3-.7-1.3-1-3.2-1-5.2 0-1.9.4-3.1 1.1-4.4.8-1.3 1.8-2.4 3-3.2 1.3-.8 2.7-1.4 4.4-1.8s3.4-.5 5.3-.5c.8 0 1.7.1 2.7.2.9.1 1.9.3 3 .5v-1.3c0-.9-.1-1.7-.3-2.5-.2-.8-.6-1.5-1.1-2.1-.5-.6-1.2-1.1-2.1-1.4-.9-.3-2-.6-3.3-.6-1.8 0-3.4.2-4.9.5-1.5.3-2.7.6-3.6.9l-.9-6.3c1-.3 2.4-.7 4.3-1 1.6-.4 3.6-.6 5.8-.6zm.6 28.1c2.4 0 4.1-.1 5.4-.4v-7.9c-.4-.1-1-.3-1.9-.4-.8-.1-1.7-.2-2.7-.2-.8 0-1.7.1-2.6.2-.9.1-1.7.4-2.4.7s-1.3.8-1.7 1.4c-.4.6-.6 1-.6 1.9 0 1.8.6 2.9 1.8 3.6s2.8 1.1 4.7 1.1zm31.3 6.3C122 55.2 122 44.9 122 43.2V6.7l7.7-1.2v36.3c0 .9 0 6.8 5 6.8l-.1 6.5z"/></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="15" version="1.0"><defs><clipPath id="a"><path stroke-width=".922" d="M171.998 239.12h20.614v12.484h-20.614z"/></clipPath></defs><path fill="#fff" stroke="#000" stroke-width="1.042" d="M170.5 237.862h80v15h-80z" transform="matrix(.9875 0 0 .93335 -167.875 -221.476)"/><path d="M1.975 1.933h76.038v11.2H1.975z"/><path fill="#abb1aa" d="M1.975 1.945v11.2h20.08c1.293-1.633 2.165-3.532 2.165-5.6 0-2.054-.857-3.973-2.134-5.6H1.975z"/><g clip-path="url(#a)" transform="matrix(.94924 0 0 .89719 -161.127 -212.602)"><path fill="#fff" d="M190.064 245.362a7.047 7.047 0 0 1-14.094.009v-.009a7.047 7.047 0 1 1 14.094-.008v.008z"/><path d="M188.746 239.622c1.562 1.563 2.344 3.477 2.344 5.74 0 2.264-.768 4.157-2.304 5.68-1.63 1.603-3.556 2.405-5.779 2.405-2.196 0-4.089-.795-5.678-2.385-1.59-1.59-2.385-3.49-2.385-5.7s.795-4.123 2.385-5.74c1.549-1.563 3.442-2.344 5.678-2.344 2.264 0 4.176.781 5.739 2.344zm-10.365 1.052c-1.321 1.334-1.982 2.897-1.982 4.69 0 1.793.654 3.343 1.962 4.65 1.307 1.308 2.864 1.961 4.67 1.961s3.376-.66 4.71-1.98c1.268-1.228 1.901-2.77 1.901-4.63 0-1.847-.644-3.414-1.931-4.701-1.287-1.288-2.847-1.931-4.68-1.931-1.833 0-3.383.647-4.65 1.94zm3.477 3.902c-.202-.44-.504-.66-.907-.66-.713 0-1.07.479-1.07 1.438 0 .96.357 1.439 1.07 1.439.47 0 .806-.234 1.008-.702l.987.526c-.47.836-1.177 1.255-2.118 1.255-.727 0-1.308-.223-1.745-.668-.438-.445-.656-1.06-.656-1.842 0-.769.225-1.38.676-1.831.45-.453 1.012-.679 1.684-.679.996 0 1.709.393 2.14 1.176l-1.07.548zm4.646 0c-.202-.44-.498-.66-.889-.66-.727 0-1.09.479-1.09 1.438 0 .96.363 1.439 1.09 1.439.471 0 .801-.234.99-.702l1.01.526c-.47.836-1.176 1.255-2.116 1.255-.725 0-1.306-.223-1.742-.668-.436-.445-.654-1.06-.654-1.842 0-.769.221-1.38.664-1.831.443-.453 1.007-.679 1.692-.679.994 0 1.706.393 2.135 1.176l-1.09.548z"/></g><path fill="#fff" d="M29.052 6.901c.242 0 .426-.05.551-.15.126-.1.188-.247.188-.442 0-.193-.062-.34-.188-.44-.125-.102-.309-.153-.551-.153h-.851v1.185h.851m.052 2.45c.309 0 .54-.062.695-.184.157-.123.236-.308.236-.555 0-.243-.077-.424-.232-.544-.154-.123-.387-.184-.7-.184h-.902v1.467h.903m1.43-2.015c.33.09.586.257.768.5.18.242.271.54.271.892 0 .54-.194.943-.583 1.208-.389.265-.98.397-1.774.397h-2.553v-5.6h2.31c.828 0 1.427.118 1.797.353.373.235.56.611.56 1.129 0 .273-.068.505-.204.698-.136.19-.333.33-.592.423m.906-2.603h1.682L34.48 6.73l1.359-1.996h1.686l-2.274 3.241v2.36h-1.538v-2.36l-2.273-3.24m5.254 2.843h2.51v1.091h-2.51V7.577m3.712-2.844h1.718l2.17 3.841v-3.84h1.458v5.6h-1.718l-2.17-3.842v3.841h-1.458v-5.6m11.588 5.293a4.092 4.092 0 0 1-.883.311 4.3 4.3 0 0 1-.96.105c-.993 0-1.78-.26-2.36-.78-.582-.523-.872-1.23-.872-2.123 0-.895.29-1.603.871-2.123.58-.523 1.368-.784 2.362-.784a4.137 4.137 0 0 1 1.842.416v1.16a3.446 3.446 0 0 0-.843-.402 2.966 2.966 0 0 0-.876-.127c-.548 0-.98.165-1.294.495-.314.33-.472.785-.472 1.365 0 .578.158 1.032.472 1.362.314.33.746.495 1.294.495.307 0 .599-.043.876-.128s.558-.219.843-.401v1.159m1.162-2.45h2.51v1.092h-2.51V7.577m3.712-2.844h1.719l2.17 3.841v-3.84h1.458v5.6h-1.718l-2.17-3.842v3.841h-1.459v-5.6m8.396 1.092v3.417h.551c.629 0 1.108-.146 1.438-.439.333-.293.5-.718.5-1.275 0-.555-.165-.978-.496-1.268-.33-.29-.81-.435-1.442-.435h-.551m-1.539-1.092h1.622c.906 0 1.58.062 2.022.184.445.12.826.325 1.143.615a2.4 2.4 0 0 1 .623.874c.136.33.204.704.204 1.122 0 .422-.068.8-.204 1.133a2.4 2.4 0 0 1-.623.873c-.32.29-.703.497-1.15.62-.448.12-1.12.18-2.015.18h-1.622v-5.6" font-family="Bitstream Vera Sans" font-size="8.259" font-weight="700"/></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="15" version="1.0"><defs><clipPath id="a"><path stroke-width=".922" d="M171.998 239.12h20.614v12.484h-20.614z"/></clipPath></defs><path fill="#fff" stroke="#000" stroke-width="1.042" d="M170.5 237.862h80v15h-80z" transform="matrix(.9875 0 0 .93335 -167.875 -221.476)"/><path d="M1.975 1.933h76.038v11.2H1.975z"/><path fill="#abb1aa" d="M1.975 1.945v11.2h20.08c1.293-1.633 2.165-3.532 2.165-5.6 0-2.054-.857-3.973-2.134-5.6H1.975z"/><g clip-path="url(#a)" transform="matrix(.94924 0 0 .89719 -161.127 -212.603)"><path fill="#fff" d="M190.064 245.362a7.047 7.047 0 0 1-14.094.009v-.009a7.047 7.047 0 1 1 14.094-.008v.008z"/><path d="M188.746 239.622c1.562 1.563 2.344 3.477 2.344 5.74 0 2.264-.768 4.157-2.304 5.68-1.63 1.603-3.556 2.405-5.779 2.405-2.196 0-4.089-.795-5.678-2.385-1.59-1.59-2.385-3.49-2.385-5.7s.795-4.123 2.385-5.74c1.549-1.563 3.442-2.344 5.678-2.344 2.264 0 4.176.781 5.739 2.344zm-10.365 1.052c-1.321 1.334-1.982 2.897-1.982 4.69 0 1.793.654 3.343 1.962 4.65 1.307 1.308 2.864 1.961 4.67 1.961s3.376-.66 4.71-1.98c1.268-1.228 1.901-2.77 1.901-4.63 0-1.847-.644-3.414-1.931-4.701-1.287-1.288-2.847-1.931-4.68-1.931-1.833 0-3.383.647-4.65 1.94zm3.477 3.902c-.202-.44-.504-.66-.907-.66-.713 0-1.07.479-1.07 1.438 0 .96.357 1.439 1.07 1.439.47 0 .806-.234 1.008-.702l.987.526c-.47.836-1.177 1.255-2.118 1.255-.727 0-1.308-.223-1.745-.668-.438-.445-.656-1.06-.656-1.842 0-.769.225-1.38.676-1.831.45-.453 1.012-.679 1.684-.679.996 0 1.709.393 2.14 1.176l-1.07.548zm4.646 0c-.202-.44-.498-.66-.889-.66-.727 0-1.09.479-1.09 1.438 0 .96.363 1.439 1.09 1.439.471 0 .801-.234.99-.702l1.01.526c-.47.836-1.176 1.255-2.116 1.255-.725 0-1.306-.223-1.742-.668-.436-.445-.654-1.06-.654-1.842 0-.769.221-1.38.664-1.831.443-.453 1.007-.679 1.692-.679.994 0 1.706.393 2.135 1.176l-1.09.548z"/></g><path fill="#fff" d="M29.052 6.901c.242 0 .426-.05.551-.15.126-.1.188-.247.188-.442 0-.193-.062-.34-.188-.44-.125-.102-.309-.153-.551-.153h-.851v1.185h.851m.052 2.45c.309 0 .54-.062.695-.184.157-.123.236-.308.236-.555 0-.243-.077-.424-.232-.544-.154-.123-.387-.184-.7-.184h-.902v1.467h.903m1.43-2.015c.33.09.586.257.768.5.18.242.271.54.271.892 0 .54-.194.943-.583 1.208-.389.265-.98.397-1.774.397h-2.553v-5.6h2.31c.828 0 1.427.118 1.797.353.373.235.56.611.56 1.129 0 .272-.068.505-.204.698-.136.19-.333.33-.592.423m.906-2.603h1.682L34.48 6.73l1.359-1.996h1.686l-2.274 3.241v2.36h-1.538v-2.36l-2.273-3.24m5.254 2.842h2.51v1.092h-2.51V7.576m3.712-2.843h1.718l2.17 3.841v-3.84h1.458v5.6h-1.718l-2.17-3.842v3.841h-1.458v-5.6m11.588 5.293a4.093 4.093 0 0 1-.883.311 4.3 4.3 0 0 1-.96.105c-.993 0-1.78-.26-2.36-.78-.582-.523-.872-1.23-.872-2.123 0-.895.29-1.603.871-2.123.58-.523 1.368-.784 2.362-.784a4.137 4.137 0 0 1 1.842.416v1.16a3.445 3.445 0 0 0-.843-.402 2.967 2.967 0 0 0-.876-.127c-.548 0-.98.165-1.294.495-.314.33-.472.785-.472 1.365 0 .578.158 1.031.472 1.362.314.33.746.495 1.294.495.307 0 .599-.043.876-.128s.558-.219.843-.401v1.159m1.162-2.45h2.51v1.092h-2.51V7.576M61.02 4.91v1.185a5.724 5.724 0 0 0-.959-.311 4.036 4.036 0 0 0-.883-.105c-.368 0-.64.047-.815.142a.47.47 0 0 0-.264.443c0 .15.059.267.176.352.12.083.336.154.647.214l.656.124c.663.125 1.134.315 1.414.57.28.255.42.618.42 1.088 0 .617-.196 1.077-.588 1.38-.389.3-.984.45-1.786.45-.378 0-.758-.034-1.139-.101a7.41 7.41 0 0 1-1.142-.3V8.82c.38.19.748.335 1.102.432.357.095.701.143 1.031.143.336 0 .593-.053.772-.158a.496.496 0 0 0 .267-.45.483.483 0 0 0-.184-.405c-.12-.095-.36-.18-.723-.255l-.595-.124c-.597-.12-1.034-.311-1.31-.574-.275-.262-.412-.616-.412-1.061 0-.558.191-.987.575-1.287.384-.3.935-.45 1.654-.45.328 0 .665.024 1.011.071a9.48 9.48 0 0 1 1.075.207m5.366 4.403h-2.405l-.38 1.02h-1.546l2.21-5.6h1.834l2.21 5.6h-1.547l-.376-1.02m-2.021-1.039h1.634l-.815-2.228-.82 2.228" font-family="Bitstream Vera Sans" font-size="8.259" font-weight="700"/></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="15" version="1.0"><defs><clipPath id="a"><path stroke-width=".922" d="M171.998 239.12h20.614v12.484h-20.614z"/></clipPath></defs><path fill="#fff" stroke="#000" stroke-width="1.042" d="M170.5 237.862h80v15h-80z" transform="matrix(.9875 0 0 .93335 -167.875 -221.476)"/><path d="M1.975 1.933h76.038v11.2H1.975z"/><path fill="#abb1aa" d="M1.975 1.945v11.2h20.08c1.293-1.633 2.165-3.532 2.165-5.6 0-2.054-.857-3.973-2.134-5.6H1.975z"/><g clip-path="url(#a)" transform="matrix(.94924 0 0 .89719 -161.127 -212.603)"><path fill="#fff" d="M190.064 245.362a7.047 7.047 0 0 1-14.094.009v-.009a7.047 7.047 0 1 1 14.094-.008v.008z"/><path d="M188.746 239.622c1.562 1.563 2.344 3.477 2.344 5.74 0 2.264-.768 4.157-2.304 5.68-1.63 1.603-3.556 2.405-5.779 2.405-2.196 0-4.089-.795-5.678-2.385-1.59-1.59-2.385-3.49-2.385-5.7s.795-4.123 2.385-5.74c1.549-1.563 3.442-2.344 5.678-2.344 2.264 0 4.176.781 5.739 2.344zm-10.365 1.052c-1.321 1.334-1.982 2.897-1.982 4.69 0 1.793.654 3.343 1.962 4.65 1.307 1.308 2.864 1.961 4.67 1.961s3.376-.66 4.71-1.98c1.268-1.228 1.901-2.77 1.901-4.63 0-1.847-.644-3.414-1.931-4.701-1.287-1.288-2.847-1.931-4.68-1.931-1.833 0-3.383.647-4.65 1.94zm3.477 3.902c-.202-.44-.504-.66-.907-.66-.713 0-1.07.479-1.07 1.438 0 .96.357 1.439 1.07 1.439.47 0 .806-.234 1.008-.702l.987.526c-.47.836-1.177 1.255-2.118 1.255-.727 0-1.308-.223-1.745-.668-.438-.445-.656-1.06-.656-1.842 0-.769.225-1.38.676-1.831.45-.453 1.012-.679 1.684-.679.996 0 1.709.393 2.14 1.176l-1.07.548zm4.646 0c-.202-.44-.498-.66-.889-.66-.727 0-1.09.479-1.09 1.438 0 .96.363 1.439 1.09 1.439.471 0 .801-.234.99-.702l1.01.526c-.47.836-1.176 1.255-2.116 1.255-.725 0-1.306-.223-1.742-.668-.436-.445-.654-1.06-.654-1.842 0-.769.221-1.38.664-1.831.443-.453 1.007-.679 1.692-.679.994 0 1.706.393 2.135 1.176l-1.09.548z"/></g><path fill="#fff" d="M29.052 6.901c.242 0 .426-.05.551-.15.126-.1.188-.247.188-.442 0-.193-.062-.34-.188-.44-.125-.102-.309-.153-.551-.153h-.851v1.185h.851m.052 2.45c.309 0 .54-.062.695-.184.157-.123.236-.308.236-.555 0-.243-.077-.424-.232-.544-.154-.123-.387-.184-.7-.184h-.902v1.467h.903m1.43-2.015c.33.09.586.257.768.5.18.242.271.54.271.892 0 .54-.194.943-.583 1.208-.389.265-.98.397-1.774.397h-2.553v-5.6h2.31c.828 0 1.427.118 1.797.353.373.235.56.611.56 1.129 0 .272-.068.505-.204.698-.136.19-.333.33-.592.423m.906-2.603h1.682L34.48 6.73l1.359-1.996h1.686l-2.274 3.241v2.36h-1.538v-2.36l-2.273-3.24m5.254 2.842h2.51v1.092h-2.51V7.576m3.712-2.843h1.718l2.17 3.841v-3.84h1.458v5.6h-1.718l-2.17-3.842v3.841h-1.458v-5.6m11.588 5.293a4.092 4.092 0 0 1-.883.311 4.29 4.29 0 0 1-.96.105c-.993 0-1.78-.26-2.36-.78-.582-.523-.872-1.23-.872-2.123 0-.895.29-1.603.871-2.123.58-.523 1.368-.784 2.362-.784a4.137 4.137 0 0 1 1.842.416v1.16a3.445 3.445 0 0 0-.843-.402 2.967 2.967 0 0 0-.876-.127c-.548 0-.98.165-1.294.495-.314.33-.472.785-.472 1.365 0 .578.158 1.031.472 1.362.314.33.746.495 1.294.495.307 0 .599-.043.876-.128s.558-.219.843-.401v1.159" font-family="Bitstream Vera Sans" font-size="8.259" font-weight="700"/></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="15" version="1.0"><defs><clipPath id="a"><path stroke-width=".922" d="M171.998 239.12h20.614v12.484h-20.614z"/></clipPath></defs><path fill="#fff" stroke="#000" stroke-width="1.042" d="M328.5 412.862h80v15h-80z" transform="matrix(.9875 0 0 .93335 -323.9 -384.812)"/><path d="M1.975 1.933h76.038v11.2H1.975z"/><path fill="#abb1aa" d="M1.975 1.933v11.2h20.08c1.293-1.633 2.165-3.532 2.165-5.6 0-2.054-.857-3.973-2.134-5.6H1.975z"/><g clip-path="url(#a)" transform="matrix(.94924 0 0 .89719 -161.127 -212.602)"><path fill="#fff" d="M190.064 245.362a7.047 7.047 0 0 1-14.094.009v-.009a7.047 7.047 0 1 1 14.094-.008v.008z"/><path d="M188.746 239.622c1.562 1.563 2.344 3.477 2.344 5.74 0 2.264-.768 4.157-2.304 5.68-1.63 1.603-3.556 2.405-5.779 2.405-2.196 0-4.089-.795-5.678-2.385-1.59-1.59-2.385-3.49-2.385-5.7s.795-4.123 2.385-5.74c1.549-1.563 3.442-2.344 5.678-2.344 2.264 0 4.176.781 5.739 2.344zm-10.365 1.052c-1.321 1.334-1.982 2.897-1.982 4.69 0 1.793.654 3.343 1.962 4.65 1.307 1.308 2.864 1.961 4.67 1.961s3.376-.66 4.71-1.98c1.268-1.228 1.901-2.77 1.901-4.63 0-1.847-.644-3.414-1.931-4.701-1.287-1.288-2.847-1.931-4.68-1.931-1.833 0-3.383.647-4.65 1.94zm3.477 3.902c-.202-.44-.504-.66-.907-.66-.713 0-1.07.479-1.07 1.438 0 .96.357 1.439 1.07 1.439.47 0 .806-.234 1.008-.702l.987.526c-.47.836-1.177 1.255-2.118 1.255-.727 0-1.308-.223-1.745-.668-.438-.445-.656-1.06-.656-1.842 0-.769.225-1.38.676-1.831.45-.453 1.012-.679 1.684-.679.996 0 1.709.393 2.14 1.176l-1.07.548zm4.646 0c-.202-.44-.498-.66-.889-.66-.727 0-1.09.479-1.09 1.438 0 .96.363 1.439 1.09 1.439.471 0 .801-.234.99-.702l1.01.526c-.47.836-1.176 1.255-2.116 1.255-.725 0-1.306-.223-1.742-.668-.436-.445-.654-1.06-.654-1.842 0-.769.221-1.38.664-1.831.443-.453 1.007-.679 1.692-.679.994 0 1.706.393 2.135 1.176l-1.09.548z"/></g><path fill="#fff" d="M29.052 6.901c.242 0 .426-.05.551-.15.126-.1.188-.247.188-.442 0-.193-.062-.34-.188-.44-.125-.102-.309-.153-.551-.153h-.851v1.185h.851m.052 2.45c.309 0 .54-.062.695-.184.157-.123.236-.308.236-.555 0-.243-.077-.424-.232-.544-.154-.123-.387-.184-.7-.184h-.902v1.467h.903m1.43-2.015c.33.09.586.257.768.5.18.242.271.54.271.892 0 .54-.194.943-.583 1.208-.389.265-.98.397-1.774.397h-2.553v-5.6h2.31c.828 0 1.427.118 1.797.353.373.235.56.611.56 1.129 0 .272-.068.505-.204.698-.136.19-.333.33-.592.423m.906-2.603h1.682L34.48 6.73l1.359-1.996h1.686l-2.274 3.241v2.36h-1.538v-2.36l-2.273-3.24m5.254 2.842h2.51v1.092h-2.51V7.576m3.712-2.843h1.718l2.17 3.841v-3.84h1.458v5.6h-1.718l-2.17-3.842v3.841h-1.458v-5.6m8.395 1.092v3.417h.551c.63 0 1.109-.146 1.439-.439.333-.293.5-.718.5-1.275 0-.555-.166-.978-.496-1.268-.33-.29-.811-.435-1.443-.435h-.55m-1.54-1.092h1.623c.906 0 1.58.062 2.022.184.445.12.826.325 1.143.615a2.4 2.4 0 0 1 .623.874c.136.33.204.704.204 1.122 0 .422-.068.8-.204 1.133a2.4 2.4 0 0 1-.623.873c-.32.29-.704.497-1.151.62-.448.12-1.119.18-2.014.18h-1.622v-5.6" font-family="Bitstream Vera Sans" font-size="8.259" font-weight="700"/></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="15" version="1.0"><defs><clipPath id="a"><path stroke-width=".922" d="M171.998 239.12h20.614v12.484h-20.614z"/></clipPath></defs><path fill="#fff" stroke="#000" stroke-width="1.042" d="M170.5 237.862h80v15h-80z" transform="matrix(.9875 0 0 .93335 -167.875 -221.476)"/><path d="M1.975 1.933h76.038v11.2H1.975z"/><path fill="#abb1aa" d="M1.975 1.945v11.2h20.08c1.293-1.633 2.165-3.532 2.165-5.6 0-2.054-.857-3.973-2.134-5.6H1.975z"/><g clip-path="url(#a)" transform="matrix(.94924 0 0 .89719 -161.127 -212.602)"><path fill="#fff" d="M190.064 245.362a7.047 7.047 0 0 1-14.094.009v-.009a7.047 7.047 0 1 1 14.094-.008v.008z"/><path d="M188.746 239.622c1.562 1.563 2.344 3.477 2.344 5.74 0 2.264-.768 4.157-2.304 5.68-1.63 1.603-3.556 2.405-5.779 2.405-2.196 0-4.089-.795-5.678-2.385-1.59-1.59-2.385-3.49-2.385-5.7s.795-4.123 2.385-5.74c1.549-1.563 3.442-2.344 5.678-2.344 2.264 0 4.176.781 5.739 2.344zm-10.365 1.052c-1.321 1.334-1.982 2.897-1.982 4.69 0 1.793.654 3.343 1.962 4.65 1.307 1.308 2.864 1.961 4.67 1.961s3.376-.66 4.71-1.98c1.268-1.228 1.901-2.77 1.901-4.63 0-1.847-.644-3.414-1.931-4.701-1.287-1.288-2.847-1.931-4.68-1.931-1.833 0-3.383.647-4.65 1.94zm3.477 3.902c-.202-.44-.504-.66-.907-.66-.713 0-1.07.479-1.07 1.438 0 .96.357 1.439 1.07 1.439.47 0 .806-.234 1.008-.702l.987.526c-.47.836-1.177 1.255-2.118 1.255-.727 0-1.308-.223-1.745-.668-.438-.445-.656-1.06-.656-1.842 0-.769.225-1.38.676-1.831.45-.453 1.012-.679 1.684-.679.996 0 1.709.393 2.14 1.176l-1.07.548zm4.646 0c-.202-.44-.498-.66-.889-.66-.727 0-1.09.479-1.09 1.438 0 .96.363 1.439 1.09 1.439.471 0 .801-.234.99-.702l1.01.526c-.47.836-1.176 1.255-2.116 1.255-.725 0-1.306-.223-1.742-.668-.436-.445-.654-1.06-.654-1.842 0-.769.221-1.38.664-1.831.443-.453 1.007-.679 1.692-.679.994 0 1.706.393 2.135 1.176l-1.09.548z"/></g><path fill="#fff" d="M29.052 6.901c.242 0 .426-.05.551-.15.126-.1.188-.247.188-.442 0-.193-.062-.34-.188-.44-.125-.102-.309-.153-.551-.153h-.851v1.185h.851m.052 2.45c.309 0 .54-.062.695-.184.157-.123.236-.308.236-.555 0-.243-.077-.424-.232-.544-.154-.123-.387-.184-.7-.184h-.902v1.467h.903m1.43-2.015c.33.09.586.257.768.5.18.242.271.54.271.892 0 .54-.194.943-.583 1.208-.389.265-.98.397-1.774.397h-2.553v-5.6h2.31c.828 0 1.427.118 1.797.353.373.235.56.611.56 1.129 0 .272-.068.505-.204.698-.136.19-.333.33-.592.423m.906-2.603h1.682L34.48 6.73l1.359-1.996h1.686l-2.274 3.241v2.36h-1.538v-2.36l-2.273-3.24m5.254 2.842h2.51v1.092h-2.51V7.576m7.864-2.666v1.185a5.723 5.723 0 0 0-.96-.311 4.036 4.036 0 0 0-.882-.105c-.368 0-.64.047-.816.142a.47.47 0 0 0-.263.443c0 .15.058.267.175.352.12.083.336.154.648.214l.655.124c.663.125 1.135.315 1.415.57.28.255.42.618.42 1.088 0 .617-.197 1.078-.588 1.38-.39.3-.985.45-1.786.45a6.58 6.58 0 0 1-1.14-.101 7.41 7.41 0 0 1-1.142-.3V8.82a6.1 6.1 0 0 0 1.103.432c.357.095.7.143 1.03.143.336 0 .594-.053.772-.158a.496.496 0 0 0 .268-.45.483.483 0 0 0-.184-.405c-.12-.095-.361-.18-.723-.255l-.596-.124c-.596-.12-1.033-.311-1.31-.574-.275-.262-.412-.616-.412-1.061 0-.558.192-.987.576-1.287.383-.3.935-.45 1.654-.45.327 0 .664.024 1.01.071.347.045.705.114 1.076.207m5.366 4.403h-2.406l-.38 1.02h-1.546l2.21-5.6h1.834l2.21 5.6h-1.547l-.375-1.02m-2.022-1.039h1.634l-.815-2.228-.819 2.228" font-family="Bitstream Vera Sans" font-size="8.259" font-weight="700"/></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="15" version="1.0"><defs><clipPath id="a"><path stroke-width=".922" d="M171.998 239.12h20.614v12.484h-20.614z"/></clipPath></defs><path fill="#fff" stroke="#000" stroke-width="1.042" d="M170.5 237.862h80v15h-80z" transform="matrix(.9875 0 0 .93335 -167.875 -221.476)"/><path d="M1.975 1.933h76.038v11.2H1.975z"/><path fill="#abb1aa" d="M1.975 1.945v11.2h20.08c1.293-1.633 2.165-3.532 2.165-5.6 0-2.054-.857-3.973-2.134-5.6H1.975z"/><g clip-path="url(#a)" transform="matrix(.94924 0 0 .89719 -161.127 -212.603)"><path fill="#fff" d="M190.064 245.362a7.047 7.047 0 0 1-14.094.009v-.009a7.047 7.047 0 1 1 14.094-.008v.008z"/><path d="M188.746 239.622c1.562 1.563 2.344 3.477 2.344 5.74 0 2.264-.768 4.157-2.304 5.68-1.63 1.603-3.556 2.405-5.779 2.405-2.196 0-4.089-.795-5.678-2.385-1.59-1.59-2.385-3.49-2.385-5.7s.795-4.123 2.385-5.74c1.549-1.563 3.442-2.344 5.678-2.344 2.264 0 4.176.781 5.739 2.344zm-10.365 1.052c-1.321 1.334-1.982 2.897-1.982 4.69 0 1.793.654 3.343 1.962 4.65 1.307 1.308 2.864 1.961 4.67 1.961s3.376-.66 4.71-1.98c1.268-1.228 1.901-2.77 1.901-4.63 0-1.847-.644-3.414-1.931-4.701-1.287-1.288-2.847-1.931-4.68-1.931-1.833 0-3.383.647-4.65 1.94zm3.477 3.902c-.202-.44-.504-.66-.907-.66-.713 0-1.07.479-1.07 1.438 0 .96.357 1.439 1.07 1.439.47 0 .806-.234 1.008-.702l.987.526c-.47.836-1.177 1.255-2.118 1.255-.727 0-1.308-.223-1.745-.668-.438-.445-.656-1.06-.656-1.842 0-.769.225-1.38.676-1.831.45-.453 1.012-.679 1.684-.679.996 0 1.709.393 2.14 1.176l-1.07.548zm4.646 0c-.202-.44-.498-.66-.889-.66-.727 0-1.09.479-1.09 1.438 0 .96.363 1.439 1.09 1.439.471 0 .801-.234.99-.702l1.01.526c-.47.836-1.176 1.255-2.116 1.255-.725 0-1.306-.223-1.742-.668-.436-.445-.654-1.06-.654-1.842 0-.769.221-1.38.664-1.831.443-.453 1.007-.679 1.692-.679.994 0 1.706.393 2.135 1.176l-1.09.548z"/></g><path fill="#fff" d="M29.052 6.901c.242 0 .426-.05.551-.15.126-.1.188-.247.188-.442 0-.193-.062-.34-.188-.44-.125-.102-.309-.153-.551-.153h-.851v1.185h.851m.052 2.45c.309 0 .54-.062.695-.184.157-.123.236-.308.236-.555 0-.243-.077-.424-.232-.544-.154-.123-.387-.184-.7-.184h-.902v1.467h.903m1.43-2.015c.33.09.586.257.768.5.18.242.271.54.271.892 0 .54-.194.943-.583 1.208-.389.265-.98.397-1.774.397h-2.553v-5.6h2.31c.828 0 1.427.118 1.797.353.373.235.56.611.56 1.129 0 .272-.068.505-.204.698-.136.19-.333.33-.592.423m.906-2.603h1.682L34.48 6.73l1.359-1.996h1.686l-2.274 3.241v2.36h-1.538v-2.36l-2.273-3.24" font-family="Bitstream Vera Sans" font-size="8.259" font-weight="700"/></svg>
\ No newline at end of file
<?xml version="1.0" encoding="utf-8"?>
<!-- Author: liuyib <https://github.com/liuyib> -->
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="512px" width="512px" x="0px" y="0px">
<style type="text/css">.st1{fill:#FFFFFF;}</style>
<path fill="#73C8FF" d="M354.8,85.9C301.6,55.1,257.2,30,256,30s-45.6,25.1-98.8,55.9l-96.6,55.9v228.4l96.7,56.1 c55.2,31.9,97.6,56,98.8,55.9c1.1-0.1,45.6-25.3,98.7-56.1l96.6-55.9V141.7L354.8,85.9z"/>
<polygon class="st1" points="256,145.1 188,180.1 228.6,201 256,186.9 329.8,224.9 350,215.5 350,193.5 "/>
<polygon class="st1" points="343.5,322 350,318.6 350,283.5 168.5,190 162,193.4 162,228.5 "/>
<polygon class="st1" points="283.4,311.1 256,325.2 182.2,287.2 162,296.6 162,318.6 256,367 324,332 "/>
</svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" x="0" y="0" viewBox="0 0 100 100"><rect width="7" height="16" x="46.5" y="9" fill="#888" rx="37.2" ry="7.2"><animate attributeName="opacity" begin="-0.9230769230769231s" dur="1s" keyTimes="0;1" repeatCount="indefinite" values="1;0"/></rect><rect width="7" height="16" x="46.5" y="9" fill="#888" rx="37.2" ry="7.2" transform="rotate(27.692 50 50)"><animate attributeName="opacity" begin="-0.8461538461538461s" dur="1s" keyTimes="0;1" repeatCount="indefinite" values="1;0"/></rect><rect width="7" height="16" x="46.5" y="9" fill="#888" rx="37.2" ry="7.2" transform="rotate(55.385 50 50)"><animate attributeName="opacity" begin="-0.7692307692307693s" dur="1s" keyTimes="0;1" repeatCount="indefinite" values="1;0"/></rect><rect width="7" height="16" x="46.5" y="9" fill="#888" rx="37.2" ry="7.2" transform="rotate(83.077 50 50)"><animate attributeName="opacity" begin="-0.6923076923076923s" dur="1s" keyTimes="0;1" repeatCount="indefinite" values="1;0"/></rect><rect width="7" height="16" x="46.5" y="9" fill="#888" rx="37.2" ry="7.2" transform="rotate(110.77 50 50)"><animate attributeName="opacity" begin="-0.6153846153846154s" dur="1s" keyTimes="0;1" repeatCount="indefinite" values="1;0"/></rect><rect width="7" height="16" x="46.5" y="9" fill="#888" rx="37.2" ry="7.2" transform="rotate(138.462 50 50)"><animate attributeName="opacity" begin="-0.5384615384615384s" dur="1s" keyTimes="0;1" repeatCount="indefinite" values="1;0"/></rect><rect width="7" height="16" x="46.5" y="9" fill="#888" rx="37.2" ry="7.2" transform="rotate(166.154 50 50)"><animate attributeName="opacity" begin="-0.46153846153846156s" dur="1s" keyTimes="0;1" repeatCount="indefinite" values="1;0"/></rect><rect width="7" height="16" x="46.5" y="9" fill="#888" rx="37.2" ry="7.2" transform="rotate(193.846 50 50)"><animate attributeName="opacity" begin="-0.38461538461538464s" dur="1s" keyTimes="0;1" repeatCount="indefinite" values="1;0"/></rect><rect width="7" height="16" x="46.5" y="9" fill="#888" rx="37.2" ry="7.2" transform="rotate(221.538 50 50)"><animate attributeName="opacity" begin="-0.3076923076923077s" dur="1s" keyTimes="0;1" repeatCount="indefinite" values="1;0"/></rect><rect width="7" height="16" x="46.5" y="9" fill="#888" rx="37.2" ry="7.2" transform="rotate(249.23 50 50)"><animate attributeName="opacity" begin="-0.23076923076923078s" dur="1s" keyTimes="0;1" repeatCount="indefinite" values="1;0"/></rect><rect width="7" height="16" x="46.5" y="9" fill="#888" rx="37.2" ry="7.2" transform="rotate(276.923 50 50)"><animate attributeName="opacity" begin="-0.15384615384615385s" dur="1s" keyTimes="0;1" repeatCount="indefinite" values="1;0"/></rect><rect width="7" height="16" x="46.5" y="9" fill="#888" rx="37.2" ry="7.2" transform="rotate(304.615 50 50)"><animate attributeName="opacity" begin="-0.07692307692307693s" dur="1s" keyTimes="0;1" repeatCount="indefinite" values="1;0"/></rect><rect width="7" height="16" x="46.5" y="9" fill="#888" rx="37.2" ry="7.2" transform="rotate(332.308 50 50)"><animate attributeName="opacity" begin="0s" dur="1s" keyTimes="0;1" repeatCount="indefinite" values="1;0"/></rect></svg>
\ No newline at end of file
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="format-detection" content="telephone=no"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link rel="icon" href="/images/icons/favicon-16x16.png?v=2.6.2" type="image/png" sizes="16x16"><link rel="icon" href="/images/icons/favicon-32x32.png?v=2.6.2" type="image/png" sizes="32x32"><meta property="og:type" content="website">
<meta property="og:title" content="易服智享前端团队技术分享">
<meta property="og:url" content="http://example.com/index.html">
<meta property="og:site_name" content="易服智享前端团队技术分享">
<meta property="og:locale" content="zh_CN">
<meta property="article:author" content="易服智享前端团队">
<meta name="twitter:card" content="summary"><title>易服智享前端团队技术分享</title><link ref="canonical" href="http://example.com/index.html"><link rel="dns-prefetch" href="https://cdn.jsdelivr.net"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.12.1/css/all.min.css" type="text/css"><link rel="stylesheet" href="/css/index.css?v=2.6.2"><script>var Stun = window.Stun || {};
var CONFIG = {
root: '/',
algolia: undefined,
assistSearch: undefined,
fontIcon: {"prompt":{"success":"fas fa-check-circle","info":"fas fa-arrow-circle-right","warning":"fas fa-exclamation-circle","error":"fas fa-times-circle"},"copyBtn":"fas fa-copy"},
sidebar: {"offsetTop":"20px","tocMaxDepth":6},
header: undefined,
postWidget: {"endText":true},
nightMode: {"enable":true},
back2top: {"enable":true},
codeblock: {"style":"default","highlight":"light","wordWrap":false},
reward: false,
fancybox: false,
zoomImage: {"gapAside":"20px"},
galleryWaterfall: undefined,
lazyload: false,
pjax: undefined,
externalLink: {"icon":{"enable":true,"name":"fas fa-external-link-alt"}},
shortcuts: undefined,
prompt: {"copyButton":"复制","copySuccess":"复制成功","copyError":"复制失败"},
sourcePath: {"js":"js","css":"css","images":"images"},
};
window.CONFIG = CONFIG;</script><meta name="generator" content="Hexo 5.4.1"></head><body><div class="container" id="container"><header class="header" id="header"><div class="header-inner header-inner--height header-inner--bgcolor"><nav class="header-nav header-nav--sticky"><div class="header-nav-inner"><div class="header-nav-menubtn"><i class="fas fa-bars"></i></div><div class="header-nav-menu"><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/"><span class="header-nav-menu-item__icon"><i class="fas fa-home"></i></span><span class="header-nav-menu-item__text">首页</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/archives/"><span class="header-nav-menu-item__icon"><i class="fas fa-folder-open"></i></span><span class="header-nav-menu-item__text">归档</span></a></div></div><div class="header-nav-mode"><div class="mode"><div class="mode-track"><span class="mode-track-moon"></span><span class="mode-track-sun"></span></div><div class="mode-thumb"></div></div></div></div></nav></div></header><main class="main" id="main"><div class="main-inner"><div class="content-wrap" id="content-wrap"><div class="content content-home" id="content"><section class="postlist"><article class="postlist-item post"><header class="post-header"><h1 class="post-title"><a class="post-title__link" href="/2022/03/15/babel-basic/">Babel编译基础</a></h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2022-03-15</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2022-03-15</span></span></div></header><div class="post-body"><div class="post-excerpt">
<h2 id="操作指南" >
<a href="#操作指南" class="heading-link"><i class="fas fa-link"></i></a><a href="#操作指南" class="headerlink" title="操作指南"></a>操作指南</h2>
<p>前端项目工程化不断迭代更新,新的语法功能、特性让代码的书写变得更加舒服、简洁、易读、可维护。然而,对于浏览器的语法兼容性,却并不能很好的完美兼容新提出的语法、特性,不同版本的浏览器对于兼容语法方面也有着较大的差异。这时候,babel的出现可以说是应运而生,通过对于es2015+的语法进行编译适配,可以让我们更好的关注于业务本省、用最简洁的的代码完成需求,而不需要关注不同版本之间的兼容问题。Babel可以在不同测场景有着不同的使用,如下介绍的则是在cli(命令行)环境下,如何使用babel为我们的项目实现编译兼容。</p>
<ol>
<li>安装babel<figure class="highlight plaintext"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ npm init</span><br><span class="line">$ npm install --save-dev @babel/core @babel/cli</span><br></pre></td></tr></table></div></figure></li>
</ol>
<p>@babel/cli: babel自带的cli工具,可通过命令编译文件<br>@babel/core: babel功能核心库,babel转换核心库,可做一些中间操作</p>
<ol start="2">
<li>创建配置文件 babel.config.json/babel.config.js/.babelrc</li>
</ol>
<p>配置文件用于配置babel的部分预设功能</p>
<figure class="highlight json"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// babel.config.json</span></span><br><span class="line"></span><br><span class="line"><span class="punctuation">&#123;</span></span><br><span class="line"> <span class="attr">&quot;presets&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="string">&quot;@babel/preset-env&quot;</span><span class="punctuation">]</span> <span class="comment">// 启动 es6语法转换功能</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br><span class="line"></span><br></pre></td></tr></table></div></figure>
<p>如上配置需要安装 <strong>@babel/preset-env</strong>库,</p>
<figure class="highlight shell"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_"></span></span><br><span class="line"><span class="meta prompt_">$ </span><span class="language-bash">npm install --save-dev @babel/preset-env</span></span><br><span class="line"></span><br></pre></td></tr></table></div></figure>
<p>3、 创建一个js文件</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// Expression bodies</span></span><br><span class="line"><span class="keyword">var</span> odds = evens.<span class="title function_">map</span>(<span class="function"><span class="params">v</span> =&gt;</span> v + <span class="number">1</span>);</span><br><span class="line"><span class="keyword">var</span> nums = evens.<span class="title function_">map</span>(<span class="function">(<span class="params">v, i</span>) =&gt;</span> v + i);</span><br><span class="line"></span><br><span class="line"><span class="comment">// Statement bodies</span></span><br><span class="line">nums.<span class="title function_">forEach</span>(<span class="function"><span class="params">v</span> =&gt;</span> &#123;</span><br><span class="line"> <span class="keyword">if</span> (v % <span class="number">5</span> === <span class="number">0</span>)</span><br><span class="line"> fives.<span class="title function_">push</span>(v);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// Lexical this</span></span><br><span class="line"><span class="keyword">var</span> bob = &#123;</span><br><span class="line"> <span class="attr">_name</span>: <span class="string">&quot;Bob&quot;</span>,</span><br><span class="line"> <span class="attr">_friends</span>: [],</span><br><span class="line"> <span class="title function_">printFriends</span>(<span class="params"></span>) &#123;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_friends</span>.<span class="title function_">forEach</span>(<span class="function"><span class="params">f</span> =&gt;</span></span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">_name</span> + <span class="string">&quot; knows &quot;</span> + f));</span><br><span class="line"> &#125;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// Lexical arguments</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">square</span>(<span class="params"></span>) &#123;</span><br><span class="line"> <span class="keyword">let</span> <span class="title function_">example</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line"> <span class="keyword">let</span> numbers = [];</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> number <span class="keyword">of</span> <span class="variable language_">arguments</span>) &#123;</span><br><span class="line"> numbers.<span class="title function_">push</span>(number * number);</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> numbers;</span><br><span class="line"> &#125;;</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> <span class="title function_">example</span>();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title function_">square</span>(<span class="number">2</span>, <span class="number">4</span>, <span class="number">7.5</span>, <span class="number">8</span>, <span class="number">11.5</span>, <span class="number">21</span>); <span class="comment">// returns: [4, 16, 56.25, 64, 132.25, 441]</span></span><br><span class="line"></span><br></pre></td></tr></table></div></figure>
<p>4、 编译js</p>
<ul>
<li><p>添加编译脚本<br>在package.json中添加:</p>
<figure class="highlight json"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">&quot;scripts&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line"> <span class="attr">&quot;test&quot;</span><span class="punctuation">:</span> <span class="string">&quot;echo \&quot;Error: no test specified\&quot; &amp;&amp; exit 1&quot;</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">&quot;build:babel&quot;</span><span class="punctuation">:</span> <span class="string">&quot;babel src -d lib&quot;</span></span><br><span class="line"><span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br></pre></td></tr></table></div></figure></li>
<li><p>运行编译脚本</p>
</li>
</ul>
<figure class="highlight plaintext"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ npm run build:babel</span><br><span class="line"></span><br></pre></td></tr></table></div></figure>
<ul>
<li>编译结果</li>
</ul>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&quot;use strict&quot;</span>;</span><br><span class="line"><span class="comment">// lib/syntax.js</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">_createForOfIteratorHelper</span>(<span class="params">o, allowArrayLike</span>) &#123; <span class="keyword">var</span> it = <span class="keyword">typeof</span> <span class="title class_">Symbol</span> !== <span class="string">&quot;undefined&quot;</span> &amp;&amp; o[<span class="title class_">Symbol</span>.<span class="property">iterator</span>] || o[<span class="string">&quot;@@iterator&quot;</span>]; <span class="keyword">if</span> (!it) &#123; <span class="keyword">if</span> (<span class="title class_">Array</span>.<span class="title function_">isArray</span>(o) || (it = <span class="title function_">_unsupportedIterableToArray</span>(o)) || allowArrayLike &amp;&amp; o &amp;&amp; <span class="keyword">typeof</span> o.<span class="property">length</span> === <span class="string">&quot;number&quot;</span>) &#123; <span class="keyword">if</span> (it) o = it; <span class="keyword">var</span> i = <span class="number">0</span>; <span class="keyword">var</span> F = <span class="keyword">function</span> <span class="title function_">F</span>(<span class="params"></span>) &#123;&#125;; <span class="keyword">return</span> &#123; <span class="attr">s</span>: F, <span class="attr">n</span>: <span class="keyword">function</span> <span class="title function_">n</span>(<span class="params"></span>) &#123; <span class="keyword">if</span> (i &gt;= o.<span class="property">length</span>) <span class="keyword">return</span> &#123; <span class="attr">done</span>: <span class="literal">true</span> &#125;; <span class="keyword">return</span> &#123; <span class="attr">done</span>: <span class="literal">false</span>, <span class="attr">value</span>: o[i++] &#125;; &#125;, <span class="attr">e</span>: <span class="keyword">function</span> <span class="title function_">e</span>(<span class="params">_e</span>) &#123; <span class="keyword">throw</span> _e; &#125;, <span class="attr">f</span>: F &#125;; &#125; <span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">TypeError</span>(<span class="string">&quot;Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.&quot;</span>); &#125; <span class="keyword">var</span> normalCompletion = <span class="literal">true</span>, didErr = <span class="literal">false</span>, err; <span class="keyword">return</span> &#123; <span class="attr">s</span>: <span class="keyword">function</span> <span class="title function_">s</span>(<span class="params"></span>) &#123; it = it.<span class="title function_">call</span>(o); &#125;, <span class="attr">n</span>: <span class="keyword">function</span> <span class="title function_">n</span>(<span class="params"></span>) &#123; <span class="keyword">var</span> step = it.<span class="title function_">next</span>(); normalCompletion = step.<span class="property">done</span>; <span class="keyword">return</span> step; &#125;, <span class="attr">e</span>: <span class="keyword">function</span> <span class="title function_">e</span>(<span class="params">_e2</span>) &#123; didErr = <span class="literal">true</span>; err = _e2; &#125;, <span class="attr">f</span>: <span class="keyword">function</span> <span class="title function_">f</span>(<span class="params"></span>) &#123; <span class="keyword">try</span> &#123; <span class="keyword">if</span> (!normalCompletion &amp;&amp; it[<span class="string">&quot;return&quot;</span>] != <span class="literal">null</span>) it[<span class="string">&quot;return&quot;</span>](); &#125; <span class="keyword">finally</span> &#123; <span class="keyword">if</span> (didErr) <span class="keyword">throw</span> err; &#125; &#125; &#125;; &#125;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">_unsupportedIterableToArray</span>(<span class="params">o, minLen</span>) &#123; <span class="keyword">if</span> (!o) <span class="keyword">return</span>; <span class="keyword">if</span> (<span class="keyword">typeof</span> o === <span class="string">&quot;string&quot;</span>) <span class="keyword">return</span> <span class="title function_">_arrayLikeToArray</span>(o, minLen); <span class="keyword">var</span> n = <span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">toString</span>.<span class="title function_">call</span>(o).<span class="title function_">slice</span>(<span class="number">8</span>, -<span class="number">1</span>); <span class="keyword">if</span> (n === <span class="string">&quot;Object&quot;</span> &amp;&amp; o.<span class="property">constructor</span>) n = o.<span class="property">constructor</span>.<span class="property">name</span>; <span class="keyword">if</span> (n === <span class="string">&quot;Map&quot;</span> || n === <span class="string">&quot;Set&quot;</span>) <span class="keyword">return</span> <span class="title class_">Array</span>.<span class="title function_">from</span>(o); <span class="keyword">if</span> (n === <span class="string">&quot;Arguments&quot;</span> || <span class="regexp">/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/</span>.<span class="title function_">test</span>(n)) <span class="keyword">return</span> <span class="title function_">_arrayLikeToArray</span>(o, minLen); &#125;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">_arrayLikeToArray</span>(<span class="params">arr, len</span>) &#123; <span class="keyword">if</span> (len == <span class="literal">null</span> || len &gt; arr.<span class="property">length</span>) len = arr.<span class="property">length</span>; <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>, arr2 = <span class="keyword">new</span> <span class="title class_">Array</span>(len); i &lt; len; i++) &#123; arr2[i] = arr[i]; &#125; <span class="keyword">return</span> arr2; &#125;</span><br><span class="line"><span class="comment">// Expression bodies</span></span><br><span class="line"><span class="keyword">var</span> odds = evens.<span class="title function_">map</span>(<span class="keyword">function</span> (<span class="params">v</span>) &#123; <span class="keyword">return</span> v + <span class="number">1</span>;&#125;);</span><br><span class="line"><span class="keyword">var</span> nums = evens.<span class="title function_">map</span>(<span class="keyword">function</span> (<span class="params">v, i</span>) &#123;<span class="keyword">return</span> v + i;&#125;); <span class="comment">// Statement bodies</span></span><br><span class="line">nums.<span class="title function_">forEach</span>(<span class="keyword">function</span> (<span class="params">v</span>) &#123;</span><br><span class="line"> <span class="keyword">if</span> (v % <span class="number">5</span> === <span class="number">0</span>) fives.<span class="title function_">push</span>(v);</span><br><span class="line">&#125;); <span class="comment">// Lexical this</span></span><br><span class="line"><span class="keyword">var</span> bob = &#123;</span><br><span class="line"> <span class="attr">_name</span>: <span class="string">&quot;Bob&quot;</span>,</span><br><span class="line"> <span class="attr">_friends</span>: [],</span><br><span class="line"> <span class="attr">printFriends</span>: <span class="keyword">function</span> <span class="title function_">printFriends</span>(<span class="params"></span>) &#123;</span><br><span class="line"> <span class="keyword">var</span> _this = <span class="variable language_">this</span>;</span><br><span class="line"> <span class="variable language_">this</span>.<span class="property">_friends</span>.<span class="title function_">forEach</span>(<span class="keyword">function</span> (<span class="params">f</span>) &#123;</span><br><span class="line"> <span class="keyword">return</span> <span class="variable language_">console</span>.<span class="title function_">log</span>(_this.<span class="property">_name</span> + <span class="string">&quot; knows &quot;</span> + f);</span><br><span class="line"> &#125;);</span><br><span class="line"> &#125;</span><br><span class="line">&#125;; <span class="comment">// Lexical arguments</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">square</span>(<span class="params"></span>) &#123;</span><br><span class="line"> <span class="keyword">var</span> _arguments = <span class="variable language_">arguments</span>;</span><br><span class="line"> <span class="keyword">var</span> example = <span class="keyword">function</span> <span class="title function_">example</span>(<span class="params"></span>) &#123;</span><br><span class="line"> <span class="keyword">var</span> numbers = [];</span><br><span class="line"> <span class="keyword">var</span> _iterator = <span class="title function_">_createForOfIteratorHelper</span>(_arguments),</span><br><span class="line"> _step;</span><br><span class="line"> <span class="keyword">try</span> &#123;</span><br><span class="line"> <span class="keyword">for</span> (_iterator.<span class="title function_">s</span>(); !(_step = _iterator.<span class="title function_">n</span>()).<span class="property">done</span>;) &#123;</span><br><span class="line"> <span class="keyword">var</span> number = _step.<span class="property">value</span>;</span><br><span class="line"> numbers.<span class="title function_">push</span>(number * number);</span><br><span class="line"> &#125;</span><br><span class="line"> &#125; <span class="keyword">catch</span> (err) &#123;</span><br><span class="line"> _iterator.<span class="title function_">e</span>(err);</span><br><span class="line"> &#125; <span class="keyword">finally</span> &#123;</span><br><span class="line"> _iterator.<span class="title function_">f</span>();</span><br><span class="line"> &#125;</span><br><span class="line"> <span class="keyword">return</span> numbers;</span><br><span class="line"> &#125;;</span><br><span class="line"> <span class="keyword">return</span> <span class="title function_">example</span>();</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">square</span>(<span class="number">2</span>, <span class="number">4</span>, <span class="number">7.5</span>, <span class="number">8</span>, <span class="number">11.5</span>, <span class="number">21</span>); <span class="comment">// returns: [4, 16, 56.25, 64, 132.25, 441]</span></span><br></pre></td></tr></table></div></figure>
<p>上面可以发现,使用@babel/preset预设编译可以完成es6的语法代码的转译(let、var、for…in、for…of等),但对于es6中新增的api功能并不能完成编译(Array.map、Array.forEach、Promise等)。为此,我们需要对于es6中新增的api进行单独的转译(本篇暂不介绍)。</p>
<p>源码示例:<span class="exturl"><a class="exturl__link" target="_blank" rel="noopener" href="https://github.com/amikoj/babelDemo/tree/main/sourceJs" >GITHUB</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span></p>
</div></div></article><article class="postlist-item post"><header class="post-header"><h1 class="post-title"><a class="post-title__link" href="/2021/12/03/%E7%AE%80%E5%8D%95%E4%BA%86%E8%A7%A3oop%E7%BC%96%E7%A8%8B%E6%80%9D%E6%83%B3%E5%92%8C%E5%B8%B8%E8%A7%81%E7%9A%84%E5%87%A0%E7%A7%8D%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/">简单了解面向对象编程(oop)和常见的几种设计模式</a></h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2021-12-03</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2022-03-15</span></span></div></header><div class="post-body"><div class="post-excerpt"><h2 id="简单了解面向对象编程(oop)和常见的几种设计模式" >
<a href="#简单了解面向对象编程(oop)和常见的几种设计模式" class="heading-link"><i class="fas fa-link"></i></a><a href="#简单了解面向对象编程(oop)和常见的几种设计模式" class="headerlink" title="简单了解面向对象编程(oop)和常见的几种设计模式"></a>简单了解面向对象编程(oop)和常见的几种设计模式</h2>
<p><em><strong>背景:</strong></em></p>
<p>1、软件设计开发过程中疑难问题:</p>
<ul>
<li>软件复杂庞大 </li>
<li>难以维护阶</li>
<li><pre><code>版本迭代需求变更
</code></pre>
</li>
</ul>
<p>软件设计开发中存在很多其他的问题,上面只是从程序开发和设计的角度看到的部分问题。需求解决上面软件开发中的问题,就要求我们编写(设计)的软件具有很好的可读性、可维护性和可扩展性。我们需要保证代码具有高内聚低耦合,这里我们使用了OOP编程思想。</p></div><div class="post-readmore"><a class="post-readmore__link" href="/2021/12/03/%E7%AE%80%E5%8D%95%E4%BA%86%E8%A7%A3oop%E7%BC%96%E7%A8%8B%E6%80%9D%E6%83%B3%E5%92%8C%E5%B8%B8%E8%A7%81%E7%9A%84%E5%87%A0%E7%A7%8D%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/"><span class="post-readmore__text">阅读全文</span><span class="post-readmore__icon"><i class="fas fa-long-arrow-alt-right"></i></span></a></div></div></article><article class="postlist-item post"><header class="post-header"><h1 class="post-title"><a class="post-title__link" href="/2021/11/12/%E5%8A%A0%E5%AF%86%E6%96%B9%E5%BC%8F%E6%A6%82%E8%BF%B0%20/">加密方式概述</a></h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2021-11-12</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2022-03-15</span></span></div></header><div class="post-body"><div class="post-excerpt"><h1 id="加密方式概览" >
<a href="#加密方式概览" class="heading-link"><i class="fas fa-link"></i></a><a href="#加密方式概览" class="headerlink" title="加密方式概览"></a>加密方式概览</h1>
<p>公元683年,唐中宗即位。随后,武则天废唐中宗,立第四子李旦为皇帝,但朝政大事均由她自己专断。  </p>
<p>  裴炎、徐敬业和骆宾王等人对此非常不满。徐敬业聚兵十万,在江苏扬州起兵。裴炎做内应,欲以拆字手段为其传递秘密信息。后因有人告密,裴炎被捕,未发出的密信落到武则天手中。这封密信上只有“青鹅”二字,群臣对此大惑不解。  </p>
<p>  武则天破解了“青鹅”的秘密:“青”字拆开来就是“十二月”,而“鹅”字拆开来就是“我自与”。密信的意思是让徐敬业、骆宾王等率兵于十二月进发,裴炎在内部接应。“青鹅”破译后,裴炎被杀。接着,武则天派兵击败了徐敬业和骆宾王。</p></div><div class="post-readmore"><a class="post-readmore__link" href="/2021/11/12/%E5%8A%A0%E5%AF%86%E6%96%B9%E5%BC%8F%E6%A6%82%E8%BF%B0%20/"><span class="post-readmore__text">阅读全文</span><span class="post-readmore__icon"><i class="fas fa-long-arrow-alt-right"></i></span></a></div></div></article><article class="postlist-item post"><header class="post-header"><h1 class="post-title"><a class="post-title__link" href="/2021/11/11/%E5%89%8D%E7%AB%AF%E7%BC%93%E5%AD%98/">前端缓存</a></h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2021-11-11</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2022-03-15</span></span></div></header><div class="post-body"><div class="post-excerpt"><p><strong>缓存是一种保存资源副本并在下次请求时直接使用该副本的技术</strong></p>
<h2 id="缓存的种类" >
<a href="#缓存的种类" class="heading-link"><i class="fas fa-link"></i></a><a href="#缓存的种类" class="headerlink" title="缓存的种类"></a>缓存的种类</h2>
<p></p>
<p>我相信只要你经常使用某个浏览器(Chrome,Firefox,IE等),肯定知道这些浏览器在设置里面都是有个清除缓存功能,这个功能存在的作用就是删除存储在你本地磁盘上资源副本,也就是清除缓存。<br>缓存存在的意义就是当用户点击back按钮或是再次去访问某个页面的时候能够更快的响应。尤其是在多页应用的网站中,如果你在多个页面使用了一张相同的图片,那么缓存这张图片就变得特别的有用。</p></div><div class="post-readmore"><a class="post-readmore__link" href="/2021/11/11/%E5%89%8D%E7%AB%AF%E7%BC%93%E5%AD%98/"><span class="post-readmore__text">阅读全文</span><span class="post-readmore__icon"><i class="fas fa-long-arrow-alt-right"></i></span></a></div></div></article></section><nav class="paginator"><div class="paginator-inner"><span class="page-number current">1</span></div></nav></div></div><div class="sidebar-wrap" id="sidebar-wrap"><aside class="sidebar" id="sidebar"><section class="sidebar-toc hide"></section><!-- ov = overview--><section class="sidebar-ov"><div class="sidebar-ov-author"><div class="sidebar-ov-author__avatar"><img class="sidebar-ov-author__avatar_img" src="/images/icons/stun-logo.svg" alt="avatar"></div><p class="sidebar-ov-author__text">易服前端</p></div><div class="sidebar-ov-state"><a class="sidebar-ov-state-item sidebar-ov-state-item--posts" href="/archives/"><div class="sidebar-ov-state-item__count">4</div><div class="sidebar-ov-state-item__name">归档</div></a></div><div class="sidebar-ov-cc"><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" target="_blank" rel="noopener" data-popover="知识共享许可协议" data-popover-pos="up"><img src="/images/cc-by-nc-sa.svg"></a></div></section></aside></div><div class="clearfix"></div></div></main><footer class="footer" id="footer"><div class="footer-inner"><div><span>Copyright © 2022</span><span class="footer__icon"><i class="fas fa-heart"></i></span><span>易服智享前端团队</span></div><div><span><a href="http://hexo.io/" title="Hexo" target="_blank" rel="noopener">Hexo</a> 强力驱动</span><span> v5.4.1</span><span class="footer__devider">|</span><span>主题 - <a href="https://github.com/liuyib/hexo-theme-stun/" title="Stun" target="_blank" rel="noopener">Stun</a></span><span> v2.6.2</span></div></div></footer><div class="loading-bar" id="loading-bar"><div class="loading-bar__progress"></div></div><div class="back2top" id="back2top"><span class="back2top__icon"><i class="fas fa-rocket"></i></span></div></div><script src="https://cdn.jsdelivr.net/npm/jquery@v3.4.1/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@1.5.2/velocity.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@1.5.2/velocity.ui.min.js"></script><script src="/js/utils.js?v=2.6.2"></script><script src="/js/stun-boot.js?v=2.6.2"></script><script src="/js/scroll.js?v=2.6.2"></script><script src="/js/header.js?v=2.6.2"></script><script src="/js/sidebar.js?v=2.6.2"></script></body></html>
\ No newline at end of file
$(document).ready(function () {
var $menuBtn = $('.header-nav-menubtn')
var $menu = $('.header-nav-menu')
var $menuItem = $('.header-nav-menu-item')
var $submenu = $('.header-nav-submenu')
var isMobile = $menuBtn.is(':visible')
var isMenuShow = false
var isSubmenuShow = false
function resetMenuHeight () {
$menuItem.velocity(
{
height: $menuItem.outerHeight()
},
{
complete: function () {
$submenu.css({ display: 'none', opacity: 0 })
}
}
)
}
$(window).on(
'resize',
Stun.utils.throttle(function () {
isMobile = $menuBtn.is(':visible')
if (isMobile) {
$submenu.removeClass('hide--force')
if (isSubmenuShow) {
resetMenuHeight()
isSubmenuShow = false
}
} else {
$submenu.css({ display: 'none', opacity: 0 })
}
}, 200)
)
var isNightModeFocus = true
var $nightMode = $('.mode')
$(document).on('click', function () {
if ($menu.is(':visible')) {
if (isMobile && isSubmenuShow) {
resetMenuHeight()
isSubmenuShow = false
}
$menu.css({ display: 'none' })
isMenuShow = false
}
if (isNightModeFocus) {
$nightMode.removeClass('mode--focus')
isNightModeFocus = false
}
})
Stun.utils.pjaxReloadHeader = function () {
$menuBtn = $('.header-nav-menubtn')
$menu = $('.header-nav-menu')
$menuItem = $('.header-nav-menu-item')
$submenu = $('.header-nav-submenu')
isMobile = $menuBtn.is(':visible')
isMenuShow = false
isSubmenuShow = false
function getNightMode () {
var nightMode = false
try {
if (parseInt(Stun.utils.Cookies().get(NIGHT_MODE_COOKIES_KEY))) {
nightMode = true
}
} catch (err) {
/* empty */
}
return nightMode
}
if (CONFIG.nightMode && CONFIG.nightMode.enable) {
var isNightMode = false
var NIGHT_MODE_COOKIES_KEY = 'night_mode'
$nightMode = $('.mode')
isNightModeFocus = true
if (getNightMode()) {
$nightMode.addClass('mode--checked')
$nightMode.addClass('mode--focus')
$('html').addClass('nightmode')
isNightMode = true
} else {
isNightMode = false
}
$('.mode').on('click', function (e) {
e.stopPropagation()
isNightMode = !isNightMode
isNightModeFocus = true
Stun.utils.Cookies().set(NIGHT_MODE_COOKIES_KEY, isNightMode ? 1 : 0)
$nightMode.toggleClass('mode--checked')
$nightMode.addClass('mode--focus')
$('html').toggleClass('nightmode')
})
}
$menuBtn.on('click', function (e) {
e.stopPropagation()
if (isMobile && isMenuShow && isSubmenuShow) {
resetMenuHeight()
isSubmenuShow = false
}
if (!isMenuShow) {
isMenuShow = true
} else {
isMenuShow = false
}
$menu.velocity('stop').velocity(
{
opacity: isMenuShow ? 1 : 0
},
{
duration: isMenuShow ? 200 : 0,
display: isMenuShow ? 'block' : 'none'
}
)
})
// Whether to allow events to bubble in the menu.
var isBubbleInMenu = false
$('.header-nav-submenu-item').on('click', function () {
isBubbleInMenu = true
})
$menuItem.on('click', function (e) {
if (!isMobile) {
return
}
var $submenu = $(this).find('.header-nav-submenu')
if (!$submenu.length) {
return
}
if (!isBubbleInMenu) {
e.stopPropagation()
} else {
isBubbleInMenu = false
}
var menuItemHeight = $menuItem.outerHeight()
var submenuHeight =
menuItemHeight + Math.floor($submenu.outerHeight()) * $submenu.length
var menuShowHeight = 0
if ($(this).outerHeight() > menuItemHeight) {
isSubmenuShow = false
menuShowHeight = menuItemHeight
} else {
isSubmenuShow = true
menuShowHeight = submenuHeight
}
$submenu.css({ display: 'block', opacity: 1 })
// Accordion effect.
$(this)
.velocity('stop')
.velocity({ height: menuShowHeight }, { duration: 300 })
.siblings()
.velocity({ height: menuItemHeight }, { duration: 300 })
})
$menuItem.on('mouseenter', function () {
var $submenu = $(this).find('.header-nav-submenu')
if (!$submenu.length) {
return
}
if (!$submenu.is(':visible')) {
if (isMobile) {
$submenu.css({ display: 'block', opacity: 1 })
} else {
$submenu.removeClass('hide--force')
$submenu
.velocity('stop')
.velocity('transition.slideUpIn', { duration: 200 })
}
}
})
$menuItem.on('mouseleave', function () {
var $submenu = $(this).find('.header-nav-submenu')
if (!$submenu.length) {
return
}
if (!isMobile) {
$submenu.addClass('hide--force')
isSubmenuShow = false
}
})
}
Stun.utils.pjaxReloadScrollIcon = function () {
if (CONFIG.header && CONFIG.header.scrollDownIcon) {
$('.header-banner-arrow').on('click', function (e) {
e.stopPropagation()
$('#container').velocity('scroll', {
offset: $('#header').outerHeight()
})
})
}
}
// Initializaiton
Stun.utils.pjaxReloadHeader()
Stun.utils.pjaxReloadScrollIcon()
})
$(document).ready(function () {
var isHeaderEnable = CONFIG.header && CONFIG.header.enable
var isShowHeaderOnPost = isHeaderEnable && CONFIG.header.showOnPost
// The previous distance from the page to the top.
var prevScrollTop = 0
var isNavFix = false
var isAnimation = true
function headerNavScroll () {
var isPostPage = !!$('#is-post').length
var isNoHeader = !isHeaderEnable || (isPostPage && !isShowHeaderOnPost)
var $headerNav = $('.header-nav')
var scrollTop = Math.floor($(window).scrollTop())
var delta = Math.floor(scrollTop - prevScrollTop)
if (scrollTop === 0) {
if (isNoHeader) {
setTimeout(function () {
$headerNav.addClass('slider--clear')
isAnimation = false
}, 200)
}
$headerNav.removeClass('header-nav--sticky')
$headerNav.removeClass('slider--up')
$headerNav.addClass('slider--down')
} else {
if (isNoHeader && scrollTop < $headerNav.height()) {
return false
}
var MIN_SCROLL_TO_CHANGE_NAV = 5
// Make the state of nav bar not change due to tiny scrolling.
if (Math.abs(delta) > MIN_SCROLL_TO_CHANGE_NAV) {
if (isNoHeader) {
if (!isAnimation) {
isAnimation = true
} else {
$headerNav.removeClass('slider--clear')
}
}
if (!isNavFix) {
isNavFix = true
} else {
$headerNav.addClass('header-nav--sticky')
}
if (delta > 0) {
$headerNav.removeClass('slider--down')
$headerNav.addClass('slider--up')
} else {
$headerNav.removeClass('slider--up')
$headerNav.addClass('slider--down')
}
} else {
$headerNav.addClass('header-nav--sticky')
}
}
prevScrollTop = scrollTop
}
var isBack2topEnable = CONFIG.back2top && CONFIG.back2top.enable
var isBack2topShow = false
// Back the page to top.
function back2top () {
var $back2top = $('#back2top')
var scrollTop = $(window).scrollTop()
if (scrollTop !== 0) {
if (!isBack2topShow) {
$back2top.addClass('back2top--show')
$back2top.removeClass('back2top--hide')
isBack2topShow = true
}
} else {
$back2top.addClass('back2top--hide')
$back2top.removeClass('back2top--show')
isBack2topShow = false
}
}
if (isBack2topEnable) {
// Initializaiton
back2top()
$('#back2top').on('click', function () {
$('body')
.velocity('stop')
.velocity('scroll')
})
}
// Initializaiton
headerNavScroll()
$(window).on(
'scroll',
Stun.utils.throttle(function () {
headerNavScroll()
if (isBack2topEnable) {
back2top()
}
}, 100)
)
})
$(document).ready(function () {
var tocDepth = (CONFIG.sidebar && CONFIG.sidebar.tocMaxDepth) || 4
// Optimize selector by theme config.
var HEADING_SELECTOR = 'h1,h2,h3,h4,h5,h6,'
.slice(0, tocDepth * 3)
.slice(0, -1)
function initTocDisplay () {
if ($('.post-body, .custompage').find(HEADING_SELECTOR)[0]) {
return
}
$('.sidebar-nav').addClass('hide')
$('.sidebar-toc').addClass('hide')
$('.sidebar-ov').removeClass('hide')
}
// The heading that reached the top currently.
var currHeading = null
// The heading that reached the top last time.
var lastHeading = null
var isRemovedTocClass = false
// Automatically expand items in the article directory
// based on the scrolling of heading in the article.
function autoSpreadToc () {
var $postBody = $('.post-body, .custompage')
var $allTocItem = $('.sidebar-toc li')
var $headings = $postBody.find(HEADING_SELECTOR)
var $firsetChild = $headings.first()
$headings.each(function () {
var headingTop = this.getBoundingClientRect().top
// The minimum distance from the top of the browser
// when heading is marked as active in toc.
var MIN_HEIGHT_TO_TOP = 5
if (headingTop <= MIN_HEIGHT_TO_TOP) {
currHeading = window.encodeURIComponent(this.getAttribute('id'))
}
})
// All heading are not to the top.
if (
$postBody[0] &&
$firsetChild[0] &&
$firsetChild[0].getBoundingClientRect().top > 0 &&
$firsetChild.offset().top - $(window).scrollTop() > 0
) {
if (!isRemovedTocClass) {
$allTocItem.removeClass('active current')
isRemovedTocClass = true
}
return
}
if (currHeading !== lastHeading) {
var $targetLink = $('.sidebar-toc a[href="#' + currHeading + '"]')
// In order to be compatible with Hexo under v5.0.0
if (!$targetLink.length) {
var anchorDecode = window.decodeURIComponent(currHeading)
$targetLink = $('.sidebar-toc a[href="#' + anchorDecode + '"]')
}
$allTocItem.removeClass('active current')
$targetLink.parents('li').addClass('active')
$targetLink.parent().addClass('current')
lastHeading = currHeading
isRemovedTocClass = false
}
}
// Whether toc needs scrolling.
var isTocScroll = false
// Scroll the post toc to the middle.
function scrollTocToMiddle () {
var $tocWrapHeight = $('.sidebar-toc').height()
var $tocHeight = $('.sidebar-toc > div').height()
if ($tocHeight <= $tocWrapHeight) {
return
}
var $tocWrap = $('.sidebar-toc')
var $currTocItem = $('.sidebar-toc .current a')
if ($currTocItem[0] && $tocWrap[0]) {
var tocTop = $currTocItem.offset().top - $tocWrap.offset().top
isTocScroll = tocTop > $tocWrapHeight || tocTop < 0
}
if (isTocScroll) {
$currTocItem.velocity('stop').velocity('scroll', {
container: $tocWrap,
offset: -$tocWrapHeight / 2,
duration: 500,
easing: 'easeOutQuart'
})
}
}
// Distance from sidebar to top.
var sidebarToTop = 0
if (CONFIG.sidebar && CONFIG.sidebar.offsetTop) {
sidebarToTop = parseInt(CONFIG.sidebar.offsetTop)
}
// Sticky the sidebar when it arrived the top.
function sidebarSticky () {
var $sidebar = $('#sidebar')
var targetY = document
.getElementById('content-wrap')
.getBoundingClientRect().top
if (targetY < sidebarToTop) {
$sidebar.addClass('sidebar--sticky')
} else {
$sidebar.removeClass('sidebar--sticky')
}
}
// Update the reading progress lines of post.
function readProgress () {
// Not on post page.
if ($('#is-post').length === 0) {
return
}
var $post = $('.content')
var postTop = $post.offset().top
var postEndTop = 0
var postEndHeight = 0
var postReadingHeight = 0
var isEnablePostEnd = false
var percent = 0
if (CONFIG.postWidget && CONFIG.postWidget.endText) {
isEnablePostEnd = true
}
if (isEnablePostEnd) {
postEndTop = $('.post-ending').offset().top
postEndHeight = $('.post-ending').outerHeight()
postReadingHeight = postEndTop - postTop + postEndHeight
} else {
postEndTop = $('.post-footer').offset().top
postReadingHeight = postEndTop - postTop
}
var windowHeight = $(window).height()
var postScrollTop = 0
if ($post.length !== 0) {
postScrollTop =
parseInt($post[0].getBoundingClientRect().top * -1) + windowHeight
}
var percentNum = Number($('.sidebar-reading-info__num').text())
postReadingHeight = parseInt(Math.abs(postReadingHeight))
percent = parseInt((postScrollTop / postReadingHeight) * 100)
percent = percent > 100 ? 100 : percent < 0 ? 0 : percent
// Has reached the maximum or minimum
if (
(percent === 0 && percentNum === 0) ||
(percent === 100 && percentNum === 100)
) {
return
}
$('.sidebar-reading-info__num').text(percent)
$('.sidebar-reading-line').css(
'transform',
'translateX(' + (percent - 100) + '%)'
)
}
// Initial run
autoSpreadToc()
sidebarSticky()
scrollTocToMiddle()
readProgress()
$(window).on('scroll', function () {
sidebarSticky()
})
$(window).on(
'scroll',
Stun.utils.throttle(function () {
autoSpreadToc()
scrollTocToMiddle()
readProgress()
}, 150)
)
Stun.utils.pjaxReloadSidebar = function () {
var $navToc = $('.sidebar-nav-toc')
var $navOv = $('.sidebar-nav-ov')
var $tocWrap = $('.sidebar-toc')
var $overview = $('.sidebar-ov')
$navToc.on('click', function (e) {
e.stopPropagation()
if ($(this).hasClass('current')) {
return
}
$navToc.addClass('current')
$navOv.removeClass('current')
$tocWrap.css('display', 'block')
$tocWrap.velocity('stop').velocity('fadeIn')
$overview.css('display', 'none')
$overview.velocity('stop').velocity('fadeOut')
})
$navOv.on('click', function (e) {
e.stopPropagation()
if ($(this).hasClass('current')) {
return
}
$navOv.addClass('current')
$navToc.removeClass('current')
$tocWrap.css('display', 'none')
$tocWrap.velocity('stop').velocity('fadeOut')
$overview.css('display', 'block')
$overview.velocity('stop').velocity('fadeIn')
})
initTocDisplay()
}
// Initialization
Stun.utils.pjaxReloadSidebar()
})
$(document).ready(function () {
Stun.utils.showThemeInConsole()
if (CONFIG.shortcuts && CONFIG.shortcuts.switchPost) {
Stun.utils.registerSwitchPost()
}
// Not reload this, because it's changeless.
if (CONFIG.externalLink) {
Stun.utils.addIconToExternalLink('#footer')
}
Stun.utils.pjaxReloadBoot = function () {
if (CONFIG.codeblock) {
var codeStyle = CONFIG.codeblock.style
if (codeStyle === 'default') {
this.addCodeHeader()
this.addCopyButton()
} else if (codeStyle === 'carbon') {
this.addCodeHeader('carbon')
this.addCopyButton('carbon')
} else if (codeStyle === 'simple') {
this.addCopyButton('simple')
}
this.registerCopyEvent()
}
if (CONFIG.reward) {
this.registerShowReward()
}
if (CONFIG.lazyload) {
this.lazyLoadImage()
}
if (CONFIG.galleryWaterfall) {
this.showImageToWaterfall()
}
if (CONFIG.externalLink) {
var CONTAINER = '.archive, .post-title'
this.addIconToExternalLink(CONTAINER)
}
if (CONFIG.fancybox) {
this.wrapImageWithFancyBox()
} else if (CONFIG.zoomImage) {
this.registerZoomImage()
}
}
// Initializaiton
Stun.utils.pjaxReloadBoot()
})
Stun.utils = Stun.$u = {
/**
* Debounce
* @param {Object} func Callback function
* @param {Number} wait Waiting time
* @param {Boolean} immediate Run immediately
*/
debounce: function (func, wait, immediate) {
var timeout
return function () {
var context = this
var args = arguments
if (timeout) clearTimeout(timeout)
if (immediate) {
var callNow = !timeout
timeout = setTimeout(function () {
timeout = null
}, wait)
if (callNow) func.apply(context, args)
} else {
timeout = setTimeout(function () {
func.apply(context, args)
}, wait)
}
}
},
/**
* Throttle
* @param {Object} func Callback function
* @param {Number} wait Waiting time
* @param {Object} options leading: Boolean, trailing: Boolean
*/
throttle: function (func, wait, options) {
var timeout, context, args
var previous = 0
if (!options) options = {}
var later = function () {
previous = options.leading === false ? 0 : new Date().getTime()
timeout = null
func.apply(context, args)
if (!timeout) context = args = null
}
var throttled = function () {
var now = new Date().getTime()
if (!previous && options.leading === false) previous = now
var remaining = wait - (now - previous)
context = this
args = arguments
if (remaining <= 0 || remaining > wait) {
if (timeout) {
clearTimeout(timeout)
timeout = null
}
previous = now
func.apply(context, args)
if (!timeout) context = args = null
} else if (!timeout && options.trailing !== false) {
timeout = setTimeout(later, remaining)
}
}
return throttled
},
hasMobileUA: function () {
var nav = window.navigator
var ua = nav.userAgent
var pa = /iPad|iPhone|Android|Opera Mini|BlackBerry|webOS|UCWEB|Blazer|PSP|IEMobile|Symbian/g
return pa.test(ua)
},
isTablet: function () {
return (
window.screen.width > 767 &&
window.screen.width < 992 &&
this.hasMobileUA()
)
},
isMobile: function () {
return window.screen.width < 767 && this.hasMobileUA()
},
isDesktop: function () {
return !this.isTablet() && !this.isMobile()
},
Cookies: function () {
function extend () {
var i = 0
var result = {}
for (; i < arguments.length; i++) {
var attributes = arguments[i]
for (var key in attributes) {
result[key] = attributes[key]
}
}
return result
}
function init (converter) {
function api (key, value, attributes) {
var result
if (typeof document === 'undefined') {
return
}
// Write
if (arguments.length > 1) {
attributes = extend({ path: '/' }, api.defaults, attributes)
if (typeof attributes.expires === 'number') {
var expires = new Date()
expires.setMilliseconds(
expires.getMilliseconds() + attributes.expires * 864e5
)
attributes.expires = expires
}
// We're using "expires" because "max-age" is not supported by IE
attributes.expires = attributes.expires
? attributes.expires.toUTCString()
: ''
try {
result = JSON.stringify(value)
if (/^[{[]/.test(result)) {
value = result
}
} catch (e) {
/* empty */
}
if (!converter.write) {
value = encodeURIComponent(String(value)).replace(
/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g,
decodeURIComponent
)
} else {
value = converter.write(value, key)
}
key = encodeURIComponent(String(key))
key = key.replace(/%(23|24|26|2B|5E|60|7C)/g, decodeURIComponent)
key = key.replace(/[()]/g, escape)
var stringifiedAttributes = ''
for (var attributeName in attributes) {
if (!attributes[attributeName]) {
continue
}
stringifiedAttributes += '; ' + attributeName
if (attributes[attributeName] === true) {
continue
}
stringifiedAttributes += '=' + attributes[attributeName]
}
return (document.cookie = key + '=' + value + stringifiedAttributes)
}
// Read
if (!key) {
result = {}
}
// To prevent the for loop in the first place assign an empty array
// in case there are no cookies at all. Also prevents odd result when
// calling "get()"
var cookies = document.cookie ? document.cookie.split('; ') : []
var rdecode = /(%[0-9A-Z]{2})+/g
var i = 0
for (; i < cookies.length; i++) {
var parts = cookies[i].split('=')
var cookie = parts.slice(1).join('=')
if (cookie.charAt(0) === '"') {
cookie = cookie.slice(1, -1)
}
try {
var name = parts[0].replace(rdecode, decodeURIComponent)
cookie = converter.read
? converter.read(cookie, name)
: converter(cookie, name) ||
cookie.replace(rdecode, decodeURIComponent)
if (this.json) {
try {
cookie = JSON.parse(cookie)
} catch (e) {
/* empty */
}
}
if (key === name) {
result = cookie
break
}
if (!key) {
result[name] = cookie
}
} catch (e) {
/* empty */
}
}
return result
}
api.set = api
api.get = function (key) {
return api.call(api, key)
}
api.getJSON = function () {
return api.apply({ json: true }, [].slice.call(arguments))
}
api.defaults = {}
api.remove = function (key, attributes) {
api(key, '', extend(attributes, { expires: -1 }))
}
api.withConverter = init
return api
}
return init(function () {})
},
showThemeInConsole: function () {
var stunInfo = '主题不错?⭐star 支持一下 ->'
var stunURL = 'https://github.com/liuyib/hexo-theme-stun'
var stunNameStr =
'\n\n ___ ___ ___ ___ \n /\\ \\ /\\ \\ /\\__\\ /\\__\\ \n /::\\ \\ \\:\\ \\ /:/ / /::| | \n /:/\\ \\ \\ \\:\\ \\ /:/ / /:|:| | \n _\\:\\ \\ \\ \\ /::\\ \\ /:/ / ___ /:/|:| |__ \n /\\ \\:\\ \\ \\__\\ /:/\\:\\__\\ /:/__/ /\\__\\ /:/ |:| /\\__\\ \n \\:\\ \\:\\ \\/__/ /:/ \\/__/ \\:\\ \\ /:/ / \\/__|:|/:/ / \n \\:\\ \\:\\__\\ /:/ / \\:\\ /:/ / |:/:/ / \n \\:\\/:/ / \\/__/ \\:\\/:/ / |::/ / \n \\::/ / \\::/ / /:/ / \n \\/__/ \\/__/ \\/__/ \n \n'
var stunInfoStyle =
'background-color: #49b1f5; color: #fff; padding: 8px; font-size: 14px;'
var stunURLStyle =
'background-color: #ffbca2; padding: 8px; font-size: 14px;'
var stunNameStyle = 'background-color: #eaf8ff;'
console.log(
'%c%s%c%s%c%s',
stunInfoStyle,
stunInfo,
stunURLStyle,
stunURL,
stunNameStyle,
stunNameStr
)
},
/**
* Change the event code to keyCode.
* @param {String} code Event code
*/
codeToKeyCode: function (code) {
var codes = {
ArrowLeft: 37,
ArrowRight: 39,
Escape: 27,
Enter: 13
}
return codes[code]
},
/**
* "Alert" component
* @param {String} status The Status of message. Values: success / info / warning / error.
* @param {String} text The text to show.
* @param {Number} delay Message stay time (unit is 's', default 5s).
*/
popAlert: function (status, text, delay) {
if ($('.stun-message').length !== 0) {
$('.stun-message').remove()
}
var $alert = $(
'<div class="stun-message">' +
`<div class="stun-alert stun-alert-${status}">` +
`<i class="stun-alert-icon ${CONFIG.fontIcon.prompt[status]}"></i>` +
`<span class="stun-alert-description">${text}</span>` +
'</div>' +
'</div>'
)
$('body').append($alert)
$(document).ready(function () {
$('.stun-alert')
.velocity('stop')
.velocity('transition.slideDownBigIn', {
duration: 300
})
.velocity('reverse', {
delay: delay * 1000 || 5000,
duration: 260,
complete: function () {
$('.stun-alert').css('display', 'none')
}
})
})
},
/**
* Copy any text.
* @param {HTMLElement} container Container of text.
*/
copyText: function (container) {
try {
var selection = window.getSelection()
var range = document.createRange()
// Select text by the content of node.
range.selectNodeContents(container)
selection.removeAllRanges()
selection.addRange(range)
var text = selection.toString()
var input = document.createElement('input')
// Create a temporary input to make the
// execCommand command take effect.
input.style.display = 'none'
input.setAttribute('readonly', 'readonly')
input.setAttribute('value', text)
document.body.appendChild(input)
input.setSelectionRange(0, -1)
if (document.execCommand('copy')) {
document.execCommand('copy')
document.body.removeChild(input)
return true
}
document.body.removeChild(input)
} catch (e) {
return false
}
},
// Wrap images with fancybox support.
wrapImageWithFancyBox: function () {
$('.content img')
.not(':hidden')
.each(function () {
var $img = $(this)
var imgTitle = $img.attr('title') || $img.attr('alt')
var $imgWrap = $img.parent('a')
var imgSource = ['data-src', 'data-original', 'src']
var imgSrc = ''
if (!$imgWrap[0]) {
for (var i = 0; i < imgSource.length; i++) {
if ($img.attr(imgSource[i])) {
imgSrc = $img.attr(imgSource[i])
break
}
}
$imgWrap = $img
.wrap(`<a class="fancybox" href="${imgSrc}"></a>`)
.parent('a')
if ($img.is('.gallery img')) {
$imgWrap.attr('data-fancybox', 'gallery')
} else {
$imgWrap.attr('data-fancybox', 'default')
}
}
if (imgTitle) {
$imgWrap.attr('title', imgTitle).attr('data-caption', imgTitle)
}
})
$().fancybox({
selector: '[data-fancybox]',
loop: true,
transitionEffect: 'slide',
hash: false,
buttons: [
'share',
'slideShow',
'fullScreen',
'download',
'thumbs',
'close'
]
})
},
// Display the image in the gallery as a waterfall.
showImageToWaterfall: function () {
var gConfig = CONFIG.galleryWaterfall
var colWidth = parseInt(gConfig.colWidth)
var colGapX = parseInt(gConfig.gapX)
var GALLERY_IMG_SELECTOR = '.gallery img'
this.waitAllImageLoad(GALLERY_IMG_SELECTOR, function () {
$('.gallery').masonry({
itemSelector: GALLERY_IMG_SELECTOR,
columnWidth: colWidth,
percentPosition: true,
gutter: colGapX,
transitionDuration: 0
})
})
},
// Lazy load the images of post.
lazyLoadImage: function () {
$('img.lazyload').lazyload()
},
// Add a mark icon to the link with `target="_blank"` attribute.
addIconToExternalLink: function (container) {
if (!$(container)[0]) {
return
}
var $wrapper = $('<span class="exturl"></span>')
var $icon = $(
'<span class="exturl__icon">' +
`<i class="${CONFIG.externalLink.icon.name}"></i>` +
'</span>'
)
$(container)
.find('a[target="_blank"]')
.addClass('exturl__link')
.wrap($wrapper)
.parent('.exturl')
.append($icon)
},
// Switch to the prev / next post by shortcuts.
registerSwitchPost: function () {
var keyLeft = this.codeToKeyCode('ArrowLeft')
var keyRight = this.codeToKeyCode('ArrowRight')
$(document).on('keydown', function (e) {
var isPrev = e.keyCode === keyLeft
var isNext = e.keyCode === keyRight
if (e.ctrlKey) {
if (isPrev) {
var prevElem = $('.paginator-prev a')[0]
prevElem && prevElem.click()
} else if (isNext) {
var nextElem = $('.paginator-next a')[0]
nextElem && nextElem.click()
}
}
})
},
// Show / Hide the reward QR.
registerShowReward: function () {
$('.reward-button').on('click', function () {
var $container = $('.reward-qrcode')
if ($container.is(':visible')) {
$container.css('display', 'none')
} else {
$container.velocity('stop').velocity('transition.slideDownIn', {
duration: 300
})
}
})
},
// Click to zoom in image, without fancybox.
registerZoomImage: function () {
$('#content-wrap img')
.not(':hidden')
.each(function () {
if ($(this).attr('data-zoom') === 'none') return
$(this).addClass('zoomimg')
})
var $imgMask = $('<div class="zoomimg-mask"></div>')
var $imgClone = null
var isZoom = false
$(window).on('scroll', closeZoom)
$(document).on('click', closeZoom)
$('.zoomimg').on('click', function (e) {
e.stopPropagation()
if (isZoom) {
closeZoom()
return
}
isZoom = true
$imgClone = $(this)
.clone()
.addClass('zoomimg-clone')
var SIDE_GAP = parseInt(CONFIG.zoomImage.gapAside || 20)
var imgRect = this.getBoundingClientRect()
var imgOuterW = $(this).outerWidth()
var imgOuterH = $(this).outerHeight()
var imgW = $(this).width()
var imgH = $(this).height()
var imgL = $(this).offset().left + (imgOuterW - imgW) / 2
var imgT = $(this).offset().top + (imgOuterH - imgH) / 2
var winW = $(window).width() - SIDE_GAP * 2
var winH = $(window).height() - SIDE_GAP * 2
var scaleX = winW / imgW
var scaleY = winH / imgH
var scale = (scaleX < scaleY ? scaleX : scaleY) || 1
var translateX = winW / 2 - (imgRect.x + imgOuterW / 2) + SIDE_GAP
var translateY = winH / 2 - (imgRect.y + imgOuterH / 2) + SIDE_GAP
$(this).addClass('zoomimg--hide')
$('body')
.append($imgMask)
.append($imgClone)
$imgMask.velocity({
opacity: 1
})
$imgClone.css({
left: imgL,
top: imgT,
width: imgW,
height: imgH
})
$imgClone.velocity(
{
translateX: translateX,
translateY: translateY,
scale: scale
},
{ duration: 300 }
)
})
function closeZoom () {
if (!isZoom) {
return
}
isZoom = false
$imgClone.velocity('reverse')
$imgMask.velocity('reverse', {
complete: function () {
$imgMask.remove()
$imgClone.remove()
$('.zoomimg').removeClass('zoomimg--hide')
}
})
}
},
/**
* Add the header to code block.
* @param {string} type The type of header. value: 'carbon' | null.
*/
addCodeHeader: function (type) {
$('figure.highlight').each(function () {
if (!$(this).find('figcaption')[0]) {
var content = ''
if (!type) {
var CODEBLOCK_CLASS_NAME = 'highlight'
var lang = $(this)
.attr('class')
.split(/\s/)
.filter(function (e) {
return e !== CODEBLOCK_CLASS_NAME
})
content += `<div class="custom-lang">${lang}</div>`
} else if (type === 'carbon') {
content += `
<div class="custom-carbon">
<div class="custom-carbon-dot custom-carbon-dot--red"></div>
<div class="custom-carbon-dot custom-carbon-dot--yellow"></div>
<div class="custom-carbon-dot custom-carbon-dot--green"></div>
</div>
`
}
$(`<figcaption class="custom">${content}</figcaption>`).insertBefore(
$(this)
.children()
.first()
)
}
})
},
addCopyButton: function (type) {
var btnContainer = '.post-copyright,'
var $copyIcon = $(
`<div class="copy-button" data-popover="${CONFIG.prompt.copyButton}" data-popover-pos="up">` +
`<i class="${CONFIG.fontIcon.copyBtn}"></i>` +
'</div>'
)
if (type === 'simple' || type === 'carbon') {
btnContainer += '.highlight figcaption:not(".custom")'
} else {
btnContainer += '.highlight figcaption'
}
// Add a copy button to the selected elements.
$(btnContainer).append($copyIcon)
},
registerCopyEvent: function () {
$('.copy-button').on('click', function () {
var container = null
// Select the container of code block.
var codeContainer = $(this)
.parents('figure.highlight')
.find('td.code')[0]
if (codeContainer) {
container = codeContainer
} else {
// Select the container of text.
container = $(this).parent()[0]
}
if (Stun.utils.copyText(container)) {
Stun.utils.popAlert('success', CONFIG.prompt.copySuccess)
} else {
Stun.utils.popAlert('error', CONFIG.prompt.copyError)
}
})
},
/**
* Wait for all images to load.
* @param {String} selector jQuery selector.
* @param {Function} callback Callback.
*/
waitAllImageLoad: function (selector, callback) {
var imgDefereds = []
$(selector).each(function () {
var dfd = $.Deferred()
$(this).bind('load', function () {
dfd.resolve()
})
if (this.complete) {
setTimeout(function () {
dfd.resolve()
}, 500)
}
imgDefereds.push(dfd)
})
$.when.apply(null, imgDefereds).then(callback)
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment