优化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_

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

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"]。

关于underscore.js源码的一些理解与笔记

Feb 13, 2015

623

在公司接触到的一些项目中,用到了underscore.js,但一直没时间去研究underscore.js的源码。临近过年,闲散时间多了一些,便看了underscore.js的源码,顺便把自己的一些理解记录下来。

1、_采用强制new模式,自调用构造函数

我们先来看一个例子:

function Person()
{
  this.name = "wen";
}

Person.prototype.age = 25;

var p1 = new Person(); //object
var p2 = Person(); //undefined
console.log(p1.age); //25
console.log(window.name); //wen

p2在调用构造函数时没有使用new操作符,会产生不同的结果,并且name会被添加到全局变量中,同时p2也没有原型链中的属性。(注:ES5严格模式下this并不会指向全局对象)。

我们看一下underscore中的处理,首先检测obj是否是_的实例,如果是直接返回obj,否则继续检查this对象是否是_的实例,如果不是,用new操作符实例_并返回。

代码如下:

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

这样做的好处就是能够保证我们调用的_对象不会丢失掉原型的链接,并且在没有使用new操作符时也能正常工作。

$("#chapters li").show()引发的问题

Feb 4, 2015

259

上周,主要开发项目中APP的内嵌页,前端主要采用的是Zepto.js,其中有一个是显示电子书的目录列表,采用的是li,目录显示效果如下图,当点击更多目录时显示全部列表项。

目录结构如下:

<ul id="chapters">
   <li><a href="#1">章节1</a></li>
   <li><a href="#2">章节2</a></li>
   <li><a href="#3">章节3</a></li>
   <li><a href="#4">章节4</a></li>
</ul>
<a href="javascript:void(0);" id="more">更多目录</a>

当点击更多目录时,直接使用$("#chapters li").show()显示出所有列表项,在chrome仿真器中,一瞬间就可以显示出来,但在真机中,浏览器竟然出现假死的现象,大概会出现5s的卡顿,主要一个原因是有一些电子书有900多个章节。我尝试使用变量把DOM结果集缓存起来,还是会出现卡顿的现象。

« 上一页

Wen's Blog

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

订阅

联系方式

链接