很是適合新手的jq/zepto源碼分析01

時間 2019-11-20

原文原文鏈接

(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+|!)[^>]*>/；css

這裏複習下正則表達式html

\s { 匹配任何空白符，包括空格、製表符、換頁符等 } --> [\f\n\r\t\v] node

\f { 換頁符 } --> [\x0c\cl]web

\n{ 換行符 } --> [\x0a\cj]正則表達式

\r { 回車符 } --> [\x0d\cM]api

\t { 製表符 } --> [\x09\cl]數組

\v { 製表符 } --> [\x0b\cK]閉包

* { 匹配前面的子表達式 \s 零次或者屢次 }app

() { 標誌一個子表達式開始和結束的位置，子表達式可獲取供之後使用 }函數

\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/>

?! {正向否認預查，在任何不匹配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 個人博客，來看吧！

若是有錯誤，請留言修改下哦！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。