blog
blog copied to clipboard
xieranmaya
My blog.
在使用Promise处理一些复杂逻辑的过程中，我们有时候会想要在发生某种错误后就停止执行Promise链后面所有的代码。 然而Promise本身并没有提供这样的功能，一个操作，要么成功，要么失败，要么跳转到then里，要么跳转到catch里。 如果非要处理这种逻辑，一般的想法是抛出一个特殊的Error对象，然后在Promise链后面的所有catch回调里，检查传来的错误是否为该类型的错误，如果是，就一直往后抛，类似下面这样 ``` js doSth() .then(value => { if (sthErrorOccured()) { throw new Error('BIG_ERROR') } // normal logic }) .catch(reason => { if (reason.message === 'BIG_ERROR') { throw reason...
**This post is translated from Chinese, thanks to my sister Tian Qiong and my friend Tang Shuang for their hard work, and the original Chinese edition is here: https://github.com/xieranmaya/blog/issues/4** ##...
## 本文适用的读者 本文写给有一定Promise使用经验的人，如果你还没有使用过Promise，这篇文章可能不适合你，建议先[了解Promise的使用](http://www.html5rocks.com/zh/tutorials/es6/promises/) ## Promise标准解读 1. 只有一个`then`方法，没有`catch`，`race`，`all`等方法，甚至没有构造函数 Promise标准中仅指定了Promise对象的`then`方法的行为，其它一切我们常见的方法/函数都并没有指定，包括`catch`，`race`，`all`等常用方法，甚至也没有指定该如何构造出一个Promise对象，另外then也没有一般实现中（Q, $q等）所支持的第三个参数，一般称onProgress 2. `then`方法返回一个新的Promise Promise的`then`方法返回一个新的Promise，而不是返回this，此处在下文会有更多解释 ``` js promise2 = promise1.then(alert) promise2 != promise1 // true ``` 3. 不同Promise的实现需要可以相互调用(interoperable) 4. Promise的初始状态为pending，它可以由此状态转换为fulfilled（本文为了一致把此状态叫做resolved）或者rejected，一旦状态确定，就不可以再次转换为其它状态，状态确定的过程称为settle 5. [更具体的标准见这里](https://promisesaplus.com/) ##...
## 使用纯 CSS 实现 Google Photos 照片列表布局 文章太长，因为介绍了如何一步一步进化到最后接近完美的效果的，不想读的同学可以直接跳到最后一个大标题之后看代码、demo及原理就好，或者也可以直接看下面这个链接的源代码。 不过还是建议顺序读下去，因为后面的原理需要前面的内容做为铺垫，主要是在处理边角问题上。 先看下效果吧，要不然各位可能没动力读下去了，实在是有点长，可以试着 resize 或者 zoom 一下看看效果： https://xieranmaya.github.io/images/cats/cats.html  ## 另外后面一些 demo 为了方便展示源代码用了 jsbin，但 jsbin 偶尔抽风会显示不出效果，试着在源代码编辑框里不改变代码意思的情况下编辑一下（比如在最后打一下回车）应该就可以了，或者查看一下你浏览器的翻墙设置，因为里面引入了 Google CDN 上的文件，有可能是因为 js 加载不成功导致的。 ### 好了，正文开始。...
# 如何探测 JS 代码中的死循环 ## 需求 最近在做一个工具（具体是什么工具，稍后再透露）的时候，我有一个需要探测代码中是否包含死循环的需求，而不管它有没有，我都想要我自己的代码能够继续执行下去。 ## 停机问题 首先需要说明的是，理论上，没有通用的方法在不执行一段代码的情况下探测它是否包含死循环，因为这涉及到[停机问题](http://zh.wikipedia.org/wiki/%E5%81%9C%E6%9C%BA%E9%97%AE%E9%A2%98)。而即使是执行这段代码，你依然无法判断它是陷入了死循环还是只是暂时没有结束循环而已。 关于为什么没有办法判断一段代码是否是死循环以及它与停机问题的关系，可以稍做一下解释： 假设我写了下面这段代码： ```js for(var i = 2;hasNextPrime(i); i++) { if (isPrime(i)) { console.log(i) } } ``` 代码意义很明显，它想把所有的素数都打印出来 现在我想要把它传给一个程序（后称法官程序）让这个程序来帮我判断这段代码运行后会不会停止 理想情况下（即让理想图灵机来运行这段代码）它应该是不会停止的，因为素数有无穷个。 但如果是法官程序来告诉我它会停止或者不会停止，将会发生什么呢？...
# 详解 flex-grow 与 flex-shrink 自从开始开学习 CSS 布局，想要比较灵活的把父元素的空间分配给各个子元一直是各个前端程序员的梦想。 在 flex 之前，不如果不是专门去搜索相关的解决方案，一般人几乎想不出非常灵活的三（多）栏等高布局方案，而即使看了解决方案，很多人也会大呼奇技淫巧。 不得不感慨在 flex 之前 CSS 的布局功能之弱：基本只能使用一些并非为布局而设计的属性来实现想要的布局——float、inline-block、position、甚至是 table 等。而使用这些属性来实现各种布局效果，往往又会遇到相当多另外的坑：比如浮动的闭合、inline-block 的垂直对齐、position 的定位原点以及 table 的不够灵活等。 ## 直到出现了 flex flex 可以说是一次性解决了前端布局的所有的问题（当然，并没有完全解决，要不然也不会有 grid layout 了），以前很难实现的布局效果在...
#### This post is translated from Chinese by me and my sister Tian Qiong, the main work is done by her and I would thank her much here! In case...
好久不见，我的日常更新终于来了 本文内容较长，主要涉及如下内容： * 二叉树及相关算法 * Flexbox 布局 * CSS 背景图片，计数器等应用 * 使用 SVG 做为背景图片会遇到的问题 最近在讲各种树的算法与题目的时候，为了给学生演示，总是想要看到树的结构，总是画出来又慢又丑，在控制台里展开看的话实在太麻烦，而且不够直观 我就寻思能不能把树给展示在页面里。 ## 什么是二叉树 首先看一下二叉树的定义： 一颗二叉树是由一个根结点和一个左子树和一颗右子树组成的结构，其左右子树分别又是一颗二叉树。 画成图就是下面这种形状： ```text 1 / \ / \ 2 3 /...