摘要：
写惯了技术类的文章，这种总结和唠嗑型的我基本也就在年末才来一篇。说实话，这种轻松类的文章往往比技术类的要受欢迎的多，因为其受众更广，看起来也不烧脑。说来愧疚，这一年其实产出有点低，大致就写了不到二十篇技术随笔，特别下半年入职腾讯后就更少有时间动笔了。但再忙也没打算摒弃写文章的习惯，一来是为了自己沉淀... 阅读全文
摘要：
一个完整、优秀的项目往往离不开单元测试的环节，就 github 上的主流前端项目而言，基本都有相应的单元测试模块。就 React 的项目来说，一套完整的单元测试能在在后续迭代更新中回归错误时候给与警示，但鉴于 React 本身的特殊性，我们又常常将其与 webpack 等工具相结合，其单元测试的部署... 阅读全文
摘要：
箭头函数=>无疑是ES6中最受关注的一个新特性了，通过它可以简写 function 函数表达式，你也可以在各种提及箭头函数的地方看到这样的观点——“=> 就是一个新的 function”。箭头函数的句法规则甚至早已延伸到各项标准和技术文档中去了，虽然它早已不稀奇，却给我们一种刚刚发现的新鲜感。粉我的... 阅读全文
摘要：
一年一度的光棍节又快到了，天猫早已迫不及待放出双11优惠券认领页面，用户可以在该页面领取心怡店家的优惠券，不过存在手慢会被抢完的情况。然后是在群里看到了这样的一段代码，说是把它粘贴到控制面板上执行就能自动帮你领掉页面上的优惠券，我瞧了下没有啥漏洞代码段就试了试，好家伙还真的生效了：(function... 阅读全文
摘要：
前些天收到了HTML5中国送来的《高性能javascript》一书，便打算将其做为假期消遣，顺便也写篇文章记录下书中一些要点。个人觉得本书很值得中低级别的前端朋友阅读，会有很多意想不到的收获。第一章 加载和执行基于UI单线程的逻辑，常规脚本的加载会阻塞后续页面脚本甚至DOM的加载。如下代码会报错： ... 阅读全文
摘要：
现在npm上有很多gulp内联工具，用于把脚本和样式内嵌到HTML页面上，之前搞项目我也在这些插件中寻觅许久，但均不满足公司项目的一个需求—— HTML上同时插入了开发（dev版，src文件夹下，比如 src/index.html）和gulp处理后（build版，dest文件夹下,比如 dest/i... 阅读全文
摘要：
在前面我们通过四篇文章入门了React的大部分主要API，现在则开始进入实践环节。实践系列的开篇打算拿我司的FrozenUI来试验，将其部分UI组件进行React化，作为第一篇实践文章，将以较简单的Loading组件来入手，官网demo的效果如下图：为了更好地开发，后续将以webpack工具来辅助，... 阅读全文
摘要：
本篇将介绍 React 组件的API，其中主要的几个API我们在第一篇的时候便已介绍过，这里可以做个温故知新。本篇的代码你也可以在我的Github上获取到。setState参数：nextState（object）, [callback（function）]设置 nextState 的某个键（属性）值... 阅读全文
摘要：
process对象用于处理与当前进程相关的事情，它是一个全局对象，可以在任何地方直接访问到它而无需引入额外模块。 它是EventEmitter的一个实例。本章的示例可以从我的Github上下载到。事件'exit'当进程将要退出时触发。这是一个在固定时间检查模块状态（如单元测试）的好时机。需要注意的是... 阅读全文
摘要：
很快Node就会迎来4.0的时代，届时将并入现有的iojs，所以先前写过的iojs入门系列直接更名为NodeJS入门。本篇开始将逐个介绍Node的各主要模块，依循API文档走一遍，但会给出比API文档更详尽的示例。所有的示例都可以在我的Github上下载到。API系列的开篇打算以 path 对象开始... 阅读全文
摘要：
什么是 webpack？ webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。 我们可以直接使用 require(XXX) 的形式来引入各模块，即使它们可能需要经过编译（比如JSX和sas 阅读全文
摘要：
本文基本跟着官方文档把API都走一遍，但会有实例来解释应该怎么用，木有比我更详细的API文档咯。React.createClass参数：CONFIG（object）创建一个ReactClass（组件类），参数是一个对象且必须带有 render 属性方法，该方法必须返回一个封闭的容器（容器内可以有其它... 阅读全文
摘要：
如果你熟悉avalon，使用过data-include-rendered 和 data-include-loaded 等回调方法，那么你会很好地理解React组件的各个生命周期。说白了其实就是React组件状态变化前后的时间点，我们可以利用生命周期的接口在相应的时间点做回调操作。React的官方文档... 阅读全文
摘要：
React刚开始红的时候，由于对其不甚了解，觉得JSX的写法略非主流，故一直没打算将其应用在项目上，随着身边大神们的科普，才后知后觉是个好东西。好在哪里呢？个人拙见，有俩点：1. 虚拟DOM —— 在DOM树的状态需要发生变化时，虚拟DOM机制会将同一Event loop前后的DOM树进行对比（自然... 阅读全文
摘要：
（注：本人现已不在石豆任职，且石豆官网又进行了一次新的改版，故本文章内容已不再匹配石豆现有官网）这俩星期主要致力于公司官网的改版，今天也算是比较完整地上线（暂时还是全静态的），可以在 http://www.shidou.com查看效果（旧版是http://www.shidou.com/sdcm/ ）... 阅读全文
摘要：
项目后端觉得autoComplete响应略慢，于是花了两天时间写了这插件，基于jQuery 1.7+，仓库地址 https://github.com/VaJoy/smartComplete ，欢迎各种star。要注意的是，smartComplete只处理从后端接收到响应数据的情况就生成数据选择列表的... 阅读全文
摘要：
同源策略/SOP（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击（可以参考我的这篇文章）。SOP要求两个通讯地址的协议、域名、端口号必须相同，否则两个地址的通讯将被浏览器视为不安全的，并被block下来... 阅读全文
摘要：
（接上篇）标准ES6特性6. 新的String方法/New String methods7. 符号/Symbols8. 字符串模板/Template strings新的String方法/New String methodscodePointAt() 和 String.fromCodePoint()J... 阅读全文
摘要：
刚开始经营博客的时候，我写过不少“扒皮”系列的文章，主要介绍一些知名站点上有趣的交互效果，然后试着实现它们。后来开始把注意力挪到一些新颖的前端技术上，“扒皮”系列便因此封笔多时。今天打算重开“扒皮”的坑，不过咱挂个优雅点的名字——“优秀网站看前端”，顾名思义的，也是寻觅一些值得玩味的趣味网站，来学习... 阅读全文
摘要：
hammerJS是一个优秀的、轻量级的触屏设备手势库，现在已经更新到2.04版本，跟1.0版本有点天壤地别了，毕竟改写了事件名并新增了许多方法，允许同时监听多个手势、自定义识别器，也可以识别滑动方向。不过对于新版本的hammerJS却及其匮乏中文指引文档，就着这一点我还是上官网翻译下英文文档，写一篇... 阅读全文
摘要：
io.js的官网上有专门介绍其所支持的ES6特性的页面（点我查看），上面介绍到，相比nodeJS，io.js已从根本上支持了新版V8引擎上所支持的ES6特性，无需再添加任何运行时标志（如 --harmony）。有的朋友可能对Node不熟悉，不太知道harmony标志的情况，这里简单介绍下。在Node... 阅读全文
摘要：
图片查看器，github地址：https://github.com/VaJoy/imgViewer效果如下：这款当初大概写了2小时，有点匆忙地赶出来的，使用的接口很简单：$.bindViewer(".viewer-item");它的实现其实也没啥复杂的原理，唯一觉得可说的地方是图片展开的过程 —— ... 阅读全文
摘要：
io.js可以说是彻底从NodeJS里分离出来的一条分支，其事情始末可以查看这篇报道，此处便也不赘言。既然是分支，io.js便也基本兼容NodeJS的各种API，连执行指令也依旧兼容Node的 node XXX（新指令是 iojs XXX ）。不过io.js采纳了最新版本的V8引擎，并也将会时刻跟进... 阅读全文
摘要：
事出有因为何选择eventloop?EventLoop是一种推进无阻塞I/O（网络、文件或跨进程通讯）的软件模式。传统的阻塞编程也是用一样的方式，通过function来调用I/O。但进程会在该I/O操作结束前卡住不动，下面的这段伪代码可以演示阻塞I/O的情况：var post = db.query(... 阅读全文
摘要：
本章将介绍如何使用avalon来实现前端路由功能。我们需要用到两个avalon路由配套模块—— mmHistory.js 和 mmRouter.js 。其中mmHistory是用于历史管理，它会劫持页面上所有点击链接的行为，当这些链接是以#/ 、#!/开头，就尝试匹配路由规则，阻止页面刷新（通过ha... 阅读全文