非常适合新手的jq/zepto源码分析01
(function(global, factory) {
// 查看这里是不是定义成模块,如果定义模块就返回 一个模块
if (typeof define === 'function' && define.amd)
define(function() { return factory(global) })
else
factory(global) //直接执行闭包外传过来的函数 funcutin(window)
}
var undefined, key, $, classList, emptyArray = [], concat = emptyArray.concat, filter = emptyArray.filter, slice = emptyArray.slice,
document = window.document,
elementDisplay = {}, classCache = {},
cssNumber = { 'column-count': 1, 'columns': 1, 'font-weight': 1, 'line-height': 1,'opacity': 1, 'z-index': 1, 'zoom': 1 },
fragmentRE = /^\s*<(\w+|!)[^>]*>/,
singleTagRE = /^<(\w+)\s*\/?>(?:<\/\1>|)$/,
tagExpanderRE = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig,
rootNodeRE = /^(?:body|html)$/i,
capitalRE = /([A-Z])/g, // special attributes that should be get/set via method calls
methodAttributes = ['val', 'css', 'html', 'text', 'data', 'width', 'height', 'offset'], adjacencyOperators = [ 'after', 'prepend', 'before', 'append' ],
table = document.createElement('table'),
tableRow = document.createElement('tr'),
containers = {
'tr': document.createElement('tbody'),
'tbody': table, 'thead': table, 'tfoot': table,
'td': tableRow, 'th': tableRow,
'*': document.createElement('div')
},
readyRE = /complete|loaded|interactive/,
simpleSelectorRE = /^[\w-]*$/,
class2type = {},
toString = class2type.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'
},
isArray = Array.isArray ||
function(object){ return object instanceof Array } zepto.matches = function(element, selector) {
if (!selector || !element || element.nodeType !== 1) return false
var matchesSelector = element.matches || element.webkitMatchesSelector ||
element.mozMatchesSelector || element.oMatchesSelector ||
element.matchesSelector
if (matchesSelector) return matchesSelector.call(element, selector)
// fall back to performing a selector:
var match, parent = element.parentNode, temp = !parent
if (temp) (parent = tempParent).appendChild(element)
match = ~zepto.qsa(parent, selector).indexOf(element)
temp && tempParent.removeChild(element)
return match
}
1. fragmentRE = /^\s*<(\w+|!)[^>]*>/;
这里复习下正则表达式
\s { 匹配任何空白符,包括空格、制表符、换页符等 } --> [\f\n\r\t\v]
\f { 换页符 } --> [\x0c\cl]
\n{ 换行符 } --> [\x0a\cj]
\r { 回车符 } --> [\x0d\cM]
\t { 制表符 } --> [\x09\cl]
\v { 制表符 } --> [\x0b\cK]
* { 匹配前面的子表达式 \s 零次或者多次 }
() { 标志一个子表达式开始和结束的位置,子表达式可获取供以后使用 }
\w{ 匹配下划线和字母数字字符 } --> [A-Za-z0-9_]
+ { 匹配前面的子表达式 \w 一次或者多次 }
a|b { 匹配或者为 a或者为b }
^ { 正则表达式最前表示 匹配开始的位置,[^>] 这里表示非的意思 }
整个连起来就是配置 没有结束标签的的 html标签 <!doctype html/> <a href='' />
2.singleTagRE = /^<(\w+)\s*\/?>(?:<\/\1>|)$/
? { 匹配前面子表达式零次或者一次 \/ }
?: { 非获取匹配,不提供给以后用 }
\ { 将下一个标记为特殊字符,或者为转义,引用等, 这里指向的是(\w+)这个子表达式 }
匹配html标签 <html></html> <br/>
3.tagExpanderRE = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig,
?! {正向否定预查,在任何不匹配pattern的字符串开始处匹配查找字符串}
配置特殊属性
zepto.matches = function(element, selector) {
//判断是否存在选择器 元素 nodeType 1:Element 2:attr 3:text内容 9:document
if (!selector || !element || element.nodeType !== 1) return false
var matchesSelector = element.matches || element.webkitMatchesSelector ||
element.mozMatchesSelector || element.oMatchesSelector ||
element.matchesSelector
if (matchesSelector) return matchesSelector.call(element, selector)
// fall back to performing a selector: var match, parent = element.parentNode, temp = !parent
if (temp) (parent = tempParent).appendChild(element)
match = ~zepto.qsa(parent, selector).indexOf(element)
temp && tempParent.removeChild(element)
return match
}
matchesSelector 接收一个selector的CSS选择符参数,如果调用元素与该选择符相匹配,返回true;否则返回false
zepto.qsa 接受一个selector的选中css选择器获取匹配元素
element下是否可以匹配到selector
function type(obj) {
return obj == null ? String(obj) :
class2type[toString.call(obj)] || "object"
}
{}.toString.call(obj) { 如果是函数则返回 “object function”, 数组则返回 "object array” }
返回obj 的类型
个人博客 :精华所在 https://gilea.cn/
代码仅供参考,具体功能可以自己扩展。
http://www.cnblogs.com/jiebba/p/6529854.html
http://www.cnblogs.com/jiebba 我的博客,来看吧!
如果有错误,请留言修改下 哦!
非常适合新手的jq/zepto源码分析01的更多相关文章
- 非常适合新手的jq/zepto源码分析07---ajax的封装
复习下ajax吧! 1.创建XMLHttpRequest对象 xmlhttp=new XMLHttpRequest(); xmlhttp=new ActiveXObject("Microso ...
- 非常适合新手的jq/zepto源码分析08---ajax的封装
1.现在看看对JSONP的封装 $.ajaxJSONP = function(options, deferred){ if (!('type' in options)) return $.ajax(o ...
- 非常适合新手的jq/zepto源码分析06 -- 事件模型
复习下事件的有关内容: 1.现在用的绑定/删除: obj.addEventListener(type,fn,false) obj.removeEventListener(type) obj.attac ...
- 非常适合新手的jq/zepto源码分析05
zepto的原型 $.fn 属性: constructor //构造行数 forEach: emptyArray.forEach, //都是原生数组的函数reduce: emptyArray.re ...
- 非常适合新手的jq/zepto源码分析03
zepto.fragment = function(html, name, properties) { var dom, nodes, container // 如果是简单的标签<div> ...
- 非常适合新手的jq/zepto源码分析04
$.extend = function(target){ var deep, args = slice.call(arguments, 1) if (typeof target == 'boolean ...
- 非常适合新手的jq/zepto源码分析02
function isPlainObject(obj) { return isObject(obj) && !isWindow(obj) && Object.getPr ...
- zepto源码分析系列
如果你也开发移动端web,如果你也用zepto,应该值得你看看.有问题请留言. Zepto源码分析-架构 Zepto源码分析-zepto(DOM)模块 Zepto源码分析-callbacks模块 Ze ...
- 一个普通的 Zepto 源码分析(二) - ajax 模块
一个普通的 Zepto 源码分析(二) - ajax 模块 普通的路人,普通地瞧.分析时使用的是目前最新 1.2.0 版本. Zepto 可以由许多模块组成,默认包含的模块有 zepto 核心模块,以 ...
随机推荐
- [译]curl_multi_perform
http://curl.haxx.se/libcurl/c/curl_multi_perform.html curl_multi_perform.3 -- man page NAMEcurl_mult ...
- CF869C The Intriguing Obsession
思路: 分别在两种不同颜色的岛屿群之间进行搭桥.因为相同颜色的岛屿之间不能有边,任意两个相同颜色的岛屿不能同时和另外一个不同颜色的岛屿都有边.实现: #include <bits/stdc++. ...
- Django--2、form表单
django中定义form表单的优势 HTML中提交后,若数据出现错误,返回的页面中仍然可以保留之前输入的数据. 通过校验规则可以方便的限制字段条件并校验. 在Django中建个form表单 先要确定 ...
- JavaScript(十三)面向对象
面向对象 面向对象的过程 通过new 构造函数 生成的对象来执行, 类似于事件的执行 this指向函数,然后再把这个函数赋值给一个实例 所以在函数内的this 就指到了实例上 function ...
- CentOS7上安装稻壳CMS
CentOS7上安装稻壳CMS 1, 安装用途 为了给某公司建设一个小型网站,租用了一个阿里云ECS服务器,最基础的硬件配置,因此选择了CentOS7操作系统. 稻壳CMS(docCMS)源于深喉咙C ...
- java设计模式之单例模式总结
面试手写单例模式(通用版)
- 扩增子分析解读5物种注释 OTU表操作
本节课程,需要先完成<扩增子分析解读>系列之前的操作 1质控 实验设计 双端序列合并 2提取barcode 质控及样品拆分 切除扩增引物 3格式转换 去冗余 聚类 4去嵌合体 非细菌序列 ...
- C++写注册表
1. 注册表简介 注册表是为Windows NT和Windows95中所有32位硬件/驱动和32位应用程序设计的数据文件,用于存储系统和应用程序的设置信息.16位驱动在Winnt (Win ...
- time模块,补上之前拉下的作业。
time,时间模块比较重要,但不难学,主要是要学会转换时间格式.计算机的时间都是时间戳.人是看不懂的.写出时间转换的固定格式语句.import time # 首先就是引入时间模块. time.ti ...
- node事件循环和消息队列简单分析
node的好处毋庸置疑,事件驱动,异步非阻塞I/O,以及处理高并发的能力深入人心,因此大家喜欢用node做一些小型后台服务或者作为中间层和其他服务配合完成一些大型应用场景. 什么是异步? 异步和同步应 ...