发布一个react组件——react-read-pdf，用于在移动端展示PDF文件

PC端的浏览器对于PDF文件的展示没有太大的问题，给定一个PDF的链接，就可以用浏览器默认的展示样式来展示和渲染PDF文件的内容。比如一个"http://www.baidu.com/test/pdf"。 如何在移动端展示这个文件。为了在移动端展示和渲染PDF文件的内容，本文在pdfjs的基础上实现了一个简单的react组件，用于展示和渲染PDF文件。

• 将这个react组件，以npm包的形式发布。

• 这个组件的项目地址为：https://github.com/forthealllight/react-read-pdf
  （如果想看使用的例子，直接下载这个代码或者clone，然后npm install和npm start即可）

React-read-pdf

使用React16.5编写的组件，用于在移动设备和PC端显示和渲染PDF文件

特点

• Simple: 使用简单方便，仅仅是一个react组件
• Mobile-friendly: 自适应多种移动端的设备，包括手机，平板和其他的移动办公设备

浏览器支持

• IE 10+
• Firefox 3.6+
• Chrome 6+
• Safari 6+
• Opera 11.5+
• iOS Safari 6.1+
• Android Browser 3+

快速开始

1. 将 react-read-pdf引入你的react项目中

(在你的项目中比如先引入react,且必须保证React的版本必须在15.0以上)

安装react-read-pdf包

npm install --save react-read-pdf

在PC端建议使用PDFReader:

import React from 'react';
import { PDFReader } from 'react-read-pdf';

在移动端建议使用MobilePDFReader,可以自适应各种移动设备:

import React from 'react';
import { MobilePDFReader } from 'react-read-pdf';

2. 引入之后，再来看简单的使用:

import { MobilePDFReader } from 'react-read-pdf';
export default class Test extends Component{
  render(){
    return <div style={{overflow:'scroll',height:600}}>
            <MobilePDFReader url="http://localhost:3000/test.pdf"/>
           </div>
  }
}

import ReactDOM from 'react-dom';
import Test from './test'
ReactDOM.render(<Test />, document.getElementById('root'));

react-read-pdf 自适配于各种不同的移动设备，包括手机、平板和其他移动办公设备,下图是利用react-read-pdf在iphoneX上展示PDF的一个例子。

文档

react-read-pdf 这个npm包主要包括了两个不同类型的组件 PDFReader 和 MobilePDFReader.

🌱 PDFReader

import { PDFReader } from 'react-read-pdf'

...
<PDFReader url={"http://localhost:3000/test.pdf"} ...>

PDFReader组件中的属性

url
**PDFReader**组件的url属性

类型:

• string : 字符串，表示PDF文件的绝对或者相对地址
• object : 对象，有下列的属性

属性:

onDocumentComplete
**PDFReader**的onDocumentComplete属性

Type:

• function(totalPage)

onDocumentComplete的类型是一个函数, 这个函数的第一个参数表示的是PDF文件的总页数。

注意事项

PDFReader组件的url属性可以是字符串或者是对象。

下面两种方式都是被允许的。

其一是 :

 <MobilePDFReader url="http://localhost:3000/test.pdf"/>

另外一种方式是 :

 <MobilePDFReader url={url:"http://localhost:3000/test.pdf"}/>

🌱 MobilePDFReader

import { MobilePDFReader } from 'react-read-pdf'

...
<MobilePDFReader url={"http://localhost:3000/test.pdf"} ...>

MobilePDFReader组件中的属性

onDocumentComplete
**MobilePDFReader**的onDocumentComplete属性

类型: 函数

• function(totalPage,title,otherObj)

函数的参数:

注意事项

scale的默认值为“auto”,强烈推荐将scale的值设置成“auto”，这样可以根据移动设备的大小自适应的改变scale的值。

开发者选项

• React (16.x)
• Webpack (4.x)
• Typescript (3.x)
• Hot Module Replacement (HMR) using React Hot Loader (4.x)
• Babel (7.x)
• Less
• React-css-modulesusing css-modules
• Jest - Testing framework for React applications
• Production build script
• Image loading/minification using Image Webpack Loader
• Typescript compiling using Typescript Loader (5.x)
• Code quality (linting) for Typescript and LESS/CSS.

安装

1. Clone/download repo
2. yarn install (or npm install for npm)

使用

Development

yarn run start-dev

• Build app continuously (HMR enabled)
• App served @ http://localhost:8080

Production

yarn run start-prod

• Build app once (HMR disabled)
• App served @ http://localhost:3000

指令列表

Note: replace yarn with npm if you use npm.

简要介绍：为了SEO和加快首屏加载速度，React提供了服务端渲染（Server Side Render）。本文结合express，来介绍一下React16.x中的SSR。

本例代码：https://github.com/forthealllight/react16.0-ssr

一、为什么要SSR

单页应用将UI层和内容都由javascript来渲染，搜索引擎或网页爬虫需要完成的HTML结构，因此单页应用如果只在客户端渲染，不利于SEO，此外尽管我们可以通过按需加载的形式来减少首页加载的js，但是通过js来渲染DOM的时候还是会有一定的时间延迟。

因此SSR解决的问题有两个：

• SEO

• 加速首屏加载

在React和Vue等前端框架中，SSR的本质就是由服务端执行渲染，直接将渲染结果以HTML结构的形式返回给客户端。也就是将Virtual DOM转化成字符串的形式返回给客户端。

二、React15.x中的SSR

在React15.x中，有两个方法来处理SSR：

• renderToString

• renderToStaticMarkup

这两个方法都是在react-dom/server中提供的，用来在服务端将virtual dom渲染成字符串。

(1) 相同点

renderToString和renderToStaticMarkup都接受一个参数，这个参数是react的组件，返回一段HTML字符串。

renderToString(react element):string

renderToStaticMarkup(react element):string

此外react-dom中给浏览器端提供了一个render方法，render方法将react组件，添加到真实的DOM节点中。render实现的就是浏览器端渲染。

归类一下：

服务端渲染：renderToString、renderToStaticMarkup——>string
客户端渲染：render——>HTML结构

(2) SSR实现

下面我们以renderToString为例，通过express来实现一个服务端渲染的例子。

首先node最新版本为8.9.3，还不支持es6语法，同时为了使node支持jsx,我们需要安装babel，本文为了方便，采用了babel-cli。

首先安装babel-cli:

npm install -d babel-cli

接着安装presets:

npm install -d babel-preset-latest babel-preset-stage-0 babel-preset-react

接着我们在script中：

"start":"babel-node ./server/server.js --presets es2015,stage-0,react"

最后，就可以通过 npm run start的方式实现启动server.js，server.js是经过babel处理，可以支持ES6和jsx.

在server.js中，我们利用了express的路由和中间件模块。

let express=require('express');
let app=express();
import React from 'react';
import {renderToString,renderToStaticMarkup} from 'react-dom/server';
import HomePage from '../src/components/homepage/index.js';

var server=app.listen(8080,()=>{
  var host=server.address().address;
  var port=server.address().port;
  console.log('server is start at',host,port);
});
//static
app.use('/dist',express.static('dist'));

app.get('/',(req,res)=>{
  res.write('<!DOCTYPE html><html><head><title>Hello HomePage</title></head><body>');
  res.write('<div id="app">');
  res.write(renderToString(<HomePage/>));
  res.write('</div></body>');
  res.write('<script type="text/javascript" src="../dist/vendor.bundle.js"></script><script type="text/javascript" src="../dist/js/app.js"></script>');
  res.write('</html>');
})

结构很简单，因为返回的html页面要加载静态资源，因此我们在上述的代码中还使用了express内置的静态文件模块express.static.

最后，通过npm start就能启动本地服务器，在浏览器中打开：

http://localhost:8080/ 就能看到我们SSR的例子。

(3) renderToString和renderToStaticMarkup的区别

• renderToString：渲染的结果是带有data-reactid属性的，此时，在服务端的基础上，客户端的render不会重新渲染，只会执行组件componetDidmout中的业务，以及绑定事件等等。

• renderToStaticMarkup：渲染的结果是不带有data-reactid属性的，此时不管服务端有没有渲染，在客户端中都会重新渲染该组件。

比如在renderToString的关于HomePage的返回HTML字符串结果为：

<h1 data-reactroot>Home Page</h1>

而在renderToStaticMarkup中，关于HomePage的返回HTML字符串结果为：

<h1>Home Page</h1>

三、React16.x中的SSR

(1) hydrate

在React16.x中，在客户端渲染的render的方法的基础上，增加了一个新的方法hydrate.

简单来说，如果在仅在客户端呈现内容，那么使用render方法就已经足够，如果客户端要在服务端的基础上进行渲染，那么可以使用hydrate.
使用的方法和render一样：

import {hydrate} from 'react-dom';
hydrate(<HomePage/>,document.getElementById('app'));

运行后发现提示：

Warning: render(): Calling ReactDOM.render() to hydrate server-rendered markup will stop working in React v17. Replace the ReactDOM.render() call with ReactDOM.hydrate() if you want React to attach to the server HTML.

说明React16.x中，客户端“水合”服务端，是兼容之前的render方法的，之后的版本中会移除render方法，完全用hydrate来代替。

hydrate方法，解决的是如何复用server端，ReactDOMServer的结果。

(2) stream

此外React16.x中，针对renderToString和renderToStaticMarkup提供了stream的方法：

• renderToNodeStream
• renderToStaticNodeStream

这两个方法同样接受的参数为react element，但是返回的不是HTML字符串，而是一个可读流。

最后给出完整代码的地址，直接npm start就可以运行：

https://github.com/forthealllight/react16.0-ssr

四、注意事项

如果不用babel-cli的方法，来babel node文件，用webpack的话可能会报一下错误：

RROR in ./node_modules/destroy/index.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\yuxl\Desktop\react-Scaffold-master\node_modules\destroy'
 @ ./node_modules/destroy/index.js 14:17-30
 @ ./node_modules/send/index.js
 @ ./node_modules/express/lib/response.js
 @ ./node_modules/express/lib/express.js
 @ ./node_modules/express/index.js
 @ ./src/server.js

ERROR in ./node_modules/etag/index.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\yuxl\Desktop\react-Scaffold-master\node_modules\etag'
 @ ./node_modules/etag/index.js 22:12-25
 @ ./node_modules/express/lib/utils.js
 @ ./node_modules/express/lib/application.js
 @ ./node_modules/express/lib/express.js
 @ ./node_modules/express/index.js
 @ ./src/server.js

ERROR in ./node_modules/express/lib/view.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\yuxl\Desktop\react-Scaffold-master\node_modules\express\lib'
 @ ./node_modules/express/lib/view.js 18:9-22
 @ ./node_modules/express/lib/application.js
 @ ./node_modules/express/lib/express.js
 @ ./node_modules/express/index.js
 @ ./src/server.js

ERROR in ./node_modules/send/index.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\yuxl\Desktop\react-Scaffold-master\node_modules\send'
 @ ./node_modules/send/index.js 23:9-22
 @ ./node_modules/express/lib/response.js
 @ ./node_modules/express/lib/express.js
 @ ./node_modules/express/index.js
 @ ./src/server.js

ERROR in ./node_modules/send/node_modules/mime/mime.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\yuxl\Desktop\react-Scaffold-master\node_modules\send\node_modules\mime'
 @ ./node_modules/send/node_modules/mime/mime.js 2:9-22
 @ ./node_modules/send/index.js
 @ ./node_modules/express/lib/response.js
 @ ./node_modules/express/lib/express.js
 @ ./node_modules/express/index.js

也就是webpack在打包的时候找不到 node自带的模块，比如fs等，解决的方法是在webpack的配置文件里面增加：

target:'node'

简要介绍：在webpack的官网，给出了十几种sourcemap，那么每一种sourcemap之间有什么区别，本文在理解sourcemap的基础上，分析在生产和开发环境中，应该采用何种形式的sourcemap

一 、 从Sourcemap和Data URL说起

(1) 什么是Sourcemap?

我们在打包中，将开发环境中源代码经过压缩，去空格，babel编译转化，最终可以得到适用于生产环境的项目代码，这样处理后的项目代码和源代码之间差异性很大，会造成无法debug的问题。

举例来说，如果压缩等处理过的生产环境中的代码出现bug，调试的时候只能定位到压缩处理后的代码的位置，无法定位到开发环境中的源代码。

sourcemap就是为了解决上述代码定位的问题，简单理解，就是构建了处理前的代码和处理后的代码之间的桥梁。主要是方便开发人员的错误定位。这里的处理操作包括：

• 压缩，减小体积

• 将多个文件合并成同一个文件

• 其他语言编译成javascript，比如TypeScript和CoffeeScript等

(2) 什么是DataURL?

DataURL最早是出现在HTML文件img标签中的关于图片的引用，DataURL提供了一种将图片"嵌入"到HTML中的方法。

跟传统的img的src属性指向服务器中某张图片的地址不同，在Data URL协议中，图片被转换成base64编码的字符串形式，并存储在URL中，冠以mime-type。具体通过DataURL引入图片例子如下：

<img src="data:image/gif;base64,R0lGODlhMwAxAIAAAAAAAP///
yH5BAAAAAAALAAAAAAzADEAAAK8jI+pBr0PowytzotTtbm/DTqQ6C3hGX
ElcraA9jIr66ozVpM3nseUvYP1UEHF0FUUHkNJxhLZfEJNvol06tzwrgd
LbXsFZYmSMPnHLB+zNJFbq15+SOf50+6rG7lKOjwV1ibGdhHYRVYVJ9Wn
k2HWtLdIWMSH9lfyODZoZTb4xdnpxQSEF9oyOWIqp6gaI9pI1Qo7BijbF
ZkoaAtEeiiLeKn72xM7vMZofJy8zJys2UxsCT3kO229LH1tXAAAOw==">

DataURL使用于如下的场景

• 访问外部资源受限

• 图片体积小，占用一个HTTP会话资源浪费

二 、 Webpack中的Sourcemap

webpack在打包中同样支持Sourcemap，并且提供了十几种的组合。我们以官网给出的为例：

• eval ： 每一个模块都执行eval()过程，并且会追加//@ sourceURL

• eval-source-map：每一个模块在执行eval()过程之后，并且会为每一个模块生成sourcemap文件，生成的sourcemap文件通过DataURL的方式添加

• cheap-eval-source-map：跟eval-source-map相同，唯一不同的就是增加了"cheap"，"cheap"是指忽略了行信息。这个属性同时也不会生成不同loader模块之间的sourcemap。

• cheap-module-eval-source-map：与cheap-eval-source-map相同，但是包含了不同loader模块之间的sourcemap

官网给出的例子容易让人看懵，因为官网的devtool类型都是以组合形式给出的，实际上webpack中的sourcemap的基本类型包括：eval，cheap,moudule，inline,source-map。其他的类型都是根据这5个基本类型组合而来。我们来具体分析一下这5个基本类型

(1) eval

eval会将每一个module模块，执行eval，执行后不会生成sourcemap文件，仅仅是在每一个模块后，增加sourceURL来关联模块处理前后的对应关系。举例来说：

webpackJsonp([1],[  
function(module,exports,__webpack_require__){    
eval(
      ...      
//# sourceURL=webpack:///./src/js/index.js?'
    )
  },  
function(module,exports,__webpack_require__){    
eval(
      ...      
//# sourceURL=webpack:///./src/static/css/app.less?./~/.npminstall/css-loader/0.23.1/css-loader!./~/.npminstall/postcss-loader/1.1.1/postcss-loader!./~/.npminstall/less-loader/2.2.3/less-loader'
    )
  },  
function(module,exports,__webpack_require__){   
 eval(
      ...      
 //# sourceURL=webpack:///./src/tmpl/appTemplate.tpl?"
    )
  },
...])

上述是一个指定devtool：eval的压缩后的代码，我们发现压缩后的代码的每一个模块后面都增加了一端包含sourceURL的注释，sourceURL的值是压缩前的代码，这样就通过sourceURL关联了压缩前后的代码，并没有为每一个模块生成相应的sourcemap。

因为不需要生成模块的sourcemap，因此打包的速度很快。

(2) soure-map

source-map会为每一个打包后的模块生成独立的soucemap文件，举例来说：

webpackJsonp([1],[  
function(e,t,i){...},  
function(e,t,i){...},  
function(e,t,i){...},  
function(e,t,i){...},
  ...
])//# sourceMappingURL=index.js.map

打包后的模块在模块后面会对应引用一个.map文件，同时在打包好的目录下会针对每一个模块生成相应的.map文件，在上例中会生成一个index.js.map文件，这个文件是一个典型的sourcemap文件，形式如下：

{  
"version":3,  
"sources":[
    "webpack:///js/index.js","webpack:///./src/js/index.js",    
    "webpack:///./~/.npminstall/css-loader/0.23.1/css-loader/lib/css-base.js",
    ...
],  
"names":["webpackJsonp","module","exports"...], 
"mappings":"AAAAA,cAAc,IAER,SAASC...",  
"file":"js/index.js",  
"sourcesContent":[...],  
"sourceRoot":""
}

####( 3) inline

与source-map不同，增加inline属性后，不会生成独立的.map文件，而是将.map文件以dataURL的形式插入。如下所示：

webpackJsonp([1],[  
function(e,t,i){...},  
function(e,t,i){...},  
function(e,t,i){...},  
function(e,t,i){...},
  ...
])
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9...

打包好模块后，在sourceMappingURL中直接将.map文件中的内容以DataURL的方式引入。

(4) cheap

cheap属性在打包后同样会为每一个模块生成.map文件，但是与source-map的区别在于cheap生成的.map文件会忽略原始代码中的列信息。

devtool: 'eval-source-map'

"mappings": "AAAAA,QAAQC,GAAR,CAAY,aAAZ",
devtool: 'cheap-source-map'

"mappings": "AAAA",

对比增加cheap和没有cheap情况下，打包后输出的.map文件，在文件中
使用了VLQ编码，有"逗号"表示包含了列信息，显然增加cheap属性后，.map文件中不包含列信息。

此外增加cheap后也不会有loader模块之间对应的sourcemap，什么是模块之间的sourcemap呢？

因为webpack最终会将所有的非js资源，通过loader的形式转变成js资源。比如jsx语言的操作分为：

jsx——（loader）——js——（压缩等处理）——压缩后的js

如果没有loader之间的sourcemap，那么在debug的时候定义到上图中的压缩前的js处，而不能追踪到jsx中。

(5) module：包含了loader模块之间的sourcemap

这样差不多就理清了webpack中所有的sourcemap类型。

三 、 在不同的环境中如何选择sourcemap的类型

在了解了webpack中所有的sourcemap基本类型后，我们来分析，如何针对开发环境和生产环境，选择合理的sourcemap属性。

(1) 首先在源代码的列信息是没有意义的，只要有行信息就能完整的建立打包前后代码之间的依赖关系。因此不管是开发环境还是生产环境，我们都会选择增加cheap基本类型来忽略模块打包前后的列信息关联。

(2) 其次，不管在生产环境还是开发环境，我们都需要定位debug到最最原始的资源，比如定位错误到jsx，coffeeScript的原始代码处，而不是编译成js的代码处，因此，不能忽略module属性

(3) 再次我们希望通过生成.map文件的形式，因此要增加source-map属性

四、总结：

在开发环境中我们使用：cheap-module-eval-source-map

在生产环境中我们使用：cheap-module-source-map。

这里需要补充说明的是，eval-source-map组合使用是指将.map以DataURL的形式引入到打包好的模块中，类似于inline属性的效果，我们在生产中，使用eval-source-map会使打包后的文件太大，因此在生产环境中不会使用eval-source-map。但是因为eval的rebuild速度快，因此我们可以在本地环境中增加eval属性。

golang学习笔记（一）—— golang基础和相关数据结构

小白前端一枚，最近在研究golang，记录自己学习过程中的一些笔记，以及自己的理解。

• go中包的依赖管理
• go中的切片
• byte 和 string
• go中的Map
• go中的struct结构体
• go中的方法
• go中的interface接口
• interface{}

1、go中包的依赖管理

首先要了解的是GOPATH的含义，GOPATH是go命令依赖的重要变量，可以通过：

go env

来查看相应的开发环境中GOPATH的值,也可以通过export GOPATH指定：

export GOPATH = /usr/local/go

指定GOPATH目录后， GOPATH目录包含了3个子目录：

• src存放源代码(比如.go、.h文件等)
• pkg编译时生成的中间文件
• bin编译后生成的可执行文件

此外，go的依赖管理中提供了3个主要的命令go build、go get和 go install。

• go build: 会编译目录下或者指定的.go文件,得到一个可执行的文件
• go install: 只能在GOPATH目录下使用，与go build大致相同会编译目录下执行的.go文件，此外go install还会将可执行文件或库文件安装到GOPATH目录下。
• go install + 远程地址: 会将相应的代码下载到GOPATH同时会编译该远程包
• go get + 远程地址: 跟go install+远程地址相同，会下载且编译
• go get u + 远程地址: 下载并更新相应的远程地址的包，但不会自动编译

典型的例子，比如下载一个dep包：

go get -u github.com/golang/dep/cmd/dep

上述的go get和go install + 远程包的方式，不能应用于需要版本管理依赖等场景,可以通过安装dep包，来实现依赖管理。dep提供了几个常用的命令，分别用于安装和更新相应的go包。

• dep init 初始化一个项目依赖
• dep ensure 安装项目所依赖的所有包
• dep ensure -update 更新项目中的所有包
• dep ensure -add github.com/pkg/errors 为项目添加单个依赖包

此外通过Gopkg.toml里面可以指定所依赖包的git分支，版本号等等，且在dep ensure -add中也可以指定分支和版本号，比如：

dep ensure -add github.com/pkg/foo@^1.0.1

提到包(package),必须补充一句，在go中如果在其他包中引用变量，是通过：

包名.变量名

的形式，在这里变量名必须是大写的，也就是说在go的包中，变量能否导出是根据变量的大小写来确定的，普遍认为如果变量是大写的就是在包内导出的，如果是变量小写的就是默认是包的私有变量。

2、go中的切片

在go的函数调用中，如果传递的参数是一个较大的数组，显然如果直接将数组作为实参传入，在执行函数的过程中，实际上会拷贝一份该数组，会造成内存的浪费等。标准的做法，是传入数组的指针，或者对于数组的部分引用。

这里关于数组的部分引用，就是slice切片

(1)、go中的切片简介

数组和切片之间存在着紧密的联系，slice提供了访问数组子序列的功能。所谓的切片是对于数组的部分引用，slice由三部分组成指针、长度和容量。

• 指针： 指向第一个slice元素所对应的数组元素的地址
• 长度： slice中元素的数目
• 容量： slice中最多可容纳元素的数目

切片的定义方式：

var slice1 []type = make([]type, len, cap)

分别指定切片的类型，长度以及容量。

切片的初始化：

s := [] int { 1,2,3 }

或者通过已经存在的数组来实现切片的初始化，

arr = [10]int {1,2,3,4,5,6,7,8,9,10}
s:=arr[1:5] // arr[startIndex:endIndex]

(2)、go中的切片注意点

go中的slice切片有一个注意点，就是如何判断切片为空，边界情况大致如下所示：

var s []int   //len(s)==0,s==nil
s = nil       //len(s)==0,s==nil
s = []int(nil)//len(s)==0,s==nil
s = []int{}   //len(s)==0,s!=nil

显然如果通过s==nil来判断，不能区别第四种场景，因此判断切片为空的正确方式是len(s)==0.

3、byte 和 string

下述的方法将返回一个byte的切片:

var test:= []byte("hello")

go遍历slice动态删除 map遍历删除安全.

4、go中的Map

map是一个无序的key/value对的集合，其中在每一个map中key是唯一的。go中的map只要坑在于map是无序的。

(1)、Map简介

声明一个map：

var ages map[string]int  //同样初始的情况下，ages = nil
ages == nil // true

如果声明了但是没有赋值，那么尝试插入一对key／value会报错，比如上述声明但没有初始化的情况下：

age["jony"] = 25 // 会panic

解决方法，就是给age定义后赋值：

ages = make(map[string]int)

或者定义的时候同时赋值：

ages := map[string]int{

}

此后插入不存在的key／value就不会报错。

注意：尝试从map中去一个不存在的key，默认的value值为0

(2)、Map无序性

我们从map的遍历结果，来说明map是无序的。比如我们以这么一个map为例：

var ages = map[string]int{
"a":21,
"b":22,
"c":23,
};
for name,age := range ages {
  fmt.Printf("%s\t%d\n",name,age);
}

通过for range可以遍历map对象，分别执行三次遍历后，来看遍历的结果

• 第一次输出：

  c 23
  a 21
  b 22

• 第二次输出：
  c 23
  b 22
  a 21

• 第三次输出:
  a 21
  b 22
  c 23

从上述的结果我们也可以看出map的每次遍历的结果都是不确定的。

注意：Map的value类型不仅仅可以是基本类型，也可以是聚合类型，比如map或者slice。

5 、go中的struct结构体

跟C++中的结构体类似，go中的结构体是一种聚合数据类型，由0个或者多个任意值聚合成实体。

(1)、结构体简介

声明一个结构体很简单，比如我们声明了一个Person结构体：

type Person struct {
   name string
   age int
   salary int
}

然后可以声明一个Person类型的变量：

var person Person

然后可以通过点操作符访问和赋值。

person.age = 25

此外，可以通过取地址符号加点操作符来访问和赋值，下述取地址的方式效果与上述是相同的。

(&person).age = 25

此外，结构体也支持嵌套。

6、go中的方法

在go中没有明确的定义类，但是可以将结构体struct来类比其他语言中的class。

go中的方法与结构体相关，为了说名go中的方法，我们先从go中的函数讲起。

(1)、go中的函数简介

在go中函数声明包括函数名、形参列表、返回值列表(可省略 表示无返回值)以及函数体。

func name (parameter-list)(result-list){


}

比如我们有一个count函数可以如此简单的定义：

func count(x,y int) int {
   return x + y
}

(2)、go中方法简介

在函数定义的基础上我们来介绍一下，如何定义方法。在函数声明时，在函数名前放上一个变量，这个变量称为方法的接收器，一般是结构体类型的。

当然也不一定是结构体，基本类型数值、字符串、slice和map上面都可以作为接收器来定义方法。

声明方法的方式具体可以如下所示：

func (receive Receive) name(parameter-list)(result-list){


}

从上述的声明中也可以看出来只不过在函数的技术上增加了第一个参数接收器，为相应的接收器增加了该名称的方法。比如我们定一个Person结构体，并为其声明sellHello方法：

type Person struct {
   name string
   age int
   salary int
}

func (person Person) sayHello() string{
  return "Hello "+ person.name
}

p := Person{
   name: "Jony",
   age: 25,
   salary:100
}

fmt.Println(p.sayHello());//输出Hello Jony

上述就是在结构体Person上定义了一个sayHello方法，在结构体被初始化后，可以通过p.sayHello()的方式直接调用。

除此之外，我们前面将到定义方法时的接收器不一定是一个结构体，接收器也可以接受基本类型等，比如：

type Mystring string;

func (mystring Mystring)sayHello() string{
  return "Hello"+ string(mystring);
}

var m Mystring
m = "Jony"
fmt.Println(m.sayHello());

上述的例子同样会输出Hello Jony.

甚至nil也可以作为方法的接收器，这里就不具体举例。

(3)、基于指针对象的方法

在函数调用时，是对实参的一个拷贝，如果函数需要更新一个变量，或者传递的参数过大，默认拷贝太为负责，我们经常会使用指针的形式，对于方法而言也同样如此，也就是说方法的接收器可以是指针类型。

对比于上述非指针类型的方法，声明指针类型的方法具体如下所示：

func (receive *Receive) name(parameter-list)(result-list){


}

指针类型的参数作为接收器，可以修改传入参数的实际变量的值。

type Person struct {
  name string
  age int
  salary int
}
func (person *Person) changeAge(newAge int){
  (*person).age = newAge
}
p.changeAge(30);
fmt.Println(p.age); //输出了30,发现age确实发生了改变。

7、go中的interface接口

我们前面也说过go不是一种传统的面向对象的语言，没有类和继承的概念，go里面通过interface接口可以实现很多面向对象的特性。

接口的通俗定义：

接口提供了一种方式来说明对象的行为，接口定义了一组方法，但是不包含实现。

(1)、interface接口简介

可以通过如下格式来定义接口：

type Namer interface {
   Method1(param_list) return_type
   Method2(param_list) return_type
   ...
}

go中的接口都很简短，一般包含了0-3个方法。

同时我们可以通过：

var ai Namer 

来定义一个接口类型的变量，初始值为nil.接口类型的变量是一个指针，声明而未赋值的情况下就为nil。

go中的接口有以下需要注意的点：

• 一个类型可以实现多个接口
• 接口类型可以包含一个实例的引用，该实例的类型实现了此接口
• 即使接口在类型之后定义，二者存在不同的包中，被单独编译，但是只要类型实现了接口中的方法，它就实现了此接口
• 实现某个接口的类型，除了实现接口方法外，还可以有其他的方法

上述几点都比较好理解，具体第二点，举例来说：

type Person struct {
 name string
 age int
 salary int
}
type Say interface {
  sayHello() string
}
func (person Person) sayHello() string {
  return "Hello "+person.name
}

func main() {
  p := new(Person)
  p.name = "Jony"

  var s Say;
  s = p;
  fmt.Println(s)
}

上述例子中，我们首先new了一个Person结构体类型的变量，并赋值给p，因为Person接口体中实现了Say接口中的所有方法sayHello等。因此我们就说Person实现了Say接口，因此Person的实例p，可以赋值给一个Say接口类型的变量s。

此时的s是个指针，指向Person结构体实例p。

(2)、interface接口类型断言

任何类型只要实现了接口中的所有方法，我们就说该类型实现了该接口。这样一个接口类型的变量varI可以包含任何类型的值，在go中提供了一种安全的方式来检测它的动态类型。

if v,ok := varI.(T);ok {
   Process(v)
   return
}

如果转化合法，那么v是varI转化到类型T的值，ok会是true，否则v是类型T的零值，ok是false。这是一种安全的转化方式不会有错误发生。

我们还是接着上面的代码来讲我们的例子：

type Person struct {
 name string
 age int
 salary int
}

type Say interface {
  sayHello() string
}

func (person Person) sayHello() string {
  return "Hello "+person.name
}

func main() {
  p := new(Person)
  p.name = "Jony"

  var s Say;
  s = p;
  if t,ok := s.(*Person);ok {
    fmt.Printf("The type of s is:%T\n",t);
  }
}

输出的结果为The type of s is:*main.Person。也可以使用特殊的type-switch来判断。

switch t:= s.(*Person){
   case *Person:
      fmt.Printf("The type of s is:%T\n",t);
   case nil:
      ...
   default:
      ...
}

8、interface{}

interface{}是一个空接口,任何类型的值都可以复制给interface{}类型的变量。

比如，我们首先声明一个类型为interface{}的变量：

var test interface{}

任意类型的值都可以复制给test,比如下列基本类型的值复制给test是有效的：

var test interface{}
test = 1
test = true
test ="Hello"

此外，复杂的派生类型也可以赋值给test，我们以指针类型举例：

var test interface{}
var a = 1
test = &a 

interface类型的变量是没有类型的，但是我们可以人为的进行类型转换：

var test interface{}
var a string
test = "hello"
a = test.(string)

上述，可以将test转化成string类型，这样就可以赋值给string类型变量a了。通过.(类型名)的方法可以将interface{}类型的变量转化成任意的类型。

最后举一个简单的例子：

func main() {
   a := make([]interface{},10)
   b :=1
   a[1]=&b
   fmt.Println(*(a[1].(*int)))
}

上述代码发现，将interface{}类型切片中的某一元素的值复制给了int指针类型，然后进行了类型转化，将interface{}类型的变量转换成了int指针类型。

谈谈对react16.7.0-alpha中即将引入的hooks的理解

  为了实现分离业务逻辑代码，实现组件内部相关业务逻辑的复用，在React的迭代中针对类组件中的代码复用依次发布了Mixin、HOC、Render props等几个方案。此外，针对函数组件，在React v16.7.0-alpha 中提出了hooks的概念，在本身无状态的函数组件，引入独立的状态空间，也就是说在函数组件中，也可以引入类组件中的state和组件生命周期，使得函数组件变得丰富多彩起来，此外，hooks也保证了逻辑代码的复用性和独立性。

  本文从针对类组件的复用解决方案开始说起，先后介绍了从Mixin、HOC到Render props的演进，最后介绍了React v16.7.0-alpha 中的 hooks以及自定义一个hooks

• Mixin
• HOC
• Render props
• React hooks的介绍以及如何自定义一个hooks

一、Mixin

Mixin是最早出现的复用类组件中业务逻辑代码的解决方案，首先来介绍以下如何适应Mixin。下面是一个Mixin的例子：

const someMixins={
  printColor(){
    console.log(this.state.color);
  }
  setColor(newColor){
    this.setState({color:newColor})
  }
  componentDidMount(){
    ..
  }
}

下面是一个使用Mixin的组件：

class Apple extends React.Component{
  //仅仅作为演示，mixins一般是通过React.createClass创建，并且ES6中没有这种写法
  mixins:[someMixins]
  constructor(props){
    super(props);
    this.state={
      color:'red'
    }
    this.printColor=this.printColor.bind(this);
  }
  render(){
    return <div className="m-box" onClick={this.printColor}>
                这是一个苹果
           </div>
  }
}

在类中mixin引入公共业务逻辑：

mixins:[someMixins]

从上面的例子，我们来总结以下mixin的缺点：

• Mixin是可以存在多个的，是一个数组的形式，且Mixin中的函数是可以调用setState方法组件中的state的，因此如果有多处Mixin的模块中修改了相同的state，会无法确定state的更新来源

• ES6 classes支持的是继承的模式，而不支持Mixins

• Mixin会存在覆盖，比如说两个Mixin模块，存在相同生命周期函数或者相同函数名的函数，那么会存在相同函数的覆盖问题。

Mixin已经被废除，具体缺陷可以参考Mixins Considered Harmful

二、HOC

  为了解决Mixin的缺陷，第二种解决方案是高阶组件（high order component,简称HOC）。

1、举例几种HOC的形式

  HOC简单理解就是组件工厂，接受原始组件作为参数，添加完功能与业务后，返回新的组件。下面来介绍HOC参数的几个例子。

(1)参数仅为原始组件

const redApple = withFruit(Apple);

(2)参数为原始组件和一个对象

const redApple = withFruit(Apple，{color:'red',weight:'200g'});

但是这种情况比较少用，如果对象中仅仅传递的是属性，其实完全可以通过组件的props实现值的传递，我们用HOC的主要目的是分离业务，关于UI的展示，以及一些组件中的属性和状态，我们一般通过props来指定比较方便

(3)参数为原始组件和一个函数

const redApp=withFruit(App,()=>{console.log('I am a fruit')})

(4)柯里化

最常见的是仅以一个原始组件作为参数，但是在外层包裹了业务逻辑，比如react-redux的conect函数中：

class Admin extends React.Component{

}
const mapStateToProps=(state)=>{
  return {
  };
}
const mapDispatchToProps=(dispatch)=>{
  return {

  }
}

const connect(mapStateToProps,mapDispatchToProps)(Admin)

2、HOC的缺点

HOC解决了Mixin的一些缺陷，但是HOC本身也有一些缺点：

(1)难以溯源，且存在属性覆盖问题

  如果原始组件A，先后通过工厂函数1，工厂函数2，工厂函数3….构造，最后生成了组件B，我们知道组件B中有很多与A组件不同的props，但是我们仅仅通过组件B，并不能知道哪个组件来自于哪个工厂函数。同时，如果有2个工厂函数同时修改了组件A的某个同名属性，那么会有属性覆盖的问题，会使得前一个工厂函数的修改结果失效。

(2)HOC是静态构建的

  所谓静态构建，也就是说生成的是一个新的组件，并不会马上render，HOC组件工厂是静态构建一个组件，这类似于重新声明一个组件的部分。也就是说，HOC工厂函数里面的声明周期函数，也只有在新组件被渲染的时候才会执行。

(3)会产生无用的空组件

三、Render Prop

  Render Props从名知义，也是一种剥离重复使用的逻辑代码，提升组件复用性的解决方案。在被复用的组件中，通过一个名为“render”(属性名也可以不是render，只要值是一个函数即可)的属性，该属性是一个函数，这个函数接受一个对象并返回一个子组件，会将这个函数参数中的对象作为props传入给新生成的组件。

  这种方法跟直接的在父组件中，将父组件中的state直接传给子组件的区别是，通过Render Props不用写死子组件，可以动态的决定父组件需要渲染哪一个子组件。

或者再概括一点：

Render Props就是一个函数，做为一个属性被赋值给父组件，使得父组件可以根据该属性去渲染子组件。

(1)标准父子组件通信方法

  首先来看常用的在类组件中常用的父子组件，父组件将自己的状态state，通过props传递给子组件。

class Son extends React.Component{
  render(){
  const {feature} = this.props;
   return <div>
             <span>My hair is {feature.hair}</span>
             <span>My nose is {feature.nose}</span>
          </div>
  }
}

class FatherToSon extends React.Component{
   constructor(){
      this.state = {
        hair:'black',
        nose:'high'
      }
   }
  render(){
    return <Son feature = {this.state}>
  }
}

  我们定义了父组件FatherToSon，存在自身的state，并且将自身的state通过props的方式传递给了子组件。

  这种就是常见的利用组件的props父子间传值的方式，这个值可以是变量，对象，也可以是方法，但是仅仅使用只能一次性的给特定的子组件使用。如果现在有个Daughter组件也想复用父组件中的方法或者状态，那么必须新构建一个新组件：

class FatherToDaughter extends React.Component{
   constructor(){
      this.state = {
        hair:'black',
        nose:'high'
      }
   }
  render(){
    return <Daughter feature = {this.state}>
  }
}

从上面的例子可以看出通过标准模式的父子组件的通信方法，虽然能够传递父组件的状态和函数，但是无法实现复用。

(2)Render Props的引出

我们根据Render Props的特点：

Render Props就是一个函数，做为一个属性被赋值给父组件，使得父组件可以根据该属性去渲染子组件。

重新去实现上述的(1)中的例子。

class FatherChild extends React.Component{
   constructor(){
      this.state = {
        hair:'black',
        nose:'high'
      }
   }
  render(){
    <React.Fragment>
      {this.props.render}
    </React.Fragment>
  }
}

此时如果子组件要复用父组件中的属性或者函数，则可以直接使用，比如子组件Son现在可以直接调用：

<FatherChild render={(obj)=>(<Son feature={obj}>)} />

如果子组件Daughter要复用父组件的方法，可以直接调用：

<FatherChild render={(obj)=>(<Daughter feature={obj}>)} />

  从这个例子中可以看出，通过Render Props我们实现同样实现了一个组件工厂，可以实现业务逻辑代码的复用，相比与HOC，Render Props有以下几个优点。

• 不用担心props的命名问题
• 可以溯源，子组件的props一定是来自于直接父组件
• 是动态构建的

Render Props也有一个缺点：

就是无法利用SCU这个生命周期，来实现渲染性能的优化。

四、React hooks的介绍以及如何自定义一个hooks

  hooks概念在React Conf 2018被提出来，并将在未来的版本中被引入，hooks遵循函数式编程的理念，主旨是在函数组件中引入类组件中的状态和生命周期，并且这些状态和生命周期函数也可以被抽离，实现复用的同时，减少函数组件的复杂性和易用性。

  hooks相关的定义还在beta中，可以在React v16.7.0-alpha中体验，为了渲染hooks定义的函数组件，必须执行React-dom的版本也为v16.7.0-alpha，引入hooks必须先安装：

npm i -s React@16.7.0-alpha

npm i -s React-dom@16.7.0-alpha

  hooks主要有三部分组成，State Hooks、Effect Hooks和Custom Hooks，下面分别来一一介绍。

(1)State Hooks

  跟类组件一样，这里的state就是状态的含义，将state引入到函数组件中，同时类组件中更新state的方法为setState，在State Hooks中也有相应的更新状态的方法。

function ExampleWithManyStates() {
  // 声明各种state以及更新相应的state的方法
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
  // ...
}

  上述就声明了3个State hooks，相应的方法为useState，该方法创建一个传入初始值，创建一个state。返回一个标识该state的变量，以及更新该state的方法。

  从上述例子我们来看，一个函数组件是可以通过useState创建多个state的。此外State Hooks的定义必须在函数组件的最高一级，不能在嵌套，循环等语句中使用。

function ExampleWithManyStates() {
  // 声明各种state以及更新相应的state的方法
  if(Math.random()>1){
    const [age, setAge] = useState(42);
    const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
  }else{
    const [fruit, setFruit] = useState('banana');
    const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
  }
  
  // ...
}

  上述的方式是不被允许的，因为一个函数组件可以存在多个State Hooks，并且useState返回的是一个数组，数组的每一个元素是没有标识信息的，完全依靠调用useState的顺序来确定哪个状态对应于哪个变量，所以必须保证使用useState在函数组件的最外层，此外后面要介绍的Effect Hooks的函数useEffect也必须在函数组件的最外层，之后会详细解释。

(2)Effect Hooks

  通过State Hooks来定义组件的状态，同样通过Effect Hooks来引入生命周期，Effect hooks通过一个useEffect的方法，以一种极为简化的方式来引入生命周期。
来看一个更新的例子：

import { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

上述就是一个通过useEffect来实现组件中生命周期的例子，useEffect整合了componentDidMount和componentDidUpdate，也就是说在componentDidMount和componentDidUpdate的时候都会执行一遍useEffect的函数，此外为了实现componentWillUnmount这个生命周期函数，useEffect函数如果返回值是一个函数，这个函数就被定义成在componentWillUnmount这个周期内执行的函数。

useEffect(() => {
    //componentDidMount和componentDidUpdate周期的函数体
    return ()=>{ 
       //componentWillUnmount周期的函数体
    }
});

如果存在多个useState和useEffect时，必须按顺序书写，定义一个useState后，紧接着就使用一个useEffect函数。

useState('Mary')           
useEffect(persistForm)    
useState('Poppins')       
useEffect(updateTitle)

因此通useState一样，useEffect函数也必须位于函数组件的最高一级。

(3)Effect Hooks的补充

上述我们知道useEffect其实包含了componentDidMount和componentDidUpdate，如果我们的方法仅仅是想在componentDidMount的时候被执行，那么必须传递一个空数组作为第二个参数。

useEffect(() => {
  //仅在componentDidMount的时候执行
},[]);

上述的方法会仅仅在componentDidMount，也就是函数组件第一次被渲染的时候执行，此后及时状态更新，也不会执行。

此外，为了减少不必要的状态更新和渲染，可以如下操作：

useEffect(() => {
  //仅在componentDidMount的时候执行
},[stateName]);

在上述的这个例子中，只有stateName的值发生改变，才会去执行useEffect函数。

(4)Custom Hooks自定义hooks

可以将useState和useEffect的状态和生命周期函数抽离，组成一个新的函数，该函数就是一个自定义的封装完毕的hooks。

这是我写的一个hooks ---> dom-location,

可以这样引入：

npm i -s dom-location 

并且可以在函数组件中使用。这个自定义的hooks也很简单，就是封装了状态和生命周期函数。

import { useState, useEffect } from 'react'

const useDomLocation = (element) =>  {
  let [elementlocation,setElementlocation] = useState(getlocation(element));
  useEffect(()=>{
    element.addEventListener('resize',handleResize);
    return ()=>{
      element.removeEventListener('resize', handleResize);
    }
  },[]);
  function handleResize(){
    setElementlocation(getlocation(element));
  }
  function getlocation(E){
    let rect = E.getBoundingClientRect()
    let top = document.documentElement.clientTop
    let left= document.documentElement.clientLeft
    return{
        top    :   rect.top - top,
        bottom :   rect.bottom - top,
        left   :   rect.left - left,
        right  :   rect.right - left
    };
  }
  return elementlocation

}

然后直接在函数中使用：

import useDomLocation from 'dom-location';
function App() {
  ....
  let obj = useDomLocation(element);
  
}

简要介绍：Promise允许我们通过链式调用的方式来解决“回调地狱”的问题，特别是在异步过程中，通过Promise可以保证代码的整洁性和可读性。本文主要解读Promise/A+规范，并在此规范的基础上，自己实现一个Promise.

一、Promise的使用

在了解Promise规范之前，我们知道主流的高版本浏览器已经支持ECMA中的Promise.

创建一个promise实例：

var p=new Promise(function(resolve,reject){
    setTimeout(function(){
       resolve("success")
    },1000);
    console.log("创建一个新的promise");
})
p.then(function(x){
  console.log(x)
})

//输出：
创建一个新的promise
success

上述是一个promise的实例，输出内容为，“创建一个promise”，延迟1000ms后，输出"success"。

从上述的例子可以看出，promise方便处理异步操作。此外promise还可以链式的调用：

var p=new Promise(function(resolve,reject){resolve()});
p.then(...).then(...).then(...)

此外Promise除了then方法外，还提供了Promise.resolve、Promise.all、Promise.race等等方法。

二、Promise/A+规范

Promise/A+规范扩展了早期的Promise/A proposal提案，我们来解读一下Promise/A+规范。

1.术语

（1）"promise"是一个对象或者函数，该对象或者函数有一个then方法

（2）"thenable"是一个对象或者函数，用来定义then方法

（3）"value"是promise状态成功时的值

（4）"reason"是promise状态失败时的值

我们明确术语的目的，是为了在自己实现promise时，保持代码的规范性（也可以跳过此小节）

2.要求

（1）一个promise必须有3个状态，pending，fulfilled(resolved)，rejected当处于pending状态的时候，可以转移到fulfilled(resolved)或者rejected状态。当处于fulfilled(resolved)状态或者rejected状态的时候，就不可变。

promise英文译为承诺，也就是说promise的状态一旦发生改变，就永远是不可逆的。

（2）一个promise必须有一个then方法，then方法接受两个参数：

promise.then(onFulfilled,onRejected)

其中onFulfilled方法表示状态从pending——>fulfilled(resolved)时所执行的方法，而onRejected表示状态从pending——>rejected所执行的方法。

（3）为了实现链式调用，then方法必须返回一个promise

promise2=promise1.then(onFulfilled,onRejected)

三、实现一个符合Promise/A+规范的Promise

解读了Promise/A+规范之后，下面我们来看如何实现一个Promise,
首先构造一个myPromise函数，关于所有变量和函数名，应该与规范中保持相同。

1.v1.0 初始版本myPromise

function myPromise(constructor){
    let self=this;
    self.status="pending" //定义状态改变前的初始状态
    self.value=undefined;//定义状态为resolved的时候的状态
    self.reason=undefined;//定义状态为rejected的时候的状态
    function resolve(value){
        //两个==="pending"，保证了状态的改变是不可逆的
       if(self.status==="pending"){
          self.value=value;
          self.status="resolved";
       }
    }
    function reject(reason){
        //两个==="pending"，保证了状态的改变是不可逆的
       if(self.status==="pending"){
          self.reason=reason;
          self.status="rejected";
       }
    }
    //捕获构造异常
    try{
       constructor(resolve,reject);
    }catch(e){
       reject(e);
    }
}

同时，需要在myPromise的原型上定义链式调用的then方法：

myPromise.prototype.then=function(onFullfilled,onRejected){
   let self=this;
   switch(self.status){
      case "resolved":
        onFullfilled(self.value);
        break;
      case "rejected":
        onRejected(self.reason);
        break;
      default:       
   }
}

上述就是一个初始版本的myPromise，在myPromise里发生状态改变，然后在相应的then方法里面根据不同的状态可以执行不同的操作。

var p=new myPromise(function(resolve,reject){resolve(1)});
p.then(function(x){console.log(x)})
//输出1

但是这里myPromise无法处理异步的resolve.比如：

var p=new myPromise(function(resolve,reject){setTimeout(function(){resolve(1)},1000)});

p.then(function(x){console.log(x)})
//无输出

2.v2.0基于观察模式实现

为了处理异步resolve，我们修改myPromise的定义，用2个数组onFullfilledArray和onRejectedArray来保存异步的方法。在状态发生改变时，一次遍历执行数组中的方法。

function myPromise(constructor){
    let self=this;
    self.status="pending" //定义状态改变前的初始状态
    self.value=undefined;//定义状态为resolved的时候的状态
    self.reason=undefined;//定义状态为rejected的时候的状态
    self.onFullfilledArray=[];
    self.onRejectedArray=[];
    function resolve(value){
       if(self.status==="pending"){
          self.value=value;
          self.status="resolved";
          self.onFullfilledArray.forEach(function(f){
                f(self.value);
                //如果状态从pending变为resolved，
                //那么就遍历执行里面的异步方法
          });
        
       }
    }
    function reject(reason){
       if(self.status==="pending"){
          self.reason=reason;
          self.status="rejected";
          self.onRejectedArray.forEach(function(f){
              f(self.reason);
             //如果状态从pending变为rejected， 
             //那么就遍历执行里面的异步方法
          })
       }
    }
    //捕获构造异常
    try{
       constructor(resolve,reject);
    }catch(e){
       reject(e);
    }
}

对于then方法，状态为pending时，往数组里面添加方法：

myPromise.prototype.then=function(onFullfilled,onRejected){
   let self=this;
   switch(self.status){
      case "pending":
        self.onFullfilledArray.push(function(){
             onFullfilled(self.value)
        });
        self.onRejectedArray.push(function(){
             onRejected(self.reason)
        });
      case "resolved":
        onFullfilled(self.value);
        break;
      case "rejected":
        onRejected(self.reason);
        break;
      default:       
   }
}

这样，通过两个数组，在状态发生改变之后再开始执行，这样可以处理异步resolve无法调用的问题。这个版本的myPromise就能处理所有的异步，那么这样做就完整了吗？

没有，我们做Promise/A+规范的最大的特点就是链式调用，也就是说then方法返回的应该是一个promise。

3.v3.0then方法实现链式调用

要通过then方法实现链式调用，那么也就是说then方法每次调用需要返回一个primise,同时在返回promise的构造体里面，增加错误处理部分，我们来改造then方法

myPromise.prototype.then=function(onFullfilled,onRejected){
    let self=this;
    let promise2;
    switch(self.status){
      case "pending":
        promise2=new myPromise(function(resolve,reject){
             self.onFullfilledArray.push(function(){
                try{
                   let temple=onFullfilled(self.value);
                   resolve(temple)
                }catch(e){
                   reject(e) //error catch
                }
             });
             self.onRejectedArray.push(function(){
                 try{
                   let temple=onRejected(self.reason);
                   reject(temple)
                 }catch(e){
                   reject(e)// error catch
                 }
             });
        })
      case "resolved":
        promise2=new myPromise(function(resolve,reject){
            try{
              let temple=onFullfilled(self.value);
              //将上次一then里面的方法传递进下一个Promise的状态
              resolve(temple);
            }catch(e){
              reject(e);//error catch
            }
        })
        break;
      case "rejected":
        promise2=new myPromise(function(resolve,reject){
            try{
               let temple=onRejected(self.reason);
               //将then里面的方法传递到下一个Promise的状态里
               resolve(temple);   
            }catch(e){
               reject(e);
            }
        })
        break;
      default:       
   }
   return promise2;
}

这样通过then方法返回一个promise就可以实现链式的调用：

p.then(function(x){console.log(x)}).then(function(){console.log("链式调用1")}).then(function(){console.log("链式调用2")})
//输出
1
链式调用1
链式调用2

这样我们虽然实现了then函数的链式调用，但是还有一个问题，就是在Promise/A+规范中then函数里面的onFullfilled方法和onRejected方法的返回值可以是对象，函数，甚至是另一个promise。

4.v4.0 then函数中的onFullfilled和onRejected方法的返回值问题

特别的为了解决onFullfilled和onRejected方法的返回值可能是一个promise的问题。

（1）首先来看promise中对于onFullfilled函数的返回值的要求

I）如果onFullfilled函数返回的是该promise本身，那么会抛出类型错误

II）如果onFullfilled函数返回的是一个不同的promise，那么执行该promise的then函数，在then函数里将这个promise的状态转移给新的promise
III）如果返回的是一个嵌套类型的promsie，那么需要递归。

IV)如果返回的是非promsie的对象或者函数，那么会选择直接将该对象或者函数，给新的promise。

根据上述返回值的要求，我们要重新的定义resolve函数，这里Promise/A+规范里面称为：resolvePromise函数，该函数接受当前的promise、onFullfilled函数或者onRejected函数的返回值、resolve和reject作为参数。

下面我们来看resolvePromise函数的定义：

function resolvePromise(promise,x,resolve,reject){
  if(promise===x){
     throw new TypeError("type error")
  }
  let isUsed;
  if(x!==null&&(typeof x==="object"||typeof x==="function")){
      try{
        let then=x.then;
        if(typeof then==="function"){
           //是一个promise的情况
           then.call(x,function(y){
              if(isUsed)return;
              isUsed=true;
              resolvePromise(promise,y,resolve,reject);
           },function(e){
              if(isUsed)return;
              isUsed=true;
              reject(e);
           })
        }else{
           //仅仅是一个函数或者是对象
           resolve(x)
        }
      }catch(e){
         if(isUsed)return;
         isUsed=true;
         reject(e);
      }
  }else{
    //返回的基本类型，直接resolve
    resolve(x)
  }
}

改变了resolvePromise函数之后，我们在then方法里面的调用也变成了resolvePromise而不是promise。

myPromise.prototype.then=function(onFullfilled,onRejected){
    let self=this;
    let promise2;
    switch(self.status){
      case "pending":
        promise2=new myPromise(function(resolve,reject){
             self.onFullfilledArray.push(function(){
                setTimeout(function(){
                  try{
	                   let temple=onFullfilled(self.value);
	                   resolvePromise(temple)
	                }catch(e){
	                   reject(e) //error catch
	                }
                })
             });
             self.onRejectedArray.push(function(){
                setTimeout(function(){
                   try{
	                   let temple=onRejected(self.reason);
	                   resolvePromise(temple)
	                 }catch(e){
	                   reject(e)// error catch
	               }
                })
             });
        })
      case "resolved":
        promise2=new myPromise(function(resolve,reject){
           setTimeout(function(){
               try{
	              let temple=onFullfilled(self.value);
	              //将上次一then里面的方法传递进下一个Promise状态
	              resolvePromise(temple);
	            }catch(e){
                  reject(e);//error catch
               }
           })
        })
        break;
      case "rejected":
        promise2=new myPromise(function(resolve,reject){
           setTimeout(function(){
             try{
               let temple=onRejected(self.reason);
               //将then里面的方法传递到下一个Promise的状态里
               resolvePromise(temple);   
             }catch(e){
               reject(e);
             }
           })
        })
        break;
      default:       
   }
   return promise2;
}

这样就能处理onFullfilled各种返回值的情况。

var p=new Promise(function(resolve,reject){resolve("初始化promise")})
p.then(function(){return new Promise(function(resolve,reject){resolve("then里面的promise返回值")})}).then(function(x){console.log(x)})

//输出
then里面promise的返回值

到这里可能有点乱，我们再理一理，首先返回值有两个：

• then函数的返回值——>返回一个新promise，从而实现链式调用

• then函数中的onFullfilled和onRejected方法——>返回基本值或者新的promise

这两者其实是有关联的，onFullfilled方法的返回值可以决定then函数的返回值。

四、检测是否完全符合Promise/A+规范

npm install -g promises-aplus-tests 

具体用法请看promise test然后

promises-aplus-tests  myPromise.js

结果为：

说明我们的实现完全符合Promise/A+规范。

完整代码的地址

https://github.com/forthealllight/promise-achieve

五、最后补充Typescript实现的Promise/A+规范（可以忽略此节）

interface IConstructor{
  (resolve:IResolve,reject:IReject):void
}
interface IResolve {
    (x:any):void
}
interface IReject {
    (x:any):void
}
function myPromise(constructor:IConstructor):void{
  let self:object=this;
  self.status="pending";
  self.value=undefined;//if pending->resolved
  self.reason=undefined;//if pending->rejected
  self.onFullfilledArray=[];//to deal with async(resolved)
  self.onRejectedArray=[];//to deal with async(rejeced)
  let resolve:IResolve;
  resolve=function(value:any):void{
    //pending->resolved
    if(self.status==="pending"){
      self.status="resolved";
      self.value=value;
      self.onFullfilledArray.forEach(function(f){
        f(self.value);
      })
    }
  }
  let reject:IReject;
  reject=function(reason:any):void{
    if(self.status==="pending"){
      self.status="rejected";
      self.reason=reason;
      self.onRejectedArray.forEach(function(f){
        f(self.reason);
      })
    }
  }
  //According to the definition that the function "constructor" accept two parameters
  //error catch
  try {
    constructor(resolve,reject);
  } catch (e) {
    reject(e);
  }
}

单纯的写个工具函数，用ts还是有点影响可读性。

在单页应用中，如何优雅的上报前端性能数据

  最近在做一个较为通用的前端性能监控平台，区别于前端异常监控，前端的性能监控主要需要上报和展示的是前端的性能数据，包括首页渲染时间、每个页面的白屏时间、每个页面所有资源的加载时间以及每一个页面中所以请求的响应时间等等。

  本文的介绍的是如何设计一个通用的jssdk,可以以较小的侵入性，自动上报前端的性能数据。主要采用的是Performance API以及sendBeacon方法等等。主要参考的是google analytics以及阿里云前端性能监控平台的实践。

  在我的项目中使用nestjs作为后端框架，nestjs是基于express的一款完美支持typescript，类java spring的node后端框架。本文主要侧重与如何上报性能数据，后端处理逻辑比较简单，不会具体介绍，因此不需要了解如何使用nestjs。本文的主要内容包含了：

• 根据Performance API获取前端性能数据
• 何时应该上报性能数据
• 如何上报性能数据

一、根据Performance API 获取前端性能数据

本文上报的前端性能数据包含两部分，一是通过Performance API获得的性能数据，二是自定义的在每个页面应该上报的数据。

首先来看通过Performance API所获取的数据,该数据也包含了两个部分，当前页面的性能相关数据以及当前页面资源加载和异步请求的相关数据。

(1)、Performance API 所提供的性能数据

window.performance.timing会返回一个对象，该对象包含了各种与页面渲染所相关的数据。本文不会具体去介绍该对象，只给出根据该对象计算相关性能数据的方法：

  let times = {};
  let t = window.performance.timing;
  
  //重定向时间
  times.redirectTime = t.redirectEnd - t.redirectStart;
  
  //dns查询耗时
  times.dnsTime = t.domainLookupEnd - t.domainLookupStart;
  
  //TTFB 读取页面第一个字节的时间
  times.ttfbTime = t.responseStart - t.navigationStart;
  
  //DNS 缓存时间
  times.appcacheTime = t.domainLookupStart - t.fetchStart;
  
  //卸载页面的时间
  times.unloadTime = t.unloadEventEnd - t.unloadEventStart;
  
  //tcp连接耗时
  times.tcpTime = t.connectEnd - t.connectStart;
  
  //request请求耗时
  times.reqTime = t.responseEnd - t.responseStart;
  
  //解析dom树耗时
  times.analysisTime = t.domComplete - t.domInteractive;
  
  //白屏时间
  times.blankTime = t.domLoading - t.fetchStart;
  
  //domReadyTime
  times.domReadyTime = t.domContentLoadedEventEnd - t.fetchStart;

在上面的times对象中就包含了性能相关的属性，根据performance.timing中的相关属性计算就可以得到结果。在这里我们认为domReadyTime就是首屏加载的时间，此外也可以自定义的方法上报首屏的时间：

比如有些场景可以认为是dom增量最大的点为首屏渲染完成的时间，也有一些场景可以定义可见的dom在增量最大处为首屏渲染完成的时间。

(2)、Performance API 所提供的资源加载和请求数据

  可以通过window.performance.getEntries()来获取资源的加载和请求相关的数据。每一个页面中，需要去加载很多资源比如js、css等等，同时在页面中还会存在一些异步请求。通过window.performance.getEntries()可以获得这些资源加载和异步请求所相关的数据。我们可以通过如下的方式来获取加载和异步请求的数据：

  let  entryTimesList = [];
  let entryList = window.performance.getEntries();
  entryList.forEach((item,index)=>{
  
     let templeObj = {};
     
     let usefulType = ['navigation','script','css','fetch','xmlhttprequest','link','img'];
     if(usefulType.indexOf(item.initiatorType)>-1){
       templeObj.name = item.name;
       
       templeObj.nextHopProtocol = item.nextHopProtocol;
      
       //dns查询耗时
       templeObj.dnsTime = item.domainLookupEnd - item.domainLookupStart;

       //tcp链接耗时
       templeObj.tcpTime = item.connectEnd - item.connectStart;
       
       //请求时间
       templeObj.reqTime = item.responseEnd - item.responseStart;

       //重定向时间
       templeObj.redirectTime = item.redirectEnd - item.redirectStart;

       entryTimesList.push(templeObj);
     }
  });

我们通过window.performance.getEntries()获得一个带有资源加载和异步请求相关数据的数组，然后根据数组中每一个元素的initiatorType属性来过滤出属性为['navigation','script','css','fetch','xmlhttprequest','link','img']之一的元素数据。

(3)、注意点

• 通过window.performance.timing所获的的页面渲染所相关的数据，在单页应用中改变了url但不刷新页面的情况下是不会更新的。因此如果仅仅通过该api是无法获得每一个子路由所对应的页面渲染的时间。如果需要上报切换路由情况下每一个子页面重新render的时间，需要自定义上报。

• 通过window.performance.getEntries()所获取的资源加载和异步请求所相关的数据，在页面切换路由的时候会重新的计算，可以实现自动的上报。

二、何时上报性能数据

  接着来确定应该何时上报性能数据，因为要处理pv(访问量)和uv(独立用户访问量)，一般认为一次上报就是一次访问，那么何时上报性能数据呢。在我的系统中选择在一下场景下进行一次前端性能数据的上报：

• 页面加载和重新刷新
• 页面切换路由
• 页面所在的tab标签重新变得可见

针对上述的3种场景，特别是切换路由的情况，如果切换路由是通过改变hash值来实现的，那么只需要监听hashchange事件，如果是通过html5的history api来改变url的，那么需要重新定义pushstate和replacestate事件。具体的做法可以看我的上一篇文章：在单页应用中，如何优雅的监听url的变化。

直接给出history实现路由场景下监听url改变的方案：

var _wr = function(type) {
   var orig = history[type];
   return function() {
       var rv = orig.apply(this, arguments);
      var e = new Event(type);
       e.arguments = arguments;
       window.dispatchEvent(e);
       return rv;
   };
};
 history.pushState = _wr('pushState');
 history.replaceState = _wr('replaceState');

然后我们就可以根据上述场景，分别监听相应的事件，从而实现前端性能数据的上报：

addEvent(window,'load',function(e){
    ...deal with something
});
//监控history基础上实现的单页路由中url的变化
addEvent(window,'replaceState', function(e) {
    ...deal with something
});
addEvent(window,'pushState', function(e) {
    ...deal with something
});
//通过hash切换来实现路由的场景
addEvent(window,'hashchange',function(e){
   ...deal with something
});
addEvent('document','visibilitychang'，function(e){
   ...deal with something
})

addEvent是一个兼容IE和标准DOM事件流模型的事件。

三、如何上报性能数据

  那么如何上报性能数据呢，我们第一反应就是通过ajax请求的形式来上报前端性能数据。这种方法有一些缺陷，比如必须对跨域做特殊处理以及如果页面销毁后，相应的ajax方法并不一定发送成功等问题。

其中跨域的问题比较好处理，最难解决的问题是第二点：

就是如果页面销毁，那么对应的ajax方法并不一定能成功发送。

  我们可以根据google analytics(GA)中的方法，根据浏览器的兼容性以及url的长度，来采用不同的方法上报性能数据，主要原理是：

通过动态创建img标签的方式，在img.src中拼接url的方式发送请求，不存在跨域限制。如果url太长，则才用sendBeacon的方式发送请求，如果sendBeacon方法不兼容，则发送ajax post同步请求

(1)、sendBeacon方法

  解决在文档卸载或者页面关闭后无法完成异步ajax请求的问题，很多情况下我们会把异步变成同步。在页面卸载的unload或者beforeunload事件中执行同步方法调用。

但是同步方法调用存在一个问题，就是会推迟A页面切换进入B页面的时间。而sendBeacon方法解决了该问题，简单来说：

sendBeacon方法在页面销毁期，可以异步的发送数据，因此不会造成类似同步ajax请求那样的阻塞问题,也不会影响下一个页面的渲染

sendBeacon的调用方式为：

navigator.sendBeacon(url [, data]);

data可以为： ArrayBufferView, Blob, DOMString, 或者 FormData

为了发送参数，我们一般data制定为Blob的形式。此外还要注意的是，在sendBeacon的请求头header中，不支持Content-Type为“application/json; charset=utf-8”。

在sendBeacon的header中，只支持一下3种形式的Content—Type：

• application/x-www-form-urlencoded
• multipart/form-data
• text/plain

一般制定为application/x-www-form-urlencoded，完整的通过sendBeacon来发送请求的例子如下：

function sendBeacon(url,data){
  //判断支不支持navigator.sendBeacon
  let headers = {
    type: 'application/x-www-form-urlencoded'
  };
  let blob = new Blob([JSON.stringify(data)], headers);
  navigator.sendBeacon(url,blob);
}

后端如何处理sendBeacon请求呢，sendBeacon在的请求头中发送的是一个类似与POST的请求，因此可以类似于处理post一样来处理sendBeacon请求。

一般我们约定ajax请求的content—type为：“application/json; charset=utf-8”，而sendBeacon请求的content-type为：“application/x-www-form-urlencoded”，这样在后端处理中，就可以区别是正常的ajax post请求还是sendBeacon请求。

此外，在处理请求的时候如果存在跨域问题，通过cors跨域的方式来处理，后端需要配置：allow-control-allow-origin等，可以通过express的cors包，来简化配置：

async function bootstrap() {
  const app = await NestFactory.create(ApplicationModule,instance);
  app.use(cors());

  await app.listen(3000)
}
bootstrap();

(2)动态创建img标签的形式

  通过动态创建img标签的形式，指定src属性所指定的url来发送请求，首先不受跨域的限制，其次img标签动态插入，会延迟页面的卸载保证图片的插入，因此可以保证在页面的销毁期，请求可以发生。

下面是一个动态创建img标签的例子：

function imgReport(url, data) {
   if (!url || !data) {
       return;
   }
   let image = document.createElement('img');
   let items = [];
   items = JSON.Parse(data);
   let name = 'img_' + (+new Date());
   image.onload = image.onerror = function () {
      
   };
   let newUrl = url + (url.indexOf('?') < 0 ? '?' : '&') + items.join('&');

   image.src = newUrl;
}

此外，我们在动态创建img标签发送请求的时候，请求的是一张图片，在后端处理的时候，要在末尾将这个图片返回，这样前端的image.onload方法才会被触发。我们以请求的地址为：localhost:8080/1.jpg为例，后端的处理逻辑为：

@Controller('1.jpg')
export class AppUploadController {
  constructor(private readonly appService: AppService) {}
  @Get()
  getUpload(@Req() req,@Res() res): void {
  
    ...deal with some thing
    res.sendFile(join(__dirname, '..', 'public/1.jpg'))
  }
}

在get请求的处理中，我们通过res.sendFile(join(__dirname, '..', 'public/1.jpg'))将图片返回后，这样前端的image的onload方法才会被调用。

(3)同步ajax post请求

  动态创建img标签的方法，拼接url的时候存在一定的问题，因为浏览器对url的长度是有限制的。而sendBeacon方法兼容性不是很好，最后兜底的处理方式就是发送同步的ajax请求，同步的ajax请求前面说过，会在页面销毁期之前执行，虽然会有一定程度的阻塞下一个页面的渲染。

function xmlLoadData(url,data) {
  var client = new XMLHttpRequest();
  client.open("POST", url,false);
  client.setRequestHeader("Content-Type", "application/json; charset=utf-8");
  client.send(JSON.stringify(data));
}

(4)综合解决方案

  一般首先拼接携带参数的完整的url，判断url的长度，如果url的长度小于浏览器允许的最大长度内，那么通过动态创建img标签的形式来发送前端性能数据，如果url太长，则判断浏览器是否支持sendBeacon方法，如果支持，则通过sendBeacon方法来发送请求，否则发送同步的ajax请求。

function dealWithUrl(url,appId){
      let times = performanceInfo(appId);
      let items = decoupling(times);
      let urlLength = (url + (url.indexOf('?') < 0 ? '?' : '&') + items.join('&')).length;
      if(urlLength<2083){
        imgReport(url,times);
      }else if(navigator.sendBeacon){
        sendBeacon(url,times);
      }else{
        xmlLoadData(url,times);
      }
    }

前端开发必备的Atom插件指北

Atom开源且免费，一直用着也蛮舒服的，针对前端开发者介绍一下常用的atom插件。

• atom通用插件
• 前端开发常用的atom插件
• 其他有趣的atom插件
• 常见问题总结

一、atom通用插件

1.file-icons

 美化文件的图标

2.atom-beautify

 代码格式一键美化

3.minimap

 代码略缩小地图（没啥卵用，看着比较舒服）

4.sync-settings

 插件备份

5.atom-terminal-panel

 内置命令行

6.vim-mode

 支持vim模式

7.platformio-ide-terminal

  命令行

8.platformio-ide-terminal

 填写路径时自动补全

二、前端开发常用的atom插件

1.emmet

快速书写html标签

2.color-picker

在编辑器里面选取颜色

3.language-JavaScript-jsx

支持jsx语法

4.react

react语法支持

5.atom-ternjs

 nodejs、js、es6代码补全

6.jshint

 校验js和jsx语法

7.csslint

 验证css语法是否正确

8.autoprefixer

 为css自动增加前缀（也没有特别有用，用postcss来代替）

9.autoclose-html

 闭合html标签（不是特别好用）

三、其他有趣的atom插件

1.activate-power-mode

 代码输入时有震撼效果

2.power-mode

 随机泡沫

3.atom-miku

  初音

四、常见问题总结

（1）使用Jshint时‘const’ is available in ES6 (use ‘esversion: 6’)

解决方法：在根目录新建一个.jshintrc文件，在该文件中输入：

{
 "esversion": 6
}

或者在每一个需要使用es6语法的文件中，在文件头中输入：

 /* jshint esversion: 6 */ 

React生态，dva源码阅读

  dva的**还是很不错的，大大提升了开发效率，dva集成了Redux以及Redux的中间件Redux-saga,以及React-router等等。得益于Redux的状态管理,以及Redux-saga中通过Task和Effect来处理异步的概念，dva在这些工具的基础上高度封装，只暴露出几个简单的API就可以设计数据模型。

  最近看了一下Redux-saga的源码，结合以及之前在项目中一直采用的是redux-dark模式来将reducers和sagas(generator函数处理异步)拆分到不同的子页面，每一个页面中同一个文件中包含了该页面状态的reducer和saga,这种简单的封装已经可以大大的提升项目的可读性。

  最近看了dva源码，熟悉了dva是在上层如何做封装的。下面会从浅到深，淡淡在阅读dva源码过程中自己的理解。

• redux-dark模式
• dva 0.0.12版本的使用和源码理解

一、redux-dark模式

  在使用redux和redux-saga的时候，特别是如何存放reducer函数和saga的generator函数，这两个函数是直接跟如何处理数据挂钩的。

  回顾一下,在redux中使用异步中间件redux-saga后，完整的数据和信息流向：

  在存在异步的逻辑下，在UI Component中发出一个plain object的action,然后经过redux-saga这个中间件处理，redux-saga会将这个action传入相应channel,通过redux-saga的effect方法（比如call、put、apply等方法)生成一个描述对象，然后将这个描述对象转化成具有副作用的函数并执行。

  在redux-saga执行具有副作用的函数时，又可以dispatch一个action，这个action也是一个plain object，会直接传入到redux的reducer函数中进行处理，也就是说在redux-saga的task中发出的action，就是同步的action。

简单的概括：从UI组件上发出的action经过了2层的处理，分别是redux-saga中间件和redux的reducer函数。

  redux-dark模式很简单，就是将同一个子页面下的redux-saga处理action的saga函数，以及reducer处理该子页面下的state的reducer函数，放在同一个文件中。

举例来说：

 import { connect } from 'react-redux';
 class Hello extends React.Component{
     componentDidMount(){
       //发出一个action，获取异步数据
       this.props.dispatch({
          type:'async_count'
       })
     }
     
 
 }
 export default connect({})(Hello);
 

从Hello组件中发出一个type = 'async_count'的action,我们用redux-dark模式来将saga和reducer函数放在同一个文件中：

    import { takeEvery } from 'redux-saga/effects';
    
    //saga
    function * asyncCount(){
      console.log('执行了saga异步...')
      //发出一个原始的action
      yield put({
        type:'async'
      });
    }
    function * helloSaga(){
        //接受从UI组件发出的action
        takeEvery('async_count',asyncCount);
    }
    
    //reducer
    function helloReducer(state,action){
       if(action.type === 'count');
       return { ...state,count + 1}
    }

上述就是一个将saga和reducer放在同一个文件里面的例子。redux-dark模式来组织代码，可以显得比较直观，统一了数据的处理层。分拆子页面后，每一个子页面对应一个文件。可读性很高。

二、dva 0.0.12版本的使用和源码理解

  上述的redux-dark模式，就是一种简单的处理，而dva的话是做了更近一步的封装，dva不仅封装了redux和redux-saga,还有react-router-redux、react-router等等。使得我们可以通过很简单的配置，就能使用redux、redux-saga、react-router等。

下面首先以dva的初始版本为例来理解一下dva的源码。

(1)、dva 0.0.12的使用

来看官网给的使用dva 0.0.12的例子：

// 1. Initialize
const app = dva();

// 2. Model
app.model({
  namespace: 'count',
  state: 0,
  effects: {
    ['count/add']: function*() {
      console.log('count/add');
      yield call(delay, 1000);
      yield put({
        type: 'count/minus',
      });
    },
  },
  reducers: {
    ['count/add'  ](count) { return count + 1 },
    ['count/minus'](count) { return count - 1 },
  },
  subscriptions: [
    function(dispatch) {
      //..处理监听等等函数
    }
  ],
  
});

// 3. View
const App = connect(({ count }) => ({
  count
}))(function(props) {
  return (
    <div>
      <h2>{ props.count }</h2>
      <button key="add" onClick={() => { props.dispatch({type: 'count/add'})}}>+</button>
      <button key="minus" onClick={() => { props.dispatch({type: 'count/minus'})}}>-</button>
    </div>
  );
});

// 4. Router
app.router(({ history }) =>
  <Router history={history}>
    <Route path="/" component={App} />
  </Router>
);

// 5. Start
app.start(document.getElementById('root'));

只要三步就完成了一个例子，如何处理action呢，我们以一个图来表示：

也就是做UI组件上发出的对象类型的action，先去根据类型匹配=model初始化时候，effects属性中的action type。

• 如果在effects的属性中有相应的action type的处理函数，那么先执行effects中的相应函数，在执行这个函数里面可以二次发出action,二次发出的action会直接传入到reducer函数中。
• 如果effects的属性中没有相应的action type的处理函数，那么会直接从reducer中寻找有没有相应类型的处理函数。

在dva初始化过程中的effects属性中的函数，其实就是redux-saga中的saga函数，在该函数中处理直接的异步逻辑，并且该函数可以二次发出同步的action。

此外dva还可以通过router方法初始化路由等。

(2)、dva 0.0.12的源码阅读

下面来直接读读dva 0.0.12的源码，下面的代码是经过我精简后的dva的源码：

//Provider全局注入store
import { Provider } from 'react-redux';
//redux相关的api
import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
//redux-saga相关的api,takeEvery和takeLatest监听等等
import createSagaMiddleware, { takeEvery, takeLatest } from 'redux-saga';
//react-router相关的api
import { hashHistory, Router } from 'react-router';
//在react-router4.0之后已经较少使用,将路由的状态存储在store中
import { routerMiddleware, syncHistoryWithStore, routerReducer as routing } from 'react-router-redux';
//redux-actions的api,可以以函数式描述reducer等
import { handleActions } from 'redux-actions';
//redux-saga非阻塞调用effect
import { fork } from 'redux-saga/effects';

function dva() {
  let _routes = null;
  const _models = [];
  //new dva暴露了3个方法
  const app = {
    model,
    router,
    start,
  };
  return app;
  //添加models,一个model对象包含了effects,reducers,subscriptions监听器等等
  function model(model) {
    _models.push(model);
  }
  //添加路由
  function router(routes) {
    _routes = routes;
  }

  
  function start(container) {

    let sagas = {};
    //routing是react-router-redux的routerReducer别名,用于扩展reducer,这样以后扩展后的reducer就可以处理路由变化。
    let reducers = {
      routing
    };
    _models.forEach(model => {
      //对于每一个model,提取其中的reducers和effects，其中reducers用于扩展redux的reducers函数，而effects用于扩展redx-saga的saga处理函数。
      reducers[model.namespace] = handleActions(model.reducers || {}, model.state);
      //扩展saga处理函数，sagas是包含了所有的saga处理函数的对象
      sagas = { ...sagas, ...model.effects }; ---------------------------(1)
    });

    reducers = { ...reducers };
    
    //获取决定使用React-router中的那一个api
    const _history = opts.history || hashHistory;
    //初始化redux-saga
    const sagaMiddleware = createSagaMiddleware();
    //为redux添加中间件,这里添加了处理路由的中间件，以及redux-saga中间件。
    const enhancer = compose(
      applyMiddleware.apply(null, [ routerMiddleware(_history), sagaMiddleware ]),
      window.devToolsExtension ? window.devToolsExtension() : f => f
    );
    const initialState = opts.initialState || {};
    //通过combineReducers来扩展reducers,同时生成扩展后的store实例
    const store = app.store = createStore(
      combineReducers(reducers), initialState, enhancer
    );

    // 执行model中的监听函数，监听函数中传入store.dispatch
    _models.forEach(({ subscriptions }) => {
      if (subscriptions) {
        subscriptions.forEach(sub => {
         store.dispatch, onErrorWrapper);
        });
      }
    });
    
     // 根据rootSaga来启动saga,rootSaga就是redux-saga运行的主task
    sagaMiddleware.run(rootSaga);
    
    
    //创建history实例子，可以监听store中的state的变化。
    let history;
    history = syncHistoryWithStore(_history, store); --------------------------------(2)
    

    // Render and hmr.
    if (container) {
      render();
      apply('onHmr')(render);
    } else {
      const Routes = _routes;
      return () => (
        <Provider store={store}>
          <Routes history={history} />
        </Provider>
      );
    }

    function getWatcher(k, saga) {
      let _saga = saga;
      let _type = 'takeEvery';
      if (Array.isArray(saga)) {
        [ _saga, opts ] = saga;
    
        _type = opts.type;
      }

      function* sagaWithErrorCatch(...arg) {
        try {
          yield _saga(...arg);
        } catch (e) {
          onError(e);
        }
      }

      if (_type === 'watcher') {
        return sagaWithErrorCatch;
      } else if (_type === 'takeEvery') {
        return function*() {
          yield takeEvery(k, sagaWithErrorCatch);
        };
      } else {
        return function*() {
          yield takeLatest(k, sagaWithErrorCatch);
        };
      }
    }

    function* rootSaga() {
      for (let k in sagas) {
        if (sagas.hasOwnProperty(k)) {
          const watcher = getWatcher(k, sagas[k]);
          yield fork(watcher);
        }                      -----------------------------(3)
      }
    }

    function render(routes) {
      const Routes = routes || _routes;
      ReactDOM.render((
        <Provider store={store}>
          <Routes history={history} />
        </Provider>
      ), container);
    }
  }
}

export default dva;

代码的阅读在上面都以注视的方式给出，值得注意的主要有一下3点：

• 在注释（1）处, handleActions是通过redux-actions封装后的一个API,用于简化reducer函数的书写。下面是一个handleActions的例子：

const reducer = handleActions(
  {
    INCREMENT: (state, action) => ({
      counter: state.counter + action.payload
    }),
​
    DECREMENT: (state, action) => ({
      counter: state.counter - action.payload
    })
  },
  { counter: 0 }
);

INCREMENT和DECREMENT属性的函数就可以分别处理,type = "INCREMENT"和type = "DECREMENT"的action。

• 在注释 (2) 处，通过react-router-redux的api，syncHistoryWithStore可以扩展history，使得history可以监听到store的变化。

• 在注释（3）处是一个rootSaga, 是redux-saga运行的时候的主Task，在这个Task中我们这样定义：

function* rootSaga() {
  for (let k in sagas) {
    if (sagas.hasOwnProperty(k)) {
      const watcher = getWatcher(k, sagas[k]);
      yield fork(watcher);
    }                     
  }
}

从全局的包含所有saga函数的sagas对象中，获取相应的属性，并fork相应的监听，这里的监听常用的有takeEvery和takeLatest等两个redux-saga的API等。

总结：上面就是dva最早版本的源码，很简洁的使用了redux、redux-saga、react-router、redux-actions、react-router-redux等.其目的也很简单：

简化redux相关生态的繁琐逻辑

参考源码地址：https://github.com/dvajs/dva/tree/0.0.12

在单页应用中，如何优雅的监听url的变化

  单页应用的原理从早起的根据url的hash变化，到根据H5的history的变化，实现无刷新条件下的页面重新渲染。那么在单页应用中是如何监听url的变化呢，本文将总结一下，如何在单页页面中优雅的监听url的变化。

• 单页应用原理
• 监听url中的hash变化
• 监听通过history来改变url的事件
• replaceState和pushState行为的监听

一、单页应用原理

  单页应用的原理，在我们的上一篇文章中React-Router源码阅读已经讲的很详细，这里做一个简单介绍。单页应用使得页面可以在无刷新的条件下重新渲染，通过hash或者html5 Bom对象中的history可以做到改变url，但是不刷新页面。

(1)通过hash来实现单页路由

  早期的前端路由是通过hash来实现的：

  改变url的hash值是不会刷新页面的。

  因此可以通过hash来实现前端路由，从而实现无刷新的效果。hash属性位于location对象中，在当前页面中，可以通过：

window.location.hash='edit'

来实现改变当前url的hash值。执行上述的hash赋值后，页面的url发生改变。

赋值前：http://localhost:3000
赋值后：http://localhost:3000/#edit

在url中多了以#结尾的hash值，但是赋值前后虽然页面的hash值改变导致页面完整的url发生了改变，但是页面是不会刷新的。

此外，除了可以通过window.location.hash来改变当前页面的hash值外，还可以通过html的a标签来实现：

<a href="#edit">edit</a>

(2)通过history实现前端路由

  HTML5的History接口，History对象是一个底层接口，不继承于任何的接口。History接口允许我们操作浏览器会话历史记录。

History提供了一些属性和方法。

History的属性：

• History.length: 返回在会话历史中有多少条记录，包含了当前会话页面。此外如果打开一个新的Tab，那么这个length的值为1
• History.state:
  保存了会出发popState事件的方法，所传递过来的属性对象（后面会在pushState和replaceState方法中详细的介绍）

History方法：

• History.back(): 返回浏览器会话历史中的上一页，跟浏览器的回退按钮功能相同

• History.forward():指向浏览器会话历史中的下一页，跟浏览器的前进按钮相同

• History.go(): 可以跳转到浏览器会话历史中的指定的某一个记录页

• History.pushState():pushState可以将给定的数据压入到浏览器会话历史栈中，该方法接收3个参数，对象，title和一串url。pushState后会改变当前页面url，但是不会伴随着刷新

• History.replaceState():replaceState将当前的会话页面的url替换成指定的数据，replaceState后也会改变当前页面的url，但是也不会刷新页面。

上面的方法中，pushState和repalce的相同点：

就是都会改变当前页面显示的url，但都不会刷新页面。

不同点：

pushState是压入浏览器的会话历史栈中，会使得History.length加1，而replaceState是替换当前的这条会话历史，因此不会增加History.length.

(3)总结

  通过改变hash值，或者history的repalceState和pushState都可以实现无刷新的改变url。这样还留有一个问题需要解决：

  如何监听url的改变

  因为我们不仅要无刷新的改变url，还要监听到这个url改变的行为，根据该行为去重新渲染视图。在下几章中，重点介绍一下如何监听url的改变。

二、监听url中的hash变化

  通过hash改变了url，会触发hashchange事件，只要监听hashchange事件，就能捕获到通过hash改变url的行为。

window.onhashchange=function(event){
  console.log(event);
}
//或者
window.addEventListener('hashchange',function(event){
   console.log(event);
})

当hash值改变时，输出一个HashChangeEvent。该HashChangeEvent的具体值为：

{isTrusted: true, oldURL: "http://localhost:3000/", newURL:   "http://localhost:3000/#teg", type: "hashchange".....}

有了监听事件，且改变hash页面不刷新，这样我们就可以在监听事件的回调函数中，执行我们展示和隐藏不同UI显示的功能，从而实现前端路由。

三、监听通过history来改变url的事件

在上一章讲到了通过History改变url有以下几种方法：History.back()、History.forward()、History.go()、History.pushState()和History.replaceState()。

同时在history中还支持一个事件，该事件为popstate。第一想法就是如果popstate能够监听所有的history方法所导致的url变化，那么就大功告成了。遗憾的是：

History.back()、History.forward()、History.go()事件是会触发popstate事件的，但是History.pushState()和History.replaceState()不会触发popstate事件。

如果是History.back(),History.forward()、History.go()那么会触发popstate事件，我们只需要：

window.addEventListener('popstate', function(event) {
     console.log(event);
})

就可以监听到相应的行为，手动调用：

window.history.go();
window.history.back();
window.history.forward();

都会触发这个事件，此外，在浏览器中点击后退和前进按钮也会触发popstate事件，这个事件内容为：

PopStateEvent {isTrusted: true, state: null, type: "popstate", target: Window, currentTarget: Window, …}

但是，History.pushState()和History.replaceState()不会触发popstate事件，举例来说：

window.addEventListener('popstate', function(event) {
     console.log(event);
})
window.history.pushState({first:'first'}, "page 2", "/first"})

上述例子中不会有任何的输出，因为并没有监听的popstate事件的发生。

但是History.go和History.back()等，虽然可以触发popstate事件，但是都会刷新页面，我们在单页应用中使用的是replaceState和pushState，因此这里还有一个等待解决的问题：

如何监听replaceState和pushState行为

四、replaceState和pushState行为的监听

  在上面的例子中我们发现History.replaceState和pushState确实不会触发popstate事件，那么如何监听这两个行为呢。可以通过在方法里面主动的去触发popState事件。另一种就是在方法中创建一个新的全局事件。

具体做法为：

var _wr = function(type) {
   var orig = history[type];
   return function() {
       var rv = orig.apply(this, arguments);
      var e = new Event(type);
       e.arguments = arguments;
       window.dispatchEvent(e);
       return rv;
   };
};
 history.pushState = _wr('pushState');
 history.replaceState = _wr('replaceState');

这样就创建了2个全新的事件，事件名为pushState和replaceState，我们就可以在全局监听：

window.addEventListener('replaceState', function(e) {
  console.log('THEY DID IT AGAIN! replaceState 111111');
});
window.addEventListener('pushState', function(e) {
  console.log('THEY DID IT AGAIN! pushState 2222222');
});

这样就可以监听到pushState和replaceState行为。

参考文章：https://stackoverflow.com/questions/4570093/how-to-get-notified-about-changes-of-the-history-via-history-pushstate

发布一个npm包，用于监控页面中的所有API请求的状态和结果

  在前端监控系统中，或者其他场景下，如果我们需要监控当前页面下所有请求状态。可能通常请求下，我们会选择在请求的回调中去处理。这种做法的缺点就是会侵入具体的业务代码。在通常的监控中，监控部分的代码和业务部分的代码是分离的。此外，如果存在很多的请求需要被监听，通过侵入具体业务代码，为了减少代码的重复，也需要封装监听请求的逻辑。

  本文通过monkey patches的方法实现了一个request-interceptor包,可以按需求监听请求。

  该npm包的项目地址为：https://github.com/forthealllight/request-intercept 欢迎使用。

• 获取API请求的状态和结果
• monkey patches实现监控XMLHttpRequest请求
• monkey patches实现监控fetch请求

一、获取API请求和结果

  获取请求的方式包含了fetch和XMLHttpRequest。比如下面是一个XMLHttpRequest请求的例子：

var client = new XMLHttpRequest();
client.open("POST","http://10.12.72.16:8080/extraInfo" );
client.setRequestHeader("Content-Type", "application/json; charset=utf-8");
client.send(JSON.stringify({}));

  通常我们会通过client上出发的readystatechange来判断请求的状态以及得到请求的响应结果：

client.onreadystatechange = function () {
if (client .readyState==4 &&client.status==200) {
　　　　console.log(client.responseText);//
　　}
}

  XMLHttpRequest的prototype除了onreadystatechange事件外还有其他很多事件，比如onabout、onerror、onload、onloadstart等等事件。如果我们要完整的监听一个请求，那么需要实现完整的实现这些事件：

client.onabout = function(){}
client.onerror = function(){}
clinet.onload = function(){}
client.onloadstart = function(){}
 ....

  此外如果当某一个事件发生时，需要按顺序的实行一系列的函数，这样会使得事件函数内部越来越复杂，使得整体项目变的无法维护。

fetch请求也是同理,因此我们需要合理的封装监听请求的逻辑。

二、monkey patches实现监控XMLHttpRequest请求

本文不会具体介绍如何通过monkey patches来封装监听请求的逻辑，该逻辑已经在我的npm包中实现，具体可以参考我的开源项目：

https://github.com/forthealllight/request-intercept

本文只介绍如何使用，如有兴趣，可以读一读具体如何实现这个monkey patches，在目录的source文件夹中，如有疑问，可以提issue。

该npm包的包名为：req-interceptor。首先来看对于XMLHttpRequest请求如何使用：

import { ajaxIntercept } from 'req-interceptor';

//监听
const unregister = ajaxIntercept.register({
  requestAbout: function (xhr) {
      // xhr is real instance of a request
      console.log(xhr)
  },
  requestError: function (xhr) {
      // xhr is real instance of a request
      console.log(xhr)
  },
  requestLoad: function (xhr) {
      // xhr is real instance of a request
      console.log(xhr)
  },
});

//发送请求

var client = new XMLHttpRequest();
client.open("POST","http://10.12.72.16:8080/extraInfo" );
client.setRequestHeader("Content-Type", "application/json; charset=utf-8");
client.send(JSON.stringify({}));

只需要在发送请求前先调用ajaxIntercept.register函数传入监听的对象，该函数会返回一个取消监听的方法。

这样就监听之后的任意请求，在ajaxIntercept.register中的实际参数的对象中，对象的属性是一个函数，参数为xhr，xhr就是一个被监听的XMLHttpRquest，因此我们可以从xhr中拿到请求的具体响应。xhr的一个例子为：

xhr = {
          readyState: 4
          response: "{"success":0}"
          responseText: "{"success":0}"
          responseType: ""
          responseURL: "http://10.12.72.16:8080/extraInfo"
          responseXML: null
          status: 201
          statusText: "Created"
          timeout: 0
     }

如果我们在取消对于某一个请求的监听，则调用该返回的
unregister函数，此后请求不会再被监听。

unregister();

此外我们也可以在某一个请求前添加多个监听函数：

import { ajaxIntercept } from 'req-interceptor';
//监听
const unregister1 = ajaxIntercept.register({...});
const unregister2 = ajaxIntercept.register({...});
const unregister3 = ajaxIntercept.register({...});
//请求
client.open(url,....)

如果我们想要一次性移除所有的对于请求的监听函数，可以直接调用：

ajaxIntercept.clear();

三、monkey patches实现监控fetch请求

对于fetch请求也是一样的。

import { fetchIntercept } from 'req-interceptor';


import { fetchIntercept } from 'req-interceptor';

const unregister = fetchIntercept.register({
    request: function (url, config) {
        // Modify the url or config here
        return [url, config];
    },

    requestError: function (error) {
        // Called when an error occured during another 'request' interceptor call
        return Promise.reject(error);
    },

    response: function (response) {
        // Modify the reponse object
        return response;
    },

    responseError: function (error) {
        // Handle an fetch error
        return Promise.reject(error);
    }
});

// Call fetch to see your interceptors in action.
fetch('http://google.com');

不同的是，fetch不像XMLHttpRequest请求那样，可以监听完整的过程，fetch只有request、requestError、response和responseError这4个属性可以监听，分别映射请求的参数，请求失败，请求返回成功，请求返回失败。

同样的也可以通过返回函数来取消监听，以及通过clear函数来取消所有监听函数。

循序渐进教你实现一个完整的node的EventEmitter模块

node的事件模块只包含了一个类：EventEmitter。这个类在node的内置模块和第三方模块中大量使用。EventEmitter本质上是一个观察者模式的实现，这种模式可以扩展node在多个进程或网络中运行。本文从node的EventEmitter的使用出发，循序渐进的实现一个完整的EventEmitter模块。

• EventEmitter模块的基本用法和简单实现
• node中常用的EventEmitter模块的API
• EventEmitter模块的异常处理
• 完整的实现一个EventEmitter模块

一、EventEmitter模块的基本用法和简单实现

(1) EventEmitter模块的基本用法

首先先了解一下EventEmitter模块的基本用法，EventEmitter本质上是一个观察者模式的实现，所谓观察者模式：

它定义了对象间的一种一对多的关系，让多个观察者对象同时监听某一个主题对象，当一个对象发生改变时，所有依赖于它的对象都将得到通知。

因此最基本的EventEmitter功能，包含了一个观察者和一个被监听的对象，对应的实现就是EventEmitter中的on和emit：

var events=require('events');
var eventEmitter=new events.EventEmitter();
eventEmitter.on('say',function(name){
    console.log('Hello',name);
})
eventEmitter.emit('say','Jony yu');

eventEmitter是EventEmitter模块的一个实例，eventEmitter的emit方法，发出say事件，通过eventEmitter的on方法监听，从而执行相应的函数。

(2) 简单实现一个EventEmitter模块

根据上述的例子，我们知道了EventEmitter模块的基础功能emit和on。下面我们实现一个包含emit和on方法的EventEmitter类。

on(eventName,callback)方法传入两个参数，一个是事件名（eventName），另一个是相应的回调函数，我们选择在on的时候针对事件名添加监听函数，用对象来包含所有事件。在这个对象中对象名表示事件名（eventName),而对象的值是一个数组，表示该事件名所对应的执行函数。

emit(eventName,...arg)方法传入的参数，第一个为事件名，其他参数事件对应的执行函数中的实参，emit方法的功能就是从事件对象中，寻找对应key为eventName的属性，执行该属性所对应的数组里面每一个执行函数。

下面来实现一个EventEmitter类

class EventEmitter{
   constructor(){
      this.handler={};
   }
   on(eventName,callback){
      if(!this.handles){
        this.handles={};
      }
      if(!this.handles[eventName]){
        this.handles[eventName]=[];
      }
      this.handles[eventName].push(callback);
   }
   emit(eventName,...arg){
       if(this.handles[eventName]){
     for(var i=0;i<this.handles[eventName].length;i++){
       this.handles[eventName][i](...arg);
     }
   }
   
   }
}

上述就实现了一个简单的EventEmitter类，下面来实例化：

let event=new EventEmitter();
event.on('say',function(str){
   console.log(str);
});
event.emit('say','hello Jony yu');
//输出hello Jony yu

二、node中常用的EventEmitter模块的API

跟在上述简单的EventEmitter模块不同，node的EventEmitter还包含了很多常用的API，我们一一来介绍几个实用的API.

除此之外，还有2个特殊的，不需要手动添加，node的EventEmitter模块自带的特殊事件：

上述node的EventEmitter的模块看起来很多很复杂，其实上述的API中包含了一些别名，仔细整理，理解其使用和实现不是很困难，下面一一对比和介绍上述的API。

(1) addListener和removeListener、on和off方法

addListener(eventName,listener)的作用是为指定事件添加一个监听器. 其别名为on

removeListener(eventName,listener)的作用是为移除某个事件的监听器. 其别名为off

再次需要强调的是：addListener的别名是on，removeListener的别名是off

EventEmitter.prototype.on=EventEmitter.prototype.addListener
EventEmitter.prototype.off=EventEmitter.prototype.removeListener

接着我们来看具体的用法：

var events=require('events');
var emitter=new events.EventEmitter();
function hello1(name){
  console.log("hello 1",name);
}
function hello2(name){
  console.log("hello 2",name);
}
emitter.addListener('say',hello1);
emitter.addListener('say',hello2);
emitter.emit('say','Jony');
//输出hello 1 Jony 
//输出hello 2 Jony
emitter.removeListener('say',hello1);
emitter.emit('say','Jony');
//相应的监听say事件的hello1事件被移除
//只输出hello 2 Jony

(2) removeListener和removeAllListeners

removeListener指的是移除一个指定事件的某一个监听器，而removeAllListeners指的是移除某一个指定事件的全部监听器。
这里举例一个removeAllListeners的例子：

var events=require('events');
var emitter=new events.EventEmitter();
function hello1(name){
  console.log("hello 1",name);
}
function hello2(name){
  console.log("hello 2",name);
}
emitter.addListener('say',hello1);
emitter.addListener('say',hello2);
emitter.removeAllListeners('say');
emitter.emit('say','Jony');
//removeAllListeners移除了所有关于say事件的监听
//因此没有任何输出

(3) on和once方法

on和once的区别是：

on的方法对于某一指定事件添加的监听器可以持续不断的监听相应的事件，而once方法添加的监听器，监听一次后，就会被消除。

比如on方法（跟addListener相同）：

var events=require('events');
var emitter=new events.EventEmitter();
function hello(name){
  console.log("hello",name);
}
emitter.on('say',hello);
emitter.emit('say','Jony');
emitter.emit('say','yu');
emitter.emit('say','me');
//会一次输出 hello Jony、hello yu、hello me

也就是说on方法监听的事件，可以持续不断的被触发。

(4) 两个特殊的事件newListener和removeListener

我们知道当实例化EventEmitter模块之后，监听对象是一个对象，包含了所有的监听事件，而这两个特殊的方法就是针对监听事件的添加和移除的。

newListener：在添加新事件监听器触发
removeListener：在移除事件监听器时触发

以newListener为例，会在添加新事件监听器的时候触发：

var events=require('events');
var emitter=new events.EventEmitter();

function hello(name){
  console.log("hello",name);
}
emitter.on('newListener',function(eventName,listener){
  console.log(eventName);
  console.log(listener);
});
emitter.addListener('say',hello);
//输出say和[Function: hello]

从上述的例子来看，每当添加新的事件，都会自动的emit一个“newListener”事件，且参数为eventName(新事件的名)和listener(新事件的执行函数)。

同理特殊事件removeListener也是同样的，当事件被移除，会自动emit一个"removeListener"事件。

三、EventEmitter模块的异常处理

(1) node中的try catch异常处理方法

在node中也可以通过try catch方式来捕获和处理异常，比如：

try {
  let x=x;
} catch (e) {
  console.log(e);
}

上述let x=x 赋值语句的错误会被捕获。这里提异常处理，那么跟事件有什么关系呢？

node中有一个特殊的事件error，如果异常没有被捕获，就会触发process的uncaughtException事件抛出，如果你没有注册该事件的监听器（即该事件没有被处理），则 Node.js 会在控制台打印该异常的堆栈信息，并结束进程。

比如：

var events=require('events');
var emitter=new events.EventEmitter();
emitter.emit('error');

在上述代码中没有监听error的事件函数，因此会触发process的uncaughtException事件，从而打印异常堆栈信息，并结束进程。

对于阻塞或者说非异步的异常捕获，try catch是没有问题的，但是：

try catch不能捕获非阻塞或者异步函数里面的异常。

举例来说：

try {
  let x=x;//第二个x在使用前未定义，会抛出异常
} catch (e) {
  console.log('该异常已经被捕获');
  console.log(e);
}

上述代码中，以为try方法里面是同步的，因此可以捕获异常。如果try方法里面有异步的函数：

try {
  process.nextTick(function(){
  	let x=x; //第二个x在使用前未定义，会抛出异常
  });
} catch (e) {
  console.log('该异常已经被捕获');
  console.log(e);
}

因为process.nextTick是异步的，因此在process.nextTick内部的错误不能被捕获，也就是说try catch不能捕获非阻塞函数内的异常。

(2) 通过domains管理异常

node中domain模块能被用来集中地处理多个异常操作，通过node的domain模块可以捕获非阻塞函数内的异常。

var domain=require('domain');
var eventDomain=domain.create();
eventDomain.on('error',function(err){
  console.log('该异常已经被捕获了');
  console.log(err);
});
eventDomain.run(function(){
   process.nextTick(function(){
     let x=x;//抛出异常
   });
});

同样的，即使process.nextTick是一个异步函数，domain.on方法也可以捕获这个异步函数中的异常。

即使更复杂的情况下，比如异步嵌套异步的情况下，domain.on方法也可以捕获异常。

var domain=require('domain');
var eventDomain=domain.create();
eventDomain.on('error',function(err){
  console.log('该异常已经被捕获了');
  console.log(err);
});
eventDomain.run(function(){
   process.nextTick(function(){
     setTimeout(function(){
       setTimeout(function(){
         let x=x;
       },0);
     },0);
   });
});

在上述的情况下，即使异步嵌套很复杂，也能在最外层捕获到异常。

(3) domain模块缺陷

在node最新的文档中，domain被废除（被标记为：Deprecated），domain从诞生之日起就有着缺陷，举例来说：

var domain = require('domain');
var EventEmitter = require('events').EventEmitter;

var e = new EventEmitter();

var timer = setTimeout(function () {
  e.emit('data');
}, 10);

function next() {
  e.once('data', function () {
    throw new Error('something wrong here');
  });
}

var d = domain.create();
d.on('error', function () {
  console.log('cache by domain');
});

d.run(next);

如上述的代码是无法捕获到异常Error的，原因在于发出异常的EventEmitter实例e,以及触发异常的定时函数timer没有被domain包裹。domain模块是通过重写事件循环中的nextTick和_tickCallback来事件将process.domain注入到next包裹的所有异步事件内。

解决上述无法捕获异常的情况，只需要将e或者timer包裹进domain。

d.add(e)或者d.add(timer)

就可以成功的捕获异常。

domain模块已经在node最新的文档中被废除

(4)process.on('uncaughtException')的方法捕获异常

node中提供了一个最外层的兜底的捕获异常的方法。非阻塞或者异步函数中的异常都会抛出到最外层，如果异常没有被捕获，那么会暴露出来，被最外层的process.on('uncaughtException')所捕获。

try {
  process.nextTick(function(){
     let x=x; //第二个x在使用前未定义，会抛出异常
  },0);
} catch (e) {
  console.log('该异常已经被捕获');
  console.log(e);
}
process.on('uncaughtException',function(err){console.log(err)})

这样就能在最外层捕获异步或者说非阻塞函数中的异常。

四、完整的实现一个EventEmitter模块（可选读）

在第二节中我们知道了EventEmitter模块的基本用法，那么根据基本的API我们可以进一步自己去实现一个EventEmitter模块。
每一个EventEmitter实例都有一个包含所有事件的对象_events,
事件的监听和监听事件的触发，以及监听事件的移除等都在这个对象_events的基础上实现。

(1) emit

emit的方法实现的大致功能如下程序流程图所示：

从上述的程序图出发，我们开始实现自己的EventEmitter模块。

首先生成一个EventEmitter类，在类的初始化方法中生成这个事件对象_events.

class EventEmitter{
  constructor(){
    if(this._events===undefined){
      this._events=Object.create(null);//定义事件对象
      this._eventsCount=0;
    }
  }
}

_eventsCount用于统计事件的个数，也就是_events对象有多少个属性。

接着我们来实现emit方法，根据框图，我们知道emit所做的事情是在_events对象中取出相应type的属性，并执行属性所对应的函数，我们来实现这个emit方法。

 class EventEmitter{
  constructor(){
    if(this._events===undefined){
      this._events=Object.create(null);//定义事件对象
      this._eventsCount=0;
    }
  }
  emit(type,...args){
    const events=this._events;
    const handler=events[type];
    //判断相应type的执行函数是否为一个函数还是一个数组
    if(typeof handler==='function'){
      Reflect.apply(handler,this,args);
    }else{
      const len=handler.length;
      for(var i=0;li<len;i++){
       Reflect.apply(handler[i],this,args);
      }
    }
    return true;
  }
}

(2) on、addListener和prependListener方法

emit方法是出发事件，并执行相应的方法，而on方法则是对于指定的事件添加监听函数。用程序来说，就是往事件对象中_events添加相应的属性.程序流程图如下所示：

接着我们来实现这个方法：

on(type,listener,prepend){
    var m;
    var events;
    var existing;
    events=this._events;
    //添加事件的
    if(events.newListener!==undefined){
       this.emit('newListener',type,listener);
       events=target._events;
    }
    existing=events[type];
    //判断相应的type的方法是否存在
    if(existing===undefined){
      //如果相应的type的方法不存在，这新增一个相应type的事件
      existing=events[type]=listener;
      ++this._eventsCount;
    }else{
      //如果存在相应的type的方法,判断相应的type的方法是一个数组还是仅仅只是一个方法
      //如果仅仅是
      if(typeof existing==='function'){
        //如果仅仅是一个方法，则添加
        existing=events[type]=prepend?[listener,existing]:[existing,listener];
      }else if(prepend){
        existing.unshift(listener);
      }else{
        existing.push(listener);
      }
    }
    //链式调用
    return this;
}

• 在on方法中为了可以链式的调用我们返回了EventEmitter模块的实例化本身。
• 且在on方法的参数中，第三个参数用于指定是在相应事件类型属性所对应的数组头部添加还是尾部添加，不传的情况下实在尾部添加，如果指定prepend为true，则相同事件类型的新的监听事件会添加到事件数组的头部。
• 如果_events存在newListener属性，也就是说_event存在监听newListener监听事件，那么每次on方法添加事件的时候，都会emit出一个‘newListener’方法。

在on方法的基础上可以实现addListener方法和prependListener方法。

addListener方法是on方法的别名：

EventEmitter.prototype.addListener=EventEmitter.prototype.on

prependListener方法相当于在头部添加，指定prepend为true：

EventEmitter.prototype.prependListener =
function prependListener(type, listener) {
  return EventEmitter.prototype.on(type, listener, true);
};

(3) removeListener和removeAllListeners

接着来看移除事件监听的方法removeListener和removeAllListeners，下面我们来看removeListener的程序流程图：

接着来看removeListener的代码：

removeListener(type,listener){
 var list,events,position,i,originalListener;
 events=this._events;
 list=events[type];
 //如果相应的事件对象的属性值是一个函数，也就是说事件只被一个函数监听
 if(list===listener){
    if(--this._eventsCount===0){
      this._events=Object.create(null);
    }else{
      delete events[type];
      //如果存在对移除事件removeListener的监听函数，则触发removeListener
      if(events.removeListener)
         this.emit('removeListener',type,listener);
    }
 }else if(typeof list!=='function'){
   //如果相应的事件对象属性值是一个函数数组
   //遍历这个数组，找出listener对应的那个函数，在数组中的位置
   for(i=list.length-1;i>=0;i--){
     if(list[i]===listener){
       position=i;
       break;
     }
   }
   //没有找到这个函数，则返回不做任何改动的对象
   if(position){
     return this;
   }
   //如果数组的第一个函数才是所需要删除的对应listener函数，则直接移除
   if(position===0){
     list.shift();
   }else{
     list.splice(position,1);
   }
   if(list.length===1)
     events[type]=list[0];
   if(events.removeListener!==undefined)
     this.emit('removeListener',type,listener);
   }
   return this;
}

• 如果在之间设置了对于移除这个特殊事件“removeListener”的监听，那么就会在移除事件时候触发“removeListener”事件。

最后来看removeAllListener，这个与removeListener相似，只要找到传入的type所对应属性的值，没有遍历过程，直接删除这个属性即可。

除此之外，还有其他的类似与once、setMaxListeners、listeners也可以在此基础上实现，就不一一举例。

五、总结

本文从node的EventEmitter模块的使用出发，介绍了EventEmitter提供的常用API，然后介绍了node中基于EventEmitter的异常处理，最后自己实现了一个较为完整的EventEmitter模块。

nodejs中的子进程，深入解析child_process模块和cluster模块

  node遵循的是单线程单进程的模式，node的单线程是指js的引擎只有一个实例，且在nodejs的主线程中执行，同时node以事件驱动的方式处理IO等异步操作。node的单线程模式，只维持一个主线程，大大减少了线程间切换的开销。

  但是node的单线程使得在主线程不能进行CPU密集型操作，否则会阻塞主线程。对于CPU密集型操作，在node中通过child_process可以创建独立的子进程，父子进程通过IPC通信，子进程可以是外部应用也可以是node子程序，子进程执行后可以将结果返回给父进程。

  此外，node的单线程，以单一进程运行，因此无法利用多核CPU以及其他资源，为了调度多核CPU等资源，node还提供了cluster模块，利用多核CPU的资源，使得可以通过一串node子进程去处理负载任务，同时保证一定的负载均衡型。本文从node的单线程单进程的理解触发，介绍了child_process模块和cluster模块，本文的结构安排如下：

• node中的单线程和单进程
• node中的child_process模块实现多进程
• node中的cluster模块
• 总结

一、node中的单线程和单进程

  首先要理解的概念是，node的单线程和单进程的模式。node的单线程于其他语言的多线程模式相比，减小了线程间切换的开销，以及在写node代码的时候不用考虑锁以及线程池的问题。node宣称的单线程模式，比其他语言更加适合IO密集型操作。那么一个经典的问题是：

node是真的单线程的吗？

提到node，我们就可以立刻想到单线程、异步IO、事件驱动等字眼。首先要明确的是node真的是单线程的吗，如果是单线程的，那么异步IO，以及定时事件（setTimeout、setInterval等）又是在哪里被执行的。

严格来说，node并不是单线程的。node中存在着多种线程，包括：

• js引擎执行的线程
• 定时器线程(setTimeout, setInterval)
• 异步http线程(ajax)
  ....

  我们平时所说的单线程是指node中只有一个js引擎在主线程上运行。其他异步IO和事件驱动相关的线程通过libuv来实现内部的线程池和线程调度。libv中存在了一个Event Loop，通过Event Loop来切换实现类似于多线程的效果。简单的来讲Event Loop就是维持一个执行栈和一个事件队列，当前执行栈中的如果发现异步IO以及定时器等函数，就会把这些异步回调函数放入到事件队列中。当前执行栈执行完成后，从事件队列中，按照一定的顺序执行事件队列中的异步回调函数。

上图中从执行栈，到事件队列，最后事件队列中按照一定的顺序执行回调函数，整个过程就是一个简化版的Event Loop。此外回调函数执行时，同样会生成一个执行栈，在回调函数里面还有可能嵌套异步的函数，也就是说执行栈存在着嵌套。

也就是说node中的单线程是指js引擎只在唯一的主线程上运行，其他的异步操作，也是有独立的线程去执行，通过libv的Event Loop实现了类似于多线程的上下文切换以及线程池调度。线程是最小的进程，因此node也是单进程的。这样就解释了为什么node是单线程和单进程的。

二、node中的child_process模块实现多进程

  node是单进程的，必然存在一个问题，就是无法充分利用cpu等资源。node提供了child_process模块来实现子进程，从而实现一个广义上的多进程的模式。通过child_process模块，可以实现1个主进程，多个子进程的模式，主进程称为master进程，子进程又称工作进程。在子进程中不仅可以调用其他node程序，也可以执行非node程序以及shell命令等等，执行完子进程后，以流或者回调的形式返回。

1、child_process模块提供的API

child_process提供了4个方法，用于新建子进程，这4个方法分别为spawn、execFile、exec和fork。所有的方法都是异步的，可以用一张图来描述这4个方法的区别。

上图可以展示出这4个方法的区别，我们也可以简要介绍这4中方法的不同。

• spawn ： 子进程中执行的是非node程序，提供一组参数后，执行的结果以流的形式返回。

• execFile：子进程中执行的是非node程序，提供一组参数后，执行的结果以回调的形式返回。

• exec：子进程执行的是非node程序，传入一串shell命令，执行后结果以回调的形式返回，与execFile
  不同的是exec可以直接执行一串shell命令。

• fork：子进程执行的是node程序，提供一组参数后，执行的结果以流的形式返回，与spawn不同，fork生成的子进程只能执行node应用。接下来的小节将具体的介绍这一些方法。

2、execFile和exec

我们首先比较execFile和exec的区别，这两个方法的相同点：

执行的是非node应用，且执行后的结果以回调函数的形式返回。

不同点是：

exec是直接执行的一段shell命令，而execFile是执行的一个应用

举例来说，echo是UNIX系统的一个自带命令，我们直接可以在命令行执行：

echo hello world

结果，在命令行中会打印出hello world.

(1) 通过exec来实现

新建一个main.js文件中，如果要使用exec方法，那么则在该文件中写入：

let cp=require('child_process');
cp.exec('echo hello world',function(err,stdout){
  console.log(stdout);
});

执行这个main.js，结果会输出hello world。我们发现exec的第一个参数，跟shell命令完全相似。

(2)通过execFile来实现

let cp=require('child_process');
cp.execFile('echo',['hello','world'],function(err,stdout){
   console.log(stdout);
});

execFile类似于执行了名为echo的应用，然后传入参数。execFlie会在process.env.PATH的路径中依次寻找是否有名为'echo'的应用，找到后就会执行。默认的process.env.PATH路径中包含了'usr/local/bin',而这个'usr/local/bin'目录中就存在了这个名为'echo'的程序，传入hello和world两个参数，执行后返回。

(3)安全性分析

像exec那样，可以直接执行一段shell是极为不安全的，比如有这么一段shell：

echo hello world;rm -rf

通过exec是可以直接执行的，rm -rf会删除当前目录下的文件。exec正如命令行一样，执行的等级很高，执行后会出现安全性的问题，而execFile不同：

execFile('echo',['hello','world',';rm -rf'])

在传入参数的同时，会检测传入实参执行的安全性，如果存在安全性问题，会抛出异常。除了execFile外，spawn和fork也都不能直接执行shell，因此安全性较高。

3、spawn

spawn同样是用于执行非node应用，且不能直接执行shell，与execFile相比，spawn执行应用后的结果并不是执行完成后，一次性的输出的，而是以流的形式输出。对于大批量的数据输出，通过流的形式可以介绍内存的使用。

我们用一个文件的排序和去重来举例：

上述图片示意图中，首先读取的input.txt文件中有acba未经排序的文字，通过sort程序后可以实现排序功能，输出为aabc，最后通过uniq程序可以去重，得到abc。我们可以用spawn流形式的输入输出来实现上述功能：

let cp=require('child_process');
let cat=cp.spawn('cat',['input.txt']);
let sort=cp.spawn('sort');
let uniq=cp.spawn('uniq');

cat.stdout.pipe(sort.stdin);
sort.stdout.pipe(uniq.stdin);
uniq.stdout.pipe(process.stdout);
console.log(process.stdout);

执行后，最后的结果将输入到process.stdout中。如果input.txt这个文件较大，那么以流的形式输入输出可以明显减小内存的占用，通过设置缓冲区的形式，减小内存占用的同时也可以提高输入输出的效率。

4、fork

在javascript中，在处理大量计算的任务方面，HTML里面通过web work来实现，使得任务脱离了主线程。在node中使用了一种内置于父进程和子进程之间的通信来处理该问题，降低了大数据运行的压力。node中提供了fork方法，通过fork方法在单独的进程中执行node程序，并且通过父子间的通信，子进程接受父进程的信息，并将执行后的结果返回给父进程。

使用fork方法，可以在父进程和子进程之间开放一个IPC通道，使得不同的node进程间可以进行消息通信。

在子进程中：

通过process.on('message')和process.send()的机制来接收和发送消息。

在父进程中：

通过child.on('message')和process.send()的机制来接收和发送消息。

具体例子，在child.js中：

process.on('message',function(msg){
   process.send(msg)
})

在parent.js中：

let cp=require('child_process');
let child=cp.fork('./child');
child.on('message',function(msg){
  console.log('got a message is',msg);
});
child.send('hello world');

执行parent.js会在命令行输出：got a message is hello world

中断父子间通信的方式，可以通过在父进程中调用：

child.disconnect()

来实现断开父子间IPC通信。

5、同步执行的子进程

exec、execFile、spawn和fork执行的子进程都是默认异步的，子进程的运行不会阻塞主进程。除此之外，child_process模块同样也提供了execFileSync、spawnSync和execSync来实现同步的方式执行子进程。

三、node中的cluster模块

cluster意为集成，集成了两个方面，第一个方面就是集成了child_process.fork方法创建node子进程的方式，第二个方面就是集成了根据多核CPU创建子进程后，自动控制负载均衡的方式。

我们从官网的例子来看：

const cluster = require('cluster');
const http = require('http');
const numCPUs = require('os').cpus().length;

if (cluster.isMaster) {
  console.log(`主进程 ${process.pid} 正在运行`);

  // 衍生工作进程。
  for (let i = 0; i < numCPUs; i++) {
    cluster.fork();
  }

  cluster.on('exit', (worker, code, signal) => {
    console.log(`工作进程 ${worker.process.pid} 已退出`);
  });
} else {
  // 工作进程可以共享任何 TCP 连接。
  // 在本例子中，共享的是一个 HTTP 服务器。
  http.createServer((req, res) => {
    res.writeHead(200);
    res.end('你好世界\n');
  }).listen(8000);

  console.log(`工作进程 ${process.pid} 已启动`);
}

最后输出的结果为：

$ node server.js
主进程 3596 正在运行
工作进程 4324 已启动
工作进程 4520 已启动
工作进程 6056 已启动
工作进程 5644 已启动

我们将master称为主进程，而worker进程称为工作进程，利用cluster模块，使用node封装好的API、IPC通道和调度机可以非常简单的创建包括一个master进程下HTTP代理服务器 + 多个worker进程多个HTTP应用服务器的架构。

四、 总结

本文首先介绍了node的单线程和单进程模式，接着从单线程的缺陷触发，介绍了node中如何实现子进程的方法，对比了child_process模块中几种不同的子进程生成方案，最后简单介绍了内置的可以实现子进程以及CPU进程负载均衡的内置集成模块cluster。

在React项目中，如何优雅的优化长列表

  对于较长的列表，比如1000个数组的数据结构，如果想要同时渲染这1000个数据，生成相应的1000个原生dom，我们知道原生的dom元素是很复杂的，如果长列表通过生成如此多的dom元素来实现，很可能使网页失去响应。

  贯穿React核心的就是"virtual dom",我们同样的可以通过用虚拟列表的方式来优雅的优化长列表

• 原生dom渲染长列表的缺陷
• 虚拟列表优化长列表的原理
• 通过react-virtualized来优化长列表
• 通过react-tiny-virtual-list来优化长列表

一、原生dom渲染长列表的缺陷

  首先我们尝试在React项目中，未做任何优化一次性渲染1000个dom，每个dom包含一个img标签，原生dom本身是很复杂的对象，加上img标签后。渲染的效果如下图所示：

  从上图我们可以看出，是确确实实的生成了1000个真实的dom，进入页面后，需要渲染这1000个dom，因此白屏的时间很长。

  此外，在直接渲染1000个dom节点的页面，触发滚动事件，也会使得内存用量增加，具体可以如下图所示：

此外同时渲染很多dom节点，也会造成一下几个问题：

• 容易失帧，因为渲染很慢，所以无法维持浏览器的帧率，主观上会显得页面卡顿

• 网页失去响应，事件等无法及时被触发

  上述的效果都是在PC端展示的，对于特定的移动设备，直接无优化的渲染长列表所造成的问题会更加的放大。长列表的渲染在移动端的很多场景会遇到，比如微博，feeds流中等等。合理的优化长列表，可以提升用户体验。

二、虚拟列表优化长列表的原理

优化长列表的原理很简单，基本原理可以一句话概括：

用数组保存所有列表元素的位置，只渲染可视区内的列表元素，当可视区滚动时，根据滚动的offset大小以及所有列表元素的位置，计算在可视区应该渲染哪些元素。

具体实现步骤如下所示：

1. 首先确定长列表所在父元素的大小，父元素的大小决定了可视区的宽和高
2. 确定长列表每一个列表元素的宽和高，同时初始的条件下计算好长列表每一个元素相对于父元素的位置，并用一个数组来保存所有列表元素的位置信息
3. 首次渲染时，只展示相对于父元素可视区内的子列表元素，在滚动时，根据父元素的滚动的offset重新计算应该在可视区内的子列表元素。这样保证了无论如何滚动，真实渲染出的dom节点只有可视区内的列表元素。
4. 假设可视区内能展示5个子列表元素，及时长列表总共有1000个元素，但是每时每刻，真实渲染出来的dom节点只有5个。
   5.补充说明，这种情况下，父元素一般使用position：relative，子元素的定位一般使用：position：absolute或sticky

通过虚拟列表优化后，同样的显示1000个包含图片的dom，白屏时间会大大的减少。具体效果如下图所示：

对于比无优化的情况，优化后的虚拟列表渲染速度提升很明显。

三、通过react-virtualized来优化长列表

社区实现虚拟列表的React组件很多，较为常用的是react-virtualized和react-tiny-virtual-list，前一个较为全面，第二个较为轻量。接下来会分别来介绍这俩个React组件库。

1、react-virtualized简介

react-virtualized是一个实现虚拟列表较为优秀的组件库，react-virtualized提供了一些基础组件用于实现虚拟列表，虚拟网格，虚拟表格等等，它们都可以减小不必要的dom渲染。此外还提供了几个高阶组件，可以实现动态子元素高度，以及自动填充可视区等等。

react-virtualized的基础组件包含：

• Grid：用于优化构建任意网状的结构，传入一个二维的数组，渲染出类似棋盘的结构。
• List：List是基于Grid来实现的，但是是一个维的列表，而不是网状。
• Table：Table也是基于Grid来实现，表格具有固定的头部，并且可以在垂直方向上滚动
• Masonry：同样可以在水平方向，也可以在垂直方向滚动，不同于Grid的是可以自定义每个元素的大小，或者子元素的大小也可以是动态变化的
• Collection：类似于瀑布流的形式，同样可以水平和垂直方向滚动。

值得注意的是这些基础组件都是继承于React中的PureComponent，因此当state变化的时候，只会做一个浅比较来确定重新渲染与否
。

除了这几个基础组件外，react-virtualized还提供了几个高阶组件，比如ArrowKeyStepper
、AutoSizer、CellMeasurer、InfiniteLoader等，本文具体介绍常用的AutoSizer、CellMeasurer和InfiniteLoader。

• AutoSizer：使用于一个子元素的情况，通过AutoSizer包含的子元素会根据父元素Resize的变化，自动调节该子元素的可视区的宽度和高度，同时调节的还有该子元素可视区真实渲染的dom元素的数目。
• CellMeasurer：这个高阶组件可以动态的改变子元素的高度，适用于提前不知道长列表中每一个子元素高度的情况。
• InfiniteLoader：这个高阶组件用于Table或者List的无限滚动，适用于滚动时异步请求等情况

2、react-virtualized基础组件的使用

下面我们来介绍一下常用的基础组件Grid、List。

(1)Grid

所有基础组件基本上都是基于Grid构成的，一个简单的Grid的例子如下：

import { Grid } from 'react-virtualized';
const list = [
  ['Jony yu', 'Software Engineer', 'Shenzhen', 'CHINA', 'GUANGZHOU'],
  ['Jony yu', 'Software Engineer', 'Shenzhen', 'CHINA', 'GUANGZHOU'],
  ['Jony yu', 'Software Engineer', 'Shenzhen', 'CHINA', 'GUANGZHOU'],
  ['Jony yu', 'Software Engineer', 'Shenzhen', 'CHINA', 'GUANGZHOU'],
  ['Jony yu', 'Software Engineer', 'Shenzhen', 'CHINA', 'GUANGZHOU'],
  ['Jony yu', 'Software Engineer', 'Shenzhen', 'CHINA', 'GUANGZHOU']
];

function cellRenderer ({ columnIndex, key, rowIndex, style }) {
  return (
    <div
      key={key}
      style={style}
    >
      {list[rowIndex][columnIndex]}
    </div>
  )
}
render(
  <Grid
   cellRenderer={cellRenderer}
   columnCount={list[0].length}
   columnWidth={100}
   height={300}
   rowCount={list.length}
   rowHeight={80}
   width={300}
  />,
  rootEl
);

显示的效果如下图所示：

渲染网格也是只渲染可视区的dom节点，有个有趣的现象是滚动条的大小，这里Grid做了一个细节优化，只有滚动的时候才会显示滚动条，停止滚动后会隐藏滚动条。

(2)List

接着来举例说明一下List的使用：

import { List } from 'react-virtualized';
import  loremIpsum from "lorem-ipsum"
const rowCount = 1000;
const list = Array(rowCount).fill().map(()=>{
  return loremIpsum({
        count: 1,
        units: 'sentences',
        sentenceLowerBound: 3,
        sentenceUpperBound: 3
      }
})
function rowRenderer ({
  key,         
  index,      
  isScrolling, 
  isVisible,   
  style      
}) {
  return (
    <div
      key={key}
      style={style}
    >
      {list[index]}
    </div>
  )
}
export default class TestList extends Component{
  render(){
    return <div style={{height:"300px",width:"200px"}}>
            <List
              width={300}
              height={300}
              rowCount={list.length}
              rowHeight={20}
              rowRenderer={rowRenderer}
             />
          </div>
  }
}

List的使用方法也是极简，指定列表总条数rowCount，每一条的高度rowHeight以及每次渲染的函数rowRenderer，就可以构建一个渲染列表。具体的效果如下图所示：

2、react-virtualized高阶组件的使用

结合List来看看react-virtualized高阶组件的使用。

(1)AutoSizer

首先来看使用不使用AutoSizer的缺点，如下图所示，List只能指定固定的大小，如果其所在的父元素的大小resize了，那么List是不会主动填满父元素的可视区的：

从上图可以看出来，List是无法自动填充父元素的。因此我们这里需要使用AutoSizer。AutoSizer的使用也很简单，我们只需要在List的基础上：

class TestList extends Component{
  render(){
    return <div>
             <AutoSizer>
              {({ height, width }) => (
                <List
                  height={height}
                  rowCount={list.length}
                  rowHeight={20}
                  rowRenderer={rowRenderer}
                  width={width}
                />
              )}
            </AutoSizer>
          </div>
  }
}

效果如下图所示：

上述可以看出来增加了AutoSizer可以动态的适应父元素宽度和高度的变化。

但是也存在一个问题：

子元素太长，换行后改变了子元素的高度后无法子适应，也就是说仅仅通过基础的组件List是不支持子元素的高度动态改变的场景。

(2)CellMeasurer

为了解决上述的子元素可以动态变化的问题，我们可以利用高阶组件CellMeasurer：

import { List,AutoSizer,CellMeasurer, CellMeasurerCache} from 'react-virtualized';
const cache = new CellMeasurerCache({ defaultHeight: 30,fixedWidth: true});
function cellRenderer ({ index, key, parent, style }) {
  console.log(index)

  return (
    <CellMeasurer
      cache={cache}
      columnIndex={0}
      key={key}
      parent={parent}
      rowIndex={index}
    >
      <div
        style={style}
      >
        {list[index]}
      </div>
    </CellMeasurer>
  );
}

对于需要渲染的List，如下所示：

class TestList extends Component{
  render(){
    return <div>
             <AutoSizer>
              {({ height, width }) => (
                <List
                  height={height}
                  rowCount={list.length}
                  rowHeight={cache.rowHeight}
                  deferredMeasurementCache={cache}
                  rowRenderer={cellRenderer}
                  width={width}
                />
              )}
            </AutoSizer>
          </div>
  }
}

最后的结果如下所示：

上图我们看出来，子列表元素的高度可以动态变化，通过CellMeasurer可以实现子元素的动态高度。

(3)InfiniteLoader

最后我们来考虑这种无限滚动的场景，很多情况下我们可能需要分页加载，就是常见的在可视区内无限滚动的场景。react-virtualized提供了一个高阶组件InfiniteLoader用于实现无限滚动。

InfiniteLoader的使用很简单，只要按着文档来即可，就是分页的去在家下一页，滚动分页所调用的函数为：

function loadMoreRows ({ startIndex, stopIndex }) {
  return new Promise(function(resolve,reject){
    resolve()
  }).then(function(){
    //模拟ajax请求
    let temList = Array(10).fill(1).map(()=>{
      return loremIpsum({
            count: 1,
            units: 'sentences',
            sentenceLowerBound:3,
            sentenceUpperBound:3
        })
    })
    list = list.concat(temList)
  })
}

最后的效果如下：

看起来跟基础组件List一样，其实唯一的区别就是会在滚动的时候自动执行loadMoreRows函数去更新list

(4)总结

通过基础组件Grid、List以及高阶组件AutoSizer、CellMeasurer和InfiniteLoader，已经可以构建出比较复杂的场景，但是有一个缺陷，就是CellMeasurer虽说一定程度上支持动态子元素的高度的变化，其实是一种估算，存在很多边界情况，无法适应于动态元素的场景，特别是文本节点较多导致的高度变化。但是对于图片节点的动态高度支持没有很大的问题。

举例一种边界情况，CellMeasurer无法支持文本动态高度的情况：

从上图可以看到，慢慢缩小的过程中，如果缩的太小，并没有动态的撑大子元素的高度，出现了文字的重叠。

四、通过react-tiny-virtual-list来优化长列表

react-tiny-virtual-list是一个较为轻量的实现虚拟列表的组件，不同于react-virtualized支持网格以及表格等渲染优化。
react-tiny-virtual-list只支持列表，使用方便，其源码也只有700多行。

使用极其简单：

import VirtualList from 'react-tiny-virtual-list';
const data = ['A', 'B', 'C', 'D', 'E', 'F','A', 'B', 'C',
'D', 'E', 'F','A', 'B', 'C', 'D', 'E', 'F',
'A', 'B', 'C', 'D', 'E', 'F'];
export default class TinyVirtual extends Component {
  render(){
    return <VirtualList
            width='100%'
            height={200}
            itemCount={data.length}
            itemSize={50} // Also supports variable heights (array or function getter)
            renderItem={({index, style}) =>
              <div key={index} style={style}>
                // The style property contains the item's absolute position Letter: {data[index]}, Row: #{index}
              </div>
            }
            />
  }
}

最后的渲染结果也是相似的，也可以支持无限滚动等等。

但是react-tiny-virtual-list有一个致命的缺点：

完全不支持子元素的动态高度或者宽度

五、总结

本文介绍了虚拟列表的优化的原理，以及常用的React可以优化虚拟列表的组件库。在接下来的文章中，会具体的介绍react-tiny-virtual-list和react-virtualized的源码，敬请期待。

前端面试总结——基础javascript篇

js是前端开发人员必须熟练掌握的技能，这里概括js的一些必须了解的理论知识：

• 梳理js基础知识
• 查漏补缺

1. get请求传参长度的误区

误区：我们经常说get请求参数的大小存在限制，而post请求的参数大小是无限制的。

实际上HTTP 协议从未规定 GET/POST 的请求长度限制是多少。对get请求参数的限制是来源与浏览器或web服务器，浏览器或web服务器限制了url的长度。为了明确这个概念，我们必须再次强调下面几点:

• HTTP 协议 未规定 GET 和POST的长度限制
• GET的最大长度显示是因为 浏览器和 web服务器限制了 URI的长度
• 不同的浏览器和WEB服务器，限制的最大长度不一样
• 要支持IE，则最大长度为2083byte，若只支持Chrome，则最大长度 8182byte

2. 补充get和post请求在缓存方面的区别

post/get的请求区别，具体不再赘述。

补充补充一个get和post在缓存方面的区别：

• get请求类似于查找的过程，用户获取数据，可以不用每次都与数据库连接，所以可以使用缓存。
• post不同，post做的一般是修改和删除的工作，所以必须与数据库交互，所以不能使用缓存。因此get请求适合于请求缓存。

3. 闭包

一句话可以概括：闭包就是能够读取其他函数内部变量的函数，或者子函数在外调用，子函数所在的父函数的作用域不会被释放。

4. 类的创建和继承

（1）类的创建（es5）：new一个function，在这个function的prototype里面增加属性和方法。

下面来创建一个Animal类：

// 定义一个动物类
function Animal (name) {
  // 属性
  this.name = name || 'Animal';
  // 实例方法
  this.sleep = function(){
    console.log(this.name + '正在睡觉！');
  }
}
// 原型方法
Animal.prototype.eat = function(food) {
  console.log(this.name + '正在吃：' + food);
};

这样就生成了一个Animal类，实力化生成对象后，有方法和属性。

（2）类的继承——原型链继承

--原型链继承
function Cat(){ }
Cat.prototype = new Animal();
Cat.prototype.name = 'cat';
//　Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.eat('fish'));
console.log(cat.sleep());
console.log(cat instanceof Animal); //true 
console.log(cat instanceof Cat); //true

• 介绍：在这里我们可以看到new了一个空对象,这个空对象指向Animal并且Cat.prototype指向了这个空对象，这种就是基于原型链的继承。
• 特点：基于原型链，既是父类的实例，也是子类的实例
• 缺点：无法实现多继承

（3）构造继承：使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类（没用到原型）

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}
// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true

• 特点：可以实现多继承
• 缺点：只能继承父类实例的属性和方法，不能继承原型上的属性和方法。

（4）实例继承和拷贝继承

实例继承：为父类实例添加新特性，作为子类实例返回

拷贝继承：拷贝父类元素上的属性和方法

上述两个实用性不强，不一一举例。

（5）组合继承：相当于构造继承和原型链继承的组合体。通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}
Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;
// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // true

• 特点：可以继承实例属性/方法，也可以继承原型属性/方法
• 缺点：调用了两次父类构造函数，生成了两份实例

（6）寄生组合继承：通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}
(function(){
  // 创建一个没有实例方法的类
  var Super = function(){};
  Super.prototype = Animal.prototype;
  //将实例作为子类的原型
  Cat.prototype = new Super();
})();
// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); //true

• 较为推荐

5. 如何解决异步回调地狱

promise、generator、async/await

6. 说说前端中的事件流

HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件onclick、页面的滚动事件onscroll等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念。

什么是事件流：事件流描述的是从页面中接收事件的顺序,DOM2级事件流包括下面几个阶段。

• 事件捕获阶段
• 处于目标阶段
• 事件冒泡阶段

addEventListener：addEventListener 是DOM2 级事件新增的指定事件处理程序的操作，这个方法接收3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。

IE只支持事件冒泡。

7. 如何让事件先冒泡后捕获

在DOM标准事件模型中，是先捕获后冒泡。但是如果要实现先冒泡后捕获的效果，对于同一个事件，监听捕获和冒泡，分别对应相应的处理函数，监听到捕获事件，先暂缓执行，直到冒泡事件被捕获后再执行捕获之间。

8. 事件委托

• 简介：事件委托指的是，不在事件的发生地（直接dom）上设置监听函数，而是在其父元素上设置监听函数，通过事件冒泡，父元素可以监听到子元素上事件的触发，通过判断事件发生元素DOM的类型，来做出不同的响应。

• 举例：最经典的就是ul和li标签的事件监听，比如我们在添加事件时候，采用事件委托机制，不会在li标签上直接添加，而是在ul父元素上添加。

• 好处：比较合适动态元素的绑定，新添加的子元素也会有监听函数，也可以有事件触发机制。

9. 图片的懒加载和预加载

• 预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。

• 懒加载：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。

两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。
懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

10. mouseover和mouseenter的区别

• mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡的过程。对应的移除事件是mouseout

• mouseenter：当鼠标移除元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡，对应的移除事件是mouseleave

11. js的new操作符做了哪些事情

new 操作符新建了一个空对象，这个对象原型指向构造函数的prototype，执行构造函数后返回这个对象。

12.改变函数内部this指针的指向函数（bind，apply，call的区别）

• 通过apply和call改变函数的this指向，他们两个函数的第一个参数都是一样的表示要改变指向的那个对象，第二个参数，apply是数组，而call则是arg1,arg2...这种形式。

• 通过bind改变this作用域会返回一个新的函数，这个函数不会马上执行。

13. js的各种位置，比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别？

• clientHeight：表示的是可视区域的高度，不包含border和滚动条

• offsetHeight：表示可视区域的高度，包含了border和滚动条

• scrollHeight：表示了所有区域的高度，包含了因为滚动被隐藏的部分。

• clientTop：表示边框border的厚度，在未指定的情况下一般为0

• scrollTop：滚动后被隐藏的高度，获取对象相对于由offsetParent属性指定的父坐标(css定位的元素或body元素)距离顶端的高度。

14. js拖拽功能的实现

• 首先是三个事件，分别是mousedown，mousemove，mouseup
  当鼠标点击按下的时候，需要一个tag标识此时已经按下，可以执行mousemove里面的具体方法。

• clientX，clientY标识的是鼠标的坐标，分别标识横坐标和纵坐标，并且我们用offsetX和offsetY来表示元素的元素的初始坐标，移动的举例应该是：

  鼠标移动时候的坐标-鼠标按下去时候的坐标。

  也就是说定位信息为：

  鼠标移动时候的坐标-鼠标按下去时候的坐标+元素初始情况下的offetLeft.

• 还有一点也是原理性的东西，也就是拖拽的同时是绝对定位，我们改变的是绝对定位条件下的left
  以及top等等值。

补充：也可以通过html5的拖放（Drag 和 drop）来实现

15. 异步加载js的方法

• defer：只支持IE如果您的脚本不会改变文档的内容，可将 defer 属性加入到<script>标签中，以便加快处理文档的速度。因为浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本，它将推迟对脚本的解释，直到文档已经显示给用户为止。

• async，HTML5属性仅适用于外部脚本，并且如果在IE中，同时存在defer和async，那么defer的优先级比较高，脚本将在页面完成时执行。

• 创建script标签，插入到DOM中

16. Ajax 解决浏览器缓存问题

• 在ajax发送请求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0")。

• 在ajax发送请求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache")。

• 在URL后面加上一个随机数： "fresh=" + Math.random()。

• 在URL后面加上时间搓："nowtime=" + new Date().getTime()。

• 如果是使用jQuery，直接这样就可以了 $.ajaxSetup({cache:false})。这样页面的所有ajax都会执行这条语句就是不需要保存缓存记录。

17. js的节流和防抖

http://www.cnblogs.com/coco1s/p/5499469.html

18. JS中的垃圾回收机制

必要性：由于字符串、对象和数组没有固定大小，所有当他们的大小已知时，才能对他们进行动态的存储分配。JavaScript程序每次创建字符串、数组或对象时，解释器都必须分配内存来存储那个实体。只要像这样动态地分配了内存，最终都要释放这些内存以便他们能够被再用，否则，JavaScript的解释器将会消耗完系统中所有可用的内存，造成系统崩溃。

这段话解释了为什么需要系统需要垃圾回收，JS不像C/C++，他有自己的一套垃圾回收机制（Garbage Collection）。JavaScript的解释器可以检测到何时程序不再使用一个对象了，当他确定了一个对象是无用的时候，他就知道不再需要这个对象，可以把它所占用的内存释放掉了。例如：

var a="hello world";
var b="world";
var a=b;
//这时，会释放掉"hello world"，释放内存以便再引用

垃圾回收的方法：标记清除、计数引用。

• 标记清除

这是最常见的垃圾回收方式，当变量进入环境时，就标记这个变量为”进入环境“,从逻辑上讲，永远不能释放进入环境的变量所占的内存，永远不能释放进入环境变量所占用的内存，只要执行流程进入相应的环境，就可能用到他们。当离开环境时，就标记为离开环境。

垃圾回收器在运行的时候会给存储在内存中的变量都加上标记（所有都加），然后去掉环境变量中的变量，以及被环境变量中的变量所引用的变量（条件性去除标记），删除所有被标记的变量，删除的变量无法在环境变量中被访问所以会被删除，最后垃圾回收器，完成了内存的清除工作，并回收他们所占用的内存。

• 引用计数法

另一种不太常见的方法就是引用计数法，引用计数法的意思就是每个值没引用的次数，当声明了一个变量，并用一个引用类型的值赋值给改变量，则这个值的引用次数为1,；相反的，如果包含了对这个值引用的变量又取得了另外一个值，则原先的引用值引用次数就减1，当这个值的引用次数为0的时候，说明没有办法再访问这个值了，因此就把所占的内存给回收进来，这样垃圾收集器再次运行的时候，就会释放引用次数为0的这些值。

用引用计数法会存在内存泄露，下面来看原因：

function problem() {
    var objA = new Object();
    var objB = new Object();
    objA.someOtherObject = objB;
    objB.anotherObject = objA;
}

在这个例子里面，objA和objB通过各自的属性相互引用，这样的话，两个对象的引用次数都为2，在采用引用计数的策略中，由于函数执行之后，这两个对象都离开了作用域，函数执行完成之后，因为计数不为0，这样的相互引用如果大量存在就会导致内存泄露。

特别是在DOM对象中，也容易存在这种问题：

var element=document.getElementById（’‘）；
var myObj=new Object();
myObj.element=element;
element.someObject=myObj;

这样就不会有垃圾回收的过程。

19.eval是做什么的

它的功能是将对应的字符串解析成js并执行，应该避免使用js，因为非常消耗性能（2次，一次解析成js，一次执行）

20.如何理解前端模块化

前端模块化就是复杂的文件编程一个一个独立的模块，比如js文件等等，分成独立的模块有利于重用（复用性）和维护（版本迭代），这样会引来模块之间相互依赖的问题，所以有了commonJS规范，AMD，CMD规范等等，以及用于js打包（编译等处理）的工具webpack

21.Commonjs、 AMD和CMD

一个模块是能实现特定功能的文件，有了模块就可以方便的使用别人的代码，想要什么功能就能加载什么模块。

• Commonjs：开始于服务器端的模块化，同步定义的模块化，每个模块都是一个单独的作用域，模块输出，modules.exports，模块加载require()引入模块。
• AMD：中文名异步模块定义的意思。

requireJS实现了AMD规范，主要用于解决下述两个问题。

1.多个文件有依赖关系，被依赖的文件需要早于依赖它的文件加载到浏览器

2.加载的时候浏览器会停止页面渲染，加载文件越多，页面失去响应的时间越长。

语法：requireJS定义了一个函数define，它是全局变量，用来定义模块。

requireJS的例子：

//定义模块
define(['dependency'], function(){
        var name = 'Byron';
        function printName(){
            console.log(name);
        }
        return {
            printName: printName
        };
   });
//加载模块
require(['myModule'], function (my){
 my.printName();
}

requirejs定义了一个函数define,它是全局变量，用来定义模块：

define(id?dependencies?,factory)

在页面上使用模块加载函数：

require([dependencies],factory)；

总结AMD规范：require（）函数在加载依赖函数的时候是异步加载的，这样浏览器不会失去响应，它指定的回调函数，只有前面的模块加载成功，才会去执行。
因为网页在加载js的时候会停止渲染，因此我们可以通过异步的方式去加载js,而如果需要依赖某些，也是异步去依赖，依赖后再执行某些方法。

22.对象深度克隆的简单实现

function deepClone(obj){
  var newObj= obj instanceof Array ? []:{};
  for(var item in obj){
    var temple= typeof obj[item] == 'object' ? deepClone(obj[item]):obj[item];
    newObj[item] = temple;
  }
  return newObj;
}

ES5的常用的对象克隆的一种方式。注意数组是对象，但是跟对象又有一定区别，所以我们一开始判断了一些类型，决定newObj是对象还是数组~

23.实现一个once函数，传入函数参数只执行一次

function ones(func){
    var tag=true;
    return function(){
      if(tag==true){
        func.apply(null,arguments);
        tag=false;
      }
      return undefined
    }
}

24.将原生的ajax封装成promise

var  myNewAjax=function(url){
  return new Promise(function(resolve,reject){
      var xhr = new XMLHttpRequest();
      xhr.open('get',url);
      xhr.send(data);
      xhr.onreadystatechange=function(){
           if(xhr.status==200&&readyState==4){
                var json=JSON.parse(xhr.responseText);
                resolve(json)
           }else if(xhr.readyState==4&&xhr.status!=200){
                reject('error');
           }
      }
  })
}

25.js监听对象属性的改变

我们假设这里有一个user对象,

(1)在ES5中可以通过Object.defineProperty来实现已有属性的监听

Object.defineProperty(user,'name',{
    set：function(key,value){
       
    }
})

缺点：如果id不在user对象中，则不能监听id的变化

(2)在ES6中可以通过Proxy来实现

var  user = new Proxy({}，{
 set：function(target,key,value,receiver){

  }
})

这样即使有属性在user中不存在，通过user.id来定义也同样可以这样监听这个属性的变化哦~

26.如何实现一个私有变量，用getName方法可以访问，不能直接访

(1)通过defineProperty来实现

obj={
  name:yuxiaoliang,
  getName:function(){
    return this.name
  }
}
object.defineProperty(obj,"name",{
   //不可枚举不可配置
});

(2)通过函数的创建形式

function product(){
    var name='yuxiaoliang';
    this.getName=function(){
      return name;
    }
}
var obj=new product();

27. ==和===、以及Object.is的区别

(1) ==

主要存在：强制转换成number,null==undefined

" "==0  //true
"0"==0  //true
" " !="0" //true
123=="123" //true
null==undefined //true

(2)Object.js

主要的区别就是+0！=-0 而NaN==NaN
(相对比===和==的改进)

28.setTimeout、setInterval和requestAnimationFrame之间的区别

这里有一篇文章讲的是requestAnimationFrame：http://www.cnblogs.com/xiaohuochai/p/5777186.html
与setTimeout和setInterval不同，requestAnimationFrame不需要设置时间间隔，
大多数电脑显示器的刷新频率是60Hz，大概相当于每秒钟重绘60次。大多数浏览器都会对重绘操作加以限制，不超过显示器的重绘频率，因为即使超过那个频率用户体验也不会有提升。因此，最平滑动画的最佳循环间隔是1000ms/60，约等于16.6ms。

RAF采用的是系统时间间隔，不会因为前面的任务，不会影响RAF，但是如果前面的任务多的话，
会响应setTimeout和setInterval真正运行时的时间间隔。

特点：
（1）requestAnimationFrame会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率。

（2）在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的CPU、GPU和内存使用量

（3）requestAnimationFrame是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销。

从路由原理出发，深入阅读理解react-router 4.0的源码

  react-router等前端路由的原理大致相同，可以实现无刷新的条件下切换显示不同的页面。路由的本质就是页面的URL发生改变时，页面的显示结果可以根据URL的变化而变化，但是页面不会刷新。通过前端路由可以实现单页(SPA)应用,本文首先从前端路由的原理出发，详细介绍了前端路由原理的变迁。接着从react-router4.0的源码出发，深入理解react-router4.0是如何实现前端路由的。

• 通过Hash实现前端路由
• 通过H5的history实现前端路由
• React-router4.0的使用
• React-router4.0源码分析

一、通过Hash实现前端路由

1、hash的原理

  早期的前端路由是通过hash来实现的：

改变url的hash值是不会刷新页面的。

  因此可以通过hash来实现前端路由，从而实现无刷新的效果。hash属性位于location对象中，在当前页面中，可以通过：

window.location.hash='edit'

来实现改变当前url的hash值。执行上述的hash赋值后，页面的url发生改变。

赋值前：http://localhost:3000
赋值后：http://localhost:3000/#edit

在url中多了以#结尾的hash值，但是赋值前后虽然页面的hash值改变导致页面完整的url发生了改变，但是页面是不会刷新的。此外，还有一个名为hashchange的事件，可以监听hash的变化,我们可以通过下面两种方式来监听hash的变化：

window.onhashchange=function(event){
   console.log(event);
}
window.addEventListener('hashchange',function(event){
   console.log(event);
})

当hash值改变时，输出一个HashChangeEvent。该HashChangeEvent的具体值为：

{isTrusted: true, oldURL: "http://localhost:3000/", newURL:   "http://localhost:3000/#teg", type: "hashchange".....}

  有了监听事件，且改变hash页面不刷新，这样我们就可以在监听事件的回调函数中，执行我们展示和隐藏不同UI显示的功能，从而实现前端路由。

此外，除了可以通过window.location.hash来改变当前页面的hash值外，还可以通过html的a标签来实现：

<a href="#edit">edit</a>

2、hash的缺点

hash的兼容性较好，因此在早期的前端路由中大量的采用，但是使用hash也有很多缺点。

• 搜索引擎对带有hash的页面不友好
• 带有hash的页面内难以追踪用户行为

二、通过history实现前端路由

HTML5的History接口，History对象是一个底层接口，不继承于任何的接口。History接口允许我们操作浏览器会话历史记录。

(1)History的属性和方法

History提供了一些属性和方法。

History的属性：

• History.length: 返回在会话历史中有多少条记录，包含了当前会话页面。此外如果打开一个新的Tab，那么这个length的值为1
• History.state:
  保存了会出发popState事件的方法，所传递过来的属性对象（后面会在pushState和replaceState方法中详细的介绍）

History方法：

• History.back(): 返回浏览器会话历史中的上一页，跟浏览器的回退按钮功能相同

• History.forward():指向浏览器会话历史中的下一页，跟浏览器的前进按钮相同

• History.go(): 可以跳转到浏览器会话历史中的指定的某一个记录页

• History.pushState():pushState可以将给定的数据压入到浏览器会话历史栈中，该方法接收3个参数，对象，title和一串url。pushState后会改变当前页面url，但是不会伴随着刷新

• History.replaceState():replaceState将当前的会话页面的url替换成指定的数据，replaceState后也会改变当前页面的url，但是也不会刷新页面。

上面的方法中，pushState和repalce的相同点：

就是都会改变当前页面显示的url，但都不会刷新页面。

不同点：

pushState是压入浏览器的会话历史栈中，会使得History.length加1，而replaceState是替换当前的这条会话历史，因此不会增加History.length.

(2)BOM对象history

history在浏览器的BOM对象模型中的重要属性，history完全继承了History接口，因此拥有History中的所有的属性和方法。

这里我们主要来看看history.length属性以及history.pushState、history.replaceState方法。

• history.pushState(stateObj,title,url) or history.replaceState(stateObj,title,url)

pushState和replaceState接受3个参数，分别为state对象，title标题，改变的url。

window.history.pushState({foo:'bar'}, "page 2", "bar.html");

此时，当前的url变为：

执行上述方法前：http://localhost:3000
执行上述方法后：http://localhost:3000/bar.html

如果我们输出window.history.state:

console.log(window.history.state);
// {foo:'bar'}

window.history.state就是我们pushState的第一个对象参数。

• history.replaceState()方法不会改变hitroy的长度

    console.log(window.history.length);
    window.history.replaceState({foo:'bar'}, "page 2", "bar.html");
    console.log(window.history.length);
  

上述前后两次输出的window.history.length是相等的。

此外。

每次触发history.back()或者浏览器的后退按钮等，会触发一个popstate事件，这个事件在后退或者前进的时候发生：

window.onpopstate=function(event){

}

注意：
history.pushState和history.replaceState方法并不会触发popstate事件。

如果用history做为路由的基础，那么需要用到的是history.pushState和history.replaceState,在不刷新的情况下可以改变url的地址，且如果页面发生回退back或者forward时，会触发popstate事件。

hisory为依据来实现路由的优点：

• 对搜索引擎友好
• 方便统计用户行为

缺点：

• 兼容性不如hash
• 需要后端做相应的配置，否则直接访问子页面会出现404错误

三、React-router4.0的使用

了解了前端路由实现的原理之后，下面来介绍一下React-router4.0。在React-router4.0的代码库中，根据使用场景包含了以下几个独立的包：

• react-router : react-router4.0的核心代码
• react-router-dom : 构建网页应用，存在DOM对象场景下的核心包
• react-router-native : 适用于构建react-native应用
• react-router-config : 配置静态路由
• react-router-redux : 结合redux来配置路由，已废弃，不推荐使用。

在react-router4.0中，遵循Just Component的设计理念：

所提供的API都是以组件的形式给出。

比如BrowserRouter、Router、Link、Switch等API都是以组件的形式来使用。

1、React-router-dom常用的组件API

下面我们以React-router4.0中的React-router-dom包来介绍常用的BrowserRouter、HashRouter、Link和Router等。

(1) <BrowserRouter>

用<BrowserRouter> 组件包裹整个App系统后，就是通过html5的history来实现无刷新条件下的前端路由。

<BrowserRouter>组件具有以下几个属性：

• basename: string 这个属性，是为当前的url再增加名为basename的值的子目录。

    <BrowserRouter basename="test"/>
  

如果设置了basename属性，那么此时的：

http://localhost:3000 和 http://localhost:3000/test 表示的是同一个地址，渲染的内容相同。

• getUserConfirmation: func 这个属性，用于确认导航的功能。默认使用window.confirm

• forceRefresh: bool 默认为false，表示改变路由的时候页面不会重新刷新，如果当前浏览器不支持history，那么当forceRefresh设置为true的时候，此时每次去改变url都会重新刷新整个页面。

• keyLength: number 表示location的key属性的长度，在react-router中每个url下都有为一个location与其对应，并且每一个url的location的key值都不相同，这个属性一般都使用默认值，设置的意义不大。

• children: node children的属性必须是一个ReactNode节点，表示唯一渲染一个元素。

与<BrowserRouter>对应的是<HashRouter>,<HashRouter>使用url中的hash属性来保证不重新刷新的情况下同时渲染页面。

(2) <Route>

<Route> 组件十分重要，<Route> 做的事情就是匹配相应的location中的地址，匹配成功后渲染对应的组件。下面我们来看<Route>中的属性。

首先来看如何执行匹配，决定<Route>地址匹配的属性：

• path：当location中的url改变后，会与Route中的path属性做匹配，path决定了与路由或者url相关的渲染效果。

• exact: 如果有exact，只有url地址完全与path相同，才会匹配。如果没有exact属性，url的地址不完全相同，也会匹配。

举例来说，当exact不设置时：

<Route  path='/home' component={Home}/> 
<Route  path='/home/first' component={First}/> 

此时url地址为：http://localhost:3000/home/first 的时候，不仅仅会匹配到 path='/home/first'时的组件First,同时还会匹配到path='home'时候的Router。

如果设置了exact：

 <Route  path='/home' component={Home}/> 

只有http://localhost:3000/home/first 不会匹配Home组件，只有url地址完全与path相同，只有http://localhost:3000/home才能匹配Home组件成功。

• strict ：与exact不同，strict属性仅仅是对exact属性的一个补充，设置了strict属性后，严格限制了但斜线“／”。

举例来说,当不设置strict的时候：

 <Route  path='/home/' component={Home}/> 

此时http://localhost:3000/home 和 http://localhost:3000/home/
都能匹配到组件Home。匹配对于斜线“/”比较宽松。如果设置了strict属性：

<Route  path='/home/' component={Home}/> 

那么此时严格匹配斜线是否存在，http://localhost:3000/home 将无法匹配到Home组件。

当Route组件与某一url匹配成功后，就会继续去渲染。那么什么属性决定去渲染哪个组件或者样式呢，Route的component、render、children决定渲染的内容。

• component：该属性接受一个React组件，当url匹配成功，就会渲染该组件
• render：func 该属性接受一个返回React Element的函数，当url匹配成功，渲染覆该返回的元素
• children：与render相似，接受一个返回React Element的函数，但是不同点是，无论url与当前的Route的path匹配与否，children的内容始终会被渲染出来。

并且这3个属性所接受的方法或者组件，都会有location，match和history这3个参数。如果组件，那么组件的props中会存在从Link传递过来的location，match以及history。

(3) <Link>

<Route>定义了匹配规则和渲染规则，而<Link> 决定的是如何在页面内改变url，从而与相应的<Route>匹配。<Link>类似于html中的a标签，此外<Link>在改变url的时候，可以将一些属性传递给匹配成功的Route，供相应的组件渲染的时候使用。

• to: string
  to属性的值可以为一个字符串，跟html中的a标签的href一样，即使to属性的值是一个字符串，点击Link标签跳转从而匹配相应path的Route，也会将history，location，match这3个对象传递给Route所对应的组件的props中。

举例来说：

<Link to='/home'>Home</Link>

如上所示，当to接受一个string，跳转到url为'/home'所匹配的Route，并渲染其关联的组件内接受3个对象history，location，match。
这3个对象会在下一小节会详细介绍。

• to: object
  to属性的值也可以是一个对象，该对象可以包含一下几个属性：pathname、seacth、hash和state，其中前3个参数与如何改变url有关，最后一个state参数是给相应的改变url时，传递一个对象参数。

举例来说：

 <Link to={{pathname:'/home',search:'?sort=name',hash:'#edit',state:{a:1}}}>Home</Link>

在上个例子中，to为一个对象，点击Link标签跳转后，改变后的url为：'/home?sort=name#edit'。 但是在与相应的Route匹配时，只匹配path为'/home'的组件，'/home?sort=name#edit'。在'/home'后所带的参数不作为匹配标准，仅仅是做为参数传递到所匹配到的组件中，此外，state={a:1}也同样做为参数传递到新渲染的组件中。

(4) React-router中传递给组件props的history对象

介绍了 <BrowserRouter> 、 <Route> 和 <Link> 之后，使用这3个组件API就可以构建一个简单的React-router应用。这里我们之前说，每当点击Link标签跳转或者在js中使用React-router的方法跳转，从当前渲染的组件，进入新组件。在新组件被渲染的时候，会接受一个从旧组件传递过来的参数。

我们前面提到，Route匹配到相应的改变后的url，会渲染新组件，该新组件中的props中有history、location、match3个对象属性，其中hisotry对象属性最为关键。

同样以下面的例子来说明：

<Link to={{pathname:'/home',search:'?sort=name',hash:'#edit',state:{a:1}}}>Home</Link>

<Route exact path='/home' component={Home}/>

我们使用了<BrowserRouter>，该组件利用了window.history对象，当点击Link标签跳转后，会渲染新的组件Home，我们可以在Home组件中输出props中的history：

// props中的history
action: "PUSH"
block: ƒ block()
createHref: ƒ createHref(location)
go: ƒ go(n)
goBack: ƒ goBack()
goForward: ƒ goForward()
length: 12
listen: ƒ listen(listener)
location: {pathname: "/home", search: "?sort=name", hash: "#edit", state: {…}, key: "uxs9r5"}
push: ƒ push(path, state)
replace: ƒ replace(path, state)

从上面的属性明细中：

• push:f 这个方法用于在js中改变url，之前在Link组件中可以类似于HTML标签的形式改变url。push方法映射于window.history中的pushState方法。

• replace: f 这个方法也是用于在js中改变url，replace方法映射于window.history中的replaceState方法。

• block：f 这个方法也很有用，比如当用户离开当前页面的时候，给用户一个文字提示，就可以采用history.block("你确定要离开当前页吗？")这样的提示。

• go / goBack / goForward

在组件props中history的go、goBack、goForward方法，分别window.history.go、window.history.back、window.history.forward对应。

• action: "PUSH" || "POP"
  action这个属性左右很大，如果是通过Link标签或者在js中通过this.props.push方法来改变当前的url，那么在新组件中的action就是"PUSH",否则就是"POP".

action属性很有用，比如我们在做翻页动画的时候，前进的动画是SlideIn，后退的动画是SlideOut，我们可以根据组件中的action来判断采用何种动画：

function newComponent (props)=>{
   return (
     <ReactCSSTransitionGroup
          transitionAppear={true}
          transitionAppearTimeout={600}
          transitionEnterTimeout={600}
          transitionLeaveTimeout={200}
          transitionName={props.history.action==='PUSH'?'SlideIn':'SlideOut'}
         >
           <Component {...props}/>
    </ReactCSSTransitionGroup>
   )
}

• location:object
  在新组件的location属性中，就记录了从就组件中传递过来的参数，从上面的例子中，我们看到此时的location的值为：

    hash: "#edit"
    key: "uxs9r5"
    pathname: "/home"
    search: "?sort=name"
    state: {a:1}
  

除了key这个用作唯一表示外，其他的属性都是我们从上一个Link标签中传递过来的参数。

四、React-router4.0源码分析

在第三节中我们介绍了React-router的大致使用方法，读一读React-router4.0的源码。

这里我们主要分析一下React-router4.0中是如何根据window.history来实现前端路由的，因此设计到的组件为BrowserRouter、Router、Route和Link

1、React-router中的history

从上一节的介绍中我们知道，点击Link标签传递给新渲染的组件的props中有一个history对象，这个对象的内容很丰富，比如：action、goBack、go、location、push和replace方法等。

React-router构建了一个History类，用于在window.history的基础上，构建属性更为丰富的实例。该History类实例化后具有action、goBack、location等等方法。

React-router中将这个新的History类的构建方法，独立成一个node包，包名为history。

npm install history -s 

可以通过上述方法来引入，我们来看看这个History类的实现。

const createBrowserHistory = (props = {}) => {
    const globalHistory = window.history;
    ......
    //默认props中属性的值
    const {
      forceRefresh = false,
      getUserConfirmation = getConfirmation,
      keyLength = 6,
      basename = '',
    } = props;
    const history = {
        length: globalHistory.length,
        action: "POP",
        location: initialLocation,
        createHref,
        push,
        replace,
        go,
        goBack,
        goForward,
        block,
        listen
    };                                         ---- (1)
    const basename = props.basename;   
    const canUseHistory = supportsHistory();   ----（2)
            
    const createKey = () =>Math.random().toString(36).substr(2, keyLength);    ----（3）
    
    const transitionManager = createTransitionManager();  ----（4）
    const setState = nextState => {
        Object.assign(history, nextState);
    
        history.length = globalHistory.length;
    
        transitionManager.notifyListeners(history.location, history.action);
    };                                      ----（5）
    
    const handlePopState = event => {
        handlePop(getDOMLocation(event.state));
    };
    const handlePop = location => {
    if (forceNextPop) {
      forceNextPop = false;
      setState();
    } else {
      const action = "POP";
      
      transitionManager.confirmTransitionTo(
            location,
            action,
            getUserConfirmation,
            ok => {
              if (ok) {
                setState({ action, location });
              } else {
                revertPop(location);
              }
            }
          );
        }
    };                                    ------（6）
    const initialLocation = getDOMLocation(getHistoryState());
    let allKeys = [initialLocation.key]; ------（7）
    
  
    // 与pop相对应，类似的push和replace方法
    const push ... replace ...            ------(8)
    
    return history                        ------ （9）
    
}

• (1) 中指明了新的构建方法History所返回的history对象中所具有的属性。

• (2)中的supportsHistory的方法判断当前的浏览器对于window.history的兼容性，具体方法如下：

   export const supportsHistory = () => {
     const ua = window.navigator.userAgent;
   
     if (
       (ua.indexOf("Android 2.") !== -1 || ua.indexOf("Android 4.0") !== -1) &&
       ua.indexOf("Mobile Safari") !== -1 &&
       ua.indexOf("Chrome") === -1 &&
       ua.indexOf("Windows Phone") === -1
     )
       return false;
   
     return window.history && "pushState" in window.history;
   };
  

从上述判别式我们可以看出，window.history在chrome、mobile safari和windows phone下是绝对支持的，但不支持安卓2.x以及安卓4.0

• (3)中用于创建与history中每一个url记录相关联的指定位数的唯一标识key, 默认的keyLength为6位

• (4)中 createTransitionManager方法，返回一个集成对象，对象中包含了关于history地址或者对象改变时候的监听函数等，具体代码如下：

     const createTransitionManager = () => {
         const setPrompt = nextPrompt => {
           
         };
   
         const confirmTransitionTo = (
           location,
           action,
           getUserConfirmation,
           callback
         ) => {
            if (typeof getUserConfirmation === "function") {
                 getUserConfirmation(result, callback);
               } else {
                 callback(true);
               }
             } 
         };
         
         
         let listeners = [];
         const appendListener = fn => {
           let isActive = true;
       
           const listener = (...args) => {
             if (isActive) fn(...args);
           };
       
           listeners.push(listener);
       
           return () => {
             isActive = false;
             listeners = listeners.filter(item => item !== listener);
           };
         };
       
         const notifyListeners = (...args) => {
           listeners.forEach(listener => listener(...args));
         };
       
         return {
           setPrompt,
           confirmTransitionTo,
           appendListener,
           notifyListeners
         };
  

};

setPrompt函数，用于设置url跳转时弹出的文字提示，confirmTransaction函数，会将当前生成新的history对象中的location，action，callback等参数，作用就是在回调的callback方法中，根据要求，改变传入的location和action对象。

接着我们看到有一个listeners数组，保存了一系列与url相关的监听事件数组，通过接下来的appendListener方法，可以往这个数组中增加事件，通过notifyListeners方法可以遍历执行listeners数组中的所有事件。

• (5) setState方法，发生在history的url或者history的action发生改变的时候，此方法会更新history对象中的属性，同时会触发notifyListeners方法，传入当前的history.location和history.action。遍历并执行所有监听url改变的事件数组listeners。

• (6)这个getDOMLocation方法就是根据当前在window.state中的值，生成新history的location属性对象，allKeys这是始终保持了在url改变时候的历史url相关联的key，保存在全局，allKeys在执行生“POP”或者“PUSH”、“Repalce”等会改变url的方法时，会保持一个实时的更新。

• (7) handlePop方法，用于处理“POP”事件，我们知道在window.history中点击后退等会触发“POP”事件，这里也是一样，执行action为“POP”，当后退的时候就会触发该函数。

• (8)中包含了与pop方法类似的，push和replace方法，push方法同样做的事情就是执行action为“PUSH”（“REPLACE”），该变allKeys数组中的值，唯一不同的是actio为“PUSH”的方法push是往allKeys数组中添加，而action为“REPLACE”的方法replace则是替换掉当前的元素。

• (9)返回这个新生成的history对象。

2、React-router中Link组件

其实最难弄懂的是React-router中如何重新构建了一个history工厂函数，在第一小节中我们已经详细的介绍了history生成函数createBrowserHistory的源码，接着来看Link组件就很容易了。

首先Link组件类似于HTML中的a标签，目的也很简单，就是去主动触发改变url的方法，主动改变url的方法，从上述的history的介绍中可知为push和replace方法，因此Link组件的源码为：

class Link extends React.Component {

    
   handleClick = event => {
   ...

     const { history } = this.context.router;
     const { replace, to } = this.props;
     if (replace) {
       history.replace(replace);
     } else {
      history.push(to);
     }
   }
  };
  render(){
    const { replace, to, innerRef, ...props } = this.props;
     <a {...props} onClick={this.handleClick}/>
  }
}

上述代码很简单，从React的context API全局对象中拿到history，然后如果传递给Link组件的属性中有replace为true，则执行history.replace(to),to 是一个包含pathname的对象，如果传递给Link组件的replace属性为false，则执行history.push(to)方法。

3、React-router中Route组件

Route组件也很简单，其props中接受一个最主要的属性path，Route做的事情只有一件：

当url改变的时候，将path属性与改变后的url做对比，如果匹配成功，则渲染该组件的componet或者children属性所赋值的那个组件。

具体源码如下：

class Route extends React.Component {


  ....
  constructor(){
  
  
  }
  render() {
    const { match } = this.state;
    const { children, component, render } = this.props;
    const { history, route, staticContext } = this.context.router;
    const location = this.props.location || route.location;
    const props = { match, location, history, staticContext };

    if (component) return match ? React.createElement(component, props) : null;

    if (render) return match ? render(props) : null;

    if (typeof children === "function") return children(props);

    if (children && !isEmptyChildren(children))
      return React.Children.only(children);

    return null;
  }

}

state中的match就是是否匹配的标记，如果匹配当前的Route的path，那么根据优先级顺序component属性、render属性和children属性来渲染其所指向的React组件。

4、React-router中Router组件

Router组件中，是BrowserRouter、HashRouter等组件的底层组件。该组件中，定义了包含匹配规则match函数，以及使用了新history中的listener方法，来监听url的改变，从而，当url改变时，更改Router下不同path组件的isMatch结果。

class Router extends React.Component {
    componentWillMount() {
        const { children, history } = this.props
        
        //调用history.listen监听方法，该方法的返回函数是一个移除监听的函数
        
        this.unlisten = history.listen(() => {
          this.setState({
            match: this.computeMatch(history.location.pathname)
          });
        });
    }
    componentWillUnmount() {
      this.unlisten();
    }
    render() {
    
    }
}

上述首先在组件创建前调用了listener监听方法，来监听url的改变，实时的更新isMatch的结果。

5、总结

本文从前端路由的原理出发，先后介绍了两种前端路由常用的方法，接着介绍了React-router的基本组件API以及用法，详细介绍了React-router的组件中新构建的history对象，最后结合React-router的API阅读了一下React-router的源码。

你真的懂switch吗？聊聊switch语句中的块级作用域

  最近在代码中不小心不规范的，在switch里面定义了块级变量，导致页面在某些浏览器中出错，本文讨论以下switch语句中的块级作用域。

• switch语句中的块级作用域
• switch语句中的块级作用域可能存在的问题
• 规范和检测

一、switch语句中的块级作用域

  ES6 或 TS 引入了块级作用域,通过let和const、class等可以定义块级作用域里的变量，块级作用域内的变量不存在变量提升，且存在暂时性死区。常见的if语句，for循环的循环体内都可以定义块级变量。那么switch语句中的块级作用域是什么呢？ 先给出结论：

switch语句中的块级作用域，在整个switch语句中，而不是对于每一个case生成一个独立的块级作用域。

下面来举几个例子来说明这个问题：

let number = 1;
switch(number){
  case 1:
    let name = 'Jony';
  default:
    console.log(name)
}

上述的代码会输出jony。

再看一个例子：

let number = 1;
switch(number){
  case 1:
    let name = 'Jony';
    break;
  case 2:
    let name = 'yu';
    break;
  default:
   console.log(name);
}

这样会在重复生命的错误：

Uncaught SyntaxError: Identifier 'name' has already been declared

上述两个例子说明确实switch语句中，整个switch语句构成一个块级作用域。而与case无关,每一个case并不会构成一个独立的块级作用域。

二、switch语句中的块级作用域可能存在的问题

  我们知道了switch语句，整个switch语句的顶层是一个块级作用域，但是还要注意case的特殊性，在case中声明的变量，并不会提升到块级作用域中。

let number = 2;
switch(number){
  case 2:
    name = 'yu';
    break;
}

在这个例子中，name虽然没有声明，但是给name赋值相当于给全局的window对象复制，也就是window.name = 'yu'。不会有任何问题。

有意思的问题来了：

let number = 2;
switch(number){
  case 1:
    let name = 'jony';
    break;
  case 2:
    name = 'yu';
    break;
}

这个例子中，会报错，会报name未定义的错误。

Uncaught ReferenceError: name is not defined

原因的话，这里虽然case里面定义的块级虽然不会存在变量提升，但是会存在暂时性死区,也就是说如果let name = 'jony' 没有执行，也就是name定义的过程没有执行，那么name在整个块级作用域内都是不可用的，都是undefined。

为了证明我们的想法，接着改写上面的例子：

let number = 1;
switch(number){
  case 1:
    let name = 'jony';
    break;
  case 2:
    name = 'yu';
    break;
}

我们把number改成1,我们发现代码不会报任何的错误,因为此时let name的定义和赋值都被执行了。

三、规范和检测

一、什么时候会出现问题

  可能会说为什么在自己的项目中，在ES6或者TS代码中即使有上述的错误使用，也没有报错？

  笔者之前也有这样的问题，要明确的是是否你把ES6或者TS的代码直接转化成了es5，然后再调试或者发布的线上的，当let被编译成es5后，当然就不会存在上述switch中作用域的问题。但是现实中，编译成es5后的js文件可能太大，对于高版本浏览器我们希望直接使用ES6代码（通过type = module来判断浏览器对于ES6的支持性），那么这么上述问题就会出现。

二、如何检测和规避

  那么如何避免这种情况呢，当然最好的方式，就是不要在case中定义块级变量,但是万一不小心写了上述的问题代码如何检测呢。

首先使用typescript，静态编译是不能出现错误提示的，因为这个错误是运行时异常。最好的方式是通过编写eslint的规范来解决上述的非法使用问题。

React内部原理，第二部分： componentWillMount and componentDidMount

第一部分我们在Feact中实现了一个基础的渲染，实现了一个最重要的生命周期函数render，在本部分中，我们会为组件添加两个生命周期函数componentWillMount和componentDidMount.

这一系列的文章包括：

• 第一部分：基础渲染
• 第二部分：componentWillMount and componentDidMount
• 第三部分：基础更新
• 第四部分：setState
• 第三部分：transaction

修改createClass方法

在之间的createClass方法中，仅仅支持render方法，比如：

const Feact = {
    createClass(spec) {
        function Constructor(props) {
            this.props = props;
        }

        // 只使用了构造对象中的render属性，而没有用其他的属性
        Constructor.prototype.render = spec.render;

        return Constructor;
    }
}

我们仅仅需要一个简单的方式，就可以将spec中的其他方法添加到Constructor.prototype中，这样在createClass方式创建的组件不仅可以有render函数，还可以实现其他用户自定义的函数。

const Feact = {
    createClass(spec) {
        function Constructor(props) {
            this.props = props;
        }

        Constructor.prototype =
            Object.assign(Constructor.prototype, spec);

        return Constructor;
    }
    ...
}

聊聊Typescript中的设计模式——装饰器篇(decorators)

  随着Typescript的普及，在KOA2和nestjs等nodejs框架中经常看到类似于java spring中注解的写法。本文从装饰模式出发，聊聊Typescipt中的装饰器和注解。

• 什么是装饰者模式
• Typescript中的装饰器
• Typescript中的注解
• 总结

一、什么是装饰者模式

  最近在看nestjs等支持Typescript的node框架，经常看到这样一种写法：

import { Controller, Get } from '@nestjs/common';

@Controller('cats')

export class CatsController {
  @Get()
  findAll() {
    return 'This action returns all cats';
  }
}

  上述代码定义了一个处理url为“/cats”的控制器，该控制器对于url为“/cats”的get方法执行findAll()函数，返回相应的字符串。

  在上述的代码中，用@controller('cats')修饰CatsController类，通过@get来修饰类中的findAll方法，这就是典型的装饰者模式。通过@controller('cats')和@get修饰后的类CatsController，简单来说，就是拥有了丰富的“内涵”。

下面看看具体装饰者模式的定义：

我们知道继承模式是丰富子元素“内涵”的一种重要方式，不管是继承接口还是子类继承基类。而装饰者模式可以在不改变继承关系的前提下，包装先有的模块，使其内涵更加丰富，并不会影响到原来的功能。与继承相比，更加的灵活。

javascript中的装饰器处于建议征集的第二阶段，通过babel和Typescrit都可以实现装饰器的语法。

二、Typescript中的装饰器

Typescript中的装饰器与类相关，分别可以修饰类的实例函数和静态函数、类本身、类的属性、类中函数的参数以及类的set/get存取器，下面来意义介绍。

(1)、类方法的装饰器

下面来介绍一下用装饰器来修饰函数，首先来看一个例子：

let temple;
function log(target, key, descriptor) {
  console.log(`${key} was called!`);
  temple = target;
}
class P {
    @log
    foo() {
      console.log('Do something');
    }
}

console.log(P.prototype === temple) //true

上述是实例方法foo中我们用log函数修饰，log函数接受三个参数，通过P.prototype === temple(target)可以判断，在类的实例函数的装饰器函数第一个参数为类的原型，第二个参数为函数名本身，第三个参数为该函数的描述属性。

具体总结如下，对于类的函数的装饰器函数，依次接受的参数为：

• target：如果修饰的是类的实例函数，那么target就是类的原型。如果修饰的是类的静态函数，那么target就是类本身。
• key： 该函数的函数名。
• descriptor：该函数的描述属性，比如 configurable、value、enumerable等。

从上述的例子中我们可以看到，用装饰器来修饰相应的类的函数十分方便：

@log
foo() {
  ...
}

(2)、类的装饰器

装饰函数也可以直接修饰类：

let temple
function foo(target){
   console.log(target);
   temple = target
}
@foo
class P{
   constructor(){
     
   }
}

temple === P //true

当装饰函数直接修饰类的时候，装饰函数接受唯一的参数，这个参数就是该被修饰类本身。上述的例子中，输出的target就是类P的本身。

此外，在修饰类的时候，如果装饰函数有返回值，该返回值会重新定义这个类，也就是说当装饰函数有返回值时，其实是生成了一个新类，该新类通过返回值来定义。

举例来说：

function foo(target){
   return class extends target{
      name = 'Jony';
      sayHello(){
         console.log("Hello "+ this.name)
      }
   }
}
@foo
class P{
   constructor(){
     
   }
}

const p = new P();
p.sayHello(); // 会输出Hello Jony

上面的例子可以看到，当装饰函数foo有返回值时，实际上P类已经被返回值所代表的新类所代替，因此P的实例p拥有sayHello方法。

(3)、类的属性的装饰器

下面我们来看类的属性的装饰器,装饰函数修饰类的属性时，在类实例化的时候调用属性的装饰函数，举例来说：

function foo(target,name){
   console.log("target is",target);
   console.log("name is",name)
}
class P{
   @foo
   name = 'Jony'
}
//会依次输出 target is f P()  name is Jony

这里对于类的属性的装饰器函数接受两个参数，对于静态属性而言，第一个参数是类本身，对于实例属性而言，第一个参数是类的原型，第二个参数是指属性的名字。

(4)、类函数参数的装饰器

接着来看类函数参数的装饰器，类函数的参数装饰器可以修饰类的构建函数中的参数，以及类中其他普通函数中的参数。该装饰器在类的方法被调用的时候执行，下面来看实例：

function foo(target,key,index){
   console.log("target is",target);
   console.log("key is",key);
   console.log("index is",index)
}
class P{
   test(@foo a){
   }
}
// 依次输出 f P() , test , 0 

类函数参数的装饰器函数接受三个参数，依次为类本身，类中该被修饰的函数本身，以及被修饰的参数在参数列表中的索引值。上述的例子中，会依次输出 f P() 、test和0。再次明确一下修饰函数参数的装饰器函数中的参数含义：

• target： 类本身
• key：该参数所在的函数的函数名
• index： 该参数在函数参数列表中的索引值

从上面的Typescrit中在基类中常用的装饰器后，我们发现：

装饰器可以起到分离复杂逻辑的功能，且使用上极其简单方便。与继承相比，也更加灵活，可以从装饰类，到装饰类函数的参数，可以说武装到了“牙齿”。

三、Typescript中的注解

在了解了Typescrit中的装饰器之后，接着我们来看Typescrit中的注解。

什么是注解，所谓注解的定义就是：

为相应的类附加元数据支持。

所谓元数据可以简单的解释，就是修饰数据的数据，比如一个人有name，age等数据属性，那么name和age这些字段就是为了修饰数据的数据，可以简单的称为元数据。

元数据简单来说就是可以修饰某些数据的字段。下面给出装饰器和注解的解释和区别：

• 装饰器：定义劫持，可以对类，类的方法，类的属性以及类的方法的入参进行修改。不提供元数据的支持。
• 注解：仅提供元数据的支持。

两者之间的联系：

通过注解添加元数据，然后在装饰器中获取这些元数据，完成对类、类的方法等等的修改，可以在装饰器中添加元数据的支持，比如可以可以在装饰器工厂函数以及装饰器函数中添加元数据支持等。

(1)、Typescript中的元数据操作

可以通过reflect-metadata包来实现对于元数据的操作。首先我们来看reflect-metadata的使用，首先定义使用元数据的函数：

const formatMetadataKey = Symbol("format");

function format(formatString: string) {
    return Reflect.metadata(formatMetadataKey, formatString);
}

function getFormat(target: any, propertyKey: string) {
    return Reflect.getMetadata(formatMetadataKey, target, propertyKey);
}

这里的format可以作为装饰器函数的工厂函数，因为format函数返回的是一个装饰器函数，上述的方法定义了元数据Sysmbol("format"),用Sysmbol的原因是为了防止元数据中的字段重复，而format定义了取元数据中相应字段的功能。

接着我们来在类中使用相应的元数据：

class Greeter {
    @format("Hello, %s")
    name: string;

    constructor(name: string) {
        this.name = message;
    }
    sayHello() {
        let formatString = getFormat(this, "name");
        return formatString.replace("%s", this.name);
    }
}

const g = new Greeter("Jony");
console.log(g.sayHello());

在上述中，我们在name属性的装饰器工厂函数，执行@Format("Hello, %s")，返回一个装饰器函数，且该装饰器函数修饰了Greeter类的name属性，将“name”属性的值写入为"Hello, %s"。

然后再sayHello方法中，通过getFormat(this,"name")取到formatString为“Hello,%s”.

四、总结

通过装饰器，可以方便的修饰类，以及类的方法，类的属性等，相比于继承而言更加灵活，此外，通过注解的方法，可以在Typescript中引入元数据，实现元编程等。特别是在angularjs、nestjs中，大量使用了注解，特别是nestjs构建了类似于java springMVC式的web框架。

小白一枚，最近在研究golang，记录自己学习过程中的一些笔记，以及自己的理解。

• go中协程的实现
• go中协程的sync同步锁
• go中信道channel
• go中的range
• go中的select切换协程
• go中带缓存的channel
• go中协程调度

介绍go中的协程之前，首先看以下go中的defer函数，defer函数不是普通的函数，defer函数会在普通函数返回之后执行。defer函数中可以释放函数内部变量、关闭数据库连接等等操作，举例来说：

func print(){
  fmt.Println(2);
}
func main() {
  defer print();
  fmt.Println(1);
}

上述的例子中先输出1后输出2，说明defer确实是在普通函数调用结束之后执行的。

go中使用协程的方式来处理并发，协程可以理解成更小的线程，占用空间小且线程上下文切换的成本少。

可以再为具体的描述以下协程的好处，协程比线程更加轻量，使用4K栈的内存就可以创建它们，可以用很小的内存占用就可以处理大量的任务。

在go中，携程是通过go关键字来调用，从关键字可以看出，golang的一个十分重要的特点就是协程，有句话叫“协程在手，说go就go”。

1、go中协程的实现

下面我们来看一个例子：

func printOne(){
  fmt.Println(1);
}
func printTwo(){
  fmt.Println(2);
}
func printThree(){
  fmt.Println(3);
}

func main() {
  go printOne();
  go printTwo();
  go printThree();
}

执行上述的main函数，我们发现并没有像我们想的那样输出有123的输出，原因在于虽然协程是并发的，但是如果在协程调用前退出了调用协程的函数后，协程会随着程序的消亡而消亡。

因此我们可以在main函数中，将主函数挂起，增加等待协程调用的事件。

func main() {
  go printOne();
  go printTwo();
  go printThree();
  time.Sleep(5 * 1e9);
}

这样会有相应的go关键字修饰的协程函数的调用。我们来看分别执行3次的结果。

• 第一次
  1
  3
  2
• 第二次
  3
  2
  1
• 第三次
  3
  1
  2

我们发现因为协程是并发执行的，我们无法确定其调用的顺序，因此 每次的调用主函数的返回结果都是不确定的。

从协程的上述例子中，我们可以看出使用协程的时候必须还要考虑两个问题：

• 如何控制协程的调用顺序，特别是当不同的协程同时访问同一个资源。
• 如何实现不同协程间的通信

问题1，可以通过sync的同步锁来实现，问题2，go中提供了channel来实现不同协程间的通信。

2、go中协程的sync同步锁

go中sync包提供了2个锁，互斥锁sync.Mutex和读写锁sync.RWMutex.我们用互斥锁来解决上述的不同的协程可能同时调度同一个资源的问题，改写上述的例子：

func printOne(m *sync.Mutex){
  m.Lock();
  ... do something use DB or other source
  defer m.Unlock();
}

func printTwo(m *sync.Mutex){
  m.Lock();
  ... the same thing as printOne do something use DB or other source 
  defer m.Unlock();
}

func main() {
  m:= new(sync.Mutex);
  go printOne(m);
  go printTwo(m);
  time.Sleep(5 * 1e9);
}

通过互斥锁，printOne和printTwo不会竞争同一个相同的资源

3、go中信道channel

go中有一种特殊的类型通道channel，可以通过channel来发送类型化的数据，实现在协程之间的通信，通过通道的通信方式也保证了同步性。

channel的声明方式很简单：

var ch1 chan string
ch1 = make(chan string)

我们用ch表示通道，通道的符号包括了流向通道(发送): ch <- int1 和从通道流出(接收) int2 = <- ch。

同时go中也支持声明单向通道：

var ch1 chan int //普通的channel
var ch2 chan <- int //只用于写int数据
var ch3 <- chan int //只用于读int数据

上述定义的都是不带缓存区，或者说长度为1的channel,这种channel的特点就是：

一旦有数据被放入channel，那么该数据必须被取走才能让另一条数据放入，这就是同步的channel，channel的发送者和接受者在同一时间只交流一条数据，然后必须等待另一边完成相应的发送和接受动作。

我们还是用上述的输出123的例子，用同步channel来实现同步的输出。

func printOne(cs chan int){
  fmt.Println(1);
  cs <- 1
}
func printTwo(cs chan int){
  <-cs
  fmt.Println(2);
  defer close(cs);
}

func main() {
  cs := make(chan int);
  go printOne(cs);
  go printTwo(cs);
  time.Sleep(5 * 1e9);
}

上述的例子中会依次输出12，这样我们通过同步channel的方式实现了同步的输出。

我们前面讲到用为了等待go协程执行完成，我们在main函数中用time.sleep来挂起主函数，其实main函数本身也可以看成一个协程，如果使用channel，就不用在main函数中用time.sleep来挂起。

我们改写上述的例子：

func printOne(cs chan int){
  fmt.Println(1);
  cs <- 1
}
func main() {
  cs := make(chan int);
  go printOne(cs);
  <-cs;
  close(cs);
}

上述的例子中，会输出 1 ，我们并没有在主函数中通过time.sleep的方式来挂起，转而用一个等待写入的channel来代替。

注意：通道可以被显式的关闭，当需要告诉接受者不会种子提供新的值的时候，就需要关闭通道。

4、go中的range

上面我们也讲到要及时的关闭channel，但是持续的访问数据源并检查channel是否已经关闭，并不高效。go中提供了range关键字。

range关键字在使用channel的时候，会自动等待channel的动作一直到channel关闭。通俗点将就是可以channel可以自动开关。

同样的来举例：

func input(cs chan int,count int){
  for i:=1;i<=count;i++ {
    cs <- i
  }
}
func output(cs chan int){
  for s:= range cs {
    fmt.Println(s);
  }
}
func main() {
  cs := make(chan int);
  go input(cs,5);
  go output(cs);
  time.Sleep(3*1e9)
}

上述的例子会依次的输出1，2，3，4，5. 通过使用range关键字，当channel被关闭时，接受者的for循环也就自动停止了。

5、go中的select切换协程

从不同的并发执行过程中获取值可以通过关键字select来完成，它和switch控制语句非常相似，也被称为通信开关。

首先要明确select做了什么？？

select中存在着一种轮询机制，select监听进入通道的数据，也可以是通道发送值的时候，监听到相应的行为后就执行case里面的操作。

select的声明：

select {
   case u:= <- ch1:
       ...
   case v:= <- ch2;
       ...

}

同样的来看一下具体使用select的例子：

func channel1(cs chan int,count int){
  for i:=1;i<=count;i++ {
    cs <- i
  }
}
func channel2(cs chan int,count int){
  for i:=1;i<=count;i++ {
    cs <- i
  }
}
func selectTest(cs1 ,cs2 chan int){
  for i:=1;i<10;i++ {
    select {
      case u:=<-cs1:
           fmt.Println(u);
      case v:=<-cs2:
           fmt.Println(v);
    }
  }
}
func main() {
  cs1 := make(chan int);
  cs2 := make(chan int);
  go channel1(cs1,5);
  go channel2(cs2,3);
  go selectTest(cs1,cs2);
  time.Sleep(3*1e9)
}

输出结果为：1,2,1,2,3,3,4,5 总共8个数据。且因为没有做同步控制，因此运行几次后的输出结果是不相同的。

6、go中带缓存的channel

前面讲到的都是不带缓存的channel或者说长度为1的channel，实际上channel也是可以带缓存的，我们可以在声明的时候执行channel的长度。

ch = make(chan string,3)

比如上述的例子中，指定了ch这个channel的长度为3，长度不为1的channel，就可以称之为带缓存的channel.

带缓存的channel可以连续写入，直到长度占满为止。

ch <- 1
ch <- 2 
ch <- 3

7、go中协程调度

讲到并发，就要提到go中的协程调度。go中的runtime包，提供了调度器的功能。runtime包提供了以下几个方法：

• Gosched：让当前线程让出 cpu 以让其它线程运行,它不会挂起当前线程，因此当前线程未来会继续执行
• NumCPU：返回当前系统的 CPU 核数量
• GOMAXPROCS：设置最大的可同时使用的 CPU 核数
• Goexit：退出当前 goroutine(但是defer语句会照常执行)
• NumGoroutine：返回正在执行和排队的任务总数
• GOOS：目标操作系统

对于多核CPU的机器，go可以显示的指定编译器将go的协程调度到多个CPU上运行

import "runtime"
...
cpuNum:=runtime.NumCPU;
runtime.GOMAXPROCS(cpuNum)

来聊聊GO中的调度原理，首先定义以下模型的概念：

M：内核中的线程的数目
G：go中的协程，并发的最小单元，在go中通过go关键字来创建
P：处理器，即协程G的上下文，每个P会维护一个本地的协程队列。

接着来看解释GO中协程调度的经典图：

我们来解释上图：

• P是处理器的个数，我们经常将调度器的GOMAXPROCS设置成CPU的个数，因此这里P一般来说是机器CPU的个数。
• M是线程，在P处理器上关联一个线程，P和M的一组配对组成了局部的协程队列
• G就是协程，需要被添加到由P和M组成的局部队列中依次处理
• 除了局部的协程外，在全局还维护了一个协程队列。
• 如果局部协程队列中处理完了所有队列，且没有新队列，那么M线程会取消对于CPU的占用，M线程进入休眠

简要介绍：谈谈promise.resove,setTimeout,setImmediate,process.nextTick在EvenLoop队列中的执行顺序

1. 问题的引出

event loop都不陌生，是指主线程从“任务队列”中循环读取任务，比如

例1：

setTimeout(function(){console.log(1)},0);

console.log(2)

//输出2,1

在上述的例子中，我们明白首先执行主线程中的同步任务，当主线程任务执行完毕后，再从event loop中读取任务，因此先输出2，再输出1。

event loop读取任务的先后顺序，取决于任务队列（Job queue）中对于不同任务读取规则的限定。比如下面一个例子：

例2：

setTimeout(function () {
  console.log(3);
}, 0);

Promise.resolve().then(function () {
  console.log(2);
});
console.log(1);
//输出为  1  2 3

先输出1，没有问题，因为是同步任务在主线程中优先执行，这里的问题是setTimeout和Promise.then任务的执行优先级是如何定义的。

2 . Job queue中的执行顺序

在Job queue中的队列分为两种类型：macro-task和microTask。我们举例来看执行顺序的规定，我们设

macro-task队列包含任务: a1, a2 , a3
micro-task队列包含任务: b1, b2 , b3

执行顺序为，首先执行marco-task队列开头的任务，也就是 a1 任务，执行完毕后，在执行micro-task队列里的所有任务，也就是依次执行b1, b2 , b3，执行完后清空micro-task中的任务，接着执行marco-task中的第二个任务，依次循环。

了解完了macro-task和micro-task两种队列的执行顺序之后，我们接着来看，真实场景下这两种类型的队列里真正包含的任务（我们以node V8引擎为例），在node V8中，这两种类型的真实任务顺序如下所示：

macro-task队列真实包含任务：

script(主程序代码),setTimeout, setInterval, setImmediate, I/O, UI rendering

micro-task队列真实包含任务：
process.nextTick, Promises, Object.observe, MutationObserver

由此我们得到的执行顺序应该为：

script(主程序代码)—>process.nextTick—>Promises...——>setTimeout——>setInterval——>setImmediate——> I/O——>UI rendering

在ES6中macro-task队列又称为ScriptJobs，而micro-task又称PromiseJobs

3 . 真实环境中执行顺序的举例

(1) setTimeout和promise

例3:

setTimeout(function () {
  console.log(3);
}, 0);

Promise.resolve().then(function () {
  console.log(2);
});

console.log(1);

我们先以第1小节的例子为例，这里遵循的顺序为：

script(主程序代码)——>promise——>setTimeout
对应的输出依次为：1 ——>2————>3

(2) process.nextTick和promise、setTimeout

例子4：
setTimeout(function(){console.log(1)},0);

new Promise(function(resolve,reject){
   console.log(2);
   resolve();
}).then(function(){console.log(3)
}).then(function(){console.log(4)});

process.nextTick(function(){console.log(5)});

console.log(6);
//输出2,6,5,3,4,1

这个例子就比较复杂了，这里要注意的一点在定义promise的时候，promise构造部分是同步执行的，这样问题就迎刃而解了。

首先分析Job queue的执行顺序：

script(主程序代码)——>process.nextTick——>promise——>setTimeout

I) 主体部分： 定义promise的构造部分是同步的，
因此先输出2 ，主体部分再输出6（同步情况下，就是严格按照定义的先后顺序）

II)process.nextTick: 输出5

III）promise： 这里的promise部分，严格的说其实是promise.then部分，输出的是3,4

IV) setTimeout ： 最后输出1

综合的执行顺序就是： 2——>6——>5——>3——>4——>1

(3)更复杂的例子

setTimeout(function(){console.log(1)},0);

new Promise(function(resolve,reject){
   console.log(2);
   setTimeout(function(){resolve()},0)
}).then(function(){console.log(3)
}).then(function(){console.log(4)});

process.nextTick(function(){console.log(5)});

console.log(6);

//输出的是  2 6 5 1 3 4

这种情况跟我们（2）中的例子，区别在于promise的构造中，没有同步的resolve，因此promise.then在当前的执行队列中是不存在的，只有promise从pending转移到resolve，才会有then方法，而这个resolve是在一个setTimout时间中完成的，因此3,4最后输出。

前端面试总结——进阶javascript篇

1.自己实现一个bind函数

原理：通过apply或者call方法来实现。

(1)初始版本

Function.prototype.bind=function(obj,arg){
  var arg=Array.prototype.slice.call(arguments,1);
  var context=this;
  return function(newArg){
    arg=arg.concat(Array.prototype.slice.call(newArg));
    return context.apply(obj,arg);
  }
}

(2) 考虑到原型链

为什么要考虑？因为在new 一个bind过生成的新函数的时候，必须的条件是要继承原函数的原型

Function.prototype.bind=function(obj,arg){
  var arg=Array.prototype.slice.call(arguments,1);
  var context=this;
  var bound=function(newArg){
    arg=arg.concat(Array.prototype.slice.call(newArg));
    return context.apply(obj,arg);
  }
  var F=function(){}
  //这里需要一个寄生组合继承
  F.prototype=context.prototype;
  bound.prototype=new F();
  return bound;
}

2.用setTimeout来实现setInterval

(1)用setTimeout()方法来模拟setInterval()与setInterval()之间的什么区别？

首先来看setInterval的缺陷，使用setInterval()创建的定时器确保了定时器代码规则地插入队列中。这个问题在于：如果定时器代码在代码再次添加到队列之前还没完成执行，结果就会导致定时器代码连续运行好几次。而之间没有间隔。不过幸运的是：javascript引擎足够聪明，能够避免这个问题。当且仅当没有该定时器的如何代码实例时，才会将定时器代码添加到队列中。这确保了定时器代码加入队列中最小的时间间隔为指定时间。

这种重复定时器的规则有两个问题：1.某些间隔会被跳过 2.多个定时器的代码执行时间可能会比预期小。

下面举例子说明：

假设，某个onclick事件处理程序使用啦setInterval()来设置了一个200ms的重复定时器。如果事件处理程序花了300ms多一点的时间完成。

这个例子中的第一个定时器是在205ms处添加到队列中，但是要过300ms才能执行。在405ms又添加了一个副本。在一个间隔，605ms处，第一个定时器代码还在执行中，而且队列中已经有了一个定时器实例，结果是605ms的定时器代码不会添加到队列中。结果是在5ms处添加的定时器代码执行结束后，405处的代码立即执行。

function say(){
  //something
  setTimeout(say,200);
}
setTimeout(say,200)

或者

setTimeout(function(){
   //do something
   setTimeout(arguments.callee,200);
},200);

3.js怎么控制一次加载一张图片，加载完后再加载下一张

(1)方法1

<script type="text/javascript">
var obj=new Image();
obj.src="http://www.phpernote.com/uploadfiles/editor/201107240502201179.jpg";
obj.onload=function(){
alert('图片的宽度为：'+obj.width+'；图片的高度为：'+obj.height);
document.getElementById("mypic").innnerHTML="<img src='"+this.src+"' />";
}
</script>
<div id="mypic">onloading……</div>

(2)方法2

<script type="text/javascript">
var obj=new Image();
obj.src="http://www.phpernote.com/uploadfiles/editor/201107240502201179.jpg";
obj.onreadystatechange=function(){
if(this.readyState=="complete"){
alert('图片的宽度为：'+obj.width+'；图片的高度为：'+obj.height);
document.getElementById("mypic").innnerHTML="<img src='"+this.src+"' />";
}
}
</script>
<div id="mypic">onloading……</div>

3.代码的执行顺序

setTimeout(function(){console.log(1)},0);
new Promise(function(resolve,reject){
   console.log(2);
   resolve();
}).then(function(){console.log(3)
}).then(function(){console.log(4)});

process.nextTick(function(){console.log(5)});

console.log(6);
//输出2,6,5,3,4,1

为什么呢？具体请参考我的文章：
从promise、process.nextTick、setTimeout出发，谈谈Event Loop中的Job queue

4.如何实现sleep的效果（es5或者es6）

(1)while循环的方式

function sleep(ms){
   var start=Date.now(),expire=start+ms;
   while(Date.now()<expire);
   console.log('1111');
   return;
}

执行sleep(1000)之后，休眠了1000ms之后输出了1111。上述循环的方式缺点很明显，容易造成死循环。

(2)通过promise来实现

function sleep(ms){
  var temple=new Promise(
  (resolve)=>{
  console.log(111);setTimeout(resolve,ms)
  });
  return temple
}
sleep(500).then(function(){
   //console.log(222)
})
//先输出了111，延迟500ms后输出222

(3)通过async封装

function sleep(ms){
  return new Promise((resolve)=>setTimeout(resolve,ms));
}
async function test(){
  var temple=await sleep(1000);
  console.log(1111)
  return temple
}
test();
//延迟1000ms输出了1111

####(4).通过generate来实现

function* sleep(ms){
   yield new Promise(function(resolve,reject){
             console.log(111);
             setTimeout(resolve,ms);
        })  
}
sleep(500).next().value.then(function(){console.log(2222)})

5.简单的实现一个promise

首先明确什么是promiseA+规范，参考规范的地址：

primiseA+规范

如何实现一个promise，参考我的文章：

实现一个完美符合Promise/A+规范的Promise

一般不会问的很详细，只要能写出上述文章中的v1.0版本的简单promise即可。

6.Function._proto_(getPrototypeOf)是什么？

获取一个对象的原型，在chrome中可以通过__proto__的形式，或者在ES6中可以通过Object.getPrototypeOf的形式。

那么Function.proto是什么么？也就是说Function由什么对象继承而来，我们来做如下判别。

Function.__proto__==Object.prototype //false
Function.__proto__==Function.prototype//true

我们发现Function的原型也是Function。

我们用图可以来明确这个关系：

7.实现js中所有对象的深度克隆（包装对象，Date对象，正则对象）

通过递归可以简单实现对象的深度克隆，但是这种方法不管是ES6还是ES5实现，都有同样的缺陷，就是只能实现特定的object的深度复制（比如数组和函数），不能实现包装对象Number，String ， Boolean，以及Date对象，RegExp对象的复制。

(1)前文的方法

function deepClone(obj){
    var newObj= obj instanceof Array?[]:{};
    for(var i in obj){
       newObj[i]=typeof obj[i]=='object'?  
       deepClone(obj[i]):obj[i];    
    }
    return newObj;
}

这种方法可以实现一般对象和数组对象的克隆，比如：

var arr=[1,2,3];
var newArr=deepClone(arr);
// newArr->[1,2,3]

var obj={
   x:1,
   y:2
}
var newObj=deepClone(obj);
// newObj={x:1,y:2}

但是不能实现例如包装对象Number,String,Boolean,以及正则对象RegExp和Date对象的克隆，比如：

//Number包装对象
var num=new Number(1);
typeof num // "object"

var newNum=deepClone(num);
//newNum ->  {} 空对象

//String包装对象
var str=new String("hello");
typeof str //"object"

var newStr=deepClone(str);
//newStr->  {0:'h',1:'e',2:'l',3:'l',4:'o'};

//Boolean包装对象
var bol=new Boolean(true);
typeof bol //"object"

var newBol=deepClone(bol);
// newBol ->{} 空对象

....

(2)valueof()函数

所有对象都有valueOf方法，valueOf方法对于：如果存在任意原始值，它就默认将对象转换为表示它的原始值。对象是复合值，而且大多数对象无法真正表示为一个原始值，因此默认的valueOf()方法简单地返回对象本身，而不是返回一个原始值。数组、函数和正则表达式简单地继承了这个默认方法，调用这些类型的实例的valueOf()方法只是简单返回这个对象本身。

对于原始值或者包装类：

function baseClone(base){
 return base.valueOf();
}

//Number
var num=new Number(1);
var newNum=baseClone(num);
//newNum->1

//String
var str=new String('hello');
var newStr=baseClone(str);
// newStr->"hello"

//Boolean
var bol=new Boolean(true);
var newBol=baseClone(bol);
//newBol-> true

其实对于包装类，完全可以用=号来进行克隆，其实没有深度克隆一说，

这里用valueOf实现，语法上比较符合规范。

对于Date类型：

因为valueOf方法，日期类定义的valueOf()方法会返回它的一个内部表示：1970年1月1日以来的毫秒数.因此我们可以在Date的原型上定义克隆的方法：

Date.prototype.clone=function(){
  return new Date(this.valueOf());
}

var date=new Date('2010');
var newDate=date.clone();
// newDate->  Fri Jan 01 2010 08:00:00 GMT+0800 

对于正则对象RegExp：

RegExp.prototype.clone = function() {
var pattern = this.valueOf();
var flags = '';
flags += pattern.global ? 'g' : '';
flags += pattern.ignoreCase ? 'i' : '';
flags += pattern.multiline ? 'm' : '';
return new RegExp(pattern.source, flags);
};

var reg=new RegExp('/111/');
var newReg=reg.clone();
//newReg->  /\/111\//

8.简单实现Node的Events模块

简介：观察者模式或者说订阅模式，它定义了对象间的一种一对多的关系，让多个观察者对象同时监听某一个主题对象，当一个对象发生改变时，所有依赖于它的对象都将得到通知。

node中的Events模块就是通过观察者模式来实现的：

var events=require('events');
var eventEmitter=new events.EventEmitter();
eventEmitter.on('say',function(name){
    console.log('Hello',name);
})
eventEmitter.emit('say','Jony yu');

这样，eventEmitter发出say事件，通过On接收，并且输出结果，这就是一个订阅模式的实现，下面我们来简单的实现一个Events模块的EventEmitter。

(1)实现简单的Event模块的emit和on方法

function Events(){
this.on=function(eventName,callBack){
  if(!this.handles){
    this.handles={};
  }
  if(!this.handles[eventName]){
    this.handles[eventName]=[];
  }
  this.handles[eventName].push(callBack);
}
this.emit=function(eventName,obj){
   if(this.handles[eventName]){
     for(var i=0;o<this.handles[eventName].length;i++){
       this.handles[eventName][i](obj);
     }
   }
}
return this;
}

这样我们就定义了Events，现在我们可以开始来调用：

 var events=new Events();
 events.on('say',function(name){
    console.log('Hello',nama)
 });
 events.emit('say','Jony yu');
 //结果就是通过emit调用之后，输出了Jony yu

(2)每个对象是独立的

因为是通过new的方式，每次生成的对象都是不相同的，因此：

var event1=new Events();
var event2=new Events();
event1.on('say',function(){
    console.log('Jony event1');
});
event2.on('say',function(){
    console.log('Jony event2');
})
event1.emit('say');
event2.emit('say');
//event1、event2之间的事件监听互相不影响
//输出结果为'Jony event1' 'Jony event2'

9.箭头函数中this指向举例

var a=11;
function test2(){
  this.a=22;
  let b=()=>{console.log(this.a)}
  b();
}
var x=new test2();
//输出22

定义时绑定。

如何优雅的使用react hooks来进行状态管理

  在使用react和redux的过程中，一直有一个问题，哪些状态需要放在redux中，状态需要保存在组件内的local state中，此外不合理的使用redux可能会带来状态管理混乱的问题，此外对于local state局部状态而言，react hooks提供了一个比class中的setState更好的一个替代方案。本文主要从状态管理出发，讲讲如何优雅的使用hooks来进行状态管理。

• 如何使用redux
• react hooks管理local state
• react hooks如何解决组件间的通信

一、如何使用redux

  首先要明确为什么要使用redux，这一点很重要，如果不知道为什么使用redux，那么在开发的过程中肯定不能合理的使用redux.首先来看redux的本质：

redux做为一款状态管理工具，主要是为了解决组件间通信的问题。

既然是组件间的通信问题，那么显然将所有页面的状态都放入redux中，是不合理的，复杂度也很高。

(1)全量使用redux

  笔者在早期也犯了这个问题,在应用中，不管什么状态，按页面级路由拆分，全部放在redux中，页面任何状态的更改，通过react-redux的mapState和mapDispatch来实现。

redux中的状态从状态更新到反馈到视图，是一个过程链太长，从dispatch一个action出发，然后走reducer等逻辑，一个完整的链路包含：

创建action，创建redux中间件，创建相应type的reducer函数，创建mapState和mapDispatch等。

如果将所有状态都保存在redux中，那么每一个状态必须走这几步流程，及其繁琐，毫无疑问增加了代码量

(2)减少局部状态和redux状态的不合理混用

  全量使用redux的复杂度很高，我们当然考虑将一部分状态放在redux中，一部分状态放在local state中，但是这种情况下，很容易产生一个问题，就是如果local State跟redux中的state存在状态依赖。

举例来说，在redux中的状态中有10个学生

    //redux
    
    students = [{name:"小明",score:70},{name:"小红",score:50}....]

在local state中我们保存了分数在60分以上的学生

    // local state
    
    state = [{name:"小明",score:70}]

  如果redux中的学生改变了，我们需要从redux中动态的获取students信息，然后改变局部的state.结合react-redux，我们需要在容器组件中使用componentWillReceivedProps或者getDerivedStateFromProps这个声明周期，来根据props改变局部的local state.

  componentWillReceivedProps这里不讨论，为了更高的安全性，在react中用静态的getDerivedStateFromProps代替了componentWillReceivedProps这里不讨论，而getDerivedStateFromProps这个声明周期函数在props和state变化的时候都会去执行，因此如果我们需要仅仅在props的改变而改变局部的local state，在这个声明周期中会存在着很复杂的判断逻辑。

redux中的状态和local state中的状态相关联的越多，getDerivedStateFromProps这个声明周期函数就越复杂

  给我们的启示就是尽可能的减少getDerivedStateFromProps的使用，如果实在是redux和local state有关联性，用id会比直接用对象或者数组好，比如上述的例子，我们可以将学生分组，并给一个组号，每次在redux中的学生信息发生改变的时候会改变相应的组号。
这样在getDerivedStateFromProps只需要判断组号是否改变即可：

    class Container extends React.Component{
      state = {
         group_id:number
      }
      
      static getDerivedStateFromProps(props,state){
         if(props.group_id!==state.group_id){
         
            ... 更新及格的学生
         }else{
            return null
         }
      }
    }

  这里推荐https://github.com/paularmstrong/normalizr,如果实在redux和local state关联性强，可以先将数据范式化，范式化后的数据类似于给一个复杂结构一个id，这样子会简化getDerivedStateFromProps的逻辑.

(3)本节小结

  如何使用redux,必须从redux的本质出发，redux的本质是为了解决组件间的通信问题，因此组件内部独有的状态不应该放在redux中,此外如果redux结合class类组件使用，可以将数据范式化，简化复杂的判断逻辑。

二、react hooks管理local state

  前面将了应该如何使用redux,那么如何维护local state呢，React16.8中正式增加了hooks。通过hooks管理local state，简单易用可扩展。

在hooks中的局部状态常见的有3种，分别是useState、useRef和useReducer

(1) useState

useState是hooks中最常见的局部状态，比如：

    const [hide, setHide] = React.useState(false);
    const [name, setName] = React.useState('BI');

理解useState必须明确，在react hooks中：

每一次渲染都有它自己的 Props and State

一个经典的例子就是：

    function Counter() {
      const [count, setCount] = useState(0);
    
      function handleAlertClick() {
        setTimeout(() => {
          alert('You clicked on: ' + count);
        }, 3000);
      }
    
      return (
        <div>
          <p>You clicked {count} times</p>
          <button onClick={() => setCount(count + 1)}>
            Click me
          </button>
          <button onClick={handleAlertClick}>
            Show alert
          </button>
        </div>
      );
    }

如果我按照下面的步骤去操作：

• 点击增加counter到3
• 点击一下 “Show alert”
• 点击增加 counter到5并且在定时器回调触发前完成

猜猜看会alert出什么？

结果是弹出了3，alert会“捕获”我点击按钮时候的状态，也就是说每一次的渲染都会有独立的props和state.

(2) useRef

  在react hooks中,我们知道了每一次的渲染都会有独立的props和state，那么如果我们需要跟类组件一样，每次都能拿到最新的渲染值时，应该怎么做呢？此时我们可以用useRef

useRef提供了一个Mutable可变的数据

我们来修改上述的例子，来是的alert为5:

    function Counter() {
        const [count, setCount] = useState(0)
        const late = useRef(0)
        function handleAlertClick() {
            setTimeout(() => {
                alert('You clicked on: ' + late.current)
            }, 3000)
        }
        useEffect(() => {
            late.current = count
        })
        return (
            <div>
                <p>You clicked {count} times</p>
                <button onClick={() => setCount(count + 1)}>Click me</button>
                <button onClick={handleAlertClick}>Show alert</button>
            </div>
        )
    }

如此修改以后就不是alert3 而是弹出5

(3) useReducer

  react hooks中也提供了useReducer来管理局部状态.

当你想更新一个状态，并且这个状态更新依赖于另一个状态的值时，你可能需要用useReducer去替换它们。

同样的用例子来说明：

    function Counter() {
      const [state, dispatch] = useReducer(reducer, initialState);
      const { count, step } = state;
    
      useEffect(() => {
        const id = setInterval(() => {
          dispatch({ type: 'tick' });
        }, 1000);
        return () => clearInterval(id);
      }, [dispatch]);
    
      return (
        <>
          <h1>{count}</h1>
          <input value={step} onChange={e => {
            dispatch({
              type: 'step',
              step: Number(e.target.value)
            });
          }} />
        </>
      );
    }
    
    const initialState = {
      count: 0,
      step: 1,
    };
    
    function reducer(state, action) {
      const { count, step } = state;
      if (action.type === 'tick') {
        return { count: count + step, step };
      } else if (action.type === 'step') {
        return { count, step: action.step };
      } else {
        throw new Error();
      }
    }

解释上面的结果主要来看useEffect部分：

    useEffect(() => {
        const id = setInterval(() => {
          dispatch({ type: 'tick' });
        }, 1000);
        return () => clearInterval(id);
      }, [dispatch]);

  在state中的count依赖与step,但是使用了useReducer后，我们不需要在useEffect的依赖变动数组中使用step,转而用dispatch来替代,这样的好处就是减少不必要的渲染行为.

  此外:局部状态不推荐使用 useReducer ，会导致函数内部状态过于复杂，难以阅读。 useReducer 建议在多组件间通信时，结合 useContext 一起使用。

三、react hooks如何解决组件间的通信

  react hooks中的局部状态管理相比于类组件而言更加简介，那么如果我们组件采用react hooks，那么如何解决组件间的通信问题。

(1) UseContext

  最基础的想法可能就是通过useContext来解决组件间的通信问题。

比如：

function useCounter() {
  let [count, setCount] = useState(0)
  let decrement = () => setCount(count - 1)
  let increment = () => setCount(count + 1)
  return { count, decrement, increment }
}

let Counter = createContext(null)

function CounterDisplay() {
  let counter = useContext(Counter)
  return (
    <div>
      <button onClick={counter.decrement}>-</button>
      <p>You clicked {counter.count} times</p>
      <button onClick={counter.increment}>+</button>
    </div>
  )
}

function App() {
  let counter = useCounter()
  return (
    <Counter.Provider value={counter}>
      <CounterDisplay />
      <CounterDisplay />
    </Counter.Provider>
  )
}

  在这个例子中通过createContext和useContext，可以在App的子组件CounterDisplay中使用context,从而实现一定意义上的组件通信。

此外，在useContext的基础上，为了其整体性，业界也有几个比较简单的封装：

https://github.com/jamiebuilds/unstated-next
https://github.com/diegohaz/constate

但是其本质都没有解决一个问题：

如果context太多，那么如何维护这些context

  也就是说在大量组件通信的场景下，用context进行组件通信代码的可读性很差。这个类组件的场景一致，context不是一个新的东西，虽然用了useContext减少了context的使用复杂度。

(2) Redux结合hooks来实现组件间的通信

  hooks组件间的通信，同样可以使用redux来实现。也就是说：

在React hooks中，redux也有其存在的意义

  在hooks中存在一个问题，因为不存在类似于react-redux中connect这个高阶组件，来传递mapState和mapDispatch, 解决的方式是通过redux-react-hook或者react-redux的7.1 hooks版本来使用。

• redux-react-hook

  在redux-react-hook中提供了StoreContext、useDispatch和useMappedState来操作redux中的store，比如定义mapState和mapDispatch的方式为：

import {StoreContext} from 'redux-react-hook';

ReactDOM.render(
  <StoreContext.Provider value={store}>
    <App />
  </StoreContext.Provider>,
  document.getElementById('root'),
);

import {useDispatch, useMappedState} from 'redux-react-hook';

export function DeleteButton({index}) {
  // Declare your memoized mapState function
  const mapState = useCallback(
    state => ({
      canDelete: state.todos[index].canDelete,
      name: state.todos[index].name,
    }),
    [index],
  );

  // Get data from and subscribe to the store
  const {canDelete, name} = useMappedState(mapState);

  // Create actions
  const dispatch = useDispatch();
  const deleteTodo = useCallback(
    () =>
      dispatch({
        type: 'delete todo',
        index,
      }),
    [index],
  );

  return (
    <button disabled={!canDelete} onClick={deleteTodo}>
      Delete {name}
    </button>
  );
}

• react-redux 7.1的hooks版

   这也是官方较为推荐的，react-redux 的hooks版本提供了useSelector()、useDispatch()、useStore()这3个主要方法，分别对应与mapState、mapDispatch以及直接拿到redux中store的实例.

简单介绍一下useSelector,在useSelector中除了能从store中拿到state以外，还支持深度比较的功能，如果相应的state前后没有改变，就不会去重新的计算.

举例来说，最基础的用法：

import React from 'react'
import { useSelector } from 'react-redux'

export const TodoListItem = props => {
  const todo = useSelector(state => state.todos[props.id])
  return <div>{todo.text}</div>
}

实现缓存功能的用法:

import React from 'react'
import { useSelector } from 'react-redux'
import { createSelector } from 'reselect'

const selectNumOfDoneTodos = createSelector(
  state => state.todos,
  todos => todos.filter(todo => todo.isDone).length
)

export const DoneTodosCounter = () => {
  const NumOfDoneTodos = useSelector(selectNumOfDoneTodos)
  return <div>{NumOfDoneTodos}</div>
}

export const App = () => {
  return (
    <>
      <span>Number of done todos:</span>
      <DoneTodosCounter />
    </>
  )
}

在上述的缓存用法中，只要todos.filter(todo => todo.isDone).length不改变，就不会去重新计算.

四、总结

   react中完整的状态管理分为全局状态和局部状态，而react hooks简化了局部状态，使得管理局部状态以及控制局部渲染极其方便，但是react hooks本质上还是一个视图组件层的，并没有完美的解决组件间的通信问题，也就是说，redux等状态管理机和react hooks本质上并不矛盾。

  在我的实践中，用redux实现组件间的通信而react hooks来实现局部的状态管理，使得代码简单已读的同时，也减少了很多不必要的redux样板代码.

手把手教你实现json嵌套对象的范式化和反范式化

在json对象嵌套比较复杂的情况下，可以将复杂的嵌套对象转化成范式化的数据。比如后端返回的json对象比较复杂，前端需要从复杂的json对象中提取数据然后呈现在页面上，复杂的json嵌套，使得前端展示的逻辑比较混乱。

特别的，如果我们使用了flux或者redux等作为我们前端的状态管理机（state对象），通过控制state对象的变化，从而呈现不同的视图层的展示，如果我们在状态管理的时候，将state对象范式化，可以减小state对象操作的复杂性，从而可以清晰的展示视图更新的过程。

• 什么是数据范式化和反范式化
• 数据范式化的实现
• jest编写简单的单元测试

本文的源码地址为：https://github.com/forthealllight/normalize

1.什么是数据范式化

（1）数据范式化的定义

本文不会具体介绍在数据库中关于范式的定义，广义的数据范式化，就是除了最外层属性之外，其他关联的属性用外键来引用。

数据范式化的好处有：可以减少数据的冗余

（2）数据范式化举例

比如有一个person对象如下所示:

{
  'id':1,
  'name':'xiaoliang',
  'age':20,
  'hobby':[{
    id:30,
    desp:'足球'
  },{
    id:40,
    desp:'篮球'
  },{
    id:50,
    desp:'羽毛球'
  }]
}

在上述的对象中，hobby存在嵌套，我们将perosn的无嵌套的其他属性作为主属性，而hobby属性表示的是需要外键来引用的属性，我们将id作为外键的名称，将上述的嵌套对象经过范式化处理可以得到：

{
  person:{
     '1':{
         'id':1,
         'name':'xiaoliang',
         'age':20,
         'hobby':['30','40','50']
     }
  },
  hobby:{
    '30':{
      id:'30',
      desp:'足球'
    },
    '40':{
      id:'40',
      desp:'篮球',
    },
    '50':{
      id:'50',
      desp:'羽毛球'
    }
  }
}

上述对象就是范式化之后的结果，我们发现主对象person里面的hobby属性中，此时变成了id号组成的数组，通过id作为外键来索引另一个对象hobby中的具体值。

（3）数据范式化的优点

那么这样做到底有什么好处呢？

比如我们现在新增了一个人id为2：

{
  'id':2,
  'name':'xiaoyu',
  'age':20,
  'hobby':[{
    id:30,
    desp:'足球'
  }]
}

他的兴趣还好中同样包含了足球，那么如果有复杂嵌套对象的形式，对象变成如下的形式：

  [
    {
      'id':1,
      'name':'xiaoliang',
      'age':20,
      'hobby':[{
        id:30,
        desp:'足球'
      },{
        id:40,
        desp:'篮球'
      },{
        id:50,
        desp:'羽毛球'
      }]
    },
    {
      'id':2,
      'name':'xiaoyu',
      'age':20,
      'hobby':[{
        id:30,
        desp:'足球'
      }]
    }
]

上述的这个对象嵌套层级就比较深，比如现在我们发现hobby中的足球的描述发生了变化，比如：

desp:'足球'——> desp:'英式足球'

如果在上述的嵌套对象中直接改变，我们需要改变两处位置，其一是id为1的person中的id为30的hobby的desp，另一处是id为2处的person的id为30处的hobby的desp.

这还是person只有2个实例的情况，如果person的实例更多，那么，如果仅仅一个hobby改变，就需要改变多处位置。也就显得操作比较冗余。

如果用数据范式化来处理，效果如何呢？，将上述的对象范式化得到：

{
  person:{
     '1':{
         'id':1,
         'name':'xiaoliang',
         'age':20,
         'hobby':['30','40','50']
     },
     '2':{
        'id':2,
        'name':'xiaoyu',
        'age':30,
        'hobby':[30]
     }
  },
  hobby:{
    '30':{
      id:'30',
      desp:'足球'
    },
    '40':{
      id:'40',
      desp:'篮球',
    },
    '50':{
      id:'50',
      desp:'羽毛球'
    }
  }
}

此时如果同样的发生了：

***desp:'足球'——>  desp:'英式足球'***

这样的变化，映射之后只需要改变，hobby被查询对象：

hobby:{
    '30':{
      id:'30',
      desp:'英式足球'
    },
    ......
}

这样，无论有多少实例引用了id为30的这个hobby,我们修改所引起的操作只需要一处就能到位。

（4）数据范式化的缺点

那么数据范式化有什么缺点呢？

一句话可以概括数据范式化的缺点：查询性能低下

从上述范式化后的数据可以看出：

person:{
 '1':{
     'id':1,
     'name':'xiaoliang',
     'age':20,
     'hobby':['30','40','50']
 },
 '2':{
    'id':2,
    'name':'xiaoyu',
    'age':30,
    'hobby':[30]
 }
}

在上述范式化的数据里，hobby是通过id来表示，如果要索引每个id的具体值和对象，比如要到上一层的“hobby”对象中去查询。而原始的嵌套对象可以很直观的展示出来，每一个id所对应的hobby对象是什么。

2.数据范式化的实现（此小节和之后的内容可以选读）

下面我们来尝试编写范式化（normalize）和反范式化的函数（denormalize）.

实现数据范式化和反范式化，主要是上面3个函数，下面我们来一一分析。

本文需要范式化的原始数据为：

const originalData = {
  "id": "123",
  "author":  {
    "uid": "1",
    "name": "Paul"
  },
  "title": "My awesome blog post",
  "comments": {
    total: 100,
    result: [{
        "id": "324",
        "commenter": {
        "uid": "2",
          "name": "Nicole"
        }
      }]
  }
}

（1）schema.Entity

范式化之前必须对嵌套对象进行处理，深层嵌套的情况下，需要用实体Entity进行解构，层级最深的实体需要首先被定义，然后一层层的解耦到最外层。

该实体的构造方法，接受3个参数，第一个参数name，表示范式化后的对象的属性的名称，第二个参数entityParams，表示实体化后，原始的嵌套对象和一定义的实体之间的一一对应关系，第三个参数表示的是
用来索引嵌套对象的主键，默认的情况下，我们用id来索引。

上述实例的实体化为：

const user = new schema.Entity('users', {}, {
  idAttribute: 'uid'
})
const comment = new schema.Entity('comments', {
  commenter: user
})
const article = new schema.Entity('articles', {
  author: user,
  comments: {
    result: [ comment ]
  }
});

实体化还是从最里层到最外层。并且第三个参数表示索引的主键。

如何实现构造方法呢？schema.Entity的实现代码为,首先定义一个类：

export default class EntitySchema {
  constructor (name, entityParams = {}, entityConfig = {}) {
    const idAttribute = entityConfig.idAttribute || 'id'
    this.name = name
    this.idAttribute = idAttribute
    this.init(entityParams)
  }
  /**
   * [获取当前schema的名字]
   * @return {[type]} [description]
   */
  getName () {
    return this.name
  }
  getId (input) {
    let key = this.idAttribute
    return input[key]
  }
  /**
   * [遍历当前schema中的entityParam，entityParam中可能存在schema]
   * @param  {[type]} entityParams [description]
   * @return {[type]}              [description]
   */
  init (entityParams) {
    if (!this.schema) {
      this.schema = {}
    }
    for (let key in entityParams) {
      if (entityParams.hasOwnProperty(key)) {
        this.schema[key] = entityParams[key]
      }
    }
  }
}

定义一个EntitySchema类，构造方法中，因为entityParams存在嵌套的情况，因此需要在init方法中遍历entityParams中的schema属性。此外为了定义了获取主键和name名的方法，getName和getId。

（2）normalize(data, entity)

上述就是范式化的函数，接受两个参数，第一个参数为原始的需要被范式化的数据，第二个参数为最外层的实体。同样在上述例子原始数据被范式化，可以通过如下方式来实现：

normalize(originData,articles)

上述的例子中，最外层的实体为articles。

那么如何实现该范式化,首先考虑到最外层的实体，可能存在嵌套，且最外层实体的对象的属性值不一定是一个schema实体，也可能是数组等结构，因此要分别处理schema实体和非schema实体的情况：

const flatten = (value, schema, addEntity) => {
  if (typeof schema.getName === 'undefined') {
    return noSchemaNormalize(schema, value, flatten, addEntity)
  }
  return schemaNormalize(schema, value, flatten, addEntity)
}

如果传入的是一个schema实体：

const schemaNormalize = (schema, data, flatten, addEntity) => {
  const processedEntity = {...data}
  const currentSchema = schema
  Object.keys(currentSchema.schema).forEach((key) => {
    const schema = currentSchema.schema[key]
    const temple = flatten(processedEntity[key], schema, addEntity)
    // console.log(key,temple);
    processedEntity[key] = temple
  })
  addEntity(currentSchema, processedEntity)
  return currentSchema.getId(data)
}

那么情况为递归该schema，直到从最外层的schema递归到最里层的schema.

如果传入的不是一个schema实体：

const noSchemaNormalize = (schema, data, flatten, addEntity) => {
  // 非schema实例要分别针对对象类型和数组类型做不同的处理
  const object = { ...data }
  const arr = []
  let tag = schema instanceof Array
  Object.keys(schema).forEach((key) => {
    if (tag) {
      const localSchema = schema[key]
      const value = flatten(data[key], localSchema, addEntity)
      arr.push(value)
    } else {
      const localSchema = schema[key]
      const value = flatten(data[key], localSchema, addEntity)
      object[key] = value
    }
  })
  // 根据判别的结果，返回不同的值，可以是对象，也可以是数组
  if (tag) {
    return arr
  } else {
    return object
  };
}

如果不是一个实体，那么分为是一个对象和是一个数组两种情况分别来处理。

最后有一个addEntity，递归到里层，再往外层，得到对应的schema的name所包含的id，和此id所指向的具体对象。

const addEntities = (entities) => (schema, processedEntity) => {
  const schemaKey = schema.getName()
  const id = schema.getId(processedEntity)
  if (!(schemaKey in entities)) {
    entities[schemaKey] = {}
  }
  const existingEntity = entities[schemaKey][id]
  if (existingEntity) {
    entities[schemaKey][id] = Object.assgin(existingEntity, processedEntity)
  } else {
    entities[schemaKey][id] = processedEntity
  }
}

最后我们的normalize方法具体为：

const normalize = (data, schema) => {
  const entities = {}
  const addEntity = addEntities(entities)

  const result = flatten(data, schema, addEntity)
  return { entities, result }
}

（3）denormalize反范式化方法

denormalize反范式化方法，接受3个参数，其中normalizedData 和entities表示范式化后的对象的属性，而entity表示最外层的实体。

调用的方式为:

const normalizedData = normalize(originalData, article);
// 还原范式化数据
const {result, entities} = normalizedData
const denormalizedData = denormalize(result, article, entities)

反范式化的具体代码与范式化相似，就不具体说明，详情请看源代码。

3. jest简单单元测试

直接给出简单的单元测试代码：

//范式化数据用例，原始数据
const originalData = {
  "id": "123",
  "author":  {
    "uid": "1",
    "name": "Paul"
  },
  "title": "My awesome blog post",
  "comments": {
    total: 100,
    result: [{
        "id": "324",
        "commenter": {
        "uid": "2",
          "name": "Nicole"
        }
      }]
  }
}
//范式化数据用例，范式化后的结果数据
const normalizedData={
  result: "123",
  entities: {
    "articles": {
      "123": {
        id: "123",
        author: "1",
        title: "My awesome blog post",
        comments: {
    	total: 100,
    	result: [ "324" ]
        }
      }
    },
    "users": {
      "1": { "uid": "1", "name": "Paul" },
      "2": { "uid": "2", "name": "Nicole" }
    },
    "comments": {
      "324": { id: "324", "commenter": "2" }
    }
 }
}
//开始测试上述用例下的，范式化结果对比
test('test originalData to normalizedData', () => {
  const user = new schema.Entity('users', {}, {
    idAttribute: 'uid'
  });
  const comment = new schema.Entity('comments', {
    commenter: user
  });
  const article = new schema.Entity('articles', {
    author: user,
    comments: {
      result: [ comment ]
    }
  });
  const data = normalize(originalData, article);
  expect(data).toEqual(normalizedData);
});
//开始测试上述例子，反范式化的结果对比
test('test normalizedData to originalData',()=>{
  const user = new schema.Entity('users', {}, {
    idAttribute: 'uid'
  });
  // Define your comments schema
  const comment = new schema.Entity('comments', {
    commenter: user
  });
  // Define your article
  const article = new schema.Entity('articles', {
    author: user,
    comments: {
      result: [ comment ]
    }
  });
  const data = normalize(originalData, article)
  //还原范式化数据
  const {result,entities}=data;
  const denormalizedData=denormalize(result,article,entities);
  expect(denormalizedData).toEqual(originalData)
})

React-tiny-virtual-list源码阅读

  在上一章介绍了如何在React，通过虚拟列表的形式优化长列表。介绍了虚拟列表的原理，以及比较常用的优化长列表的组件库React-virtualized和React-tiny-virtual-list。本文中来读一读React-tiny-virtual-list源码。

• 虚拟列表的原理简介
• React-tiny-virtual-list组件的使用
• React-tiny-virtual-list的源码分析
• React-tiny-virtual-list的总结

一、虚拟列表原理简介

优化长列表的原理很简单，基本原理可以一句话概括：

用数组保存所有列表元素的位置，只渲染可视区内的列表元素，当可视区滚动时，根据滚动的offset大小以及所有列表元素的位置，计算在可视区应该渲染哪些元素。

具体实现步骤如下所示：

1. 首先确定长列表所在父元素的大小，父元素的大小决定了可视区的宽和高
2. 确定长列表每一个列表元素的宽和高，同时初始的条件下计算好长列表每一个元素相对于父元素的位置，并用一个数组来保存所有列表元素的位置信息
3. 首次渲染时，只展示相对于父元素可视区内的子列表元素，在滚动时，根据父元素的滚动的offset重新计算应该在可视区内的子列表元素。这样保证了无论如何滚动，真实渲染出的dom节点只有可视区内的列表元素。
4. 假设可视区内能展示5个子列表元素，及时长列表总共有1000个元素，但是每时每刻，真实渲染出来的dom节点只有5个。
5. 补充说明，这种情况下，父元素一般使用position：relative，子元素的定位一般使用：position：absolute或sticky

  通过虚拟列表的方式，不需要同时渲染很多dom节点，只需要渲染出可视区的dom节点，这种方式可以大大减小渲染时间，提升用户体验。

二、React-tiny-virtual-list组件的使用

  React-tiny-virtual-list是一个极简的React虚拟列表优化组件库，我们来看如何使用这个组件：

import VirtualList from 'react-tiny-virtual-list';
const data = ['A', 'B', 'C', 'D', 'E',   'F','G','H','I','J','K','L'];
class TinyVirtual extends Component {
  render(){
    return <VirtualList
            width={"100%"}
            height={200}
            itemCount={data.length}
            itemSize={50}
            renderItem={({index, style}) =>
              <div key={index} style={style}>
                 The style property contains the item's absolute position Letter: {data[index]}, Row: #{index}
              </div>
            }
            />
  }
}

效果为：

  该组件中通过width和height分别定义了宽度和高度，通过itemCount定义了所有需要被渲染成dom节点的数据数组的长度。itemSize定义了渲染的每一个dom的高度，而renderItem定义了如何结合数据来渲染一个dom。

  此外react-tiny-virtual-list的List组件还有scrollDirection属性决定是垂直滚动还是水平滚动，以及recomputeSizes函数用于重新计算列表中每一个dom元素的高度等。

三、React-tiny-virtual-list的源码分析

  下面我们来根据常用的width、height、itemCount、itemSize和renderItem来分析React-tiny-virtual-list的源码。React-tiny-virtual-list的源码包含了一个VirtualList组件，以及处理关于保存了VirtualList组件所渲染的列表元素的位置，同时决定其能否在可视区显示的工具类——SizeAndPositionManager类。

下面来一一分析：

(1)、VirtualList的初始化和render方法

首先来看这个VirtualList组件初始化和render的方法中做了哪些事情，在初始化VirtualList组件时：

itemSizeGetter = (itemSize) => {
  return index => this.getSize(index, itemSize);
};

sizeAndPositionManager = new SizeAndPositionManager({
    itemCount: this.props.itemCount,
    itemSizeGetter: this.itemSizeGetter(this.props.itemSize),
    estimatedItemSize: this.getEstimatedItemSize(),
});

state = {
  offset:
      this.props.scrollOffset ||
      (this.props.scrollToIndex != null &&
        this.getOffsetForIndex(this.props.scrollToIndex)) ||
      0,
 scrollChangeReason: SCROLL_CHANGE_REASON.REQUESTED,
};

在初始化的时候，在state中定义并赋值了整个列表应该滚动到哪一个位置的offset属性，可以根据该值来决定整个列表中，哪几个列dom需要在可视区内被渲染。

并且根据虚拟列表的原理我们指导，需要在内存中保存列表中每一个dom元素的相对于父元素的位置等信息，并且在父元素滚动等操作的时候需要更新子元素列的位置信息。在这里我们通过一个SizeAndPositionManager类来实现。

首先看这个类的状态定义：

class SizeAndPositionManager {
  constructor({itemCount, itemSizeGetter, estimatedItemSize}: Options) {
    this.itemSizeGetter = itemSizeGetter;
    this.itemCount = itemCount;
    this.estimatedItemSize = estimatedItemSize;
    this.itemSizeAndPositionData = {};
    this.lastMeasuredIndex = -1;
}

这个类中有itemSizeGetter方法用于获取从props传入的每一个子元素size的值，以及列表总列数等信息。itemSizeAndPositionData对象用户保存每一列的大小和相对于父元素的定位信息。lastMeasuredIndex表示可视区内最后一个元素的索引。

此外在VirtualList组件的初始化中还有：

styleCache= {};

用于在内存中保存所有子元素的样式，通过index索引。初始化结束后，再来看render的过程：

render() {
    const {
      estimatedItemSize,
      height,
      ...props
    } = this.props;
    const {offset} = this.state;//保存在当前的父元素中，相对于顶部父亲元素滚动的举例offset
    const {start, stop} = this.sizeAndPositionManager.getVisibleRange({
      containerSize: this.props[sizeProp[scrollDirection]] || 0,
      offset,
      overscanCount,
    }); //根据父元素滚动的距离，以及父元素的高度等信息，来决定父元素可视区内应该展示哪几个子元素
    const items: React.ReactNode[] = []; //保存应该在可视区内被渲染的子列表数组
    //找出应该在可视区内被渲染的子列表元素的index之后，就需要通过this.getStyle方法来获取该元素的样式以及在父元素汇总的距离。获取渲染元素的索引值，以及样式之后，通过在属性中通过props传入的renderItem方法，构建应该渲染出的列表元素。
    if (typeof start !== 'undefined' && typeof stop !== 'undefined') {
    for (let index = start; index <= stop; index++) {
        items.push(
          renderItem({
            index,
            style: this.getStyle(index, false),
          }),
        );
    }
  
   return (
     <div ref={this.getRef} {...props} style={wrapperStyle}>
      <div style={innerStyle}>{items}</div>
    </div>
  );
}

其中需要在于this.getStyle方法：

getStyle(index: number, sticky: boolean) {

    const style = this.styleCache[index];

    if (style) {
      return style;
    }

    const {scrollDirection = DIRECTION.VERTICAL} = this.props;
    const {
      size,
      offset,
    } = this.sizeAndPositionManager.getSizeAndPositionForIndex(index);

    return (this.styleCache[index] = sticky
      ? {
          ...STYLE_STICKY_ITEM,
          [sizeProp[scrollDirection]]: size,
          [marginProp[scrollDirection]]: offset,
          [oppositeMarginProp[scrollDirection]]: -(offset + size),
          zIndex: 1,
        }
      : {
          ...STYLE_ITEM,
          [sizeProp[scrollDirection]]: size,
          [positionProp[scrollDirection]]: offset,
        });
}

首先从styleCache的内存中去查找，如果找到就直接返回，否则就根据在初始的时候定义的this.sizeAndPositionManager的getSizeAndPositionForIndex中根据索引来得到响应元素的大小，以及相对于父元素的位置，并以index为索引保存在styleCache内存中。

此外，在render的return中，我们通过ref的方式在virtual dom中获取了父元素。

getRef = (node) => {
  this.rootNode = node;
};

(2)、VirtualList组件处理滚动事件

在VirtualList组件的componentDidMount的声明周期中开始监听滚动事件：

const {scrollOffset, scrollToIndex} = this.props;
this.rootNode.addEventListener('scroll', this.handleScroll, {
  passive: true,
});

接着来看处理滚动事件的函数this.handleScroll：

handleScroll = (event) => {
    const {onScroll} = this.props;
    const offset = this.getNodeOffset();

    if (
      offset < 0 ||
      this.state.offset === offset ||
      event.target !== this.rootNode
    ) {
      return;
    }

    this.setState({
      offset,
      scrollChangeReason: SCROLL_CHANGE_REASON.OBSERVED,
    });

    if (typeof onScroll === 'function') {
      onScroll(offset, event);
    }
};

getNodeOffset() {
  const {scrollDirection = DIRECTION.VERTICAL} = this.props;
  return this.rootNode[scrollProp[scrollDirection]];
}

在这个handleScroll事件中，通过getNodeOffset方法可以获得滚动后父元素滚动的高度，然后在this.setState方法中更新这个offset的值。只要state中的offset的值发生变化,就会重新触发render，在render中根据新的offset来确定可视区应该显示哪些列表。

四、React-tiny-virtual-list总结

• 从源码可以看出来React-tiny-virtual-list的组件是不支持动态高度的，也就是做子元素必须是指定的固定高度，否则随着父元素的滚动，可视区内应该展示哪些子元素会不准确。主要缺陷在于在滚动过程中，没有区重新计算子元素的高度。
• 其次，在源码中我们也可以看出来，其实React-tiny-virtual-list并没有复用可视区内的dom。

从Express到Nestjs，谈谈Nestjs的设计**和使用方法

  最近已经使用过一段时间的nestjs,让人写着有一种java spring的感觉，nestjs可以使用express的所有中间件，此外完美的支持typescript,与数据库关系映射typeorm配合使用可以快速的编写一个接口网关。本文会介绍一下作为一款企业级的node框架的特点和优点。

• 从依赖注入(DI)谈起
• 装饰器和注解
• nestjs的“洋葱模型”
• nestjs的特点总结

一、从依赖注入(DI)谈起

(1)、angular中的依赖注入

  从angular1.x开始，实现了依赖注入或者说控制反转的模式，angular1.x中就有controller（控制器）、service（服务）,模块（module）。笔者在早年间写过一段时间的angular1.3,下面举例来说明：

var myapp=angular.module('myapp',['ui.router']);
myapp.controller('test1',function($scope,$timeout){}
myapp.controller('test2',function($scope,$state){}

  上面这个就是angular1.3中的一个依赖注入的例子，首先定义了模块名为“myapp”的module, 接着在myapp这个模块中定义controller控制器。将myapp模块的控制权交给了myapp.controller函数。具体的依赖注入的流程图如下所示：

myapp这个模块如何定义，由于它的两个控制器决定，此外在控制器中又依赖于$scope、$timeout等服务。这样就实现了依赖注入，或者说控制反转。

(2)、什么是依赖注入

  用一个例子来通俗的讲讲什么是依赖注入。

class Cat{

}
class Tiger{

}
class Zoo{
  constructor(){
     this.tiger = new Tiger();
     this.cat = new Cat();
  }
}