黄腾飞的个人网站


  • 首页

  • 归档

  • 标签

JavaScript 异步编程

发表于 2016-06-13   |  

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

在 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);
});
阅读全文 »

关于前后端分离的一些思考

发表于 2016-06-08   |  

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

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

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

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

a. 前端完成静态页面,后台改成动态模板(后台渲染并提供数据)

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

阅读全文 »

Redux 进阶

发表于 2016-05-24   |  

这是基于 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 入门

发表于 2016-05-19   |  

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 入门

发表于 2016-05-16   |  

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 语法,第二层大括号表示样式对象。

阅读全文 »
123…15
HTF

HTF

71 日志
32 标签
GitHub 微博 知乎
© 2017 HTF
由 Hexo 强力驱动
主题 - NexT.Muse