zepto源碼（1）

1 先看下用到的一些東西

　　數組的foreach

　　［].forEach(function(value, index, array){})

　　數組的filter

　　 [].filter(callback,[thisObject])

2 nodeType

　　element : 1,  attr : 2,  text : 3,  comments : 8,  document : 9

3 window = window.window

4 document.nodeType = document.DOCUMENT_NODE = 9;

5 元素的matchesSelector屬性（可用document.body.matchesSelector檢測）

　　matchesSelector = element.webkitMatchesSelector || element.mozMatchesSelector || element.oMatchesSelector || element.matchesSelector

1、此刻，開始看第一個方法，判斷可否根據selector選到元素

　//其中用到的zepto.qsa後面再看　
var tempParent = document.createElement('div');
zepto.matches = function (element, selector) {
if (!selector || !element || element.nodeType !== 1) return false
　　var matchesSelector = element.webkitMatchesSelector || element.mozMatchesSelector || element.oMatchesSelector || element.matchesSelector
if (matchesSelector) return matchesSelector.call(element, selector)

// 若是瀏覽器沒實現原生方法，本身擴展，用到qsa
var match, parent = element.parentNode,
　　temp = !parent

//若是無父元素，則給一個臨時的
if (temp)(parent = tempParent).appendChild(element)
　
//根據qsa判斷裏面有沒有元素
match = ~zepto.qsa(parent, selector).indexOf(element)
temp && tempParent.removeChild(element)
return match
}

2、判斷類型的方法

var class2type = {};
// Populate the class2type map
    $.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function (i, name) {
      class2type["[object " + name + "]"] = name.toLowerCase()
    })

　　function type(obj) {
　　　　return obj == null ? String(obj) : class2type[toString.call(obj)] || "object"
　　}

3、 判斷普通對象

function isPlainObject(obj) {
      return isObject(obj) && !isWindow(obj) && Object.getPrototypeOf(obj) == Object.prototype
    }

 4、轉化爲駝峯大寫

camelize = function (str) {
      return str.replace(/-+(.)?/g, function (match, chr) {
        return chr ? chr.toUpperCase() : ''
      })
    }

5、字符串格式化爲－拼接的形式，多用在樣式屬性border－width

function dasherize(str) {
      return str.replace(/::/g, '/')//::替換爲/
        .replace(/([A-Z]+)([A-Z][a-z])/g, '$1_$2')//大寫的字母和後面大寫跟小寫之間插入一個－，成爲AAAAA-Az;
        .replace(/([a-z\d])([A-Z])/g, '$1_$2')//小寫字母和數字與大寫之間插入－，成爲0-A,a-A
        .replace(/_/g, '-')//下劃線轉化爲－
        .toLowerCase()
    }

6、數組去重

uniq = function (array) {
      return filter.call(array, function (item, idx) {
        return array.indexOf(item) == idx
      })
    }

 7、給定參數生成正則，並緩存

function classRE(name) {
      return name in classCache ?
        classCache[name] : (classCache[name] = new RegExp('(^|\\s)' + name + '(\\s|$)'))
    }

8、處理樣式，除去cssNumber樣式數值加px

function maybeAddPx(name, value) {
      return (typeof value == "number" && !cssNumber[dasherize(name)]) ? value + "px" : value
    }

9、獲取display屬性

function defaultDisplay(nodeName) {
      var element, display
      if (!elementDisplay[nodeName]) {
        element = document.createElement(nodeName)
        document.body.appendChild(element)
        display = getComputedStyle(element, '').getPropertyValue("display")
        element.parentNode.removeChild(element)
        display == "none" && (display = "block")
        elementDisplay[nodeName] = display
      }
      return elementDisplay[nodeName]
    }

10、獲取子節點

function children(element) {
      return 'children' in element ?
        slice.call(element.children) :
        $.map(element.childNodes, function (node) {
          if (node.nodeType == 1) return node
        })
    }

11、Z類初始化

function Z(dom, selector) {
      var i, len = dom ? dom.length : 0
      for (i = 0; i < len; i++) this[i] = dom[i]
      this.length = len
      this.selector = selector || ''
    }

12、將字符串轉化爲dom

zepto.fragment = function (html, name, properties) {
      var dom, nodes, container

      // A special case optimization for a single tag
      if (singleTagRE.test(html)) dom = $(document.createElement(RegExp.$1))

      if (!dom) {
        if (html.replace) html = html.replace(tagExpanderRE, "<$1></$2>") //將相似<div class="test"/>替換成<div class="test"></div>
        if (name === undefined) name = fragmentRE.test(html) && RegExp.$1////設置容器標籤名，若是不是tr,tbody,thead,tfoot,td,th，則容器標籤名爲div
        if (!(name in containers)) name = '*'

        container = containers[name]
        container.innerHTML = '' + html
        dom = $.each(slice.call(container.childNodes), function () {
          container.removeChild(this)
        })
//取容器的子節點，這樣就直接把字符串轉成DOM節點了
      }
//若是properties是對象, 則將其看成屬性來給添加進來的節點進行設置
      if (isPlainObject(properties)) {
        nodes = $(dom)
        $.each(properties, function (key, value) {
/若是設置的是'val', 'css', 'html', 'text', 'data', 'width', 'height', 'offset'，則調用zepto上相對應的方法
          if (methodAttributes.indexOf(key) > -1) nodes[key](value)
          else nodes.attr(key, value)
        })
      }

      return dom//返回將字符串轉成的DOM節點後的數組
    }

十3、Z的實例

zepto.Z = function (dom, selector) {
      return new Z(dom, selector)
    }

    // `$.zepto.isZ` should return `true` if the given object is a Zepto
    // collection. This method can be overriden in plugins.
    zepto.isZ = function (object) {
      return object instanceof zepto.Z
    }