您的位置：首页 > 其它

非常适合新手的jq/zepto源码分析01

2017-03-10 18:38 405 查看

(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 的类型

代码仅供参考，具体功能可以自己扩展。

http://www.cnblogs.com/jiebba/p/6529854.html

http://www.cnblogs.com/jiebba 我的博客，来看吧！

如果有错误，请留言修改下哦！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航