haoran
haoran
自从React开始在前端圈大火以后，virtual dom作为React的一个重要部分也开始为被大多数前端开发者所熟知。目前，除了React框架本身的内部实现之外，还有一下几个比较成熟的（github星星比较多的）库实现了virtual dom： - [virtual-dom](https://github.com/Matt-Esch/virtual-dom) - [preact](https://github.com/developit/preact) - [deku](https://github.com/anthonyshort/deku) - [incremental-dom](https://github.com/google/incremental-dom) 初次接触virtual-dom这个概念的时候，我猜很大一部分人都会被这个“高级”的概念所吓到，然后望 virtual-dom 而却步，毕竟不是所有人都有心情和精力去阅读React源码。但是事实上，virtual-dom是并不是什么神秘的黑科技，用一句话就可以总结virtual-dom： > ## virtual-dom是真实DOM的一个映射 这个看似简单的总结听起来也不像是什么人话。我们可以更加用更加形象的方法来进行讲解，比如下面这段HTML代码： ``` html ``` 一个`div`标签里面包含着两个`span`标签，两个`span`标签是并列关系。假如`div`是一个鸡蛋灌饼，`span`是一根烤肠，那么我们就可以把上面的这段真实的DOM映射成一个夹着两根烤肠的鸡蛋灌饼，这个豪华版鸡蛋灌饼就可以看做是一个virtual-dom。 当然，我们在写代码的时候并没有那么多的鸡蛋灌饼，当然也没有烤肠，我们有的只是JavaScript代码。我们可以想一想，在Javascript中用什么结构可以和DOM的定义和结构更加贴近呢？答案就是对象字面量。对象字面量表示方法可以设定属性，我们可以用其中的一个属性来记录DOM标签的类型，另一个属性来记录对象本身的一些属性，通过对象的相互嵌套也可以很好的表示DOM的层级结构。
CSS3中的伪类选择器例如:hover，:before，:after在已经在前端开发中被广泛使用，但是可能开发者还不太熟悉:checked这个伪类选择器。本文将介绍:checked这个伪类选择器以及如何使用它写出更加有优雅的代码。 :checked伪类选择器顾名思义，表示的是`type="checkbox"`的input元素被选中的状态。在前端开发中，我们常用:hover伪类来设置鼠标悬浮时的样式，而由于checked状态的改变需要用户进行点击操作，使用:checked伪类，我们则可以设置鼠标点击后的状态。在使用zepto、jQuery库时，有一个经常使用的方法toggle用来隐藏和再现页面上的某个元素，了解:checked伪类的定义之后，我们完全可以用纯CSS实现toggle效果。 首先定义页面结构： ``` html .toggle-item{ width: 100px; height: 100px; background-color: pink; } ``` 接着，我们对`#toggle-trigger`的选中态进行设置 ``` css #toggle-trigger:not(checked) ~ .toggle-item{ display: block; } #toggle-trigger:checked ~ .toggle-item{ display: none; } ```...
canvas是HTML5中一个非常重要的元素，使用canvas可以让开发者制作出很多非常酷炫的的动画效果。
之前在美国同性婚姻在全美合法之后，社交网络上很多人为了表达自己对同性婚姻的支持，纷纷将自己的头像换成了彩虹图。如下图所示：  很多生成彩虹图的JS库也应运而生，比如说国外的有[prideify.js](https://alexpeattie.com/projects/prideify)。predeify这个库的基本原理是把图片画到canvas上，生成彩虹图以后再使用canvas的toDataURL方法将图片转换为base64格式，再替换原有图片的src。 线性渐变并不是一个新的css属性，但是在过去的项目中并没有使用过它。在今天团队的一次内部分享会上有同学介绍了一些线性渐变的使用技巧，我觉得这个属性很实用，就用这个属性做了一个彩虹图。原理和写法都非常简单。 首先简单回顾一下线性渐变的语法： ``` css background: -webkit-linear-gradient(start_point，from_color，to_color) ``` start_point的取值可以是角度，比如30deg，也可以是预设值top、bottom、left、right，或者预设值两两组合比如top left。而from_color则是渐变色起点，to_color是渐变色终点。比如我们这么写： ``` css background: -webkit-linear-gradient(top, red, green); ``` 这样元素背景将会自上而下颜色由red线性渐变为green。 渐变的颜色可以多个，并在可以指定颜色停顿的位置，所以可以这么写： ``` css background: -webkit-linear-gradient(top, red , yellow 50%, green);...
> 文章正在不断完善中，请回头再来看 # tl,dr 写作本文的原因有3： - 工作中需要进行一个关于响应式编程、函数式编程的一个调研，其中一项产出是调研报告 - 我个人对函数式编程和响应式编程有好奇，虽然使用过underscore.js这样的函数式JS以及React这样的响应式JS框架，但是一直是知其然却不知其所以然，遂决心借此机会弄个明白 - 对近一段时间的学习做个记录和总结 本文（可能）会涉及到的内容： - Functional Javascript 编程 - Reactive Javascript 编程 - Stream in JavaScript - Rx.js # Functional JavaScript 提到JS函数式编程，大多数人第一事件都会想到map、reduce这样的方法。确实，map和reduce是函数式编程中两个非常重要的方法，但是JS函数式编程却远远不止是map和reduce。