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

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

$("#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开发爱好者,专注于前端开发,该博客用于记录和分享平时遇到的一些问题以及知识。

订阅

联系方式

链接