Ray

## Node.js Writable Stream的实现简析 可写流是对数据写入“目的地”的一种抽象，可作为可读流的一种消费者。数据源可能多种多样，如果使用了可写流来完成数据的消费，那么就有可写流的内部机制来控制数据在生产及消费过程中的各状态的扭转等。  首先来看下可写流内部几个比较关键的状态： ```javascript function WritableState(options, stream) { options = options || {}; // Duplex streams are both readable and writable, but share // the same...

最近将内部测试框架的底层库从`mocha`迁移到了`AVA`，迁移的原因之一是因为`AVA`提供了更好的流程控制。 我们从一个例子开始入手： 有`A`,`B`,`C`,`D`4个case，我要实现`A -->> B -->> (C | D)`，`A`最先执行，`B`等待`A`执行完再执行，最后是`(C | D)`并发执行，使用`ava`提供的API来完成`case`就是： ```javascript const ava = require('ava') ava.serial('A', async () => { // do something }) ava.serial('B', async () => {...

最近的工作当中有个任务是做国际化。这篇文章也是做个简单的总结。 ## 部分网站的当前解决的方案 1. 不同语言对应不同的页面。在本地开发的时候就分别打包输出了不同语言版本的静态及模板文件，通过页面及资源的`url`进行区分,需要维护多份代码。 2. 在线翻译 3. 统一模板文件，前端根据相应的语言映射表去做文案的替换。 ## 面对的问题 1. 语言vs标识谁来做？ * 页面完全由服务端直出(所有的数据均由服务端来处理) * 服务端根据`IP`去下发语言标识字段(前端根据下发的表示字段切换语言环境) * 前端去根据`useragent.lang`浏览器环境语言进行设定 当前项目中入口页面由服务端来渲染,其他的页面由前端来接管路由。在入口页面由服务器下发`lang`字段去做语言标识，在页面渲染出来前，前端来决定使用的语言包。语言包是在本地编译的过程中就将语言包编译进了代码当中，没有采用异步加载的方式。 2. 前端静态资源翻译 * 单/复数 * 中文转英文 * 语言展示的方向 前端静态资源文案的翻译使用`vue-i18n`这个插件来进行。插件提供了单复数，中文转英文的方法。a下文有对`vue-i18n`的源码进行分析。因为英文的阅读方向也是从左到右，因此语言展示的方向不予考虑。但是在一些阿拉伯地区国家的语言是从右到左进行阅读的。 3....

文章来源：[Promise Anti-patterns](http://taoofcode.net/promise-anti-patterns/) ## Nested Promise(嵌套的Promise) ```javascript loadSomething().then(function(something) { loadAnotherthing().then(function(anthor) { DoSomethingOnThem(something, anthor); }) }) ``` 你这样书写的原因是需要对2个`promise`的结果进行处理，由于`then()`接收的是上一个promise返回的结果，因此你无法通过链式写法将其连接起来。 To Fix: ```javascript q.all([loadSomething(), loadAnotherThing()]) .spread(function(something, another) { DoSomethingOnThem(something, another); }) ``` `q.all()`方法将会等待`loadSomething`和`loadAnotherThing`都被`resolve`后调用传入`spread`方法里面的回调。 ##The...

## v-model的实现 `v-model`是`Vue`内部实现的一个指令。它所提供的基本功能是在一些表单元素上实现数据的双向绑定。基本的使用方法就是： ```javascript new Vue({ el: '#app', data () { return { val: 'default val' } }, watch: { val (newVal) { console.log(newVal) } } }) ``` 页面初次渲染完成后，`input`输入框的值为`default val`，当你改变`input`输入框的值的时候，你会发现控制台也打印出了输入框当中新的值。接下来我们就来看下`v-model`是如何完成数据的双向绑定的。...

## slot插槽 在日常的开发过程当中，slot 插槽应该是用的较多的一个功能。Vue 的 slot 插槽可以让我们非常灵活的去完成对组件的拓展功能。接下来我们可以通过源码来看下 Vue 的 slot 插槽是如何去实现的。 Vue 提供了2种插槽类型： * 普通插槽 * 作用域插槽 ### 普通插槽 首先来看一个简单的例子： ```javascript this is demo slot Vue.component('myComponent', { template: 'this is...

## 组件实例化的 options 合并策略 options 的合并应该说是 Vue 生命周期当中非常重要的一环。Vue 的组件实例化都是通过调用对应的构造函数完成相关实例化的工作。而在组件真正由 VNode 实例化成 vue 组件之前有关组件的相关定义都是挂载在组件的构造函数的 options 属性上。 ### 通过new Vue实例化的组件 options 合并 我们定义一个全局的组件： ```javascript Vue.component('myComponent', { template: 'this is my component', props:...

## next-tick实现 next-tick 算是 Vue 内部的一个核心的方法，它提供了一种异步执行任务的机制。它具体的源码在 src/core/util/next-tick.js 内部。 ```javascript /* @flow */ /* globals MessageChannel */ import { noop } from 'shared/util' import { handleError } from './error' import {...

和其他语言相比,`javascript`中的对于`undefined`的理解还是有点让人困惑的。特别是试着理解`ReferenceErrors`错误("x is not defined")以及在编码过程中如何去避免这些错误总让人感到比较困惑。 这篇文章是我整理的关于这个知识点的内容。如果你对于`javascript`中的变量以及属性还不是很熟悉的话，你可以看看我之前写的[文章]() ##undefined是什么？ 在`Javascript`中，存在着`Undefined(基本类型)`,`undefined(值)`,以及`defedined(变量)`。 **Undefined(基本类型)**是js内置的基本类型之一(`String`, `Number`, `Boolean`, `Null`, `Object`) **undefined(值)**是一个原始值,是未定义类型的基础值。任何未被赋值的属性值都可以假设为`undefined`。无返回值或者返回值为空的函数最后执行得到的值都未`undefined`。未设定的函数参数值也为`undefined`. ```javascript var a; typeof a; // undefined window.b; typeof window.b; // undefined var c = (function() {})();...

Vue版本: 2.3.2 `virtual-dom`(后文简称`vdom`)的概念大规模的推广还是得益于`react`出现，`virtual-dom`也是`react`这个框架的非常重要的特性之一。相比于频繁的手动去操作`dom`而带来性能问题，`vdom`很好的将`dom`做了一层映射关系，进而将在我们本需要直接进行`dom`的一系列操作，映射到了操作`vdom`，而`vdom`上定义了关于真实`dom`的一些关键的信息，`vdom`完全是用`js`去实现，和宿主浏览器没有任何联系，此外得益于`js`的执行速度，将原本需要在真实`dom`进行的`创建节点`,`删除节点`,`添加节点`等一系列复杂的`dom`操作全部放到`vdom`中进行，这样就通过操作`vdom`来提高直接操作的`dom`的效率和性能。 `Vue`在`2.0`版本也引入了`vdom`。其`vdom`算法是基于[snabbdom算法](https://github.com/snabbdom/snabbdom)所做的修改。 在`Vue`的整个应用生命周期当中，每次需要更新视图的时候便会使用`vdom`。那么在`Vue`当中，`vdom`是如何和`Vue`这个框架融合在一起工作的呢？以及大家常常提到的`vdom`的`diff`算法又是怎样的呢？接下来就通过这篇文章简单的向大家介绍下`Vue`当中的`vdom`是如何去工作的。 首先，我们还是来看下`Vue`生命周期当中初始化的最后阶段：将`vm`实例挂载到`dom`上，源码在[src/core/instance/init.js](https://github.com/vuejs/vue/blob/dev/src/core/instance/init.js#L67-L70) ```javascript Vue.prototype._init = function () { ... vm.$mount(vm.$options.el) ... } ``` 实际上是调用了[src/core/instance/lifecycle.js](https://github.com/vuejs/vue/blob/dev/src/core/instance/lifecycle.js#L139-L202)中的`mountComponent`方法， `mountComponent`函数的定义是： ```javascript export function mountComponent ( vm: Component, el: ?Element, hydrating?: boolean...