JavaScript函数式编程探索与思考

May 27, 2016

1906

最近一段时间,函数式编程又开始活跃起来了。函数式编程是一种编程范式,它将电脑运算视为数学上的函数计算,并且避免使用程序状态以及可变数据。函数式编程强调程序执行的结果而非执行的过程,倡导利用若干简单的执行单元让计算结果不断渐进,逐层推导复杂的运算,而不是设计一个复杂的执行过程。

今天我试图用js去梳理函数式编程相关的一些知识。文中代码风格采用Standard,使用ES6语法。

函数式编程初试

首先我们来看一个例子,计算数组元素的和。

我们可以快速用命令式来实现,代码如下:

const arr = [1, 2, 3, 4]
let sum = 0

for (let i = 0, len = arr.length; i < len; i++) {
  sum += arr[i]
}

利用ES5种提供的reduce方法,代码如下:

const arr = [1, 2, 3, 4]
let sum = arr.reduce((x, a) => x + a)

可以看到,reduce的函数式代码与前面命令式代码解决问题的方式和角度是完全不同的。命令式需要关心所有的过程,如何遍历以及如何组织结果数据。而reduce由于将遍历、操作以及结果数据的组织的过程封装至Array中,我们真正关心的逻辑就是reduce的参数里的匿名函数中的过程。

博客变迁记录

Jan 6, 2016

425

趁着元旦放假重写了博客,后端采用Node.js+MongoDb,前端采用gulp+webpack打包,这几天才将blog.crazycoder.cc博客的内容全部迁移过来。折腾自己的博客一年多了,本文主要写一下我自己博客的变迁记录。

目前版本的博客做了比较多的优化,可以看一下 Google PageSpeed Insights 的评分。

这个版本主要做了首次加载的优化,减少http请求,后面会涉及到。

Redux源码解读

Oct 25, 2015

821

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

React结合Webpack使用

June 30, 2015

3824

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

读zepto.js源码的一些笔记

May 19, 2015

584

这两天把zepto.js源码重新读了一遍,对其中的一些要点做了笔记(zepto版本号:1.1.6)。

Zepto代码主要分为两部分,一部分是Zepto核心,包括Zepto集合的初始化以及常见的函数,另一部分为插件模式,包括事件绑定、ajax等。

先看一下Zepto的基本结构,简化后代码如下:

var Zepto = (function() {
  var $, zepto = {}

  //这里主要是绑定原型,返回zepto集合
  zepto.Z = function(dom, selector) {
    dom = dom || [] //对象数组
    dom.__proto__ = $.fn //将dom的原型指向$.fn
    dom.selector = selector || ''
    return dom
  }

  //判断是否为Zepto集合
  zepto.isZ = function(object) {
    return object instanceof zepto.Z
  }

  //初始化
  zepto.init = function(selector, context) {
    return zepto.Z(dom, selector)
  }

  //创建
  $ = function(selector, context){
    return zepto.init(selector, context)
  }

  //复制属性,这个函数主要用于扩展插件
  $.extend = function(target){
    return target
  }

  //原型
  $.fn = {}

  zepto.Z.prototype = $.fn

  $.zepto = zepto

  return $
}());

window.Zepto = Zepto
window.$ === undefined && (window.$ = Zepto)

这里面有疑问的是__proto__属性,这个属性指向对象的原型,通过这个属性,zepto对象无需采用new就可以访问到原型中的方法,有些浏览器如IE10以下并没有__proto__属性,zepto是如何处理的呢?

下一页 »

Wen's Blog

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

订阅

联系方式

链接