在过去的 4 年里，我看过许多 web 项目并花了大量的时间在前端架构或是为它整合一些框架。在 2010 年前，JavaScript（实现 jQuery 的语言）在传统 web 应用中被广泛用于 DOM 操作以及添加一些简单的东西。人们并不关心架构方面的东西，一些 简单的模块化方式 似乎已经足够用于设计我们的代码了。

有的时候，这就是 Hybrid 应用和原生应用的区别，或者是创建一个原型和创建一个完整应用的区别（Fuse 实际上可以帮你无缝地从一个原型到完成一个完整应用），但通常我们需要更近一步说明。

之前写过的测试都是针对简单的工具方法，用的 mocha + chai 写，最近在研究前端路由，想写写测试代码，遇到 window.location，突然意识到前后端的差异问题，需要一个浏览器环境，于是想到之前用过的 Karma + phamtonjs 环境，搭的过程中遇到一些坑，因为涉及到了 Babel 和 commonjs 模块系统，于是这里记录分享下。

由于自己经常会写一些 demo，或者学习新工具库的使用，然后又比较依赖 npm 的模块管理（这个是重点）和 webpack 的代码打包功能，所以每次都要创建一个目录结构，复制各种 .rc 文件，复制 webpack 的配置文件，复制一个应用了 webpack dev 中间件的 express server，每次都要这样，让我心里很烦。

也可以在这里看：[链接] 扫了几眼react的源代码（0.14-stable分支），发现一个有趣的现象，比如如下这段代码： {代码...} 熟悉 node.js 的 CommonJS 模块系统的话，我们知道有如下3种情况： 依赖一个原生模块（native module），比如fs模块或者是events模块。 以 '/'、'./' 或 '../' 开头，代表文件路径，比如用 require...

首先，DOM对象本身也是一个js对象，所以严格来说，并不是操作这个对象慢，而是说操作了这个对象后，会触发一些浏览器行为，比如布局（layout）和绘制（paint）。下面主要先介绍下这些浏览器行为，阐述一个页面是怎么最终被呈现出来的，另外还会从代码的角度，来说明一些不好的实践以及一些优化方案。

我们都知道，如果使用ES6 Component语法写React组件的话，mixin是不支持的。而mixin作为一种抽象和共用代码的方案，许过库（比如react-router）都依赖这一功能，自己的项目中可能都或多或少有用到mixin来尽量少写重复代码。

之前一直在探索React相关的东西，手上有个SPA项目，于是准备上Redux试试水。Redux本身和React并没有之间的关联，它是一个通用Javscript App模块，用做App State的管理。要在React的项目中使用Redux，比较好的方式是借助react-redux这个库来做连接，这里的意思是，并不是没有react-redux，这两个库就不弄一起用了，而是说...

也可以在这里看： [链接] 最近工作之余在写一个SPA的项目，用React+Redux做一个团队协作系统，面向目前的这个项目组的。 这篇文章更像是一篇随笔，比较随性一点，更深入的总结，以及项目演示什么的，以后完成了项目了再来写。 下面基本没怎么贴代码，如果对这个项目有兴趣的话，Github地址如下：[链接] 回到正题，之前自...

几个月前遇到了写模态窗（modal）的需求，当初其实没什么思路，不知道怎么用更React的方式实现模态窗，于是去学习了下ReactBootstrap的源代码，发现了一个Portal组件，通过这个Portal的概念实现了React式的模态窗，诸如tooltip或者是notification等组件也是同样的道理。最近在看React-conf的视频时又听到Ryan提到，最近...

最近React，这个专注View层的库格外火热，我个人已经探索了一段时间，本来一直想写一些文字，总结下React应用开发和webpack构建工具的经验。不过懒癌复发，一直没动笔。前段时间给团队安利这个库，现在要开始用它写项目了，所以自己挖的坑要填上，就开始写一些基本的东西，就先从介绍React组件的基础开始。

Github上已经给别人点了很多赞了，觉得有必要开始整理起来。这里用于整理我在Github中的starred项目，方便之后检索 ，同时分享出来。本文将会不断更新和整理。

React的组件式开发，让我们可以利用其Component Model，专注于单个组件的逻辑开发，其中还包括组织组件的样式。先声明，本文并不是webpack配置教程，不会介绍详细的配置过程，假设你们已经用过了css-loader style-loader extract-text-webpack-plugin。

The production AssignmentExpression : LeftHandSideExpression = AssignmentExpression is evaluated as follows:

Facebook的ReactJS开发小组似乎并不待见MVC框架。将MVC模式和ReactJS结合使用了一段时间后，我似乎发现了争议从何而来了。你会遇到一个问题：你应该如何处理数据？ReactJS并不在乎太多关于数据是如何传入的或者贯穿整个Web应用去处理数据。这个几乎是一个架构层面的问题，并不是ReactJS所能涵盖的。于是Facebook中的优秀...

让元素居中对齐是非常常见的需求，首先是水平居中，要实现水平居中行内元素只需要在其父元素上设置text-align: center即可，对于块级元素来说让它的margin-left: auto和margin-right: auto即可（width不可为auto），那么垂直居中呢？找下css属性发现了vertical-align，感觉就是它了，设置个vertical-align: middle，怎么...

获取元素的尺寸或者获取元素的相对位置是前端开发中常见的操作，记得之前在其他博客中经常见到一张图来说明各属性所代表的意义，不过那图有点小，看着有点累。本文以列表和代码段的形式总结了包括原生方法或使用jQuery的方法来获取元素尺寸或各种offset的方法，并获持续更新补充。如果发现本文中的任何错误，欢迎拍砖。