饭食钢
饭食钢
## 理解抽象语法树(AST) [Abstract syntax tree - 维基百科](https://en.wikipedia.org/wiki/Abstract_syntax_tree) [抽象语法树在 JavaScript 中的应用 - 美团点评技术团队](http://tech.meituan.com/abstract-syntax-tree.html) [JavaScript的抽象语法树与语法解析](http://wwsun.github.io/posts/javascript-ast-tutorial.html) [通过开发 Babel 插件理解抽象语法树](http://www.zcfy.cc/article/347) ## JavaScript Parser - [Esprima](http://esprima.org/) - [Acorn](https://github.com/ternjs/acorn) - [Babylon](https://github.com/babel/babylon) Parser建议从Esprima开始学习，相比较于其它Parser文档和示例更加丰富和形象。 Acorn的性能和效率比Esprima更胜一筹，但是文档比较匮乏。 Babylon是Babel的JavaScript Parser，早期也是fork的Acorn，目前关注度不及其它Parser。 推荐一种比较好的实践方式：从npm中的找出几个[依赖于这些Parser](https://www.npmjs.com/browse/depended/acorn)的项目直接学习源代码。比如[amd2cmd](https://www.npmjs.com/package/amd2cmd)这个项目就是使用acorn将amd代码转换为cmd代码。...
[原文链接](http://www.ruanyifeng.com/blog/2015/07/flex-examples.html) [上一篇文章](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)介绍了Flex布局的语法，今天介绍常见布局的Flex写法。 你会看到，不管是什么布局，Flex往往都可以几行命令搞定。  我只列出代码，详细的语法解释请查阅[《Flex布局教程：语法篇》](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)。我的主要参考资料是[Landon Schropp](http://davidwalsh.name/flexbox-dice)的文章和[Solved by Flexbox](http://philipwalton.github.io/solved-by-flexbox/)。 ## 一、骰子的布局 骰子的一面，最多可以放置9个点。  下面，就来看看Flex如何实现，从1个点到9个点的布局。你可以到[codepen](http://codepen.io/LandonSchropp/pen/KpzzGo)查看Demo。  如果不加说明，本节的HTML模板一律如下。 > ``` > > > > > > ``` 上面代码中，div元素（代表骰子的一个面）是Flex容器，span元素（代表一个点）是Flex项目。如果有多个项目，就要添加多个span元素，以此类推。 ### 1.1 单项目 首先，只有左上角1个点的情况。Flex布局默认就是首行左对齐，所以一行代码就够了。 ...
本文主要介绍本人在项目实践中通过`SlimerJS`将网页输出为PDF文档的过程，生成的PDF文档中的文本是矢量的，可以选择复制。 虽然网上也有一些类似的分享，但是并没有将整个过程中的可能遇到的坑以及在Web开发中的一些技术细节讲述的比较清楚。 ## 软件清单： - xvfb - gtk3 - cups - firefox - slimerjs 本文使用的操作系统版本为CentOS 7.2。 ## 安装xvfb 关于xvfb的介绍可以查看[wiki](https://en.wikipedia.org/wiki/Xvfb)，简单点说它就是用于处理程序中与图形化相关的功能，但是它不会在屏幕上展示任何图形输出。 安装以后可以使用**xvfb-run**命令来运行**headless slimerjs.** ``` html yum install xorg-x11-server-Xvfb ``` ## 安装Firefox SlimerJS依赖于Firefox，目前支持的版本号介于38~...
## 她是什么 _violet 是一款面向写作爱好者的客户端同步工具。_ 对于喜欢写点东西的人来说，一般都会活跃在多个写作平台（`知乎`、`简书`、`Medium`、`GitHub`）。 往往我们倾向于在多个平台中选择一个作为主创平台。 **为什么只能选择一个平台？** 因为作品在各个写作平台之间同步异常麻烦。 > 各个平台编辑器支持能力不一致，人的精力有限，你不可能在每个平台上使用不同的编辑器都发布一遍。 > 即时可以复制粘贴，但大多数时候粘贴出的格式都并非如你所愿（尤其是代码）。 > 随之而来的格式调整会花费大量时间，慢慢地你失去了同步多个平台的动力。 > 作品发布以后频繁的小幅更新也慢慢地在摧毁你的创作动力。 **而罪魁祸首仅仅是缺少一款得心应手的工具！** 从今天起就不要为这些问题担忧了，**violet** 能帮你解除后顾之忧。 ## 功能 - 统一使用流行的写作语言 **Markdown** - 在各大写作平台之间同步作品（**一次编写，处处发布**） ## 特点 - 跨平台，兼容Windows...
> 本文基本总结了我在DataEye前端项目代码管理方面的一些尝试。分享PPT在 [slides.com](http://slides.com/reduxis/deck-1/fullscreen) 可能需要翻墙。 ## Virtuality & Reality > 借助于当下流行的VR，代码管理也从两个方面来讲解：虚（文件内容相关的管理）/实（文件的物理存储相关的管理） ## Version Control > Git与SVN：Git是分布式版本管理，SVN是中心化。 无需中心服务器，本地自用 > git init ## Multiple Projects > 实际工作中开发人员每天都要与多个项目打交道，如何在多项目中开发中提高工作效率值得思考与学习 > > 20,0000,0000 ## All in...
# Better React 使用Ractive（一个MVVM框架）编写组件的时候，我就经常想获取用户当前传入的attributes。 很无奈，Ractive并不支持此功能。为此我还专门提过一个[issue](https://github.com/ractivejs/ractive/issues/2059)。 React开始流行的时候，作为MVVM的爱好者我其实是比较抵触的。 后来发现势头不太对，感觉还是有必要了解下。 于是就抱着试一试的心理，开始了React的学习历程。 依稀记得当我首次接触props和state这对兄弟的时候，我的内心是十分激动的。 随着React学习的愈发深入，就愈发觉得掌握props和state的使用，对于掌握React整个基础体系是有多么重要。 今天本文就结合我自己的开发实践，讲讲使用props的一个基本原则。当然如果有更好的实践方法，烦请多交流。 ## 一个典型 ``` js let Component = React.createClass({ render() { let handleClick = () => { console.log('click handled') }...
之前重构项目后根据个人实战经验写了一篇[《Better React》](http://zhuanlan.zhihu.com/reduixs/20554654)，总结在React中传递props应该注意的事项。 在后来与网友的讨论中发现行文总结不太严谨，于是乎再度发文，争取纠正其中某些纰漏之处，不至于误导他人。 如果你还没有阅读[《Better React》](http://zhuanlan.zhihu.com/reduixs/20554654)，推荐阅读之后再来阅读本文。 ## 缓存函数作为组件的prop传递不可取吗？ 之前的文章中不推荐缓存函数主要是因为下面这两个原因： - _类似的prop越多，外层缓存的函数越多，代码风格极其不自然_ - _如果函数依赖于局部变量，缓存的方式异常麻烦甚至于无法解决_ 这里我们有必要再进行一些科普工作。 React组件可以接受函数作为prop，一般我们传递的时候有三种方式： 1. 在组件当前作用域定义局部变量 2. 在最外层的作用域定义全局变量 3. 作为组件自身的实例方法定义 第一种方式写法最自然，但是危害最大，因为函数引用在父组件render的时候会一直变化。 第二种方式写法最蛋疼，函数引用不会变化，但是可以解决一些问题。 第三种方式则是前两种方法的一个比较完美结合。 至此，第一个原因提及的问题通过第三种方式可以解决。至于代码风格问题，因人而异。 第二个原因提到的问题可能描述的不太详细，以致于会有人疑惑： - 为什么不把依赖的变量作为prop一同传入给子组件，这样反而更符合React的思想 传还是不传，怎么做才是最佳实践？且往下看。 ## 应该使用EventEmitter吗？...
## 问答 > - [知乎 - 国内外有哪些数据可视化做的比较好的公司或者达人？](https://www.zhihu.com/question/35854352) > - [知乎 - 好看的数据可视化的图片是怎么样做的？](https://www.zhihu.com/question/26620885) > - [知乎 - 大数据魔镜的前途怎么样？](https://www.zhihu.com/question/28541004) > - [知乎 - 除了qlikview,tableau，还有什么比较好的可视化软件推荐么？](https://www.zhihu.com/question/26762626) ## BLOG > - [张迪BLOG - 数据可视化](http://www.storagelab.org.cn/zhangdi/category/data-visualization/) >...
[Fast browserify builds with watchify](https://github.com/gulpjs/gulp/blob/master/docs/recipes/fast-browserify-builds-with-watchify.md) 这一篇主要是讲如何使用增量编译，提升编译速度，毕竟项目大了之后脚本编译一次耗时需要很久。 [browserify for webpack users](https://gist.github.com/substack/68f8d502be42d5cd4942) 这一篇主要是给webpack的用户讲如何在browserify中实现对应的功能。