bruno yang
bruno yang
## 什么是 stream 简单来说，将一个资源分成一个个小块（chunk）传输，而不是一次性传输所有数据，这种技术就可以被称为 stream。 数据源被称为 readable stream，接受数据方被称为 writeable stream，而在两者之间可以对数据做一些处理的中间步骤被称为 transform stream。 Stream 的优点就是不会对内存产生压力，并且可以让数据尽可能快地到达，而不必等待所有数据加载到内存。 ## 难用的 stream 对我来说 stream 可能是 nodejs 中最难以掌握的部分，每次使用到 stream 时，都需要翻开文档查 api。另外，也很容易忘记处理错误，如当要从 readable stream pipe 到 writeable...
今天又复习了一遍http协议，在看文档时，发现`cache-control`有很多指令，其中就包括一个max-age。 打开控制台，查看网络连接，当中有很多`max-age`都被设置成了0，我很疑惑，这和`no-cacha`有啥区别。进过一番谷歌，终于知晓其中区别。 ### 相同之处 `no-cache`顾名思义是指该资源不会被缓存，而`max-age`会被缓存到本地，只是在下次重新访问该页面时又会强制地从服务器拉取资源。所以大部分情况下，这俩其实是一样的。 ### 不同之处 当点击浏览器的前进后退按钮时，被`no-cache`的资源会重新加载；而被设置成`max-age`的读取则会从本地读取资源。当然这也需要根据浏览器实现的情况来看，某些浏览器如IE9之前的IE，并没有遵循http协议，直接统一了这两个字段的行为为`no-cache`.
在v7.1中，react-redux加上了hooks，接下来我们就来看看新hooks，以及需要如何修改组件。 如果你还不清楚什么是hooks，建议阅读[此文档](https://zh-hans.reactjs.org/docs/hooks-intro.html)。 ## hooks * useSelector，接受传入一个函数，此函数的入参是store，可以理解为原来的mapStateToProps函数； * useDispatch，没有参数，返回值就是dispatch，可以理解为原来的mapDispatchToProps； * useStore，获得store，但尽量不要用这个方法，因为获得的store不是响应式的，只是一个快照。 ## useSelector 签名： ```js const result : any = useSelector(selector : Function, equalityFn? : Function) ``` 举例来说： ```js import {...
好吧我承认我是标题党，新人为了导流量蛮拼的。今天我想给大家介绍一下React中的context，本文基于[email protected]。 _重要声明：context 相关内容在将来仍有可能会发生变动，所以不建议使用在生产环境中。_ ### 什么是context [context](https://facebook.github.io/react/blog/2014/03/28/the-road-to-1.0.html#context)是一个将被收录进React1.0的特性，但目前还没有正式地出现在官方文档中。 那什么是`context`呢，`context`就是一组属性的集合，并被_隐式_地传递给后代组件。 大家可能会有疑惑，我们不是已经有了`props`了吗，为什么还需要用`context`来传递属性呢。可以考虑这么一个情景，有一个层级很深的组件，最里层组件的行为将影响最外层的表现，一般来说我们就会在最外层组件上绑定回调，再一级一级地传入至最内层组件上，通过触发回调来进行上述行为（这里不考虑用flux）。再考虑另外一个情景，在服务端有一个组件需要根据session来渲染，当内部组件需要获取session信息时，就需要从最上层节点一层一层地往下传。但这样的实现不得不说实在有些丑陋，有没有更好的实现方式呢？有，就是使用`context`。 ### 实例 ``` javascript import ReactDOM from 'react-dom'; import React from 'react' // Children component class Children extends React.Component { constructor(props, context)...
本文分为四个部分，分别对应源码的四个文件。 - [koa源码分析（一） - application.js](https://github.com/brunoyang/blog/issues/5) - [koa源码分析（二） - context.js](https://github.com/brunoyang/blog/issues/6) - [koa源码分析（三） - request.js](https://github.com/brunoyang/blog/issues/7) - [koa源码分析（四） - response.js](https://github.com/brunoyang/blog/issues/8) - [koa源码分析（五） - koa 2.0](https://github.com/brunoyang/blog/issues/10) 仓库：[https://github.com/koajs/koa](https://github.com/koajs/koa) 官网：[http://koajs.com/](http://koajs.com/) 官方介绍：Koa is a new web framework...
Babel 全家桶
15 年 11 月，Babel 发布了 6.0 版本。相较于前一代 Babel 5，新一代 Babel 更加模块化， 将所有的转码功能以插件的形式分离出去，默认只提供 babel-core。原本只需要装一个 babel ，现在必须按照自己的需求配置，灵活性提高的同时也提高了使用者的学习成本。下面就来讲讲 Babel 全家桶中的各个部分。 ### npm i babel 已经弃用，你能下载到的仅仅是一段 console.warn，告诉你 babel 6 不再以大杂烩的形式提供转码功能了。 ### npm i babel-core...
[据说](https://github.com/nodejs/promises/issues/4)，async 将在2016年 Q2，也就是今年的 4~6 月份于 V8 上推出，到那时，我们就可以欢快地写上『同步代码』啦！所以，本文的目的就是教大家如何使用 async。 --- #### 配置 webpack + babel 使用 async > 如果已配置过，请跳过本节 首先，安装`babel-core`和`babel-loader`，这两项分别是 babel 的核心和 babel 能够在 webpack 中运行的保障。 ``` js npm install babel-core...
最近在工作中碰到搜索的需求，需要实时获取输入框中的内容并请求搜索结果，一开始想到的就是用`input`事件监听，在英文输入的情况下一切 ok，但在使用中文输入法时就会出现问题了。比如输入 a、s、d三个字符，我们想要的情况是输入时不触发 input 事件，在选择好对应的中文字符后再触发。而实际情况是每按下一次键盘后都会触发一次 input 事件然后去请求了接口，这显然不是我想要的，一番查找之后，终于找到了解决方案。 ### 人民大救星 `composition event` `composition event`可以观察用户在输入法中组字选词的状态。`composition event`提供三个事件，分别为`compositionstart `，`compositionupdate `，`compositionend `。 * `compositionstart`：开始通过输入法输入法输入字符时触发，当实现选中了某些字符才开始输入时，事件对象的`data`属性就是这些字符，否则为空字符串； * `compositionupdate`：输入字符时触发，事件对象的`data`属性的值为输入的字符，该事件用得比较少； * `compositionend`：结束选词时触发，事件对象的`data`属性的值为选中的词； `compositionend`事件会在`input`事件之后触发，所以需要在`compositionend`事件中手动执行`input`事件的处理逻辑。 ### 实现需求 结合 `compositionstart`，`compositionend`和`input`事件就可以实现我们的需求 ```js const...
用户访问我们的网站，得到的结果有两种，想看的和不想看的。 不想看的分两种，网站报错和地址输错。 想看的也分两种，动态生成和静态存在。今天，我们就来聊聊静态文件。 ### 所谓静态文件 所谓的静态文件，就是静态的，static的文件，无需经过查找数据库、模板渲染等步骤（以上步骤为充分不必要）就可以直接给用户看的，如js、css文件，图片等。 一般来说，访问静态文件的url和其本身的文件路径是一样，如 http://a.com/public/img/a.png, 那目录下就会有个public文件夹。这是因为静态文件数量很可能非常庞大，不能给每个文件都加上路由，所以其文件路径就是url。 每个http响应头里都有`Content-Type`字段，该字段告诉浏览器返回的文件是什么类型的，便于浏览器处理。如一个html文件的`Content-Type`是text/html，而一般的文本文件`Content-Type`是text/plain，当把html文件的`Content-Type`改成text/plain，浏览器就不会解析html文件，而是直接输出html代码。我们可以通过文件的后缀识别该文件的MIME。 ### koa-static 有了上面的知识，我们再来看koa-static。基本用法如下代码： ``` js 'use strict'; const app = require('koa')(); const server = require('koa-static'); const opts = { maxage:...
co源码分析
仓库：[github.com/tj/co](https://github.com/tj/co) `co`是一款将`generator`和`promise`结合起来的流程控制库。 本文根据`[email protected]`版本所撰写。 ### 什么是generator ### 使用方法 #### 1.将promise作为返回值 ``` javascript 'use strict'; const fs = require('fs'); const co =require('co'); function read(filename) { return new Promise(function(resolve, reject) { fs.readFile(filename, 'utf8',...