HTTP缓存相关的回顾

June 6, 2015

282

最近,对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源码的一些笔记

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是如何处理的呢?

优化JavaScript构造函数

May 6, 2015

445

之前写过一篇文章《关于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_

那么,我们该如何来优化这种方式呢?

JavaScript设计模式之观察者模式

Apr 12, 2015

776

观察者模式是一种设计模式,其中一个对象(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中正则表达式的记录

Mar 19, 2015

362

前段时间,看了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"]。
« 上一页 下一页 »

Wen's Blog

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

订阅

联系方式

链接