如果你对promise概念还有什么疑问，推荐看看这本，不到100页，很快就能看完。 两年前看过这本书之后，在处理js异步上我几乎没再有什么疑问，推荐给同事看过之后也被他们一致认为对自己的提升很大。

大概一年前看过，最近看了ant design推荐的书籍目录，又快速看了一遍。 大概归纳为以下一些关键概念： 符合用户心理模型 引导用户操作 不要打断用户心流 限制操作 及时反馈 可视性 正确的概念模型 正确的匹配 反馈 利用外部环境因素提示 使控制与被控制设备形成自然的关联，例如位置。 看到“形成自然关联”这个点的时候，想到vim，绝对是个反面教材，vim的操作何止逆自然，简直逆天。但vim在“不打断操作者心流”这点上做到了极致。 书中最后总结了七条原则 应用储存于外部世界和头脑中的知识 简化任务结构 注重可视性，消除执行阶段和评估阶段的鸿沟。 建立正确的匹配关系。 利用自然和认为的限制性因素。 考虑可能踹下那认为差错。 若无法做到以上个点，就采用标准化。 第三部《情感化设计》最近看的 本能 行为 反思，其实反思这个词近些年有个更贴切的翻译—情怀！ 开头的主题思想 漂亮的设计，可以抵消一部分设计上的不便，颜值即正义。 回想我的樱桃青轴，买之前是反思层占很大比例，买之后是行为层和本能层占主导，经过了多年的使用已经老的发黄，其中有融入和很多反思层的感情。 原来我一直很喜欢的五号电池的设计是很差的，因为没有考虑反向安装的限制。 禅宗讲究的瞬间的风景。而人们普遍无法抵制能持续获得最佳风景的诱惑，但能持续获得的最佳会随时间的流逝而降级。 最后作者还扯到人工智能科幻片上了，机器人与人和现实世界交互的设计逻辑。

很短的一本书，讲的是react和d3如何搭配。 大概思路就是d3管计算，react管画图，即生成html与svg的dom，外部css管样式或者react的内联样式，需要配合svg知识。 d3的enter和exit基本就用不上了，这本书大体上就是这个思路。

基于网上的代码参考，以下是一个自己改了点的递归版本

自从了解generator开始，就对这个语法很反感。一个英文教程上有个形容词是mind-bending，╮（╯＿╰）╭看来不光我一个人这么认为。 一定要运行的时候还总需要while(true) 或for来搭配，使其带来的那点同步的好处被抵消殆尽。 saga让人用generator语法，可看了一下源码发现里面一个generator语法也没用，一个this没有，全程函数编程，真是高了！ 能明显感觉出的好处是当有多个并发，其中一个成功或失败的情况下其余不需要的可以自动cancel。 看到一篇文章对redux-saga源码的分析，最后一张图神解释 同样的还有菊叔漫画里的，如何画小米，哈哈。 于是拿来教育年轻小伙，网上的零碎视频，散教程，大概也就能带你到第四步。要真正掌握什么，还是得老老实实看官方文档。 下面将一下我对saga的源码的理解。 最开始先run，执行saga生成iterator，在proc中执行第一轮的next。 通过middleware监听所有redux的action，每当有action通过的时候multicastChannel查看所有taker，如果有匹配则执行该taker，taker中包含对下一轮next的回调。 由saga put的action会带SAGA_ACTION的标识立即执行，其他action会缓存执行。 在generator中通过take实现对事件的按需监听，是saga相对其他库实现事件机制的一大优势。举个例子，通常来说，在登录之前页面只需要监听LOGIN事件，肯定不会有LOGOUT发生，当LOGIN事件发生并成功后，LOGIN不再需要监听，这时再开始监听LOGOUT事件。在传统的页面编程中，LOGIN和LOGOUT通常都是页面载入后就都开始监听的，稍微有点不效率。

在调试一个拖拽组件时需要获取定位，发现在modal中，外层元素是position: fixed时，获取不到offsetParent，无法计算offsetLeft和offsetTop。 google发现确实是positino:fixed的原因。 https://stackoverflow.com/questions/306305/what-would-make-offsetparent-null https://stackoverflow.com/questions/306305/what-would-make-offsetparent-null

首先是各种在node_modules中的外部依赖，需要用webpack-node-externals放到externals中 如果是使用了nodejs内置的工具，需要在externals中添加额外配置，比如 {http: ‘commonjs http’, fs: ‘commonjs fs’ } 然后是禁止使用各种window全局变量，使用各种挂在window下的全局方法之前需要先判断一下方法是否存在。 在webpack编译过的server环境中__dirname和__filename都取不到值，需要用definePlugin预先在webpack的配置中取值。 各种import进来的sass，less，css还有base64的图片一定要用extract-text-webpack-plugin去除。 react-router的各个组件经过代码分割之后是异步加载，在服务端这里要变成同步是个问题。在react-router文档说明如下，所以目前能用的解决方法就是为服务端另写一份路由，只是要在这个问题解决之前要暂时维护两份本应该统一的路由文件。 <p class="cye-lm-tag"> We’ve tried and failed a couple of times. What we learned: </p> <ol> <li> You need synchronous module resolution on the server so you can get those bundles in the initial render. </li> <li> You need to load all the bundles in the client that were involved in the server render before rendering so that the client render is the same as the server render.

之前搞过chrome的移动端调试一直没成功，教程如下 https://developers.google.com/web/tools/chrome-devtools/remote-debugging/?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3 教程并没有问题，但最后一步inspect手机端页面时一直是白屏，原来问题出在 *.chrome-devtools-frontend.appspot.com这个网站必须能访问的情况下才能调试。

一直用eslint，也在命令行用过prettier，最近突然大发现prettier可以和编辑器整合。 于是赶紧用上了心爱的vim插件vim-prettier，开启文件保存时自动整理代码，顿时世界就和谐了。 奈何团队其他小伙伴没有用vim的心，搜了一下，让他们把prettier整合到sublime里。 团队使用，至少能解决7成以上的代码风格问题。还得靠自动化工具，靠自觉和审查也不是不行，就是损耗太大。 既然js可以美化，css/less/scss等自然也就可以。顺带就找到了另一个神器stylelint，配合stylelint-scss，stylelint-order，stylelint-config-starndard等可以自动美化代码并提示css错误。 推荐所有前端都用上，只要你常用的ide都支持整合，再顺带推广下vim，各种插件只有想不到，等我想到了都已经有人做出来了。