概况

JavaScript 通过 XMLHttpRequest(XHR) 来执行异步请求，这个方式已经存在了很长一段时间。但它不是最佳API。它在设计上不符合职责分离原则，将输入、输出和用事件来跟踪的状态混杂在一个对象里。而且，基于事件的模型与最近 JavaScript 流行的 Promise 以及基于生成器的异步编程模型不太搭。新的 Fetch API 打算修正上面提到的那些缺陷。

而与jQuery相比， fetch 方法与 jQuery.ajax() 的主要区别在于：

• fetch() 方法返回的 Promise 对象并不会在HTTP状态码为404或者500的时候自动抛出异常，而需要用户进行手动处理
• 默认情况下，fetch 并不会发送任何的本地的 cookie 到服务端，注意，如果服务端依靠 Session 进行用户控制的话要默认开启 Cookie

Installation & Polyfill

window.fetch 是基于 XMLHttpRequest 的浏览器的统一的封装，针对老的浏览器可以使用 Github 的这个polypill。 fetch 基于 ES6 的 Promise ，在旧的浏览器中首先需要引入 Promise的 polypill ，可以用 es6-promise:

1

npm install es6-promise

使用 isomorphic-fetch：

1

npm install --save isomorphic-fetch es6-promise

使用的时候也非常方便：

1
2
3
4
5
6
7
8
9
10
11
12

require('es6-promise').polyfill();
require('isomorphic-fetch');
fetch('//offline-news-api.herokuapp.com/stories')
    .then(function(response) {
        if (response.status >= 400) {
            throw new Error("Bad response from server");
        }
        return response.json();
    })
    .then(function(stories) {
        console.log(stories);
    });

Usage

HTML

1
2
3
4
5
6

fetch('/users.html')
  .then(function(response) {
    return response.text()
  }).then(function(body) {
    document.body.innerHTML = body
  })

JSON

1
2
3
4
5
6
7
8

fetch('/users.json')
  .then(function(response) {
    return response.json()
  }).then(function(json) {
    console.log('parsed json', json)
  }).catch(function(ex) {
    console.log('parsing failed', ex)
  })

Response metadata

1
2
3
4
5
6

fetch('/users.json').then(function(response) {
  console.log(response.headers.get('Content-Type'))
  console.log(response.headers.get('Date'))
  console.log(response.status)
  console.log(response.statusText)
})

Post form

1
2
3
4
5
6

var form = document.querySelector('form')

fetch('/users', {
  method: 'POST',
  body: new FormData(form)
})

Post JSON

1
2
3
4
5
6
7
8
9
10

fetch('/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'Hubot',
    login: 'hubot',
  })
})

File upload

1
2
3
4
5
6
7
8
9
10

var input = document.querySelector('input[type="file"]')

var data = new FormData()
data.append('file', input.files[0])
data.append('user', 'hubot')

fetch('/avatars', {
  method: 'POST',
  body: data
})

Request:请求构造

Request对象代表了一次fetch请求中的请求体部分，你可以自定义Request对象:

• method - 使用的HTTP动词，GET, POST, PUT, DELETE, HEAD
• url - 请求地址，URL of the request
• headers - 关联的Header对象
• referrer - referrer
• mode - 请求的模式，主要用于跨域设置，cors, no-cors, same-origin
• credentials - 是否发送Cookie omit, same-origin
• redirect - 收到重定向请求之后的操作，follow, error, manual
• integrity - 完整性校验
• cache - 缓存模式(default, reload, no-cache)

  1 2 3 4 5 6 7 8 9 10 11

  var request = new Request('/users.json', { method: 'POST', mode: 'cors', redirect: 'follow', headers: new Headers({ 'Content-Type': 'text/plain' }) }); //use it fetch(request).then(function() { /* handle response */ });

1
2
3
4
5
6
7
8

fetch('/users.json', {
    method: 'POST',
    mode: 'cors',
    redirect: 'follow',
    headers: new Headers({
        'Content-Type': 'text/plain'
    })
}).then(function() { /* handle response */ });

Cookies

如果需要设置fetch自动地发送本地的Cookie，需要将credentials设置为same-origin:

1
2
3

fetch('/users', {
  credentials: 'same-origin'
})

该选项会以类似于XMLHttpRequest的方式来处理Cookie，否则，可能因为没有发送Cookie而导致基于Session的认证出错。可以将credentials的值设置为include来在CORS情况下发送请求。

1
2
3

fetch('https://example.com:1234/users', {
  credentials: 'include'
})

Headers:自定义请求头

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// Create an empty Headers instance
var headers = new Headers();

// Add a few headers
headers.append('Content-Type', 'text/plain');
headers.append('X-My-Custom-Header', 'CustomValue');

// Check, get, and set header values
headers.has('Content-Type'); // true
headers.get('Content-Type'); // "text/plain"
headers.set('Content-Type', 'application/json');

// Delete a header
headers.delete('X-My-Custom-Header');

// Add initial values
var headers = new Headers({
    'Content-Type': 'text/plain',
    'X-My-Custom-Header': 'CustomValue'
});

使用webpack前后端跨域发送cookie的问题

最简单的方法是服务端将响就头设置成 Access-Control-Allow-Origin：域名，如果客户端发送请求时，不需要携带 cookie 等信息，可以设置成 Access-Control-Allow-Origin：* ，表示任何域都可以向服务端发送请求，客户端不需要任何配置，就可以进行跨域调试了。

但一般网站，都需要向后端发送 cookie来进行身份验证，此时，服务器还需向响应头设置 Access-Control-Allow-Credentials:true，表示跨域时，允许cookie添加到请求中。设置 Access-Control-Allow-Credentials:true 后，要将 Access-Control-Allow-Origin 指定到具体的域，否则cookie不会带到客户端，例如设置成Access-Control-Allow-Origin：http://192.168.0.1:8088,http://192.168.0.1:8088 是前端服务器的域名，这就要求用webpack的时候，要指定具体的域来启动，不要直接用localhost。

1
2
3
4
5

...
devServer: {
    host: '192.168.0.1:8088',
},
...

要向后端发送cookie，前端也需要有相应的配置。需要将credentials设置成include，表示允许跨越传递cookie，不要将credentials设置成same-origin,如果设置成same-origin，只会在同源的时候发送cookie。另外还要将 withCredentials 设为true。

Response:响应处理

在fetch的then函数中提供了一个Response对象，即代表着对于服务端返回值的封装，你也可以在Mock的时候自定义Response对象，譬如在你需要使用Service Workers的情况下，在Response中，你可以作如下配置:

• type - basic, cors
• url
• useFinalURL - 是否为最终地址
• status - 状态码 (ex: 200, 404, etc.)
• ok - 是否成功响应 (status in the range 200-299)
• statusText - status code (ex: OK)
• headers - 响应头

The Response also provides the following methods:

• clone()- Creates a clone of a Response object.
• error() - Returns a new Response object associated with a network error.
• redirect() - Creates a new response with a different URL.
• arrayBuffer() - Returns a promise that resolves with an ArrayBuffer.
• blob() - Returns a promise that resolves with a Blob.
• formData() - Returns a promise that resolves with a FormData object.
• json() - Returns a promise that resolves with a JSON object.
• text() - Returns a promise that resolves with a USVString (text).

处理HTTP错误状态

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

function checkStatus(response) {
  if (response.status >= 200 && response.status < 300) {
    return response
  } else {
    var error = new Error(response.statusText)
    error.response = response
    throw error
  }
}

function parseJSON(response) {
  return response.json()
}

fetch('/users')
  .then(checkStatus)
  .then(parseJSON)
  .then(function(data) {
    console.log('request succeeded with JSON response', data)
  }).catch(function(error) {
    console.log('request failed', error)
  })

处理JSON响应

1
2
3
4
5
6
7
8
9
10
11
12
13

fetch('https://davidwalsh.name/demo/arsenal.json').then(function(response) {

// Convert to JSON

return response.json();

}).then(function(j) {

// Yay, `j` is a JavaScript object

console.log(j);

});

处理文本响应

1
2
3
4
5
6
7
8
9
10
11
12
13

fetch('/next/page')

  .then(function(response) {

    return response.text();

  }).then(function(text) {

  // <!DOCTYPE ....

  console.log(text);

  });

Blob Responses

如果你希望通过fetch方法来载入一些类似于图片等资源：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

fetch('flowers.jpg')

    .then(function(response) {

       return response.blob();

    })

    .then(function(imageBlob) {

       document.querySelector('img').src = URL.createObjectURL(imageBlob);

});
blob()方法会接入一个响应流并且一直读入到结束。

评论和共享

初始化阶段：

运行中阶段：

销毁阶段：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

import React, { Component } from 'react'

class GD extends Component{

    constructor(props) {
        super(props)
        console.log('constructor')
        this.state = {
            shrinkState: true
        }
    }

    componentWillMount() {
        console.log('componentWillMount')
    }

    render() {
        return (
            <div>
                <h3>GD</h3>
                <input
                    type="button"
                    onClick={()=>{
                        this.setState({
                            shrinkState: false
                        })
                    }}
                    value={this.props.name}
                />
            </div>
        )
    }

    componentDidMount() {
        console.log('componentDidMount')
    }

    componentWillReceiveProps() {
        console.log('componentWillReceiveProps: 父组件修改属性触发')
    }

    shouldComponentUpdate() {
        console.log('shouldComponentUpdate')
        return true
    }

    componentWillUpdate() {
        console.log('componentWillUpdate')
    }

    componentDidUpdate() {
        console.log('componentDidUpdate')
    }

    componentWillUnmount (){
        console.log('componentWillUnmount')
    }
}

export default GD

评论和共享

histroy 属性

Router组件的history属性，用来监听浏览器地址栏的变化，并将URL解析成一个地址对象，供 React Router 匹配。
history属性，一共可以设置三种值。

• browserHistory
• hashHistory
• createMemoryHistory
  如果设为 hashHistory，路由将通过URL的hash部分（#）切换，URL的形式类似 example.com/#/some/path。

  1 2 3 4 5 6

  import { hashHistory } from 'react-router' render( <Router history={hashHistory} routes={routes} />, document.getElementById('app') )

如果设为 browserHistory，浏览器的路由就不再通过Hash完成了，而显示正常的路径 example.com/some/path，背后调用的是浏览器的 History API。

1
2
3
4
5
6

import { browserHistory } from 'react-router'

render(
  <Router history={browserHistory} routes={routes} />,
  document.getElementById('app')
)

但是，这种情况需要对服务器改造。否则用户直接向服务器请求某个子路由，会显示网页找不到的404错误。
如果开发服务器使用的是 webpack-dev-server，加上 --history-api-fallback参数就可以了。

1

$ webpack-dev-server --inline --content-base . --history-api-fallback

或者在 webpack.config.js 配置

1
2
3

devServer: {
    historyApiFallback: true,
},

createMemoryHistory主要用于服务器渲染。它创建一个内存中的history对象，不与浏览器URL互动。

1

const history = createMemoryHistory(location)

评论和共享

在UML类图中，常见的有以下几种关系: 泛化（Generalization）, 实现（Realization），关联（Association)，聚合（Aggregation），组合(Composition)，依赖(Dependency)

泛化（Generalization）

【泛化关系】：是一种继承关系，表示一般与特殊的关系，它指定了子类如何特化父类的所有特征和行为。例如：老虎是动物的一种，即有老虎的特性也有动物的共性。

【箭头指向】：带三角箭头的实线，箭头指向父类

实现（Realization）

【实现关系】：是一种类与接口的关系，表示类是接口所有特征和行为的实现.

【箭头指向】：带三角箭头的虚线，箭头指向接口

关联（Association)

【关联关系】：是一种拥有的关系，它使一个类知道另一个类的属性和方法；如：老师与学生，丈夫与妻子关联可以是双向的，也可以是单向的。双向的关联可以有两个箭头或者没有箭头，单向的关联有一个箭头。

【代码体现】：成员变量

【箭头及指向】：带普通箭头的实心线，指向被拥有者

上图中，老师与学生是双向关联，老师有多名学生，学生也可能有多名老师。但学生与某课程间的关系为单向关联，一名学生可能要上多门课程，课程是个抽象的东西他不拥有学生。

聚合（Aggregation）

【聚合关系】：是整体与部分的关系，且部分可以离开整体而单独存在。如车和轮胎是整体和部分的关系，轮胎离开车仍然可以存在。

聚合关系是关联关系的一种，是强的关联关系；关联和聚合在语法上无法区分，必须考察具体的逻辑关系。

【代码体现】：成员变量

【箭头及指向】：带空心菱形的实心线，菱形指向整体

组合(Composition)

【组合关系】：是整体与部分的关系，但部分不能离开整体而单独存在。如公司和部门是整体和部分的关系，没有公司就不存在部门。

组合关系是关联关系的一种，是比聚合关系还要强的关系，它要求普通的聚合关系中代表整体的对象负责代表部分的对象的生命周期。

【代码体现】：成员变量

【箭头及指向】：带实心菱形的实线，菱形指向整体

依赖(Dependency)

【依赖关系】：是一种使用的关系，即一个类的实现需要另一个类的协助，所以要尽量不使用双向的互相依赖.

【代码表现】：局部变量、方法的参数或者对静态方法的调用

【箭头及指向】：带箭头的虚线，指向被使用者

各种关系的强弱顺序

泛化 = 实现 > 组合 > 聚合 > 关联 > 依赖

评论和共享

Redux 中使用 Object Spread Operator （…）

ES7 Stage 3 阶段

不直接修改 state 是 Redux 的核心理念之一, 所以你会发现自己总是在使用 Object.assign() 创建对象拷贝, 而拷贝中会包含新创建或更新过的属性值。在下面的 todoApp 示例中, Object.assign() 将会返回一个新的 state 对象, 而其中的 visibilityFilter 属性被更新了:

1
2
3
4
5
6
7
8
9
10

function todoApp(state = initialState, action) {
  switch (action.type) {
    case SET_VISIBILITY_FILTER:
      return Object.assign({}, state, {
        visibilityFilter: action.filter
      })
    default:
      return state
  }
}

尽管这样可行, 但 Object.assign() 冗长的写法会迅速降低 reducer 的可读性。

一个可行的替代方案是使用ES7的对象展开语法提案。该提案让你可以通过展开运算符 (...) , 以更加简洁的形式将一个对象的可枚举属性拷贝至另一个对象。对象展开运算符在概念上与ES6的数组展开运算符相似

1
2
3
4
5
6
7
8

function todoApp(state = initialState, action) {
  switch (action.type) {
    case SET_VISIBILITY_FILTER:
      return { ...state, visibilityFilter: action.filter }
    default:
      return state
  }
}

目前对象展开运算符提案还处于 ES7 Stage 2 草案阶段, 若你想在产品中使用它得依靠转换编译器, 如 Babel。 你可以使用 es2015 预设值, 安装 babel-plugin-transform-object-rest-spread 并将其单独添加到位于 .babelrc 的 plugins 数组中。

1
2
3
4

{
  "presets": ["es2015"],
  "plugins": ["transform-object-rest-spread"]
}

评论和共享

介绍

动机

JavaScript 需要更多的 state，Redux 试图让 state 的变化变得可预测。

三大原则

单一数据源

整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中

State 是只读的

惟一改变 state 的方法就是触发 action，action(表达想要修改的意图) 是一个用于描述已发生事件的普通对象。

使用纯函数来执行修改

为了描述 action 如何改变 state tree ，你需要编写 reducers。

Reducer 只是一些纯函数，它接收先前的 state 和 action，并返回新的 state。

基础

Action

Action 是把数据从应用传到 store 的有效载荷。它是 store 数据的唯一来源。一般来说你会通过 store.dispatch() 将 action 传到 store。

Action 本质上是 JavaScript 普通对象。我们约定，action 内必须使用一个字符串类型的 type 字段来表示将要执行的动作。

例如：

1
2
3
4

{
  type: ADD_TODO,
  text: 'Build my first Redux app'
}

action 对象的结构完全由自己决定，但是为了多人合作方便，最好遵循一定的标准 Flux 标准 Action

store 里能直接通过 store.dispatch() 调用 dispatch()

但是多数情况下你会使用 react-redux 提供的 connect() 帮助器来调用。bindActionCreators() 可以自动把多个 action 创建函数 绑定到 dispatch() 方法上。

Reducer

处理 action

reducer 就是一个纯函数，接收旧的 state 和 action，返回新的 state。持 reducer 纯净非常重要。永远不要在 reducer 里做这些操作：

• 修改传入参数
• 执行有副作用的操作，如 API 请求和路由跳转
• 调用非纯函数，如 Date.now() 或 Math.random()

建议你尽可能地把 state 范式化，不存在嵌套。把应用的 state 想像成数据库。只要传入参数相同，返回计算得到的下一个 state 就一定相同。没有特殊情况、没有副作用，没有 API 请求、没有变量修改，单纯执行计算。

注意:

• 不要修改 state，使用 Object.assign() 新建了一个副本。不能这样使用 Object.assign(state, { visibilityFilter: action.filter })，因为它会改变第一个参数的值。你必须把第一个参数设置为空对象。你也可以开启对ES7提案对象展开运算符的支持, 从而使用 { ...state, ...newState } 达到相同的目的。
• 在 default 情况下返回旧的 state

拆分 Reducer

Redux 提供了 combineReducers() 工具类来合并拆分的 Reducer

Store

Redux 应用只有一个单一的 store

Store 就是把 Action，Reducer 联系到一起的对象。Store 有以下职责：

• 维持应用的 state；
• 提供 getState() 方法获取 state；
• 提供 dispatch(action) 方法更新 state；
• 通过 subscribe(listener) 注册监听器;
• 通过 subscribe(listener) 返回的函数注销监听器。

createStore() 的第二个参数是可选的, 用于设置 state 初始状态。

数据流

严格的单向数据流是 Redux 架构的设计核心。

Redux 应用中数据的生命周期遵循下面 4 个步骤：

1. 调用 store.dispatch(action)

2. Redux store 调用传入的 reducer 函数。

   Store 会把两个参数传入 reducer： 当前的 state 树和 action。

3. 根 reducer 应该把多个子 reducer 输出合并成一个单一的 state 树。
4. Redux store 保存了根 reducer 返回的完整 state 树。

搭配 React

安装 React Redux

Redux 默认并不包含 React 绑定库，需要单独安装。

1

npm install --save react-redux

connect()

我们想要通过 react-redux 提供的 connect() 方法将包装好的组件连接到 Redux。尽量只做一个顶层的组件，或者 route 处理。从技术上来说你可以将应用中的任何一个组件 connect() 到 Redux store 中，但尽量避免这么做，因为这个数据流很难追踪。

任何一个从 connect() 包装好的组件都可以得到一个 dispatch 方法作为组件的 props，以及得到全局 state 中所需的任何内容。connect() 的唯一参数是 selector。此方法可以从 Redux store 接收到全局的 state，然后返回组件中需要的 props。最简单的情况下，可以返回一个初始的 state （例如，返回认证方法），但最好先将其进行转化。

selector 的作用就是为 React Components 构造适合自己需要的状态视图。是一个自定义函数，selector 的实现完全是自定义函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

import { connect } from 'react-redux';
...

class App extends Component {
  render() {
    // 通过调用 connect() 注入:
    const { dispatch, visibleTodos, visibilityFilter } = this.props
    return (
      ...
    )
  }
}

App.propTypes = {
	...
}

// 基于全局 state ，哪些是我们想注入的 props ?
// 注意：使用 https://github.com/reactjs/reselect 效果更佳。
function select(state) {
  return {
    visibilityFilter: state.visibilityFilter
  };
}

// 包装 component ，注入 dispatch 和 state 到其默认的 connect(select)(App) 中；
export default connect(select)(App);

reselect 这个项目提供了带 cache 功能的 selector。如果 Store/State 和构造 view 的参数没有变化，那么每次 Component 获取的数据都将来自于上次调用/计算的结果。得益于 Store/State Immutable 的本质，状态变化的检测是非常高效的。

高级

异步Action

当调用异步 API 时，有两个非常关键的时刻：发起请求的时刻，和接收到响应的时刻 （也可能是超时）。

这两个时刻都可能会更改应用的 state；为此，你需要 dispatch 普通的同步 action。一般情况下，每个 API 请求都需要 dispatch 至少三种 action：

1. 一种通知 reducer 请求开始的 action。

   对于这种 action，reducer 可能会切换一下 state 中的 isFetching 标记。以此来告诉 UI 来显示进度条。

2. 一种通知 reducer 请求成功结束的 action。

   对于这种 action，reducer 可能会把接收到的新数据合并到 state 中，并重置 isFetching。UI 则会隐藏进度条，并显示接收到的数据。

3. 一种通知 reducer 请求失败的 action。

   对于这种 action，reducer 可能会重置 isFetching。或者，有些 reducer 会保存这些失败信息，并在 UI 里显示出来。

为了区分这三种 action，可能在 action 里添加一个专门的 status 字段作为标记位：

1
2
3

{ type: 'FETCH_POSTS' }
{ type: 'FETCH_POSTS', status: 'error', error: 'Oops' }
{ type: 'FETCH_POSTS', status: 'success', response: { ... } }

又或者为它们定义不同的 type：

1
2
3

{ type: 'FETCH_POSTS_REQUEST' }
{ type: 'FETCH_POSTS_FAILURE', error: 'Oops' }
{ type: 'FETCH_POSTS_SUCCESS', response: { ... } }

异步 Action Creator

如何把之前定义的同步 action creator 和 网络请求结合起来呢？标准的做法是使用 Redux Thunk middleware。要引入 redux-thunk 这个专门的库才能使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

import fetch from 'isomorphic-fetch'

export const REQUEST_POSTS = 'REQUEST_POSTS'
function requestPosts(subreddit) {
  return {
    type: REQUEST_POSTS,
    subreddit
  }
}

export const RECEIVE_POSTS = 'RECEIVE_POSTS'
function receivePosts(subreddit, json) {
  return {
    type: RECEIVE_POSTS,
    subreddit,
    posts: json.data.children.map(child => child.data),
    receivedAt: Date.now()
  }
}

// 来看一下我们写的第一个 thunk action creator！
// 虽然内部操作不同，你可以像其它 action creator 一样使用它：
// store.dispatch(fetchPosts('reactjs'))

export function fetchPosts(subreddit) {

  // Thunk middleware 知道如何处理函数。
  // 这里把 dispatch 方法通过参数的形式传给函数，
  // 以此来让它自己也能 dispatch action。

  return function (dispatch) {

    // 首次 dispatch：更新应用的 state 来通知
    // API 请求发起了。

    dispatch(requestPosts(subreddit))

    // thunk middleware 调用的函数可以有返回值，
    // 它会被当作 dispatch 方法的返回值传递。

    // 这个案例中，我们返回一个等待处理的 promise。
    // 这并不是 redux middleware 所必须的，但这对于我们而言很方便。

    return fetch(`http://www.subreddit.com/r/${subreddit}.json`)
      .then(response => response.json())
      .then(json =>

        // 可以多次 dispatch！
        // 这里，使用 API 请求结果来更新应用的 state。

        dispatch(receivePosts(subreddit, json))
      )

      // 在实际应用中，还需要
      // 捕获网络请求的异常。
  }
}

本示例使用了 fetch API。它是替代 XMLHttpRequest 用来发送网络请求的非常新的 API。由于目前大多数浏览器原生还不支持它，建议你使用 isomorphic-fetch 库：

在底层，它在浏览器端使用 whatwg-fetch polyfill，在服务器端使用 node-fetch，所以如果当你把应用改成同构时，并不需要改变 API 请求。

评论和共享

安装

1

$ npm install --global mocha

例子

1
2
3
4
5
6
7
8

var add = require('./add.js');
var expect = require('chai').expect;

describe('加法函数的测试', function() {
  it('1 加 1 应该等于 2', function() {
    expect(add(1, 1)).to.be.equal(2);
  });
});

describe 块称为”测试套件”，表示一组相关的测试。可以嵌套多层。

it 块称为”测试用例”，表示一个单独的测试，是测试的最小单位

通常，测试脚本与所要测试的源码脚本同名，但是后缀名为 .test.js （表示测试）或者 .spec.js （表示规格）

断言库

Mocha 本身不带断言库，所以必须先引入断言库。上面代码引入的断言库是 chai，并且指定使用它的 expect 断言风格。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// 相等或不相等
expect(4 + 5).to.be.equal(9);
expect(4 + 5).to.be.not.equal(10);
expect(foo).to.be.deep.equal({ bar: 'baz' });

// 布尔值为true
expect('everthing').to.be.ok;
expect(false).to.not.be.ok;

// typeof
expect('test').to.be.a('string');
expect({ foo: 'bar' }).to.be.an('object');
expect(foo).to.be.an.instanceof(Foo);

// include
expect([1,2,3]).to.include(2);
expect('foobar').to.contain('foo');
expect({ foo: 'bar', hello: 'universe' }).to.include.keys('foo');

// empty
expect([]).to.be.empty;
expect('').to.be.empty;
expect({}).to.be.empty;

// match
expect('foobar').to.match(/^foo/);

参数

--recursive

Mocha 默认只执行 test 子目录下面第一层的测试用例，不会执行更下层的用例。

为了改变这种行为，就必须加上 --recursive 参数

1

mocha --recursive

--watch，-w

视指定的测试脚本。只要测试脚本有变化，就会自动运行Mocha

配置文件 mocha.opts

Mocha 允许在test目录下面，放置配置文件 mocha.opts，把命令行参数写在里面。

然后，把这参数写入test目录下的mocha.opts文件。

1
2
3

--reporter tap
--recursive
--growl

然后，执行 mocha 就能取得一样的效果。

ES6 测试

如果测试脚本是用ES6写的，那么运行测试之前，需要先用Babel转码。

1
2
3
4
5
6
7
8
9
10

import add from '../src/add.js';
import chai from 'chai';

let expect = chai.expect;

describe('加法函数的测试', function() {
  it('1 加 1 应该等于 2', function() {
    expect(add(1, 1)).to.be.equal(2);
  });
});

ES6转码，需要安装Babel。

1

$ npm install babel-core babel-preset-es2015 --save-dev

然后，在项目目录下面，新建一个 .babelrc 配置文件。

1
2
3
4

{
  "presets": [ "es2015" ]
}

最后，使用 --compilers 参数指定测试脚本的转码器。

1

mocha --compilers js:babel-core/register

Babel默认不会对Iterator、Generator、Promise、Map、Set等全局对象，以及一些全局对象的方法（比如Object.assign）转码。如果你想要对这些对象转码，就要安装babel-polyfill。

1

$ npm install babel-polyfill --save

然后，在你的脚本头部加上一行。

1

import 'babel-polyfill'

异步测试

Mocha 默认每个测试用例最多执行 2000 毫秒，如果到时没有得到结果，就报错。对于涉及异步操作的测试用例，这个时间往往是不够的，需要用 -t 或 --timeout 参数指定超时门槛。

1
2
3
4
5
6
7
8
9

it('测试应该5000毫秒后结束', function(done) {
  var x = true;
  var f = function() {
    x = false;
    expect(x).to.be.not.ok;
    done(); // 通知Mocha测试结束
  };
  setTimeout(f, 4000);
});

1

$ mocha -t 5000 timeout.test.js

测试用例的钩子

Mocha 在 describe 块之中，提供测试用例的四个钩子： before() 、 after() 、 beforeEach() 和 afterEach()。它们会在指定时间执行。

• before() 在本区块的所有测试用例之前执行
• after() 在本区块的所有测试用例之后执行
• beforeEach() 在本区块的每个测试用例之前执行
• afterEach() 在本区块的每个测试用例之后执行

评论和共享

如果不阻止默认行为，使用 {passive: true} 能够有效的增加流畅度

passive 的事件监听器

很久以前，addEventListener() 的参数约定是这样的：

1

addEventListener(type, listener, useCapture)

后来，最后一个参数，也就是控制监听器是在捕获阶段执行还是在冒泡阶段执行的 useCapture 参数，变成了可选参数（传 true 的情况太少了）：

1

addEventListener(type, listener[, useCapture ])

2015 年底，DOM 规范做了修订：addEventListener() 的第三个参数可以是个对象值了，也就是说第三个参数现在可以是两种类型的值了：

1
2

addEventListener(type, listener[, useCapture ])
addEventListener(type, listener[, options ])

这个修订是为了扩展新的选项，从而自定义更多的行为，目前规范中 options 对象可用的属性有三个：

1
2
3
4
5

addEventListener(type, listener, {
    capture: false,
    passive: false,
    once: false
})

三个属性都是布尔类型，默认值都为 false。

1. capture 属性等价于以前的 useCapture 参数
2. once 属性就是表明该监听器是一次性的，执行一次后就被自动 removeEventListener 掉，还没有浏览器实现它；
3. passive 属性 Firefox 和 Chrome 已经实现

浏览器无法预先知道一个监听器会不会调用 preventDefault()，它能做的只有等监听器执行完后再去执行默认行为，而监听器执行是要耗时的，有些甚至耗时很明显，这样就会导致页面卡顿。视频里也说了，即便监听器是个空函数，也会产生一定的卡顿，毕竟空函数的执行也会耗时。

有 80% 的滚动事件监听器是不会阻止默认行为的，也就是说大部分情况下，浏览器是白等了。所以，passive 监听器诞生了，passive 的意思是“顺从的”，表示它不会对事件的默认行为说 no，浏览器知道了一个监听器是 passive 的，它就可以在两个线程里同时执行监听器中的 JavaScript 代码和浏览器的默认行为了。

如果不阻止默认行为，使用 {passive: true} 能够有效的增加流畅度

假如不小心在 passive 的监听器里调用了 preventDefault()，也无妨，因为 preventDefault() 不会产生任何效果，但开发者工具会发出警告。

Chrome 发现耗时超过 100 毫秒的非 passive 的监听器，警告你加上 {passive: true}

何时调用 removeEventListener

第三个参数是布尔值的时候，addEventListener("foo", listener, true) 添加的监听器，必须用 removeEventListener("foo", listener, true) 才能删除掉。因为这个监听器也有可能还注册在了冒泡阶段，那样的话，同一个监听器实际上对应着两个监听器对象

• 如果要移除事件句柄，addEventListener() 的执行函数必须使用外部函数
• 类似 document.removeEventListener("event", function(){ myScript }); 该事件是无法移除的。

1
2
3
4
5
6
7
8
9

var div1 = document.getElementById("div1");

function listener(e){
	console.log("div listener")
}

div1.addEventListener('mousedown', listener, true);

div1.removeEventListener("mousedown", listener, true);

那现在 addEventListener("foo", listener, {passive: true}) 添加的监听器只要 removeEventListener("foo", listener) 就可以了

所以说在 removeEventListener 的时候永远不需写 passive 和 once，但 capture 可能要

评论和共享

兼容性

经测试，兼容 ie9+ 主流浏览器

手机单击触发事件

Chrome

onTouchStart -> onTouchEnd -> onMouseDown -> onMouseUp

Firefox

onTouchStart -> onTouchEnd -> onMouseDown -> onMouseMove -> onMouseUp

手机触摸移动触发事件

Chrome

onTouchStart -> onTouchMove -> onTouchEnd

Firefox

onTouchStart -> onTouchMove -> onTouchEnd -> onMouseDown -> onMouseMove -> onMouseUp

获取坐标方式

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

import React,{ Component } from 'react';
import styles from './App.css';

class App extends Component {
    constructor(props) {
        super(props);
        this.checked = false;

        this.handleMouseDown = this.handleMouseDown.bind(this);
        this.handleMouseMove = this.handleMouseMove.bind(this);
        this.handleMouseUp = this.handleMouseUp.bind(this);

        this.handleTouchStart = this.handleTouchStart.bind(this);
        this.handleTouchMove = this.handleTouchMove.bind(this);
        this.handleTouchEnd = this.handleTouchEnd.bind(this);
    }

    handleTouchStart(e){
        const {pageX,pageY} = e.touches[0];
        console.log("handleTouchStart", pageX, pageY);
    }

    handleTouchMove(e){
		const {pageX, pageY} = e.touches[0];
        console.log("handleTouchMove", pageX, pageY);
	}

    handleTouchEnd(e){
		const {clientX, clientY} = e.changedTouches[0];
		console.log("handleTouchEnd", clientX, clientY);
	}

    handleMouseDown(e){
        this.checked = true;
        console.log("handleMouseDown", e.pageX, e.pageY);
    }

    handleMouseMove(e){
        if(this.checked)
            console.log("handleMouseMove", e.pageX, e.pageY);
    }

    handleMouseUp(e){
        this.checked = false;
        console.log("handleMouseUp", e.pageX, e.pageY);
    }

    render(){
        return (
            <div className={styles.app}>
                <h2>Hello, Nice</h2>
                <div className={styles.touchBox}
                     onMouseDown={this.handleMouseDown}
                     onMouseMove={this.handleMouseMove}
                     onMouseUp={this.handleMouseUp}

                     onTouchStart={this.handleTouchStart}
                     onTouchMove={this.handleTouchMove}
                     onTouchEnd={this.handleTouchEnd}
                />
            </div>
        )
    }
}

export default App;

评论和共享

安装

源码安装：

先安装依赖库

1
2
3
4

$ sudo yum install curl-devel expat-devel gettext-devel \
   openssl-devel zlib-devel
$ sudo apt-get install libcurl4-gnutls-dev libexpat1-dev gettext \
   libz-dev libssl-dev

为了能够添加更多格式的文档（如 doc, html, info），安装依赖包：

1
2

$ sudo yum install asciidoc xmlto docbook2x
$ sudo apt-get install asciidoc xmlto docbook2x

编译安装：

1
2
3
4
5
6

$ tar -zxf git-2.0.0.tar.gz
$ cd git-2.0.0
$ make configure
$ ./configure --prefix=/usr
$ make all doc info
$ sudo make install install-doc install-html install-info

更新 git

1

$ git clone git://git.kernel.org/pub/scm/git/git.git

常用命令

远程命令

分支管理

分支策略

每人都有自己的分支，时不时地往dev分支上合并就可以了。

master 分支是主分支，因此要时刻与远程同步；

dev 分支是开发分支，团队所有成员都需要在上面工作，所以也需要与远程同步；

bug 分支只用于在本地修复bug，就没必要推到远程了，除非老板要看看你每周到底修复了几个bug；

feature 分支是否推到远程，取决于你是否和你的小伙伴合作在上面开发。

fork的项目与原作者同步

1
2
3
4
5
6
7

git remote add ecmadao git@github.com:ecmadao/react-times.git

git fetch ecmadao

git merge ecmadao/master

git push origin master

bug分支

commit 时关闭 issues

1

git commit -m "fix #<issues-id>"

1. 在 dev 下正常开发中，说有1个bug要解决，首先我需要把 dev 分支封存 stash
2. 在 master 下新建一个issue-101分支，解决bug，成功后
3. 在 master 下合并 issue-101，并 fix #1
4. 在 dev 下合并 master，这样才同步了里面的bug解决方案
5. 恢复dev封存 stash pop，系统自动合并 & 提示有冲突，因为封存前 dev 写了东西，此时去文件里手动改冲突
6. 继续开发dev，最后 add ，commit
7. 在 master 下合并最后完成的dev

Feature分支

开发一个新feature，最好新建一个分支；

多人协作

从远程库 clone 时，默认情况下，只能看到本地的 master 分支

多人协作的工作模式通常是这样：

1. 首先，可以试图用 git push origin branch-name推送自己的修改
2. 如果推送失败，则因为远程分支比你的本地更新，需要先用 git pull 试图合并
3. 如果合并有冲突，则解决冲突，并在本地提交
4. 没有冲突或者解决掉冲突后，再用 git push origin branch-name 推送就能成功！
5. 如果 git pull 提示 “no tracking information”，则说明本地分支和远程分支的链接关系没有创建，用命令 git branch --set-upstream branch-name origin/branch-name。

tag

gitignore

查找 gitignore 哪条规则 ignore 了该文件

1

git check-ignore -v <file>

评论和共享