发表于   |  

异步，顾名思义，就是不同的，不连续的步骤。简单说就是一个任务分两步，第一步执行完，等待一些时间才执行第二步。常见于网络请求、文件读取等操作。

在 JavaScript 中，解决异步的方案主要有回调、Promise、Generator、Async 几种，下面分别举例示范。

回调

JavaScript 异步编程的默认实现是使用回调函数，也就是将第二步的操作写在一个函数里，在第一步执行完之后，这个函数开始执行。看一个 Node 官方 API 的栗子：

1
2
3
4
fs.readFile('/etc/passwd', 'utf8', (err, data) => {
  if (err) throw err;
  console.log(data);
});
阅读全文 »

发表于   |  

前端设计的产品从大的层面可以分成两种：

a. 浏览类：以内容展现为主，辅以少量交互，如首页、促销页

b. 应用类：包含大量交互，和复杂的功能，如控制台

前后台配合开发通常有以下两种形式：

a. 前端完成静态页面，后台改成动态模板（后台渲染并提供数据）

b. 前端使用动态模板或 MVVM（AngularJS，Vue） 框架，后台只提供数据（前端渲染，后台提供数据）

阅读全文 »

发表于   |  

这是基于 Redux Demo 做的一个带有异步操作的示例，抓取 reddit 指定主题的帖子。

项目地址在 这里

安装 & 运行：

1
2
3
4
git clone https://github.com/huangtengfei/redux-async-demo.git
cd redux-async-demo
npm install
npm run dev

打开 http://localhost:8080 即可看到效果。

Redux 的基础知识已经在 Redux Demo 中有讲过了，所以这里只讲一下两者不同的地方，即异步 action 的实现，并介绍整个 Demo 的实现过程。

阅读全文 »

发表于   |  

Redux 基础

与 Flux 相比，Redux 将 Dispatcher 和 Action、Store 解耦，使 Action 变成了一个纯粹的简单对象，使 Store 变成了一个 pure function（no side-effects，对一个相同的输入无论何时总返回相同结果）。

Redux 有三个基本原则：

  • 整个应用只有一个数据源，即 Store
  • State 只能通过触发 action 来更改
  • State 的更改必须写成 pure function（称作 reducer），每次更改总返回一个新的 State

Redux 单向数据流的过程：

store.dispatch(action) -> reducer(state, action) -> store.getState()

下面分别对 Action、Reducer 和 Store 进行简单介绍。

阅读全文 »

发表于   |  

React 基础

JSX

JSX 语法是一种可以把 HTML 嵌套在 JavaScript 中的方法，像下面这样：

1
2
3
4
5
6
7
8
9
...
render() {
    <div>
        {!isFetching &&
            <a href="#" onClick={this.handleClick}>Refresh</a>
        }
    </div>
}
...

在遇到 { 开头的代码块时，会以 JavaScript 规则解析，在遇到 < 开头的 HTML 标签时，以 HTML 语法解析。

在设置样式时需要注意，不能写成 style={color: this.state.color}，而要写成 `style={{color: this.state.color}}` 因为样式是一个对象，第一层大括号表示这是 JavaScript 语法，第二层大括号表示样式对象。

阅读全文 »