最近，对HTTP缓存一些相关知识有些遗忘，对Cache-Control、Expires、If-Modified-Since等首部有些混淆等，重新查阅了相关知识并记录如下。

对一条HTTP GET报文的缓存处理主要为一下7个步骤：

1. 接收——缓存从网络中读取抵达的请求报文。
2. 解析——缓存对报文进行解析，提取出URL和各种首部。
3. 查询——缓存查看是否有本地副本可用，如果没有，就获取一份副本并将其保存在本地。
4. 新鲜度检测——缓存查看已缓存副本是否足够新鲜，如果不是，就询问服务器是否有任何更新。
5. 创建响应——缓存会用新的首部和已缓存的主体来构建一条响应报文。
6. 发送——缓存通过网络将响应发送给客户端。
7. 日志——缓存可选地创建一个日志文件条目来描述这个事务。

【文档过期】通过Cache-Control首部和Expires首部，HTTP让原始服务器向每个文档附加了一个“过期日期”。在缓存文档过期之前，缓存可以以任何频率使用这些副本，而无须与服务器联系。Expires首部和Cache-Control:max-age首部所做的事情本质上是一样的，那么为啥HTTP会有这两个头部？

这两天把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是如何处理的呢？

之前写过一篇文章《关于underscore.js源码的一些理解与笔记》，里面涉及到的自调用构造函数，代码如下：

var _ = function(obj) {
  if (obj instanceof _) return obj;
  if (!(this instanceof _)) return new _(obj);
  this._wrapped = obj;
};

这段代码不管以函数的方式或者是以构造函数的方式调用，都会返回一个继承 _.prototype 的对象。但这种模式有一个缺点，使用函数调用时，需要额外的函数调用，代价比较高。可以通过以下代码来验证：

var _ = function(obj) {
  console.log('create_');
  if (obj instanceof _) return obj;
  if (!(this instanceof _)) {
    console.log('new_');
    return new _(obj);
  }
  this._wrapped = obj;
  console.log('wrapped_');
},
a = _(), //log: create_ new_ create_ wrapped_
b = new _(); //log: create_ wrapped_

那么，我们该如何来优化这种方式呢？

观察者模式是一种设计模式，其中一个对象（Subject）维持一系列依赖于它（Observer）的对象，将有关状态的任何变更自动通知给它们。当一个目标需要告诉观察者发生了什么事情，它会向观察者广播一个通知。以下我们采用JavaScript来实现观察者模式。

• Subject（目标）：维护一系列的观察者，方便添加或删除观察者。
• Observer（观察者）：为那些在目标状态发生改变时需获得通知的对象提供一个更新接口。

首先，实现一个ObserList，用于存储一系列的Observer，代码如下：

function ObserverList() {
  this.observerList = [];
}

ObserverList.prototype.Add = function(obj) {
  return this.observerList.push(obj);
};

ObserverList.prototype.Empty = function() {
  this.observerList = [];
};

ObserverList.prototype.Count = function() {
  return this.observerList.length;
};

ObserverList.prototype.Get = function(index) {
  if (index > -1 && index < this.observerList.length) {
    return this.observerList[index];
  }
};

ObserverList.prototype.IndexOf = function(obj, startIndex) {
  var i = startIndex, pointer = -1;

  while (i < this.observerList.length) {
    if (this.observerList[i] === obj) {
      pointer = i;
      break;
    }
    i++;
  }

  return pointer;
};

ObserverList.prototype.RemoveIndexAt = function(index) {
  if (index > -1 && index < this.observerList.length) {
    this.observerList.splice(index, 1);
  }
};

接着，实现Observer，代码如下：

function Observer() {
  this.id = Math.floor(Math.random() * 100);
}

Observer.prototype.Update = function(value) {
  console.log(value + this.id);
};

前段时间，看了zepto.js的源码，顺便对正则表达式做了一些回顾。

首先，先来看一下正则表达式的一些常见语法。

1、 (pattern)、(?:pattern)、(?=pattern)、(?!pattern)字符的说明

• (pattern)：匹配pattern并捕获该匹配的子表达式。如："mytest".match(/y(test)/ig); //["ytest", "test"]；
• (?:pattern)：匹配pattern并不捕获匹配的子表达式。如："mytest".match(/y(?:test)/ig); //["ytest"]；
• (?=pattern)：执行正向预测先行搜索的子表达式，该表达式匹配处于匹配的字符串的起始点的字符串，是一个非捕获匹配。如："mytest".match(/y(?=test)/ig); //["y"]；
• (?!pattern)：执行反向预测先行搜索的子表达式，该表达式匹配不处于匹配的字符串的起始点的搜索字符串，也是一个非捕获匹配。如："mytest".match(/y(?!est)/ig);//["y"]。