-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
111 lines (99 loc) · 48.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta><title>wangzq的个人博客</title><link rel="manifest" href="/manifest.json"><meta name="application-name" content="wangzq的个人博客"><meta name="msapplication-TileImage" content="/images/logo.png"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-title" content="wangzq的个人博客"><meta name="apple-mobile-web-app-status-bar-style" content="default"><meta name="description" content="personal blog about javascript, typescript, docker, and etc"><meta property="og:type" content="blog"><meta property="og:title" content="wangzq的个人博客"><meta property="og:url" content="http://example.com/"><meta property="og:site_name" content="wangzq的个人博客"><meta property="og:description" content="personal blog about javascript, typescript, docker, and etc"><meta property="og:locale" content="en_US"><meta property="og:image" content="http://example.com/img/og_image.png"><meta property="article:author" content="wangzq"><meta property="article:tag" content="前端,js,jquery,javascript,html5,开发者,程序猿,程序媛,极客,编程,代码,开源,IT网站,Developer,Programmer,Coder,Geek,html,css,css3,用户体验"><meta property="twitter:card" content="summary"><meta property="twitter:image" content="/img/og_image.png"><script type="application/ld+json">{"@context":"https://schema.org","@type":"BlogPosting","mainEntityOfPage":{"@type":"WebPage","@id":"http://example.com"},"headline":"wangzq的个人博客","image":["http://example.com/img/og_image.png"],"author":{"@type":"Person","name":"wangzq"},"publisher":{"@type":"Organization","name":"wangzq的个人博客","logo":{"@type":"ImageObject","url":"http://example.com/images/logo.png"}},"description":"personal blog about javascript, typescript, docker, and etc"}</script><link rel="icon" href="/images/logo.png"><link rel="stylesheet" href="https://cdnjs.loli.net/ajax/libs/font-awesome/5.15.2/css/all.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/styles/atom-one-light.css"><link rel="stylesheet" href="https://fonts.loli.net/css2?family=Ubuntu:wght@400;600&family=Source+Code+Pro"><link rel="stylesheet" href="/css/default.css"><style>body>.footer,body>.navbar,body>.section{opacity:0}</style><!--!--><!--!--><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/lightgallery.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/justifiedGallery.min.css"><!--!--><script src="https://cdn.jsdelivr.net/npm/[email protected]/pace.min.js"></script><script data-ad-client="ca-pub-1284354398634107" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" async></script><meta name="generator" content="Hexo 5.4.0"></head><body class="is-3-column"><nav class="navbar navbar-main"><div class="container"><div class="navbar-brand justify-content-center"><a class="navbar-item navbar-logo" href="/"><img src="/images/logo.png" alt="wangzq的个人博客" height="28"></a></div><div class="navbar-menu"><div class="navbar-start"><a class="navbar-item is-active" href="/">Home</a><a class="navbar-item" href="/archives">Archives</a><a class="navbar-item" href="/categories">Categories</a><a class="navbar-item" href="/tags">Tags</a><a class="navbar-item" href="/about">About</a></div><div class="navbar-end"><a class="navbar-item" target="_blank" rel="noopener" title="Download on GitHub" href="https://github.com/ppoffice/hexo-theme-icarus"><i class="fab fa-github"></i></a><a class="navbar-item search" title="Search" href="javascript:;"><i class="fas fa-search"></i></a></div></div></div></nav><section class="section"><div class="container"><div class="columns"><div class="column order-2 column-main is-8-tablet is-8-desktop is-6-widescreen"><div class="card"><article class="card-content article" role="article"><div class="article-meta is-size-7 is-uppercase level is-mobile"><div class="level-left"><span class="level-item">Posted <time dateTime="2020-09-18T02:45:15.000Z" title="2020/9/18 上午10:45:15">2020-09-18</time></span><span class="level-item">Updated <time dateTime="2021-10-10T14:51:23.449Z" title="2021/10/10 下午10:51:23">2021-10-10</time></span><span class="level-item"><a class="link-muted" href="/categories/%E6%9C%8D%E5%8A%A1%E5%99%A8/">服务器</a></span><span class="level-item">2 minutes read (About 243 words)</span></div></div><h1 class="title is-3 is-size-4-mobile"><a class="link-muted" href="/2020/09/18/docker/">docker</a></h1><div class="content"><h2 id="docker命令"><a href="#docker命令" class="headerlink" title="docker命令"></a>docker命令</h2><p>docker images: 查看镜像 </p>
<p>docker ps： 查看容器 </p>
<h3 id="创建Dockerfile"><a href="#创建Dockerfile" class="headerlink" title="创建Dockerfile"></a>创建Dockerfile</h3><figure class="highlight plain"><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">FROM nginx</span><br><span class="line">MAINTAINER username "[email protected]"</span><br><span class="line">ADD build /usr/share/nginx/html</span><br><span class="line">ADD nginx_server.conf /etc/nginx/conf.d/default.conf</span><br><span class="line">ADD gzip.conf /etc/nginx/conf.d/gzip.conf</span><br><span class="line">EXPOSE 80:80</span><br><span class="line">ENTRYPOINT /bin/bash -c "nginx -g 'daemon off;'"</span><br></pre></td></tr></table></figure>
<h4 id="docker-image-COMMAND-查看命令"><a href="#docker-image-COMMAND-查看命令" class="headerlink" title="docker image COMMAND 查看命令"></a>docker image COMMAND 查看命令</h4><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line">build Build an image from a Dockerfile</span><br><span class="line">history Show the history of an image</span><br><span class="line">import Import the contents from a tarball to create a filesystem image</span><br><span class="line">inspect Display detailed information on one or more images</span><br><span class="line">load Load an image from a tar archive or STDIN</span><br><span class="line">ls List images</span><br><span class="line">prune Remove unused images</span><br><span class="line">pull Pull an image or a repository from a registry</span><br><span class="line">push Push an image or a repository to a registry</span><br><span class="line">rm Remove one or more images</span><br><span class="line">save Save one or more images to a tar archive (streamed to STDOUT by default)</span><br><span class="line">tag Create a tag TARGET_IMAGE that refers to SOURCE_IMAGE</span><br></pre></td></tr></table></figure>
<h5 id="tar-cf-build-tag-gz-build：压缩文件"><a href="#tar-cf-build-tag-gz-build：压缩文件" class="headerlink" title="tar cf build.tag.gz build：压缩文件"></a>tar cf build.tag.gz build：压缩文件</h5><h5 id="tar-xf-build-tar-gz-解压文件"><a href="#tar-xf-build-tar-gz-解压文件" class="headerlink" title="tar xf build.tar.gz: 解压文件"></a>tar xf build.tar.gz: 解压文件</h5><h5 id="scp-r-build-tar-gz-root-ip-root-：-上传文件到服务器"><a href="#scp-r-build-tar-gz-root-ip-root-：-上传文件到服务器" class="headerlink" title="scp -r build.tar.gz root@ip:/root/： 上传文件到服务器"></a>scp -r build.tar.gz root@ip:/root/： 上传文件到服务器</h5><h5 id="docker-build-t-blog-：-构建镜像，镜像名为blog"><a href="#docker-build-t-blog-：-构建镜像，镜像名为blog" class="headerlink" title="docker build -t blog .： 构建镜像，镜像名为blog"></a>docker build -t blog .： 构建镜像，镜像名为blog</h5><h5 id="docker-run-d-p-8080-80-blog：基于镜像blog生成容器-8080为公网端口"><a href="#docker-run-d-p-8080-80-blog：基于镜像blog生成容器-8080为公网端口" class="headerlink" title="docker run -d -p 8080:80 blog：基于镜像blog生成容器,8080为公网端口"></a>docker run -d -p 8080:80 blog：基于镜像blog生成容器,8080为公网端口</h5></div></article></div><div class="card"><article class="card-content article" role="article"><div class="article-meta is-size-7 is-uppercase level is-mobile"><div class="level-left"><span class="level-item">Posted <time dateTime="2019-01-08T13:20:11.000Z" title="2019/1/8 下午9:20:11">2019-01-08</time></span><span class="level-item">Updated <time dateTime="2021-10-10T14:51:23.449Z" title="2021/10/10 下午10:51:23">2021-10-10</time></span><span class="level-item"><a class="link-muted" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a></span><span class="level-item">6 minutes read (About 868 words)</span></div></div><h1 class="title is-3 is-size-4-mobile"><a class="link-muted" href="/2019/01/08/swiper-%E4%BD%BF%E7%94%A8%E4%BD%93%E9%AA%8C/">swiper 使用体验</a></h1><div class="content"><h3 id="首先是实例化swiper"><a href="#首先是实例化swiper" class="headerlink" title="首先是实例化swiper"></a>首先是实例化swiper</h3><p>这里有一个注意点，就是<strong>实例化的时机</strong> </p>
<p>如果你的swiper内容是写死的，可以在<em>componentDidMount</em>中实例化，但是如果你的内容是通过接口异步请求过来的，就必须在<em>componentDidUpdate</em>里实例化，因为如果在 <em>componentDidMount</em> 中实例化，异步请求过来的内容可能还没有挂载完就实例化就会出现问题</p>
<figure class="highlight js"><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">componentDidUpdate(){</span><br><span class="line"> <span class="built_in">this</span>.initialBannerSwiper()</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>这里还用到了一个知识点，就是<strong>单例模式</strong>，因为<em>componentDidUpdate</em>会多次执行，所以使用单例模式避免生成多个实例</p>
<figure class="highlight js"><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">initialBannerSwiper =<span class="function">()=></span>{</span><br><span class="line"> <span class="keyword">if</span>(<span class="built_in">this</span>.bannerSwiper){</span><br><span class="line"> <span class="keyword">return</span> <span class="built_in">this</span>.bannerSwiper <span class="comment">//单例模式</span></span><br><span class="line"> }</span><br><span class="line"> <span class="built_in">this</span>.bannerSwiper = <span class="keyword">new</span> Swiper(<span class="string">'#swiper-banner'</span>, {</span><br><span class="line"></span><br><span class="line"> slidesPerView: <span class="number">1</span>, <span class="comment">//设置slider容器能够同时显示的slides数量(carousel模式) 默认值为1。</span></span><br><span class="line"></span><br><span class="line"> observer: <span class="literal">true</span>, <span class="comment">//当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper。</span></span><br><span class="line"></span><br><span class="line"> observeParents: <span class="literal">true</span>, <span class="comment">//将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新。</span></span><br><span class="line"></span><br><span class="line"> shortSwipes: <span class="literal">false</span>, <span class="comment">// 这个属性后面会说</span></span><br><span class="line"></span><br><span class="line"> slideToClickedSlide: <span class="literal">false</span>, <span class="comment">//设置为true则点击slide会过渡到这个slide。</span></span><br><span class="line"></span><br><span class="line"> loop: <span class="literal">true</span>, <span class="comment">//开启循环</span></span><br><span class="line"></span><br><span class="line"> autoplay: <span class="literal">true</span>, <span class="comment">//设置为true启动自动切换，并使用默认的切换设置。</span></span><br><span class="line"></span><br><span class="line"> pagination: {</span><br><span class="line"> clickable: <span class="literal">true</span>, <span class="comment">//此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。</span></span><br><span class="line"> el: <span class="string">'#swiper-pagination-banner'</span>,</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> })</span><br><span class="line"> <span class="built_in">this</span>.hoverStop()</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="鼠标划入停止轮播"><a href="#鼠标划入停止轮播" class="headerlink" title="鼠标划入停止轮播"></a>鼠标划入停止轮播</h3><p>swiper居然没有这个api来控制，好吧 只能自己来用js来控制了 </p>
<h5 id="bannerSwiper-el"><a href="#bannerSwiper-el" class="headerlink" title="bannerSwiper.$el"></a><em>bannerSwiper.$el</em></h5><p>swiper的container的<a target="_blank" rel="noopener" href="https://www.swiper.com.cn/usage/dom7/">Dom7/jQuery对象</a></p>
<blockquote>
<p>Swiper4自带有DOM7库，因此无需另外加载Jquery等库即可对Dom7对象使用以下常用的DOM操作</p>
</blockquote>
<p>this.bannerSwiper.$el[0]就可以拿到 实例的container的dom节点</p>
<figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line">hoverStop = <span class="function">()=></span>{</span><br><span class="line"> <span class="keyword">let</span> that = <span class="built_in">this</span>.bannerSwiper.$el[<span class="number">0</span>] <span class="comment">// 实例的container的dom节点</span></span><br><span class="line"></span><br><span class="line"> that.addEventListener(<span class="string">"mouseenter"</span>, <span class="function">() =></span> {</span><br><span class="line"> <span class="built_in">this</span>.bannerSwiper.autoplay.stop()</span><br><span class="line"> that.addEventListener(<span class="string">"mousemove"</span>, <span class="function">() =></span> {</span><br><span class="line"> })</span><br><span class="line"> })</span><br><span class="line"> that.addEventListener(<span class="string">"mouseleave"</span>,<span class="function">()=></span>{</span><br><span class="line"> <span class="built_in">this</span>.bannerSwiper.autoplay.start()</span><br><span class="line"> })</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h6 id="你可能还会遇到一个小问题"><a href="#你可能还会遇到一个小问题" class="headerlink" title="你可能还会遇到一个小问题"></a>你可能还会遇到一个小问题</h6><p>这也是我遇到的，那就是鼠标划到轮播图的时候点击轮播图 会偶尔出现切换的情况，swiper有一个属性可以控制 <em>shortSwipes</em> ,官方描述是这样的</p>
<blockquote>
<p>默认允许短切换。设置为false时，只能长切换，进行快速且短距离的滑动无法触发切换。</p>
</blockquote>
<p>为什么会出现这种情况呢，因为swiper是专注于移动端的，划上swiper点击的时候可能鼠标方向偏了一点，swiper会以为你是手机上的滑动，设置为false时，短距离的滑动就不会发生切换了，下面是官方的说法</p>
<blockquote>
<h3 id="Swiper常用于移动端网站的内容触摸滑动"><a href="#Swiper常用于移动端网站的内容触摸滑动" class="headerlink" title="Swiper常用于移动端网站的内容触摸滑动"></a>Swiper常用于移动端网站的内容触摸滑动</h3><p>Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。<br>Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。<br>Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！</p>
</blockquote>
<h3 id="最后"><a href="#最后" class="headerlink" title="最后"></a>最后</h3><p>记得在组件卸载的时候解绑事件和销毁swiper实例~</p>
<pre><code class="javascript">componentWillUnmount(){
if(this.bannerSwiper){
this.bannerSwiper.detachEvents()
this.bannerSwiper.destroy()
}
}</code></pre>
<p>swiper真的强大，了解更多请参考 <a target="_blank" rel="noopener" href="https://www.swiper.com.cn/api/index.html">swiper 文档</a> </p>
<h5 id="如果对您有帮助记得给个-喜欢-哦"><a href="#如果对您有帮助记得给个-喜欢-哦" class="headerlink" title="如果对您有帮助记得给个 喜欢 哦"></a>如果对您有帮助记得给个 <em>喜欢</em> 哦</h5></div></article></div><div class="card"><article class="card-content article" role="article"><div class="article-meta is-size-7 is-uppercase level is-mobile"><div class="level-left"><span class="level-item">Posted <time dateTime="2018-09-25T07:07:34.000Z" title="2018/9/25 下午3:07:34">2018-09-25</time></span><span class="level-item">Updated <time dateTime="2021-10-10T14:51:23.449Z" title="2021/10/10 下午10:51:23">2021-10-10</time></span><span class="level-item"><a class="link-muted" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a></span><span class="level-item">2 minutes read (About 282 words)</span></div></div><h1 class="title is-3 is-size-4-mobile"><a class="link-muted" href="/2018/09/25/EventBus-javascript%E4%BA%8B%E4%BB%B6%E6%80%BB%E7%BA%BF/">EventBus-javascript事件总线</a></h1><div class="content"><h2 id="1-class实现"><a href="#1-class实现" class="headerlink" title="1. class实现"></a>1. class实现</h2><figure class="highlight js"><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><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">EventBus</span> </span>{</span><br><span class="line"> handlers: any = {};</span><br><span class="line"></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="comment"> * <span class="doctag">@param </span>type {String} 事件名</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param </span>params 参数</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"> emit(type: string, ...params: any) {</span><br><span class="line"> <span class="comment">// 若没有注册该事件则抛出错误</span></span><br><span class="line"> <span class="keyword">if</span> (!(type <span class="keyword">in</span> <span class="built_in">this</span>.handlers)) {</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">'未注册该事件'</span>)</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">// 便利触发</span></span><br><span class="line"> <span class="built_in">this</span>.handlers[type].forEach(<span class="function">(<span class="params">handler: <span class="built_in">Function</span></span>) =></span> {</span><br><span class="line"> handler(...params)</span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line"></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="comment"> * <span class="doctag">@param </span>type {String} 事件名</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param </span>handler {Function} 事件方法</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"> addEventListener (type: string, <span class="attr">handler</span>: any) {</span><br><span class="line"> <span class="comment">// 首先判断handlers内有没有type事件容器，没有则创建一个新数组容器</span></span><br><span class="line"> <span class="keyword">if</span> (!(type <span class="keyword">in</span> <span class="built_in">this</span>.handlers)) {</span><br><span class="line"> <span class="built_in">this</span>.handlers[type] = []</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">// 将事件存入</span></span><br><span class="line"> <span class="built_in">this</span>.handlers[type].push(handler)</span><br><span class="line"> }</span><br><span class="line"></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="comment"> * <span class="doctag">@param </span>type {String} 事件名</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param </span>handler 删除的事件,若无该参数则删除该事件的订阅和发布</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"> removeEventListener (type: string, <span class="attr">handler</span>: any) {</span><br><span class="line"> <span class="comment">// 无效事件抛出</span></span><br><span class="line"> <span class="keyword">if</span> (!(type <span class="keyword">in</span> <span class="built_in">this</span>.handlers)) {</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">'无效事件'</span>)</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span> (!handler) {</span><br><span class="line"> <span class="comment">// 直接移除事件</span></span><br><span class="line"> <span class="keyword">delete</span> <span class="built_in">this</span>.handlers[type]</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> <span class="keyword">const</span> idx = <span class="built_in">this</span>.handlers[type].findIndex(<span class="function">(<span class="params">ele: any</span>) =></span> ele === handler)</span><br><span class="line"> <span class="comment">// 抛出异常事件</span></span><br><span class="line"> <span class="keyword">if</span> (idx === <span class="literal">undefined</span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">'无该绑定事件'</span>)</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">// 移除事件</span></span><br><span class="line"> <span class="built_in">this</span>.handlers[type].splice(idx, <span class="number">1</span>)</span><br><span class="line"> <span class="keyword">if</span> (<span class="built_in">this</span>.handlers[type].length === <span class="number">0</span>) {</span><br><span class="line"> <span class="keyword">delete</span> <span class="built_in">this</span>.handlers[type]</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">new</span> EventBus();</span><br></pre></td></tr></table></figure>
<h2 id="2-基于node模块实现"><a href="#2-基于node模块实现" class="headerlink" title="2.基于node模块实现"></a>2.基于node模块实现</h2><figure class="highlight js"><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"><span class="keyword">const</span> EventEmitter = <span class="built_in">require</span>(<span class="string">'events'</span>);</span><br><span class="line"><span class="keyword">const</span> evtBus = <span class="keyword">new</span> EventEmitter();</span><br><span class="line">evtBus.setMaxListeners(<span class="number">20</span>);</span><br><span class="line">evtBus.on(<span class="string">'error'</span>, <span class="function">(<span class="params">err</span>) =></span> {</span><br><span class="line"> <span class="built_in">console</span>.error(err, <span class="string">'error'</span>);</span><br><span class="line">});</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> evtBus;</span><br></pre></td></tr></table></figure></div></article></div><div class="card"><article class="card-content article" role="article"><div class="article-meta is-size-7 is-uppercase level is-mobile"><div class="level-left"><span class="level-item">Posted <time dateTime="2018-07-18T02:56:00.000Z" title="2018/7/18 上午10:56:00">2018-07-18</time></span><span class="level-item">Updated <time dateTime="2021-10-10T14:51:23.449Z" title="2021/10/10 下午10:51:23">2021-10-10</time></span><span class="level-item"><a class="link-muted" href="/categories/%E7%BD%91%E7%BB%9C%E6%97%A5%E5%BF%97/">网络日志</a></span><span class="level-item">2 minutes read (About 265 words)</span></div></div><h1 class="title is-3 is-size-4-mobile"><a class="link-muted" href="/2018/07/18/gitlab-github-%E5%90%8C%E6%97%B6%E4%BD%BF%E7%94%A8/">gitlab && github 同时使用</a></h1><div class="content"><h3 id="1-生成秘钥"><a href="#1-生成秘钥" class="headerlink" title="1.生成秘钥"></a>1.生成秘钥</h3><p><strong>gitlab:</strong> </p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ssh-keygen -t rsa -C "[email protected]" -f ~/.ssh/id-rsa</span><br></pre></td></tr></table></figure>
<p><strong>github:</strong> </p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ssh-keygen -t rsa -C "[email protected]" -f ~/.ssh/github_id-rsa</span><br></pre></td></tr></table></figure>
<p><strong><em>注：将两个秘钥分别保存在不同文件下，如果不加-f和后面的文件地址执行ssh-keygen -t rsa -C “邮箱”的时候，不要一路回车，需指定文件名，否则第二个会覆盖第一个</em></strong></p>
<h3 id="2-创建config文件"><a href="#2-创建config文件" class="headerlink" title="2.创建config文件"></a>2.创建config文件</h3><p> 在.ssh下touch config，内容如下：</p>
<h4 id="gitlab"><a href="#gitlab" class="headerlink" title="gitlab"></a>gitlab</h4><figure class="highlight bash"><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">Host gitlab.com</span><br><span class="line"> HostName gitlab.*.com</span><br><span class="line"> PreferredAuthentications publickey</span><br><span class="line"> IdentityFile ~/.ssh/id-rsa</span><br></pre></td></tr></table></figure>
<h4 id="github"><a href="#github" class="headerlink" title="github"></a>github</h4><figure class="highlight bash"><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">Host github.com </span><br><span class="line"> HostName github.com</span><br><span class="line"> PreferredAuthentications publickey</span><br><span class="line"> IdentityFile ~/.ssh/github_id-rsa</span><br></pre></td></tr></table></figure>
<p><strong><em>注：IdentityFile后的文件路径及文件名需与创建好的一致</em></strong></p>
<h3 id="3-在github和gitlab上配置ssh"><a href="#3-在github和gitlab上配置ssh" class="headerlink" title="3.在github和gitlab上配置ssh"></a>3.在github和gitlab上配置ssh</h3><h3 id="4-测试："><a href="#4-测试：" class="headerlink" title="4.测试："></a>4.测试：</h3><p>ssh -T <a href="mailto:git@github.com">git@github.com</a><br>gitlab 测试可能会被denied<br>但现在已经可以同时使用github和gitlab了~</p>
<p><strong>如果你公司gitlab账号和个人github账号用的同一个邮箱，同一个ssh就没这么多事了~~</strong></p>
<p>如果配置 ssh key 以后还是需要密码<br>那么执行一下</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ssh-add ~/.ssh/id-rsa</span><br></pre></td></tr></table></figure></div></article></div><div class="card"><article class="card-content article" role="article"><div class="article-meta is-size-7 is-uppercase level is-mobile"><div class="level-left"><span class="level-item">Posted <time dateTime="2017-10-19T09:31:01.000Z" title="2017/10/19 下午5:31:01">2017-10-19</time></span><span class="level-item">Updated <time dateTime="2021-10-10T14:51:23.449Z" title="2021/10/10 下午10:51:23">2021-10-10</time></span><span class="level-item"><a class="link-muted" href="/categories/linux/">linux</a></span><span class="level-item">2 minutes read (About 277 words)</span></div></div><h1 class="title is-3 is-size-4-mobile"><a class="link-muted" href="/2017/10/19/linux%E8%BF%9C%E7%A8%8B%E5%85%8D%E5%AF%86%E7%99%BB%E5%BD%95/">linux远程免密登录</a></h1><div class="content"><ul>
<li>免密登陆的原理<ul>
<li>非对称加密</li>
</ul>
</li>
</ul>
<ul>
<li><p>配置免密登陆的步骤</p>
<p>1.生成密钥对</p>
<ul>
<li>ssh-keygen -t rsa -C ‘yourname’ -f ‘yourname_rsa’</li>
</ul>
<p>2.上传配置公钥</p>
<ul>
<li>上传公钥到服务器对应账号的home路径下的.ssh/中 ( ssh-copy-id -i “公钥文件名” 用户名@服务器ip或域名 )</li>
<li>配置公钥文件访问权限为 600 </li>
</ul>
<p>3.配置本地私钥</p>
<ul>
<li>把第一步生成的私钥复制到你的home目录下的.ssh/ 路径下</li>
<li>配置你的私钥文件访问权限为 600（chmod 600 你的私钥文件名）</li>
</ul>
<p>4.免密登录功能的本地配置文件</p>
<ul>
<li>编辑自己home目录的.ssh/ 路径下的config文件</li>
<li>配置config文件的访问权限为 644</li>
</ul>
</li>
</ul>
<hr>
<h3 id="使用ssh-keygen-会生成一对文件-公私钥对"><a href="#使用ssh-keygen-会生成一对文件-公私钥对" class="headerlink" title="使用ssh-keygen 会生成一对文件(公私钥对)"></a>使用ssh-keygen 会生成一对文件(公私钥对)</h3><blockquote>
<p>yourname_rsa.pub<br>yourname_rsa</p>
</blockquote>
<h3 id="本地配置文件"><a href="#本地配置文件" class="headerlink" title="本地配置文件"></a>本地配置文件</h3><figure class="highlight plain"><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></pre></td><td class="code"><pre><span class="line"># 别名</span><br><span class="line">Host ali-cloud </span><br><span class="line"># 域名或者ip</span><br><span class="line">HostName 192.168.0.6</span><br><span class="line"># 端口</span><br><span class="line">Port 22</span><br><span class="line"># 指定用户</span><br><span class="line">User root</span><br><span class="line"># 指定私钥文件</span><br><span class="line">IdentityFile ~/.ssh/yourname_rsa</span><br><span class="line"># 协议</span><br><span class="line">Protocol 2</span><br><span class="line"># 防止长时间不操作被踢掉</span><br><span class="line">Compression yes</span><br><span class="line"># 每隔60s发一次心跳</span><br><span class="line">ServerAliveInterval 60</span><br><span class="line"># 最大连接数 20</span><br><span class="line">ServerAliveCountMax 20</span><br><span class="line"># 日志等级</span><br><span class="line">LogLevel INFO</span><br></pre></td></tr></table></figure></div></article></div></div><div class="column column-left is-4-tablet is-4-desktop is-3-widescreen order-1"><div class="card widget" data-type="profile"><div class="card-content"><nav class="level"><div class="level-item has-text-centered flex-shrink-1"><div><figure class="image is-128x128 mx-auto mb-2"><img class="avatar" src="/images/logo.png" alt="wangzq"></figure><p class="title is-size-4 is-block" style="line-height:inherit;">wangzq</p><p class="is-size-6 is-block">chief brick mover</p><p class="is-size-6 is-flex justify-content-center"><i class="fas fa-map-marker-alt mr-1"></i><span>earth</span></p></div></div></nav><nav class="level is-mobile"><div class="level-item has-text-centered is-marginless"><div><p class="heading">Posts</p><a href="/archives"><p class="title">5</p></a></div></div><div class="level-item has-text-centered is-marginless"><div><p class="heading">Categories</p><a href="/categories"><p class="title">4</p></a></div></div><div class="level-item has-text-centered is-marginless"><div><p class="heading">Tags</p><a href="/tags"><p class="title">7</p></a></div></div></nav><div class="level"><a class="level-item button is-primary is-rounded" href="https://github.com/wangzongqi1001" target="_blank" rel="noopener">Follow</a></div><div class="level is-mobile is-multiline"><a class="level-item button is-transparent is-marginless" target="_blank" rel="noopener" title="Github" href="https://github.com/wangzongqi1001"><i class="fab fa-github"></i></a></div></div></div><!--!--><div class="card widget" data-type="links"><div class="card-content"><div class="menu"><h3 class="menu-label">Links</h3><ul class="menu-list"><li><a class="level is-mobile" href="https://hexo.io" target="_blank" rel="noopener"><span class="level-left"><span class="level-item">Hexo</span></span><span class="level-right"><span class="level-item tag">hexo.io</span></span></a></li><li><a class="level is-mobile" href="https://bulma.io" target="_blank" rel="noopener"><span class="level-left"><span class="level-item">Bulma</span></span><span class="level-right"><span class="level-item tag">bulma.io</span></span></a></li></ul></div></div></div><div class="card widget" data-type="categories"><div class="card-content"><div class="menu"><h3 class="menu-label">Categories</h3><ul class="menu-list"><li><a class="level is-mobile" href="/categories/linux/"><span class="level-start"><span class="level-item">linux</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile" href="/categories/%E5%89%8D%E7%AB%AF/"><span class="level-start"><span class="level-item">前端</span></span><span class="level-end"><span class="level-item tag">2</span></span></a></li><li><a class="level is-mobile" href="/categories/%E6%9C%8D%E5%8A%A1%E5%99%A8/"><span class="level-start"><span class="level-item">服务器</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile" href="/categories/%E7%BD%91%E7%BB%9C%E6%97%A5%E5%BF%97/"><span class="level-start"><span class="level-item">网络日志</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li></ul></div></div></div><div class="card widget" data-type="archives"><div class="card-content"><div class="menu"><h3 class="menu-label">Archives</h3><ul class="menu-list"><li><a class="level is-mobile" href="/archives/2020/09/"><span class="level-start"><span class="level-item">September 2020</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile" href="/archives/2019/01/"><span class="level-start"><span class="level-item">January 2019</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile" href="/archives/2018/09/"><span class="level-start"><span class="level-item">September 2018</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile" href="/archives/2018/07/"><span class="level-start"><span class="level-item">July 2018</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile" href="/archives/2017/10/"><span class="level-start"><span class="level-item">October 2017</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li></ul></div></div></div><div class="card widget" data-type="tags"><div class="card-content"><div class="menu"><h3 class="menu-label">Tags</h3><div class="field is-grouped is-grouped-multiline"><div class="control"><a class="tags has-addons" href="/tags/docker/"><span class="tag">docker</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/git/"><span class="tag">git</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/github/"><span class="tag">github</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/gitlab/"><span class="tag">gitlab</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/js/"><span class="tag">js</span><span class="tag">2</span></a></div><div class="control"><a class="tags has-addons" href="/tags/linux/"><span class="tag">linux</span><span class="tag">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/%E5%89%8D%E7%AB%AF/"><span class="tag">前端</span><span class="tag">1</span></a></div></div></div></div></div><div class="card widget" data-type="subscribe-email"><div class="card-content"><div class="menu"><h3 class="menu-label">Subscribe for updates</h3><form action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=','popupwindow','scrollbars=yes,width=550,height=520');return true"><input type="hidden" value="" name="uri"><input type="hidden" name="loc" value="en_US"><div class="field has-addons"><div class="control has-icons-left is-expanded"><input class="input" name="email" type="email" placeholder="Email"><span class="icon is-small is-left"><i class="fas fa-envelope"></i></span></div><div class="control"><input class="button" type="submit" value="Subscribe"></div></div></form></div></div></div><div class="card widget"><div class="card-content"><div class="notification is-danger">You need to set <code>client_id</code> and <code>slot_id</code> to show this AD unit. Please set it in <code>_config.yml</code>.</div></div></div><div class="column-right-shadow is-hidden-widescreen"></div></div><div class="column column-right is-4-tablet is-4-desktop is-3-widescreen is-hidden-touch is-hidden-desktop-only order-3"><div class="card widget" data-type="recent-posts"><div class="card-content"><h3 class="menu-label">Recents</h3><article class="media"><div class="media-content"><p class="date"><time dateTime="2020-09-18T02:45:15.000Z">2020-09-18</time></p><p class="title"><a href="/2020/09/18/docker/">docker</a></p><p class="categories"><a href="/categories/%E6%9C%8D%E5%8A%A1%E5%99%A8/">服务器</a></p></div></article><article class="media"><div class="media-content"><p class="date"><time dateTime="2019-01-08T13:20:11.000Z">2019-01-08</time></p><p class="title"><a href="/2019/01/08/swiper-%E4%BD%BF%E7%94%A8%E4%BD%93%E9%AA%8C/">swiper 使用体验</a></p><p class="categories"><a href="/categories/%E5%89%8D%E7%AB%AF/">前端</a></p></div></article><article class="media"><div class="media-content"><p class="date"><time dateTime="2018-09-25T07:07:34.000Z">2018-09-25</time></p><p class="title"><a href="/2018/09/25/EventBus-javascript%E4%BA%8B%E4%BB%B6%E6%80%BB%E7%BA%BF/">EventBus-javascript事件总线</a></p><p class="categories"><a href="/categories/%E5%89%8D%E7%AB%AF/">前端</a></p></div></article><article class="media"><div class="media-content"><p class="date"><time dateTime="2018-07-18T02:56:00.000Z">2018-07-18</time></p><p class="title"><a href="/2018/07/18/gitlab-github-%E5%90%8C%E6%97%B6%E4%BD%BF%E7%94%A8/">gitlab && github 同时使用</a></p><p class="categories"><a href="/categories/%E7%BD%91%E7%BB%9C%E6%97%A5%E5%BF%97/">网络日志</a></p></div></article><article class="media"><div class="media-content"><p class="date"><time dateTime="2017-10-19T09:31:01.000Z">2017-10-19</time></p><p class="title"><a href="/2017/10/19/linux%E8%BF%9C%E7%A8%8B%E5%85%8D%E5%AF%86%E7%99%BB%E5%BD%95/">linux远程免密登录</a></p><p class="categories"><a href="/categories/linux/">linux</a></p></div></article></div></div></div></div></div></section><footer class="footer"><div class="container"><div class="level"><div class="level-start"><a class="footer-logo is-block mb-2" href="/"><img src="/images/logo.png" alt="wangzq的个人博客" height="28"></a><p class="is-size-7"><span>© 2021 wangzq</span> Powered by <a href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a> & <a href="https://github.com/ppoffice/hexo-theme-icarus" target="_blank" rel="noopener">Icarus</a></p></div><div class="level-end"><div class="field has-addons"><p class="control"><a class="button is-transparent " target="_blank" rel="noopener" title="京ICP备2020045697号-1" href="https://beian.miit.gov.cn/">京ICP备2020045697号-1</a></p></div></div></div></div></footer><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/min/moment-with-locales.min.js"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/clipboard.min.js" defer></script><script>moment.locale("en");</script><script>var IcarusThemeSettings = {
article: {
highlight: {
clipboard: true,
fold: 'unfolded'
}
}
};</script><script src="/js/column.js"></script><script src="/js/animation.js"></script><a id="back-to-top" title="Back to top" href="javascript:;"><i class="fas fa-chevron-up"></i></a><script src="/js/back_to_top.js" defer></script><!--!--><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/lightgallery.min.js" defer></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/jquery.justifiedGallery.min.js" defer></script><script>window.addEventListener("load", () => {
if (typeof $.fn.lightGallery === 'function') {
$('.article').lightGallery({ selector: '.gallery-item' });
}
if (typeof $.fn.justifiedGallery === 'function') {
if ($('.justified-gallery > p > .gallery-item').length) {
$('.justified-gallery > p > .gallery-item').unwrap();
}
$('.justified-gallery').justifiedGallery();
}
});</script><!--!--><!--!--><script src="/js/main.js" defer></script><div class="searchbox"><div class="searchbox-container"><div class="searchbox-header"><div class="searchbox-input-container"><input class="searchbox-input" type="text" placeholder="Type something..."></div><a class="searchbox-close" href="javascript:;">×</a></div><div class="searchbox-body"></div></div></div><script src="/js/insight.js" defer></script><script>document.addEventListener('DOMContentLoaded', function () {
loadInsight({"contentUrl":"/content.json"}, {"hint":"Type something...","untitled":"(Untitled)","posts":"Posts","pages":"Pages","categories":"Categories","tags":"Tags"});
});</script></body></html>