atom.xml

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>Deepspace</title>
  
  <subtitle>我叫陈星星</subtitle>
  <link href="/atom.xml" rel="self"/>
  
  <link href="https://togoblog.cn/"/>
  <updated>2019-11-07T09:31:58.255Z</updated>
  <id>https://togoblog.cn/</id>
  
  <author>
    <name>Deepspace</name>
    
  </author>
  
  <generator uri="http://hexo.io/">Hexo</generator>
  
  <entry>
    <title>Web 前端工程化（三） —— 使用 Jenkins + Github 搭建持续集成环境</title>
    <link href="https://togoblog.cn/set-up-ci-env-with-jenkins-and-github/"/>
    <id>https://togoblog.cn/set-up-ci-env-with-jenkins-and-github/</id>
    <published>2019-11-06T16:00:00.000Z</published>
    <updated>2019-11-07T09:31:58.255Z</updated>
    
    <summary type="html">
    
    </summary>
    
      <category term="FrontEnd" scheme="https://togoblog.cn/categories/FrontEnd/"/>
    
    
      <category term="持续集成" scheme="https://togoblog.cn/tags/%E6%8C%81%E7%BB%AD%E9%9B%86%E6%88%90/"/>
    
      <category term="Jenkins" scheme="https://togoblog.cn/tags/Jenkins/"/>
    
      <category term="Github" scheme="https://togoblog.cn/tags/Github/"/>
    
  </entry>
  
  <entry>
    <title>Web 前端工程化（二） —— CI/CD</title>
    <link href="https://togoblog.cn/what-is-ci-cd/"/>
    <id>https://togoblog.cn/what-is-ci-cd/</id>
    <published>2019-11-04T16:00:00.000Z</published>
    <updated>2019-11-07T09:31:58.254Z</updated>
    
    <summary type="html">
    
      &lt;p&gt;工厂里的装配线以快速、自动化、可重复的方式从原材料生产出消费品。在软件开发领域，我们也同样会思考同样的问题：&lt;strong&gt;以快速、自动化和可重复的方式从源代码生成发布版本。&lt;/strong&gt; &lt;/p&gt;
&lt;p&gt;&lt;code&gt;CI/CD&lt;/code&gt; 是一种通过在应用开发阶段引入自动化来频繁向客户交付应用的方法。&lt;code&gt;CI/CD&lt;/code&gt; 的核心概念是持续集成、持续交付和持续部署。&lt;/p&gt;
&lt;p&gt;缩略词 &lt;code&gt;CI/CD&lt;/code&gt; 具有几个不同的含义。&lt;code&gt;CI/CD&lt;/code&gt; 中的 &lt;code&gt;CI&lt;/code&gt; 指持续集成（&lt;code&gt;Continuous Integration&lt;/code&gt;），&lt;code&gt;CI/CD&lt;/code&gt; 中的 &lt;code&gt;CD&lt;/code&gt; 指的是持续交付（&lt;code&gt;Continuous Delivery&lt;/code&gt;）或持续部署（&lt;code&gt;Continuous Deployment&lt;/code&gt;）。&lt;/p&gt;
    
    </summary>
    
      <category term="FrontEnd" scheme="https://togoblog.cn/categories/FrontEnd/"/>
    
    
      <category term="持续集成" scheme="https://togoblog.cn/tags/%E6%8C%81%E7%BB%AD%E9%9B%86%E6%88%90/"/>
    
      <category term="持续交付" scheme="https://togoblog.cn/tags/%E6%8C%81%E7%BB%AD%E4%BA%A4%E4%BB%98/"/>
    
      <category term="持续部署" scheme="https://togoblog.cn/tags/%E6%8C%81%E7%BB%AD%E9%83%A8%E7%BD%B2/"/>
    
  </entry>
  
  <entry>
    <title>Web 前端工程化（一） —— 什么是前后端分离？</title>
    <link href="https://togoblog.cn/what-is-frontend-backend-separation/"/>
    <id>https://togoblog.cn/what-is-frontend-backend-separation/</id>
    <published>2019-10-30T16:00:00.000Z</published>
    <updated>2019-11-07T09:31:58.254Z</updated>
    
    <summary type="html">
    
      &lt;h3 id=&quot;一、什么是-Web-开发？&quot;&gt;&lt;a href=&quot;#一、什么是-Web-开发？&quot; class=&quot;headerlink&quot; title=&quot;一、什么是 Web 开发？&quot;&gt;&lt;/a&gt;一、什么是 Web 开发？&lt;/h3&gt;&lt;p&gt;如果在一个比较高的抽象层面来看待这个问题的话，&lt;strong&gt;&lt;code&gt;Web&lt;/code&gt; 开发就是在处理客户端请求及服务端响应这两件事&lt;/strong&gt;。&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://github.com/IDeepspace/ImageHosting/raw/master/FrontEnd/web-development.jpg&quot; alt=&quot;Web 开发&quot;&gt;&lt;/p&gt;
&lt;p&gt;当然，这是抽象。在实际的 &lt;code&gt;Web&lt;/code&gt; 开发中，我们会有很多东西需要关注。&lt;/p&gt;
    
    </summary>
    
      <category term="FrontEnd" scheme="https://togoblog.cn/categories/FrontEnd/"/>
    
    
      <category term="Web 前端工程化" scheme="https://togoblog.cn/tags/Web-%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/"/>
    
      <category term="前后端分离" scheme="https://togoblog.cn/tags/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB/"/>
    
  </entry>
  
  <entry>
    <title>JavaScript 异步处理（ES6）</title>
    <link href="https://togoblog.cn/javascript-async/"/>
    <id>https://togoblog.cn/javascript-async/</id>
    <published>2019-10-28T16:00:00.000Z</published>
    <updated>2019-11-07T09:31:58.258Z</updated>
    
    <summary type="html">
    
      &lt;h3 id=&quot;一、Promise-是什么？&quot;&gt;&lt;a href=&quot;#一、Promise-是什么？&quot; class=&quot;headerlink&quot; title=&quot;一、Promise 是什么？&quot;&gt;&lt;/a&gt;一、Promise 是什么？&lt;/h3&gt;&lt;p&gt;不是讲 &lt;code&gt;async/await&lt;/code&gt; 吗？为什么会提到 &lt;code&gt;Promise&lt;/code&gt; ？&lt;/p&gt;
&lt;p&gt;实际上，&lt;code&gt;async/await&lt;/code&gt; 是 &lt;code&gt;Promise&lt;/code&gt; 的一个拓展，所以，想要更好地理解 &lt;code&gt;async/await&lt;/code&gt;，需要先理解 &lt;code&gt;Promise&lt;/code&gt; 。&lt;/p&gt;
&lt;p&gt;我们先看看 &lt;code&gt;Promise&lt;/code&gt; 是什么。先在浏览器中使用 &lt;code&gt;console.dir(Promise)&lt;/code&gt; 打印出 &lt;code&gt;Promise&lt;/code&gt; 对象的所的属性和方法：&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://raw.githubusercontent.com/IDeepspace/ImageHosting/master/JavaScript/promise.png&quot; alt=&quot;Promise&quot;&gt;&lt;/p&gt;
&lt;p&gt;从打印结果可以看出，&lt;code&gt;Promise&lt;/code&gt; 是一个构造函数，它自己本身有 &lt;code&gt;all&lt;/code&gt;、&lt;code&gt;reject&lt;/code&gt;、&lt;code&gt;resolve&lt;/code&gt; 等方法，原型上有 &lt;code&gt;catch&lt;/code&gt;、&lt;code&gt;finally&lt;/code&gt;、&lt;code&gt;then&lt;/code&gt; 等方法。所以 &lt;code&gt;new&lt;/code&gt; 出来的 &lt;code&gt;Promise&lt;/code&gt; 对象也就自然拥有 &lt;code&gt;catch&lt;/code&gt;、&lt;code&gt;finally&lt;/code&gt;、&lt;code&gt;then&lt;/code&gt; 这些方法。从上图中可以看到，&lt;code&gt;then&lt;/code&gt; 方法返回的是一个新的 &lt;code&gt;Promise&lt;/code&gt; 实例（注意，不是原来那个 &lt;code&gt;Promise&lt;/code&gt; 实例）。因此可以采用链式写法，即 &lt;code&gt;then&lt;/code&gt; 方法后面再调用另一个 &lt;code&gt;then&lt;/code&gt; 方法。&lt;/p&gt;
&lt;p&gt;&lt;code&gt;Promise&lt;/code&gt; 的中文意思是承诺，这种&lt;strong&gt;“承诺将来会执行”&lt;/strong&gt;的对象在 &lt;code&gt;JavaScript&lt;/code&gt; 中称为 &lt;code&gt;Promise&lt;/code&gt; 对象。简单说就是一个容器，里面保存着某个未来才会执行的事件（通常是一个异步操作）的结果。&lt;br&gt;
    
    </summary>
    
      <category term="JavaScript" scheme="https://togoblog.cn/categories/JavaScript/"/>
    
    
      <category term="异步" scheme="https://togoblog.cn/tags/%E5%BC%82%E6%AD%A5/"/>
    
  </entry>
  
  <entry>
    <title>在 forEach 中使用 async/await 遇到的问题</title>
    <link href="https://togoblog.cn/javascript-async-await-in-foreach/"/>
    <id>https://togoblog.cn/javascript-async-await-in-foreach/</id>
    <published>2019-10-24T16:00:00.000Z</published>
    <updated>2019-11-07T09:31:58.259Z</updated>
    
    <summary type="html">
    
      &lt;h3 id=&quot;一、问题描述&quot;&gt;&lt;a href=&quot;#一、问题描述&quot; class=&quot;headerlink&quot; title=&quot;一、问题描述&quot;&gt;&lt;/a&gt;一、问题描述&lt;/h3&gt;&lt;p&gt;前几天，项目中遇到一个 &lt;code&gt;JavaScript&lt;/code&gt; 异步问题：&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;有一组数据，需要对每一个数据进行一个异步处理，并且希望处理的时候是同步的。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;用代码描述如下：&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;javascript&quot;&gt;// 生成数据
const getNumbers = () =&amp;gt; {
  return Promise.resolve([1, 2, 3])
}

// 异步处理
const doMulti = num =&amp;gt; {
  return new Promise((resolve, reject) =&amp;gt; {
    setTimeout(() =&amp;gt; {
      if (num) {
        resolve(num * num)
      } else {
        reject(new Error(&amp;#39;num not specified&amp;#39;))
      }
    }, 2000)
  })
}

// 主函数
const main = async () =&amp;gt; {
  console.log(&amp;#39;start&amp;#39;);
  const nums = [1, 2, 3];
  nums.forEach(async (x) =&amp;gt; {
    const res = await doMulti(x);
    console.log(res);
  });
  console.log(&amp;#39;end&amp;#39;);
};

// 执行
main();
&lt;/code&gt;&lt;/pre&gt;
    
    </summary>
    
      <category term="JavaScript" scheme="https://togoblog.cn/categories/JavaScript/"/>
    
    
      <category term="async/await" scheme="https://togoblog.cn/tags/async-await/"/>
    
  </entry>
  
  <entry>
    <title>EventEmitter</title>
    <link href="https://togoblog.cn/eventemitter/"/>
    <id>https://togoblog.cn/eventemitter/</id>
    <published>2019-08-19T16:00:00.000Z</published>
    <updated>2019-11-07T09:31:58.259Z</updated>
    
    <summary type="html">
    
      &lt;p&gt;&lt;code&gt;Node.js&lt;/code&gt; 所有的异步 &lt;code&gt;I/O&lt;/code&gt; 操作在完成时都会发送一个事件到事件队列。&lt;/p&gt;
&lt;p&gt;例如，&lt;a href=&quot;http://nodejs.cn/s/gBYjux&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;net.Server&lt;/code&gt;&lt;/a&gt; 会在每次有新连接时触发事件，&lt;a href=&quot;http://nodejs.cn/s/C3Eioq&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;fs.ReadStream&lt;/code&gt;&lt;/a&gt; 会在打开文件时触发事件，&lt;a href=&quot;http://nodejs.cn/s/kUvpNm&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;stream&lt;/code&gt;&lt;/a&gt; 会在数据可读时触发事件。&lt;/p&gt;
&lt;p&gt;所有能触发事件的对象都是 &lt;code&gt;EventEmitter&lt;/code&gt; 类的实例。 &lt;/p&gt;
&lt;h3 id=&quot;一、EventEmitter-类&quot;&gt;&lt;a href=&quot;#一、EventEmitter-类&quot; class=&quot;headerlink&quot; title=&quot;一、EventEmitter 类&quot;&gt;&lt;/a&gt;一、EventEmitter 类&lt;/h3&gt;&lt;p&gt;&lt;code&gt;events&lt;/code&gt; 模块只提供了一个对象： &lt;code&gt;events.EventEmitter&lt;/code&gt;。&lt;code&gt;EventEmitter&lt;/code&gt; 的核心就是事件触发与事件监听器功能的封装。&lt;/p&gt;
&lt;p&gt;我们可以通过 &lt;code&gt;require(&amp;#39;events&amp;#39;);&lt;/code&gt; 来访问该模块：&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;javascript&quot;&gt;// 引入 events 模块
const Event = require(&amp;#39;events&amp;#39;);
// 创建 eventEmitter 对象
const eventEmitter = new Event.EventEmitter();
&lt;/code&gt;&lt;/pre&gt;
    
    </summary>
    
      <category term="NodeJS" scheme="https://togoblog.cn/categories/NodeJS/"/>
    
    
      <category term="EventEmitter" scheme="https://togoblog.cn/tags/EventEmitter/"/>
    
  </entry>
  
  <entry>
    <title>React setState 的异步与同步</title>
    <link href="https://togoblog.cn/react-setstate/"/>
    <id>https://togoblog.cn/react-setstate/</id>
    <published>2019-08-18T16:00:00.000Z</published>
    <updated>2019-11-07T09:31:58.261Z</updated>
    
    <summary type="html">
    
      &lt;h3 id=&quot;一、如何使用-setState&quot;&gt;&lt;a href=&quot;#一、如何使用-setState&quot; class=&quot;headerlink&quot; title=&quot;一、如何使用 setState&quot;&gt;&lt;/a&gt;一、如何使用 setState&lt;/h3&gt;&lt;p&gt;在 &lt;code&gt;React&lt;/code&gt; 中，一个很重要的点就是不要直接去修改 &lt;code&gt;state&lt;/code&gt;，类似于这样的写法：&lt;code&gt;this.state.count = 1&lt;/code&gt; ，这种方式是无法触发 &lt;code&gt;React&lt;/code&gt; 去更新视图的。因为 React 的机制中规定了：一个 &lt;code&gt;state&lt;/code&gt; 的更新，首先需要调用 &lt;code&gt;setState&lt;/code&gt; 方法：&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;jsx&quot;&gt;this.setState({
    count: 1
})
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;稍有经验的 &lt;code&gt;React&lt;/code&gt; 开发者都会知道，&lt;code&gt;setState&lt;/code&gt; 方法其实是&lt;strong&gt;异步&lt;/strong&gt;的。即 &lt;code&gt;setState&lt;/code&gt; 立马执行之后，是无法直接获取到最新的 &lt;code&gt;state&lt;/code&gt; 的，需要经过 &lt;code&gt;React&lt;/code&gt; 对 &lt;code&gt;state&lt;/code&gt; 的所有改变进行合并处理之后，才会去计算新的虚拟 &lt;code&gt;DOM&lt;/code&gt;，然后再根据最新的虚拟 &lt;code&gt;DOM&lt;/code&gt; 去重新渲染真实 &lt;code&gt;DOM&lt;/code&gt;。&lt;br&gt;
    
    </summary>
    
      <category term="React" scheme="https://togoblog.cn/categories/React/"/>
    
    
      <category term="React" scheme="https://togoblog.cn/tags/React/"/>
    
  </entry>
  
  <entry>
    <title>Oracle批量插入数据时ID自增问题</title>
    <link href="https://togoblog.cn/oracle-id-increase/"/>
    <id>https://togoblog.cn/oracle-id-increase/</id>
    <published>2019-07-28T16:00:00.000Z</published>
    <updated>2019-11-07T09:31:58.253Z</updated>
    
    <summary type="html">
    
      &lt;!-- ## Oracle批量插入数据时ID自增问题 --&gt;
&lt;p&gt;&lt;strong&gt;三步走：&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;1、创建序列 sequence&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;sql&quot;&gt;create sequence seq_stu
      increment by 1    -- 每次递增1
      start with 1       -- 从1开始
      nomaxvalue      -- 没有最大值
      minvalue 1       -- 最小值=1
      NOCYCLE;      -- 不循环
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;2、为序列创建触发事件&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;sql&quot;&gt;create or replace trigger student_id_automation
  before insert
  on student
  for each row
begin
  IF :new.id IS NULL THEN :new.id := seq_stu.nextval;
  end if;
end;
&lt;/code&gt;&lt;/pre&gt;
    
    </summary>
    
      <category term="DataBase" scheme="https://togoblog.cn/categories/DataBase/"/>
    
    
      <category term="Oracle" scheme="https://togoblog.cn/tags/Oracle/"/>
    
  </entry>
  
  <entry>
    <title>微前端</title>
    <link href="https://togoblog.cn/micro-frontends/"/>
    <id>https://togoblog.cn/micro-frontends/</id>
    <published>2019-06-23T16:00:00.000Z</published>
    <updated>2019-11-07T09:31:58.255Z</updated>
    
    <summary type="html">
    
      &lt;h3 id=&quot;一、什么是微前端？&quot;&gt;&lt;a href=&quot;#一、什么是微前端？&quot; class=&quot;headerlink&quot; title=&quot;一、什么是微前端？&quot;&gt;&lt;/a&gt;一、什么是微前端？&lt;/h3&gt;&lt;p&gt;微前端的概念由我司(&lt;code&gt;ThoughtWorks&lt;/code&gt;)在2016年十一月份的&lt;a href=&quot;https://www.thoughtworks.com/radar/techniques/micro-frontends&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;技术雷达&lt;/a&gt;中被列为组织应评估的技术，后来又被提升为试用版，最后将其推广到 &lt;code&gt;Adopt&lt;/code&gt; 中。&lt;/p&gt;
&lt;p&gt;微前端是一种类似于微服务的架构。它将微服务的理念应用于浏览器端，即将单页面前端应用由单一的单体应用转变为把多个小型前端应用聚合为一的应用。各个前端应用还可以独立开发，独立部署，这样我们也就实现了应用的自治。而划分的团队之间也可以自治，独立定义自己的命名规则、代码规范、技术栈、开发流程等。&lt;/p&gt;
    
    </summary>
    
      <category term="FrontEnd" scheme="https://togoblog.cn/categories/FrontEnd/"/>
    
    
      <category term="微前端" scheme="https://togoblog.cn/tags/%E5%BE%AE%E5%89%8D%E7%AB%AF/"/>
    
  </entry>
  
  <entry>
    <title>Node.JS 中的事件循环机制</title>
    <link href="https://togoblog.cn/event-loop-in-nodejs/"/>
    <id>https://togoblog.cn/event-loop-in-nodejs/</id>
    <published>2019-05-28T16:00:00.000Z</published>
    <updated>2019-11-07T09:31:58.260Z</updated>
    
    <summary type="html">
    
      &lt;h3 id=&quot;一、与浏览器中事件循环机制的差异&quot;&gt;&lt;a href=&quot;#一、与浏览器中事件循环机制的差异&quot; class=&quot;headerlink&quot; title=&quot;一、与浏览器中事件循环机制的差异&quot;&gt;&lt;/a&gt;一、与浏览器中事件循环机制的差异&lt;/h3&gt;&lt;p&gt;前面我们对浏览器中的事件循环机制有了一些了解，那 &lt;code&gt;Node&lt;/code&gt; 环境下事件循环机制是否也是一致的呢？看段代码：&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;javascript&quot;&gt;setTimeout(() =&amp;gt; {
    console.log(&amp;#39;timer1&amp;#39;)

    Promise.resolve().then(function () {
        console.log(&amp;#39;promise1&amp;#39;)
    })
}, 0)

setTimeout(() =&amp;gt; {
    console.log(&amp;#39;timer2&amp;#39;)

    Promise.resolve().then(function () {
        console.log(&amp;#39;promise2&amp;#39;)
    })
}, 0)
&lt;/code&gt;&lt;/pre&gt;
    
    </summary>
    
      <category term="NodeJS" scheme="https://togoblog.cn/categories/NodeJS/"/>
    
    
      <category term="事件循环" scheme="https://togoblog.cn/tags/%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF/"/>
    
  </entry>
  
  <entry>
    <title>浏览器中的事件循环机制</title>
    <link href="https://togoblog.cn/event-loop-in-browser/"/>
    <id>https://togoblog.cn/event-loop-in-browser/</id>
    <published>2019-05-27T16:00:00.000Z</published>
    <updated>2019-11-07T09:31:58.260Z</updated>
    
    <summary type="html">
    
      &lt;blockquote&gt;
&lt;p&gt;在看 Event loop 的时候，我发现相关的文章有很多，但是有的文章写得零碎，有的文章只讲解了浏览器或者 Node 环境之一的事件循环，这两者如果没有对比起来理解的话，总是觉得比较模糊。所以在读了很多文章之后，整理出来本文，本篇文章为《浏览器中的事件循环》，下一篇为《&lt;a href=&quot;https://togoblog.cn/event-loop-in-nodejs/&quot;&gt;Node.JS中的事件循环&lt;/a&gt;》，二者对比起来理解会更好。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3 id=&quot;一、单线程和异步&quot;&gt;&lt;a href=&quot;#一、单线程和异步&quot; class=&quot;headerlink&quot; title=&quot;一、单线程和异步&quot;&gt;&lt;/a&gt;一、单线程和异步&lt;/h3&gt;&lt;p&gt;提到 &lt;code&gt;JavaScript&lt;/code&gt; ，就会想到它的 &lt;strong&gt;单线程&lt;/strong&gt; 和 &lt;strong&gt;异步&lt;/strong&gt; 两大特性。那么在 &lt;code&gt;JavaScript&lt;/code&gt; 中单线程是如何做到异步的呢？我们先了解一下单线程和异步之间的关系。&lt;/p&gt;
&lt;p&gt;&lt;code&gt;JavaScript&lt;/code&gt; 中的任务分为 &lt;strong&gt;同步&lt;/strong&gt; 和 &lt;strong&gt;异步&lt;/strong&gt; 两种，它们的处理方式存在很大的不同。&lt;/p&gt;
&lt;h4 id=&quot;1、异步&quot;&gt;&lt;a href=&quot;#1、异步&quot; class=&quot;headerlink&quot; title=&quot;1、异步&quot;&gt;&lt;/a&gt;1、异步&lt;/h4&gt;&lt;p&gt;&lt;strong&gt;同步任务&lt;/strong&gt; 是直接在 &lt;strong&gt;主线程&lt;/strong&gt; 上排队执行。在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。所有同步任务都在主线程上执行，形成一个 &lt;strong&gt;执行栈&lt;/strong&gt;（&lt;code&gt;execution context stack&lt;/code&gt;）。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;异步任务&lt;/strong&gt; 则是被放在 &lt;strong&gt;任务队列&lt;/strong&gt; (&lt;code&gt;task queue&lt;/code&gt;) 中，不进入主线程，只有 &lt;strong&gt;任务队列&lt;/strong&gt; 通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。任务队列类似一个缓冲区，任务下一步会被移到 &lt;strong&gt;执行栈&lt;/strong&gt;，然后主线程执行 &lt;strong&gt;执行栈 &lt;/strong&gt;的任务。如果有多个异步任务，那这些异步任务就要在任务队列中排队等候。&lt;/p&gt;
    
    </summary>
    
      <category term="NodeJS" scheme="https://togoblog.cn/categories/NodeJS/"/>
    
    
      <category term="事件循环" scheme="https://togoblog.cn/tags/%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF/"/>
    
  </entry>
  
  <entry>
    <title>linux — 让 scp 始终覆盖或创建目录</title>
    <link href="https://togoblog.cn/linux-scp-cover-completely/"/>
    <id>https://togoblog.cn/linux-scp-cover-completely/</id>
    <published>2019-05-19T16:00:00.000Z</published>
    <updated>2019-11-07T09:31:58.259Z</updated>
    
    <summary type="html">
    
      &lt;p&gt;前段时间在搭建前端项目的基础设施时，遇到这样一个问题：在 &lt;code&gt;pipline&lt;/code&gt; 上将前端项目 &lt;code&gt;build&lt;/code&gt; 之后的文件夹拷贝到 &lt;code&gt;aws&lt;/code&gt; 上，我使用 &lt;code&gt;scp&lt;/code&gt; 命令将目录从一个远程服务器复制到另一个远程服务器上的新目录，命令如下：&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;shell&quot;&gt;$ scp -r server1:dir1 server2:dir2
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;如果在 &lt;code&gt;server2&lt;/code&gt; 上不存在 &lt;code&gt;dir2&lt;/code&gt;，这可以正常工作，它会创建一个名为 &lt;code&gt;dir2&lt;/code&gt; 的新目录，其中包含 &lt;code&gt;server1&lt;/code&gt; 上 &lt;code&gt;dir1&lt;/code&gt; 的所有内容。&lt;/p&gt;
&lt;p&gt;但是当 &lt;code&gt;dir2&lt;/code&gt; 已经存在于 &lt;code&gt;server2&lt;/code&gt; 上时，就会出现问题，已经存在的文件不会被覆盖。&lt;br&gt;
    
    </summary>
    
      <category term="Linux" scheme="https://togoblog.cn/categories/Linux/"/>
    
    
      <category term="Linux" scheme="https://togoblog.cn/tags/Linux/"/>
    
  </entry>
  
  <entry>
    <title>Python 基础语法</title>
    <link href="https://togoblog.cn/python-basic/"/>
    <id>https://togoblog.cn/python-basic/</id>
    <published>2019-05-11T16:00:00.000Z</published>
    <updated>2019-11-07T09:31:58.260Z</updated>
    
    <summary type="html">
    
      &lt;h3 id=&quot;一、标准数据类型&quot;&gt;&lt;a href=&quot;#一、标准数据类型&quot; class=&quot;headerlink&quot; title=&quot;一、标准数据类型&quot;&gt;&lt;/a&gt;一、标准数据类型&lt;/h3&gt;&lt;h4 id=&quot;1、六个标准的数据类型：&quot;&gt;&lt;a href=&quot;#1、六个标准的数据类型：&quot; class=&quot;headerlink&quot; title=&quot;1、六个标准的数据类型：&quot;&gt;&lt;/a&gt;1、六个标准的数据类型：&lt;/h4&gt;&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Number（数字）&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;支持三种不同的数值类型：整型(int)、浮点型(float)和复数(complex)&lt;/p&gt;
&lt;/blockquote&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;String（字符串）&lt;/p&gt;
&lt;blockquote&gt;
&lt;ul&gt;
&lt;li&gt;使用引号( &lt;code&gt;&amp;#39;&lt;/code&gt; 或 &lt;code&gt;&amp;quot;&lt;/code&gt; )来创建字符串；&lt;/li&gt;
&lt;li&gt;三引号允许一个字符串跨多行，字符串中可以包含换行符、制表符以及其他特殊字符。&lt;/li&gt;
&lt;/ul&gt;
&lt;/blockquote&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;List（列表）&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;列表用 &lt;code&gt;[ ]&lt;/code&gt; 标识，支持字符，数字，字符串甚至可以包含列表（即嵌套）。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Tuple（元组）&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;元组用 &lt;code&gt;()&lt;/code&gt; 标识，类似于 &lt;code&gt;List&lt;/code&gt;（列表）。内部元素用逗号隔开。但是元组不能二次赋值，相当于只读列表。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;/li&gt;
&lt;/ul&gt;
    
    </summary>
    
      <category term="Python" scheme="https://togoblog.cn/categories/Python/"/>
    
    
      <category term="Python" scheme="https://togoblog.cn/tags/Python/"/>
    
  </entry>
  
  <entry>
    <title>Flutter — 零、设置开发环境</title>
    <link href="https://togoblog.cn/flutter-development-environment-configuration/"/>
    <id>https://togoblog.cn/flutter-development-environment-configuration/</id>
    <published>2019-05-08T16:00:00.000Z</published>
    <updated>2019-11-07T09:31:58.254Z</updated>
    
    <summary type="html">
    
      &lt;h3 id=&quot;一、介绍&quot;&gt;&lt;a href=&quot;#一、介绍&quot; class=&quot;headerlink&quot; title=&quot;一、介绍&quot;&gt;&lt;/a&gt;一、介绍&lt;/h3&gt;&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;Flutter&lt;/code&gt; 是由 &lt;code&gt;Google&lt;/code&gt; 的工程师团队打造的，用于创建高性能、跨平台的移动应用的框架&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;Flutter&lt;/code&gt; 针对当下以及未来的移动设备进行优化，专注于 &lt;code&gt;Android and iOS&lt;/code&gt; 低延迟的输入和高帧率&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;Flutter&lt;/code&gt; 的设计跟 &lt;code&gt;react-native&lt;/code&gt; 很像，但是比 &lt;code&gt;RN&lt;/code&gt; 进了一步&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;Flutter&lt;/code&gt; 的开发语言是 &lt;code&gt;Dart&lt;/code&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;Flutter&lt;/code&gt; 的热重载（&lt;code&gt;hot-reload&lt;/code&gt;）特性让人惊叹，它能在编 码时为你提供超快的视觉反馈&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&quot;二、安装&quot;&gt;&lt;a href=&quot;#二、安装&quot; class=&quot;headerlink&quot; title=&quot;二、安装&quot;&gt;&lt;/a&gt;二、安装&lt;/h3&gt;&lt;h4 id=&quot;1、获取-Flutter-SDK&quot;&gt;&lt;a href=&quot;#1、获取-Flutter-SDK&quot; class=&quot;headerlink&quot; title=&quot;1、获取 Flutter SDK&quot;&gt;&lt;/a&gt;1、获取 Flutter SDK&lt;/h4&gt;&lt;ul&gt;
&lt;li&gt;将 &lt;code&gt;Flutter&lt;/code&gt; 项目克隆到本地：
    
    </summary>
    
      <category term="Flutter" scheme="https://togoblog.cn/categories/Flutter/"/>
    
    
      <category term="Flutter" scheme="https://togoblog.cn/tags/Flutter/"/>
    
  </entry>
  
  <entry>
    <title>React v16.8 Hook 功能</title>
    <link href="https://togoblog.cn/react-hook/"/>
    <id>https://togoblog.cn/react-hook/</id>
    <published>2019-04-19T16:00:00.000Z</published>
    <updated>2019-11-07T09:31:58.261Z</updated>
    
    <summary type="html">
    
      &lt;p&gt;&lt;code&gt;Hook&lt;/code&gt; 是 &lt;code&gt;React v16.8&lt;/code&gt; 的新增特性。它可以让你在不创建 &lt;code&gt;class&lt;/code&gt;  式组件的情况下使用 &lt;code&gt;state&lt;/code&gt; 以及其他的 &lt;code&gt;React&lt;/code&gt; 特性。&lt;/p&gt;
&lt;h3 id=&quot;一、-React-Hook-出现的背景&quot;&gt;&lt;a href=&quot;#一、-React-Hook-出现的背景&quot; class=&quot;headerlink&quot; title=&quot;一、 React Hook 出现的背景&quot;&gt;&lt;/a&gt;一、 &lt;code&gt;React Hook&lt;/code&gt; 出现的背景&lt;/h3&gt;&lt;p&gt;我们知道，&lt;code&gt;React&lt;/code&gt; 的核心思想就是：将一个页面拆分成一些独立的、可复用的组件，并且用自上而下的单向数据流的形式将这些组件串联起来。 &lt;/p&gt;
&lt;p&gt;但是在实际项目中，很多组件式非常冗杂且难以复用的。对于那些 &lt;code&gt;class&lt;/code&gt; 式的组件，因为它们本身包含了自己的状态( &lt;code&gt;state&lt;/code&gt; )，所以这类组件复用起来是非常麻烦的。对于这个问题，&lt;code&gt;React&lt;/code&gt; 官方也给出了两种推荐的解决方式：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;渲染属性( &lt;a href=&quot;https://reactjs.org/docs/render-props.html&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;Render Props&lt;/code&gt;&lt;/a&gt; )&lt;/li&gt;
&lt;li&gt;高阶组件( &lt;a href=&quot;https://zh-hans.reactjs.org/docs/higher-order-components.html#___gatsby&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;&lt;code&gt;Higher-Order Components&lt;/code&gt; &lt;/a&gt;)
    
    </summary>
    
      <category term="React" scheme="https://togoblog.cn/categories/React/"/>
    
    
      <category term="React" scheme="https://togoblog.cn/tags/React/"/>
    
      <category term="React Hook" scheme="https://togoblog.cn/tags/React-Hook/"/>
    
  </entry>
  
  <entry>
    <title>React 16 中的新特性</title>
    <link href="https://togoblog.cn/react-new-api-in-16/"/>
    <id>https://togoblog.cn/react-new-api-in-16/</id>
    <published>2019-03-22T16:00:00.000Z</published>
    <updated>2019-11-07T09:31:58.261Z</updated>
    
    <summary type="html">
    
      &lt;!-- ## React 16 中的新特性 --&gt;
&lt;p&gt;对于 &lt;code&gt;React v16&lt;/code&gt; 之后版本中的一些新特性，挑选了以下几个常用的 &lt;code&gt;Api&lt;/code&gt; 来讲解 :&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Render 方法优化&lt;/li&gt;
&lt;li&gt;错误边界&lt;/li&gt;
&lt;li&gt;Portals&lt;/li&gt;
&lt;li&gt;Context API&lt;/li&gt;
&lt;li&gt;新的生命周期&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;后面会持续更新。&lt;/p&gt;
&lt;h3 id=&quot;一、Render-方法优化&quot;&gt;&lt;a href=&quot;#一、Render-方法优化&quot; class=&quot;headerlink&quot; title=&quot;一、Render 方法优化&quot;&gt;&lt;/a&gt;一、Render 方法优化&lt;/h3&gt;&lt;p&gt;为了符合 &lt;code&gt;React&lt;/code&gt; 的 &lt;code&gt;component tree&lt;/code&gt; 和 &lt;code&gt;diff&lt;/code&gt; 结构设计，在组件的 &lt;code&gt;render&lt;/code&gt;  方法中，顶层必须包裹为单节点，因此我们在实际组件的设计和使用中，需要注意尽量避免嵌套后的层级变深。&lt;br&gt;
    
    </summary>
    
      <category term="React" scheme="https://togoblog.cn/categories/React/"/>
    
    
      <category term="React" scheme="https://togoblog.cn/tags/React/"/>
    
      <category term="Portals" scheme="https://togoblog.cn/tags/Portals/"/>
    
      <category term="ErrorBoundary" scheme="https://togoblog.cn/tags/ErrorBoundary/"/>
    
  </entry>
  
  <entry>
    <title>一些比较有用的 JS 技巧</title>
    <link href="https://togoblog.cn/javascript-tricks/"/>
    <id>https://togoblog.cn/javascript-tricks/</id>
    <published>2019-01-27T16:00:00.000Z</published>
    <updated>2019-11-07T09:31:58.258Z</updated>
    
    <summary type="html">
    
      &lt;h4 id=&quot;1、数组去重&quot;&gt;&lt;a href=&quot;#1、数组去重&quot; class=&quot;headerlink&quot; title=&quot;1、数组去重&quot;&gt;&lt;/a&gt;1、数组去重&lt;/h4&gt;&lt;pre&gt;&lt;code class=&quot;javascript&quot;&gt;const j = [...new Set([1, 2, 3, 3])];

console.log(j); // [ 1, 2, 3 ]
&lt;/code&gt;&lt;/pre&gt;
&lt;h4 id=&quot;2、过滤错误值&quot;&gt;&lt;a href=&quot;#2、过滤错误值&quot; class=&quot;headerlink&quot; title=&quot;2、过滤错误值&quot;&gt;&lt;/a&gt;2、过滤错误值&lt;/h4&gt;&lt;p&gt;将 &lt;code&gt;0&lt;/code&gt;， &lt;code&gt;undefined&lt;/code&gt;，&lt;code&gt;null&lt;/code&gt;， &lt;code&gt;false&lt;/code&gt; 等错误值从数组中剔除：&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;javascript&quot;&gt;myArray
  .map(item =&amp;gt; {
    // ...
  })
  // Get rid of bad values
  .filter(Boolean);
&lt;/code&gt;&lt;/pre&gt;
    
    </summary>
    
      <category term="JavaScript" scheme="https://togoblog.cn/categories/JavaScript/"/>
    
    
      <category term="JavaScript" scheme="https://togoblog.cn/tags/JavaScript/"/>
    
  </entry>
  
  <entry>
    <title>Vue 计算属性与侦听器</title>
    <link href="https://togoblog.cn/vue-computed-watch/"/>
    <id>https://togoblog.cn/vue-computed-watch/</id>
    <published>2019-01-26T16:00:00.000Z</published>
    <updated>2019-11-07T09:31:58.263Z</updated>
    
    <summary type="html">
    
      &lt;!-- ## Vue 计算属性与侦听器 --&gt;
&lt;p&gt;这一节我们一起学习 &lt;code&gt;vue&lt;/code&gt; 中的计算属性(&lt;code&gt;computed properties&lt;/code&gt;)和侦听器(&lt;code&gt;watch&lt;/code&gt;)。&lt;/p&gt;
&lt;p&gt;在之前，我们学习过 &lt;code&gt;vue&lt;/code&gt; 表达式插值：&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;html&quot;&gt;&amp;lt;div id=&amp;quot;example&amp;quot;&amp;gt;
  {{ message.split(&#39;&#39;).reverse().join(&#39;&#39;) }}
&amp;lt;/div&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;如果在模板中放入太多的逻辑会让模板过重且难以维护。我们可以把方法写在事件处理函数里面，并且在构造器内部通过 &lt;code&gt;this&lt;/code&gt; 调用。&lt;br&gt;
    
    </summary>
    
      <category term="Vue" scheme="https://togoblog.cn/categories/Vue/"/>
    
    
      <category term="vue" scheme="https://togoblog.cn/tags/vue/"/>
    
      <category term="vue 计算属性" scheme="https://togoblog.cn/tags/vue-%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7/"/>
    
      <category term="vue 侦听器" scheme="https://togoblog.cn/tags/vue-%E4%BE%A6%E5%90%AC%E5%99%A8/"/>
    
  </entry>
  
  <entry>
    <title>Vue 实例的生命周期</title>
    <link href="https://togoblog.cn/vue-lifecycle/"/>
    <id>https://togoblog.cn/vue-lifecycle/</id>
    <published>2019-01-25T16:00:00.000Z</published>
    <updated>2019-11-07T09:31:58.263Z</updated>
    
    <summary type="html">
    
      &lt;!-- ## Vue 实例的生命周期 --&gt;
&lt;p&gt;在 &lt;code&gt;Vue&lt;/code&gt; 中，每个实例都有自己的一个完整的生命周期，包括开始创建 —— 初始化数据 —— 编译模板 —— 将实例挂载到 &lt;code&gt;DOM&lt;/code&gt; —— 渲染 —— 更新 —— 渲染 —— 卸载等一系列过程。同时在这个过程中也会运行一些叫做&lt;strong&gt;生命周期钩子&lt;/strong&gt;的函数，这样我们就可以在实例生命周期的不同阶段做一些需要做的事情。&lt;/p&gt;
&lt;h3 id=&quot;一、vue-实例和组件的区别&quot;&gt;&lt;a href=&quot;#一、vue-实例和组件的区别&quot; class=&quot;headerlink&quot; title=&quot;一、vue 实例和组件的区别&quot;&gt;&lt;/a&gt;一、vue 实例和组件的区别&lt;/h3&gt;&lt;p&gt;这里可能会有个小疑惑，怎么突然又说是 &lt;code&gt;Vue&lt;/code&gt; 实例呢？实例和组件有什么区别吗？&lt;/p&gt;
&lt;p&gt;在 &lt;code&gt;SPA（Single Page Application）&lt;/code&gt; 应用中，我们只会创建一个 &lt;code&gt;Vue&lt;/code&gt; 根实例，整个应用都是通过这个根实例启动的。在通过 &lt;code&gt;vue-cli&lt;/code&gt; 脚手架生成的项目中， &lt;code&gt;main.js&lt;/code&gt; 里创建了 &lt;code&gt;Vue&lt;/code&gt; 根实例：&lt;br&gt;
    
    </summary>
    
      <category term="Vue" scheme="https://togoblog.cn/categories/Vue/"/>
    
    
      <category term="vue" scheme="https://togoblog.cn/tags/vue/"/>
    
      <category term="vue 生命周期" scheme="https://togoblog.cn/tags/vue-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F/"/>
    
  </entry>
  
  <entry>
    <title>Vue 组件间的通讯</title>
    <link href="https://togoblog.cn/vue-pass-data-in-components/"/>
    <id>https://togoblog.cn/vue-pass-data-in-components/</id>
    <published>2019-01-24T16:00:00.000Z</published>
    <updated>2019-11-07T09:31:58.264Z</updated>
    
    <summary type="html">
    
      &lt;!-- ## Vue 组件间的通讯 --&gt;
&lt;p&gt;这一节我们一起看看 &lt;code&gt;vue&lt;/code&gt; 中组件间的数据是如何传递的。&lt;/p&gt;
&lt;p&gt;前面，我们已经初步建立了 &lt;code&gt;vue&lt;/code&gt; 组件化的思想，知道如何创建组件、引入组件以及如何在组件里的一些功能。接下来，我们来学习怎么建立组件之间的连接，也就是组件的通讯。直白一点说就是：在一个组件中做的操作如何更新到应用程序中的其他组件。&lt;/p&gt;
&lt;p&gt;这篇文章会从两个方便介绍 &lt;code&gt;vue&lt;/code&gt; 组件间的通讯：&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;htm&quot;&gt;- 父子组件之间的通讯
- 兄弟组件之间的通讯
&lt;/code&gt;&lt;/pre&gt;
    
    </summary>
    
      <category term="Vue" scheme="https://togoblog.cn/categories/Vue/"/>
    
    
      <category term="vue" scheme="https://togoblog.cn/tags/vue/"/>
    
      <category term="vue 组件间通讯" scheme="https://togoblog.cn/tags/vue-%E7%BB%84%E4%BB%B6%E9%97%B4%E9%80%9A%E8%AE%AF/"/>
    
  </entry>
  
</feed>