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

一、此刻，开始看第一个方法，判断能否根据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
}

二、判断类型的方法

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"
　　}

三、 判断普通对象

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

 四、转化为驼峰大写

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

五、字符串格式化为－拼接的形式，多用在样式属性border－width

function dasherize(str) {
      return str.replace(/::/g, '/')//::替换为/
        .replace(/([A-Z]+)([A-Z][a-z])/g, '$1_$2')//大写的字母和后面大写跟小写之间插入一个－，成为AAAAA-Az;
        .replace(/([a-zd])([A-Z])/g, '$1_$2')//小写字母和数字与大写之间插入－，成为0-A,a-A
        .replace(/_/g, '-')//下划线转化为－
        .toLowerCase()
    }

六、数组去重

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

 七、给定参数生成正则，并缓存

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

八、处理样式，除去cssNumber样式数值加px

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

九、获取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]
    }

十、获取子节点

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

十一、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 || ''
    }

十二、将字符串转化为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节点后的数组
    }

十三、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
    }