主要了解一下zepto定义的初始变量。

逐一以自己的理解解析,待到后面完全透彻理解之后,争取再写一遍zepto源码学习的文章。

其中的undefined确实不明白为什么定义这么个变量在这里。

document = window.document根据个人理解应该是要兼容一些特殊情况下获取document的问题,但是也不知道在什么样的情况下,需要使用window.docment才能获取到document对象。

key: 后面会多次用到初始化变量key,在for in循环中,需要确定键的名称,基本上只要涉及到键值对的时候,键多数情况下都命名为key。用法示例:

$:zepto库中最重要的关键字,作为基本的zepto对象。

classList:在一定情况下缓存class名称,避免重复获取这一操作。用法示例:

emptyArray=[]:定义一个空数组。以方便调用各种数组的原生函数。

concat = emptyArray.concat,

filter = emptyArray.filter,

slice = emptyArray.slice

均是调用数组的原生函数。

elementDisplay:缓存对象的默认的display属性。

方便类似toggle用法需要还原对象的display值。

classCache:对获取到的className进行缓存,避免重复dom操作。

cssNumber = { 'column-count': 1, 'columns': 1, 'font-weight': 1, 'line-height': 1,'opacity': 1, 'z-index': 1, 'zoom': 1 }:定义在css属性中属性值为纯粹的数字的属性,以区别需要添加单位的属性。

fragmentRE = /^\s*<(\w+|!)[^>]*>/:正则表达式,文档片段。解析:以空格或者<开头,匹配并捕获包括下划线的任何单词字符或者!,一段非>的任意字符,加上>

singleTagRE = /^<(\w+)\s*\/?>(?:<\/\1>|)$/:正则表达式,单标签。\1表示重复正则第一个圆括号内匹配到的内容;\2表示重复正则第二个圆括号内匹配到的内容;以此类推。 <br>或者<br/>这种写法。

tagExpanderRE = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig:正则表达式,标签匹配,全局匹配,并且忽略大小写,单标签和成对的标签。

rootRE = /^(?:html|body)$/:正则表达式,根标签,html或者body。

capitalRE  = /([A-Z])/g:正则表达式,全局匹配大写字母。

methodAttributes = ['val', 'css', 'html', 'text', 'data', 'width', 'height', 'offset']:预定义一些方法名称,在zepto.fragment的方法中,

如果methodAttributes中存在该属性名称,则通过该关键字调用方法进行赋值,如$('div').html('字符串')。

adjacencyOperators = [ 'after', 'prepend', 'before', 'append' ]:预定义方法名称,为后面一次性封装after, append, appendTo, before, insertBefore, insertAfter, prepend, prependTo提供入口。

table = document.createElement('table'):创建table元素标签。

tableRow = document.createElement('tr'):创建tr元素标签。

containers = {
  'tr': document.createElement('tbody'),
  'tbody': table, 'thead': table, 'tfoot': table,
  'td': tableRow, 'th': tableRow,
  '*': document.createElement('div')
}

定义特殊的包装的标签,如果是tr,需用tbody包装;tbody, thead, tfoot都需要用table包装;td,th用tr包装;其他所有元素,都使用div包装。

readyRE = /complete|loaded|interactive/:正则表达式。

simpleSelectorRE = /^[\w-]*$/:正则表达式,匹配包括下划线的任何单词字符或者-,以此开头并以此结尾。

class2type = {}:缓存实际类型。

实际存储的是这样的键值对。

toString = class2type.toString:调用对象的toString方法。

zepto = {}:封装方法的对象。

camelize: 用于转换驼峰式的写法

uniq: 用于数组去重。

tempParent = document.createElement('div'):用于临时创建父元素。

propMap = {
  'tabindex': 'tabIndex',
  'readonly': 'readOnly',
  'for': 'htmlFor',
  'class': 'className',
  'maxlength': 'maxLength',
  'cellspacing': 'cellSpacing',
  'cellpadding': 'cellPadding',
  'rowspan': 'rowSpan',
  'colspan': 'colSpan',
  'usemap': 'useMap',
  'frameborder': 'frameBorder',
  'contenteditable': 'contentEditable'
}

html标准属性和特性之间的相互转换。

isArray = Array.isArray || function(object){ return object instanceof Array }  判断一个对象是否为数组

zepto上来就定义的变量,各变量的用法。

zepto源码--定义变量--学习笔记的更多相关文章

  1. zepto源码--整体框架--学习笔记

    为了深入学习javascript,根据别人推荐的方法之一:研究源码. 相对而言,之前的项目中仅仅使用过zepto和jquery,当前阶段,看到好几千行的jquery源码,心生敬畏,望而却步,所以选择相 ...

  2. zepto源码--插入节点--学习笔记

    与生成width和height使用的方法类似,通过`after`, `prepend`, `before`, `append`,这四者之间的共性,生成对应的函数.并根据这四个函数,生成 `insert ...

  3. zepto源码--width,height--学习笔记

    width和height函数,实际上通过css方法也完全可以取到这两个函数的结果.获取width,$elem.css('width');设置width的话,$elem.css('width', 100 ...

  4. 《PHP7底层设计与源码实现》学习笔记1——PHP7的新特性和源码结构

    <PHP7底层设计与源码实现>一书的作者陈雷亲自给我们授课,大佬现身!但也因此深感自己基础薄弱,遂买了此书.希望看完这本书后,能让我对PHP7底层的认识更上一层楼.好了,言归正传,本书共1 ...

  5. 《Android源码设计模式》学习笔记之ImageLoader

    微信公众号:CodingAndroid cnblog:http://www.cnblogs.com/angel88/ CSDN:http://blog.csdn.net/xinpengfei521 需 ...

  6. stl源码剖析 详细学习笔记priority_queue slist

    // //  priority_queue.cpp //  笔记 // //  Created by fam on 15/3/16. // // //------------------------- ...

  7. .NET 云原生架构师训练营(KestrelServer源码分析)--学习笔记

    目录 目标 源码 目标 理解 KestrelServer 如何接收网络请求,网络请求如何转换成 http request context(C# 可识别) 源码 https://github.com/d ...

  8. stl源码剖析 详细学习笔记 hashtable

    //---------------------------15/03/24---------------------------- //hashtable { /* 概述: sgi采用的是开链法完成h ...

  9. 阅读{django-restframework}源码[generics.py]学习笔记

    首先django-restframework是基于django的一个框架.   mixins.py中开头是这样写的: Basic building blocks for generic class b ...

随机推荐

  1. 拓扑排序 Codeforces Round #290 (Div. 2) C. Fox And Names

    题目传送门 /* 给出n个字符串,求是否有一个“字典序”使得n个字符串是从小到大排序 拓扑排序 详细解释:http://www.2cto.com/kf/201502/374966.html */ #i ...

  2. Odoo Auto Backup Database And Set Linux task schedualer

    First ,Write Database Backup Script: pg_dump -Fc yourdatabasename > /home/yourfilepath/yourdataba ...

  3. [百科] - iLBC

    iLBC是一种专为包交换网络通信设计的编解码,优于目前流行的G.729.G.723.1,对丢包进行了特有处理,即使在丢包率相当高的网络环境下,仍可获得非常清晰的语音效果. 30ms ptime的iLB ...

  4. WPF 中Frame + Page 的使用

    1 在window 的设计的时候 ,中间需要进行页面切换的时候,顶一个Frame <Frame Name="MainPage"  NavigationUIVisibility ...

  5. php 上传图片

    学习地址:http://www.imooc.com/video/2473 <?php header("content-type:text/html;charset=utf-8" ...

  6. filesize返回的是以字节为单位的数据也可以使之处理数字

    1.文件的属性信息获取 首先文件具有类型,在linux下边,有block(块设备,如磁盘分区.CD-ROM).char(以字符为输入的设备,如键盘.打印机).dir(目录类型,目录也是文件的一种).f ...

  7. 【液晶模块系列基础视频】1.3.iM_TFT30模块简介

    [液晶模块系列基础视频]1.3.iM_TFT30模块介绍 ============================== 技术论坛:http://www.eeschool.org 博客地址:http:/ ...

  8. require(__DIR__ . "/../sss.php"

    魔法函数  __DIR__ 是 php5.2以后新加的函数,返回当前文件所在的目录,返回的目录不带 \,所以上边的意思是:Require当前目录的父目录中的 sss.php

  9. DS实验题 最大最小

    题目: 算法设计: 计算最小值算法: 设置一个flag,flag为1的时候代表遇到*号: 遇到数字时: flag为0进栈: flag为1的时候,从栈顶提出一个元素和当前元素运算,结果进栈 最后对栈进行 ...

  10. 不再以讹传讹,GET和POST的真正区别

    不再以讹传讹,GET和POST的真正区别 网上的多数答案都是错的 在 2012年05月03日 那天写的     已经有 19940 次阅读了 感谢 参考或原文 www.cnblogs.com   服务 ...