• 非常适合新手的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 v]    

    f { 换页符 }  -->  [x0ccl]

    { 换行符 }  -->  [x0acj]

    { 回车符 }  -->  [x0dcM]

    { 制表符 }  -->  [x09cl]

    v { 制表符 } -->  [x0bcK]

    *  { 匹配前面的子表达式 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    我的博客,来看吧!

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

  • 相关阅读:
    让Oracle高效并行执行的13个必备知识点
    oracle使用并行踩过的坑
    oracle parellel 案例
    并行查询 最基本
    ORACLE parallel 3个层面的影响
    Mac下百度网盘破解
    vscode整个项目的查找替换快捷键
    mysql---group_concat
    mysql-group by 与 where
    npm安装指定版本包
  • 原文地址:https://www.cnblogs.com/jiebba/p/6529854.html
Copyright © 2020-2023  润新知