非常适合新手的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    我的博客,来看吧!

如果有错误,请留言修改下 哦!

posted @   小结巴巴吧  阅读(485)  评论(0编辑  收藏  举报
编辑推荐:
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
阅读排行:
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· PPT革命!DeepSeek+Kimi=N小时工作5分钟完成?
· What?废柴, 还在本地部署DeepSeek吗?Are you kidding?
· 赶AI大潮:在VSCode中使用DeepSeek及近百种模型的极简方法
· DeepSeek企业级部署实战指南:从服务器选型到Dify私有化落地
点击右上角即可分享
微信分享提示