非常适合新手的jq/zepto源码分析01
1 2 3 4 5 6 7 | (function(global, factory) { // 查看这里是不是定义成模块,如果定义模块就返回 一个模块 if ( typeof define === 'function' && define.amd) define(function() { return factory(global) }) else factory(global) //直接执行闭包外传过来的函数 funcutin(window) } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | 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的字符串开始处匹配查找字符串}
配置特殊属性
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 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
1 2 3 4 | 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 我的博客,来看吧!
如果有错误,请留言修改下 哦!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· PPT革命!DeepSeek+Kimi=N小时工作5分钟完成?
· What?废柴, 还在本地部署DeepSeek吗?Are you kidding?
· 赶AI大潮:在VSCode中使用DeepSeek及近百种模型的极简方法
· DeepSeek企业级部署实战指南:从服务器选型到Dify私有化落地