Redux源码解读

Oct 25, 2015

790

最近在弄公司管理后台,考虑到只是在团队里面用,尝试采用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
};

从webpack的使用浅谈npm包的全局安装

Oct 3, 2015

4414

博客挺久没更新了,感觉还是偏懒了一些。从迅雷离职到进入新公司也有一段时间了,目前在新公司主要参与工作流程优化,其中包括自动化工具的开发、组件平台搭建等等,进一步接触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包的一些特性来处理的。

JavaScript设计模式之外观模式

July 5, 2015

566

外观(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()时,都会重复执行相同的检查。那么该如何优化这段代码?

React结合Webpack使用

June 30, 2015

3766

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等,后面会给出详细的配置。

JavaScript设计模式之单例模式

June 15, 2015

770

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;
}
« 上一页 下一页 »

Wen's Blog

文章归档 » 文章标签 » 博主:吴文伟,Web开发爱好者,专注于前端开发,该博客用于记录和分享平时遇到的一些问题以及知识。

订阅

联系方式

链接