1、Node.js的安装；win环境下的安装还是挺傻瓜式的，所以只要把安装文件下载下来，安装就可以正常使用了，建议安装最新版的node；官方文档中用了Chocolatey，它是一个Windows上的包管理器，可以像Linux系统一样直接命令行安装比如node、Python之类的包。这里我利用他来安装了Python2[为啥又是2呢:)]，貌似没啥用，可能后期会用到。Chocolatey的安装也很简单，打开cmd命令行，输入如下命令回车即可：

1

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

2、可以安装yarn，当然可以选择npm而无视它，这里我还是比较习惯用npm，不过yarn也安装了，直接利用npm全局安装就可以使用了；

闭包的简单理解：函数A在函数B内容进行了定义，当函数A在执行时需要访问函数B中的变量对象，那么函数B就是一个闭包。简单看一个小例子，大概就能简单理解何为闭包。

1
2
3
4
5
6
7
8

function foo() {
  var a = 2;
  function bar() {
    console.log( a ); // 2
  }
  bar();
}
foo();

对于上述代码，很好理解，就是调用foo()方法，其中bar()嵌套在foo()中，并且bar()方法体中要在控制台输出a的值，而这个a的声明在bar()外，相对于bar()来说a是一个全局变量，这样进行RHS查询，可以得到a值为2，上面这个例子可以对闭包进行一个简单的理解，函数bar()在函数foo()内容进行了定义，当函数A在执行时需要访问函数foo()中的变量对象，那么函数foo()就是一个闭包。这个小例子其实不能突出的展示出闭包的作用，在《你不知道的JavaScript》一书中，举出了另一个例子，可以很好地展示出闭包的真正作用，清晰地展示了闭包。

通常认为JavaScript代码是一句一句自上而下运行的，但事实是并非所有情况都是如此。《你不知道的JavaScript》书中，举了这么个例子，说明了代码执行并非都是自上而下的。

1
2
3

a = 2;
var a;
console.log( a );

上述代码中，虽然a的声明在赋值之后，但控制台输出a的值并非为undefined,而是2。在来看下面的一段代码：

1
2

console.log( a );
var a = 2;

这时候控制台输出的值其实是undefined，为什么呢？部分人可能会认为输出结果应该是报异常了，或者是结果为2，但这两种结果都是错误的，这里扯到了JavaScript的编译，书中提到：“正确的思考思路是，包括变量和函数在内的所有声明都会在任何代码被执行前首先被处理 ”。所以不管声明位于哪个位置，在代码执行时都要被首先处理，即声明提升，在上述代码中，对于语句var a = 2，JavaScript其实会把它拆解为var a 和 a = 2，其中var a定义声明会在编译阶段就被执行到[编译阶段]，而a = 2则留在原地等待被执行[执行阶段]，所以将上述代码拆解开来看，其实结果就很清晰了。

LHS和RHS的含义是“赋值操作的左侧或右侧”并不一定意味着就是“=赋值操作符的左侧 或右侧”。赋值操作还有其他几种形式，因此在概念上最好将其理解为“赋值操作的目标是谁 （LHS）”以及“谁是赋值操作的源头（RHS）”。——《你不知道的JavaScript》

1
2
3
4

function foo(a) {
  console.log(a); 
}
foo(2); //2

对书中的例子进行简单的分析，foo(a)是一个方法，当被调用后，控制台将会输出a的值。foo(2)调用该方法，其中将2赋值给了参数a，这里就用到了LHS查询；foo(2)调用了foo(a)这个方法，这样可以获得控制台输出值，这里用到了RHS查询[一般认为当能被调用成功，即为RHS，如果不存在被调用的方法，控制台将会报错！]。进入foo(a)这个方法体里面，发现console.log(a)需要在控制台输出a的值，这样就要利用RHS查询，找到谁是赋值操作的源头，也就是值为2。注意[自己也忽略这一点]：console.log( )调用的方法log，console也对其做了RHS查询，并且检查得到的值中是否有一个叫做log的方法。

koa 是由 Express 原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框架。使用 koa 编写 web 应用，通过组合不同的 generator，可以免除重复繁琐的回调函数嵌套，并极大地提升错误处理的效率。koa 不在内核方法中绑定任何中间件，它仅仅提供了一个轻量优雅的函数库，使得编写 Web 应用变得得心应手。

现在主要还是做前端工作，不过这阵子基本都在学习Node这一块的知识，发现Node的官方文档确实很“精简”，不过还是可以克服，不行就谷歌百度嘛！这周用koa2框架写了一个简单的Feedback接口，其实花了一下午时间（手动滑稽，在这期间被后端工程师叼了很多次，都怪自己还是不够细心，一些问题上总是出现很傻瓜式的错误，还有切记不要做伸手党，不懂就查文档，搜索，不要一遇到问题就寻求别人助攻。接下来进入正题。

反馈功能，首先肯定要有数据库存储数据，这里用mysql，安装mysql，教程自行百度；node环境也是必须的，毕竟koa是基于nodejs的，这里系统环境还是推荐使用Linux，用起来特别爽，以上步骤准备完毕后，用npm安装mysql驱动:

1

npm install mysql --save

–save只是用来将库存储到package.json文件中，这样别人拉你项目后，只要该文件有的库，直接npm install就OK了，没有该文件要记得创建。新建一个文件夹，名叫model，创建feedback.js文件，引用mysql库:

1

const mysql = require('mysql');

创建类Feedback，这里会用到一些es7语法，不过还是能理解的，用来解决异步同步问题，首先要连接数据库，当然要先自己创建database，新建数据表，然后保存，这里表的结构大概是：id[自增]，email，feedback，createTime；这个结构自己创建，不懂怎么弄自行找方法解决。

上一篇文章中可以获取到了百度首页的代码，接下来就是找到对应的Logo，然后将他下载下来。其实很简单，拿到图片的路径，然后进行请求，获取到二进制数据，将其转换为Buffer类型，然后存到对应的本地路径，完成下载。
可以去百度首页，检查元素，看看那张图片对应的id，也就是说利用正则表达式，匹配百度代码中对应的id，然后进行分组，获取对应图片的路径，简单写了下匹配id的正则表达式，

1
2

let websiteReg = <img id=s_lg_img src="(\S+)"/;
let imgUrl = websiteReg.exec(websiteCode)[1];

其中imgUrl就是图片的链接地址，这样就可以利用正则表达式匹配出hostname和path，其正则表达式是：

上星期用node做了几个简单的小例子，其中发现了很多问题，但其实是一些注意就能避免的问题，解决问题的思路：遇到错误，命令行打出日志，看看错误信息；查看官方API文档，看看是否调用出错；谷歌搜索问题解决方法。
首先讲下怎样获取百度首页代码，百度首页启用了https，所以用node里的https；

1

const https = require('https');

接下来进行请求，获取百度首页的二进制文件数据，然后再转换为utf8；代码如下：

Promise 对象用于异步计算. 一个Promise对象代表一个值, 该值可以在当前或未来可用, 或永远不可用。
Promise对象有以下几种状态:

1. pending: 初始状态, 既不是 fulfilled 也不是 rejected.
2. fulfilled: 成功的操作.
3. rejected: 失败的操作.

以上描述均来自于MDN对Promise基础的解释，链接地址。
在看MDN对Promise的例子中同时学到了insertAdjacentHTML()这一接口，这个接口对于在元素之间DOM的插入非常的方便，但这里只是简单的介绍下，insertAdjacentHTML() 将指定的文本解析为HTML或XML，并将生成的节点插入到指定位置的DOM树中。语法使用：
element.insertAdjacentHTML(position, text);

在React中使用组件，可以将其拆解成独立存在，而且可重用，当一个组件需要修改UI，只需考虑该组件修改而不影响其他。
如何写一个简单的组件，其实很简单，将其写在一个函数中，例如下面的一个小例子：

1
2
3

function CompoDemo() {
  return <p>Hello!</p>;
}

这样就是一个简单的组件，在实际项目中，个人偏向于用ES6类去定义一个组件，官方文档中也有一个小例子，这个例子我也写在下面，以便对比参考：

1
2
3
4
5
6

Html代码:
<div id="example">
    <component v-bind:is="currentView" keep-alive></component>  <!--组件保留在内存-->
    <button v-on:click = "currentchange">点击切换</button>
    <button v-on:click = "currentBack">点击返回</button>
</div>

上述代码是在官方文档的小栗子基础上改的，为的只是切换currentView的状态；