最近在弄公司管理后台，考虑到只是在团队里面用，尝试采用React来写，状态采用Redux来管理，结合webpack开发。

在React中，所谓的组件就是一个个状态机器，当应用变得复杂时，状态如果管理不当，会使代码变得难以调试。Redux通过限制更新发生的时间和方式，尝试使state的变化变得可预测。Redux是一个很小的库，除了能与React一起使用，还支持其它库，如angular。

Redux可描述为如下三大原则：

1. 单一数据源，整个应用只有一个store；
2. state是只读的，只能通过触发action来修改；
3. 通过编写reducers来描述action如何修改state。

接下来，通过Redux源码来了解Redux如何工作。

Redux仅有以下几个API，以Redux3.0.0为例

export {
  createStore,
  combineReducers,
  bindActionCreators,
  applyMiddleware,
  compose
};

博客挺久没更新了，感觉还是偏懒了一些。从迅雷离职到进入新公司也有一段时间了，目前在新公司主要参与工作流程优化，其中包括自动化工具的开发、组件平台搭建等等，进一步接触node.js。本文主要简述在工作上一些npm包全局安装带来的问题以及解决的方法。

这里以webpack为例来说，《React结合Webpack使用》这篇文章中演示的例子Todos，webpack、webpack-dev-server都是采用全局安装的方式，这时候其他用户从Github上获取代码之后，他需要执行以下两步操作才能把依赖以及工具下载下来。这些我都得在README.md中一一说明，README.md会显得比较长，步骤也比较繁琐。

npm install
npm install -g webpack webpack-dev-server

其二，Todos是我几个月前写的，webpack用的是当时最新的版本，假如现在版本更新了，废弃了一些参数，用户全局安装最新的版本，可能就会执行失败。这种情况在一些老的代码经常出现。

针对以上两个已知的问题，可以利用npm包的一些特性来处理的。

外观(Facade)模式为对象提供了一个方便的高层次接口，能够隐藏其底层的真实复杂性，通常是为了提高可用性。

外观模式非常适合于浏览器脚本处理，可以将浏览器之间的差异隐藏在外观之后。比如说事件API、AJAX等，IE低版本浏览器和W3C标准存在一定差异，这时候可以提供一个“外观”给外部调用，将处理细节隐藏起来，同时也能将细节处理的代码从逻辑代码中解耦出来。

以下内容通过提供一个跨浏览器事件的接口来实现外观模式。

通过创建一个工具类utils，主要包含addEventListener和removeEventListener，通过检查特性的存在来提供一个更安全的、跨浏览器的API。代码如下：

var utils = {
  addEventListener: function (el, ev, handler) {
    if (el.addEventListener) {
      el.addEventListener(ev, handler, false);
    } else if (el.attachEvent) {
      el.attachEvent('on' + ev, handler);
    } else {
      el['on' + ev] = handler;
    }
  },
  removeEventListener: function (el, ev, handler) {
    if (el.addEventListener) {
      el.removeEventListener(ev, handler, false);
    } else if (el.attachEvent) {
      el.detachEvent('on' + ev, handler);
    } else {
      el['on' + ev] = null;
    }
  }
};

这就是一个外观模式。但这段代码存在一个问题，执行效率比较低下。每次在调用utils.addEventListener()或utils.removeEventListener()时，都会重复执行相同的检查。那么该如何优化这段代码？

Todo的代码已经更新到了React0.14，React0.14分为react和react-dom两部分。如果想查看之前的代码，可以在github上切换到分支react0.13。

最近在学习React，配合Webpack使用使得开发和调试变得方便多了。这几天抽空采用React和Webpack写了一个手机单页面应用，演示地址：http://lab.crazycoder.cc/todo。本文主要记录Webpack与React配合使用的过程（采用node.js来处理）。

1、React

React组件拥有比较灵活的结构，可采用JSX来编写，代码比较简洁。同时React实现一个虚拟DOM树，用于浏览器减少重绘和重排等等。

npm install react --save

2、Webpack

webpack是一个模块加载器，特别灵活，能够像node.js解析代码中的依赖，将代码进行打包等等。

npm install -g webpack

webpack安装完后，需要配置，默认配置文件为webpack.config.js，大概配置如下

var path = require('path');

module.exports = {
  entry: [path.resolve(__dirname, 'app/main.js')],
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js', 
  },
  module: { //loaders
  }
};

module中主要是配置一些加载器如css、babel等，后面会给出详细的配置。

Singleton（单例）模式限制了类的实例化次数只能一次，以前使用PHP的时候，常用单例模式来处理数据库连接，保证数据库句柄唯一。

Singleton模式，在实例不存在的情况下，可以通过一个方法创建一个类来实现创建类的新实例；如果实例已经存在，它会简单返回该对象的引用。

今天，采用JavaScript来实现单例模式。在JavaScript中，有多种方式可以实现单例模式。

1、使用对象字面值

代码如下：

var obj = {
  name: 'wen'
};

在JavaScript中，对象之间永远不会完全相等，因此，可以认为在使用对象字面量创建对象的时候，就是创建一个单例。

2、重写构造函数

代码如下：

function Singleton() {
  //缓存实例
  var instance;

  //重写构造函数
  Singleton = function() {
    return instance;
  };

  //保留原型
  Singleton.prototype = this;

  //实例
  instance = new Singleton();

  //构造函数指针
  instance.constructor = Singleton;

  return instance;
}