1. $.type $.isArray $.isFunction $.isNumeric $.isPlainObject $.isWindow

• 判斷對象的方法介紹
  在zepto源碼中，使用了Object.prototype.toString.call()方法判斷對象的類型管挟，以下簡單介紹下此方法的大致情況

//null
Object.prototype.toString.call(null);//”[object Null]”
//undefined
Object.prototype.toString.call(undefined);//”[object Undefined]”
//string
Object.prototype.toString.call(“aaa”);//”[object String]”
//number
Object.prototype.toString.call(111);//”[object Number]”
//boolean
Object.prototype.toString.call(true);//”[object Boolean]”
//函數(shù)
Function fn(){console.log(“xixi”);}
Object.prototype.toString.call(fn);//”[object Function]”
//數(shù)組類型
var arr = [1,2，,3,4];
Object.prototype.toString.call(arr);//”[object Array]”
//日期
var date = new Date();
Object.prototype.toString.call(date);//”[object Date]”
//自定義類型
//不能判斷aa是不是AA的實例，要用instanceof判斷
function AA(a, b) {
    this.a = a;
    this.b = b;
}
var aa = new AA("xixi", 'haha');
Object.prototype.toString.call(aa); //”[object Object]”
Object.prototype.toString.call(aa); //”[object Object]”
//正則
var aa = /^\w$/
Object.prototype.toString.call(aa); //”[object RegExp]”

• 在zepto中，先定義了一個空對象class2type，并取出對象函數(shù)自帶的toString方法犯戏，即為Object.prototype.toString.call()

class2type = {},
toString = class2type.toString,

然后填充class2type的值固蚤；

$.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {
    class2type["[object " + name + "]"] = name.toLowerCase()
    //最終結(jié)果
    //class2type[”[object Boolean]”] = boolean,
    //class2type[”[object Number]”] = number,
    //class2type[”[object String]”] = string,
    // ...
  })

• 準(zhǔn)備工作做完娘汞，就可以進(jìn)行對象的判斷了；

  • 首先封裝一個判斷方法夕玩，根據(jù)這個方法的返回值來判斷對象的類型你弦；

  //比如，如果要判斷function aa(){};則返回class2type[Object.prototype.toString.call(aa)]==class2type[”[object Function]”]==function燎孟；所以就判斷出為函數(shù)
  function type(obj) {
   //如果obj為null或者undefined,返回字符串'null','undefined';否則返回class2type[]或者object
        return obj == null ? String(obj) :class2type[toString.call(obj)] || "object"
  }
  

  $.type = type
  

  • 下面根據(jù)上面的封裝方法返回值判斷類型禽作；

    • 判斷函數(shù)

    function isFunction(value) {
        return type(value) == "function"
      }
    

    $.isFunction = isFunction
    

    • 判斷window;根據(jù)widow自己的屬性來判斷；window.window = window;

    function isWindow(obj) {
        return obj != null && obj == obj.window
      }
    

    $.isWindow = isWindow
    

    • 判斷document

    function isDocument(obj) {
        return obj != null && obj.nodeType == obj.DOCUMENT_NODE
      }
    

    • 判斷是否為對象

    function isObject(obj) {
        return type(obj) == "object"
      }
    

    • 對于通過字面量定義的對象和new Object的對象返回true揩页，new Object時傳參數(shù)的返回false

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

    $.isPlainObject = isPlainObject
    

    • 判斷數(shù)組

    function isArray(value) {
        return value instanceof Array
      }
    

    $.isArray = isArray
    

    • 判斷類數(shù)組

    function likeArray(obj) {
        return typeof obj.length == 'number'
      }
    

    • 空對象

    $.isEmptyObject = function(obj) {
        var name
        for (name in obj) return false
        return true
      }
    

    • 有限數(shù)值或者字符串表達(dá)的數(shù)字

    $.isNumeric = function(val) {
        var num = Number(val), type = typeof val
        return val != null && type != 'boolean' &&
          (type != 'string' || val.length) &&
          !isNaN(num) && isFinite(num) || false
      }
    

2. $.camelCase

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

$.camelCase = camelize

• 用法

  $.camelCase('hello-there') //=> "helloThere"
  $.camelCase('helloThere')  //=> "helloThere"
  

• str.replcace(a,b)

  將str中的a替換成b;上面代碼中將b用了函數(shù)返回值來表達(dá);

3. $.contain

//為了判斷某個節(jié)點是不是另一個節(jié)點的后代,瀏覽器引入了contains()方法;
$.contains = document.documentElement.contains ?
//如果瀏覽器支持contains()方法,就執(zhí)行這個函數(shù)
    function(parent, node) {
      return parent !== node && parent.contains(node)
    } :
    //否則循環(huán)判斷
    function(parent, node) {
      while (node && (node = node.parentNode))
        if (node === parent) return true
      return false
}

• 檢查父節(jié)點是否包含給定的dom節(jié)點旷偿，如果兩者是相同的節(jié)點，則返回false爆侣。

4. $.each

$.each = function(elements, callback){
    var i, key
    if (likeArray(elements)) {
      for (i = 0; i < elements.length; i++)
        if (callback.call(elements[i], i, elements[i]) === false) return elements
    } else {
      for (key in elements)
        if (callback.call(elements[key], key, elements[key]) === false) return elements
    }

    return elements
}

• 遍歷,將每次循環(huán)的值作為callback的上下文;如果callback返回的結(jié)果為false,遍歷停止;

5. $.extend

function extend(target, source, deep) {
    for (key in source)
    //如果是神拷貝,source[key]是對象或者數(shù)組
      if (deep && (isPlainObject(source[key]) || isArray(source[key]))) {
      //source[key]是對象,而target[key]不是對象
        if (isPlainObject(source[key]) && !isPlainObject(target[key]))
          target[key] = {}
      //source[key]是數(shù)組,而target[key]不是數(shù)組
        if (isArray(source[key]) && !isArray(target[key]))
          target[key] = []
          //遞歸
        extend(target[key], source[key], deep)
      }
      else if (source[key] !== undefined) target[key] = source[key]
  }

$.extend = function(target){
    var deep, args = slice.call(arguments, 1)
    //如果傳入的第一個參數(shù)為布爾值
    if (typeof target == 'boolean') {
      deep = target
     //將除第一個參數(shù)外的參數(shù)賦值給target
      target = args.shift()
    }
    //遍歷參數(shù),將參數(shù)都復(fù)制到target上;
    args.forEach(function(arg){ extend(target, arg, deep) })
    return target
  }

• 我們首先看一下用法;

$.extend(target, [source, [source2, ...]])   ? target
$.extend(true, target, [source, ...])   ? target v1.0+

var target = { one: 'patridge' },
source = { two: 'turtle doves' }
$.extend(target, source)//{one: "patridge", two: "turtle doves"}

• target代表被拓展的對象,source為源對象;deep代表是深復(fù)制還是淺復(fù)制;

  • 對于字符串來說,淺復(fù)制是對值的復(fù)制,,對于對象來說,淺復(fù)制是對對象地址的復(fù)制,兩者共同指向同一個地址,其中一個改變,另一個對象也會隨之改變,而深復(fù)制是在堆區(qū)中開辟一個新的,兩個對象則指向不同的地址,相互獨立;

• slice.call(arguments, 1)選取傳入?yún)?shù)的第一個參數(shù)到最后一個參數(shù);

5. $.inArray

$.inArray = function(elem, array, i){
    return emptyArray.indexOf.call(array, elem, i)
}

• 用法

$.inArray("abc",["bcd","abc","edf","aaa"]);//=>1
$.inArray("abc",["bcd","abc","edf","aaa"],1);//=>1
$.inArray("abc",["bcd","abc","edf","aaa"],2);//=>-1

• 返回數(shù)組中指定元素的索引值狸捅，如果沒有找到該元素則返回-1。

6. $.map

$.map = function(elements, callback){
    var value, values = [], i, key
    if (likeArray(elements))
      for (i = 0; i < elements.length; i++) {
        value = callback(elements[i], i)
        if (value != null) values.push(value)
      }
    else
      for (key in elements) {
        value = callback(elements[key], key)
        if (value != null) values.push(value)
      }
    return flatten(values)
 }

• element為類數(shù)組對象或者對象;

  • 如果為類數(shù)組對象的話,用for循環(huán)
  • 如果為對象的話,用fo.....in....循環(huán)
  • 再將索引和值傳給callback,
  • 如果callback的返回值不是null或者undefined,存入新的數(shù)組
  • 最后將數(shù)組扁平化flatten()---數(shù)組降維,二維數(shù)組轉(zhuǎn)為一維數(shù)組

• flatten()

  function flatten(array) { return array.length > 0 ? $.fn.concat.apply([], array) : array }

  這里巧妙應(yīng)用了apply方法,apply方法的第一個元素會被當(dāng)作this,第二個元素被做為傳入的參數(shù)arguments;
  例如:concat.apply([],[[1],[2],[3]]),等價于[].concat([1],[2],[3]),輸出的值為[1,2,3],就實現(xiàn)了數(shù)組的扁平化;

7. $.noop

$.noop = function() {}

• 引用空函數(shù)

8. $.parseJSON

if (window.JSON) $.parseJSON = JSON.parse

• 原生JSON.parse的別名累提；接受一個JSON字符串尘喝，返回解析后的javascript對象。

9. $.trim

$.trim = function(str) {
    return str == null ? "" : String.prototype.trim.call(str)
}

• 去除字符串開頭和結(jié)尾的空格