今越星礼
Promise 是一个非常简单的概念，即使你没有机会使用 Promise，你也可能阅读过一些关于 Promise 的文章。 Promise 的价值在于使得异步代码以一个更可读的风格结构化，而不是因异步函数嵌套显得混乱不堪。这篇文章会接触到 6 个你可能不知道的关于 Promise 的事。 开始列举之前，先看看怎么创建 Promise： ``` var p = new Promise(function(resolve, reject) { resolve("hello world"); }); p.then(function(str) { alert(str); }); ``` ##...
在[浅说Flux开发](https://github.com/dwqs/blog/issues/14)中，简单介绍了Flux及其开发方式。Flux可以说是一个框架，其有本身的 `Dispatcher` 接口供开发者；也可以说是一种数据流单向控制的架构设计，围绕单向数据流的核心，其定义了一套行为规范，如下图：  Redux的设计就继承了Flux的架构，并将其完善，提供了多个API供开发者调用。借着react-redux，可以很好的与React结合，开发组件化程度极高的现代Web应用。本文是笔者近半年使用react+redux组合的一些总结，不当之处，敬请谅解。 ## Action Action是数据从应用传递到 store/state 的载体，也是开启一次完成数据流的开始。 以添加一个todo的Action为例: ``` { type:'add_todo', data:'我要去跑步' } ``` 这样就定义了一个添加一条todo的Action，然后就能通过某个行为去触发这个Action，由这个Action携带的数据(data)去更新store(state/reducer)： ``` store.dispatch({ type:'add_todo', data:'your data' }) ``` `type` 是一个常量，Action必备一个字段，用于标识该Action的类型。在项目初期，这样定义Action也能愉快的撸码，但是随着项目的复杂度增加，这种方式会让代码显得冗余，因为如果有多个行为触发同一个Action，则这个Action要写多次；同时，也会造成代码结构不清晰。因而，得更改创建Action的方式： ``` const ADD_TODO...
### 前言 > 本文源码分析基于 v9.20.1 [react-virtualized](https://github.com/bvaughn/react-virtualized) 是一个功能非常强大的库，其提供了 `Grid`、`List`、`Table`、`Collection` 以及 `Masonry` 等 五个主要组件，覆盖了常见场景下的长列表数据渲染。react-virtualized 提供了一个 [Playground](http://www.reactvirtualized.com)，如果你对其组件很感兴趣，可以去 playground 体验一下。 本文将着重分析其在虚拟列表上的实现，对于其它组件暂不讨论。 react-virtualized 在虚拟列表上的实现上，支持列表项的动态高度和固定高度，与之相关的两个主要属性有 `estimatedRowSize` 和 `rowHeight`。`rowHeight` 用于设置列表项的高度： * 可以是一个固定值，如 100，此时列表项是固高的 * 可以是一个根据列表项索引返回其高度的函数：`(index: number): number`，此时列表项是动态高度的...
>这是一篇纯粹的流水账笔记，本文涉及到的 certbot/certbot-auto 版本是 0.21，如果你用的是 0.22 或以上版本，可参考官网步骤来配置通配符 ### 环境 * CentOS: 7.4 * Nginx: 1.12.2 * Python: 2.7.5 ### 步骤 通过 `yum install certbot` 或者按照[官方步骤](https://certbot.eff.org/#centosrhel7-nginx)，安装 `certbot` 之后，运行如下命令开始生成证书： ```sh certbot certonly --email...
## Viewport units Viewport units(视口单位)是一系列 CSS 长度单位的统称，主要包含 `vh`、`vw`、`vmin` 和 `vmax` 等四个 CSS3 中新增的[长度单位](https://developer.mozilla.org/en-US/docs/Web/CSS/length)，在[CSS：7个你可能不认识的单位](https://github.com/dwqs/blog/issues/31)一文中有对其作了简单的介绍： * `vh`：视口高度的1% * `vw`：视口宽度的1% * `vmin`：`vw` 和 `vh` 中的较小值 * `vmax`：`vw` 和 `vh` 中的较大值 ### 兼容性 对于新属性，在使用之前都需要提前了解一下其兼容性。[caniuse](https://caniuse.com/#search=vh)...
>这是一篇基于我在组内分享的总结 列表形态的数据展示是非常常见的一种数据展示方式。在大多数场景下，常见的列表展现方式是分页加载。分页加载又能分为两种：普通的分页加载和无限滚动式的分页加载。 普通的分页加载通常需要用户进行点击等行为进行列表的翻页操作，例如技术社区 Segmentfault 的 [问题列表页](https://segmentfault.com/questions)。这种方式一般在一页数据展示完毕的底部都会显示数据分页的页码、下一页、上一页或者加载更多等按钮等待用户操作。 无限滚动式的分页加载则通常是根据用户鼠标或者触模板的向下滚动一直加载下一页的数据，直到数据加载完毕，例如 [知乎首页](https://www.zhihu.com/) 就是采用这种方式。这种方式的优点是当用户向上滚动时不会再去加载"上一页"的数据。 当然，有些会结合两种方式进行列表数据的展示。展示给用户的数据的前几页是无限滚动式的分页加载，当滚动到某页时，则需要通过用户的点击行为来触发下一页数据的加载，例如 [思否首页](https://segmentfault.com/) 就采用了这种组合方式。 除了列表数据分页的场景之外，也有列表数据不分页的场景，数据有多少就展示多少。例如，某用户有 1000 条交易数据需要在客户端全部展示，那么，这种场景下，该怎么去优化列表数据的展示呢？ > 下文是我基于所负责项目上的一些方案，若有不当之处或你也有不错的思路，欢迎评论 ## 按需渲染 按需渲染是指根据容器元素的高度以及列表项元素的高度来渲染数据。  如上图所示，假设容器元素的 `height` 是 `500px`，而列表项元素的 `height` 是 `50px`，那么容器元素内此时最多可以显示 10 个数据项。也就是说，当列表初始化的时候，实际上我们只需要渲染...
>阅读 [7 tips to handle undefined in JavaScript Dmitri Pavlutin | 15 Apr 2017](https://dmitripavlutin.com/7-tips-to-handle-undefined-in-javascript/) 一文之后的小结，有删减。 ## 引言 `undefined` 是 JavaScript 中的一个特殊值，另一个特殊值则是 `null`，这两个特殊值还分别对应了一种数据类型：Undefined 和 Null。这两个值都定义了“空值”，但两个又不是完全相同。 对 JavaScript 而言，当访问一个尚未初始化的变量或不存在的对象属性时，会返回 `undefined`。例如： ```js let...
在[上篇](https://github.com/dwqs/blog/issues/53)中, 大致分析了 `vue-router` 的整体流程. VueRouter 除了提供 `router` 功能, 还提供了两个组件: `router-link` 和 `router-view`, 源码均在 `src/components` 目录下. >本文分析的 vue-router 的版本为 2.6.0. ## Link `` 组件通过 `to` 属性指定目标地址, 为用户提供路由导航. 默认渲染成带有正确链接的 `` 标签. 其源码在...
> 为避免不必要的误解，本文标题由「避免陷入 async/await 地狱」改为 「How to escape async/await hell」 -- 2018/05/20 09:50 async/await 是 ES7 的新语法。在 async/await 标准出来之前，JavaScript 的异步编程经历了 callback --> promise --> generator 的演变过程。在 callback 的时代，最让人头疼的问题就是回调地狱(callback hell)。所以，在 async/await 一经推出，社区就有人认为「这是...
在0.28版rn中，如果textinput的位置在靠近底部的位置，在textinput获取焦点后，ios上弹出的键盘会遮住textinput，导致用户无法输入；android上弹出键盘时，整个界面会被网上顶，textinput不会被遮住。 在0.28中，解决ios上该问题的方式是利用 ScrollView contentInset 属性，监听键盘的弹出和隐藏事件(keyboardWillShow/keyboardWillHide)，获取键盘的高度，动态设置成 contentInset 的值。 将rn升级成0.33后，android和ios上都会出现TextInput 被键盘遮挡的问题，ios上原来的方式也不能解决此问题了。 在 ios 上，textinput 未获取焦点前：  获取焦点后：  textinput被键盘挡住了。android上有同样的问题。 解决这种情况的一种方式，监听键盘的弹出和隐藏事件，在ScrollView底部设置一个占位符组件，将占位符的高度设置成键盘的高度。 监听键盘事件： ``` this.keyboardShow = Platform.OS === 'ios' ? Keyboard.addListener('keyboardWillShow',this.updateKeyboardSpace.bind(this)) : Keyboard.addListener('keyboardDidShow',this.updateKeyboardSpace.bind(this)); this.keyboardHide...