jQuery使用（十三）：工具方法

Posted 2021-02-12 zheoneandonly

• proxy()
• onConflict()
• each()
• map()
• parseJson()
• makeArray()

 proxy()

$.proxy()的实现机制与原生javascript中的bind()方法实现机制一致，都是用来修改函数执行的this指向，我在前面的博客中有bind的源码剖析：源码来袭：bind手写实现，可以参考。这里我就使用proxy来实现一个小demo。

//html
<div class="demo" style="width:100px;height:100px; background-color:red;">
//js
//有需求是点击demo触发一个对象实例的方法，这个方法执行的时候还需要这个对象实例的其他模块
var list = {
    init:function(){
        this.ms = 123;
        this.dom = $(".demo")[0];
        this.bindEvent();

    },
    bindEvent : function(){
        this.demo.onclick = this.show;
    },
    show : function(){
        console.log(this.produseMs(this.ms));
    },
    produseMs : function(ms){
        return ms + 111;
    }
}
list.init();

这段代码看似好像没有什么问题，但是我们知道事件触发的函数是异步执行，会导致函数内部的this丢失，所以这段代码就是有bug的，修改的方式如下：

//this.demo.onclick = this.show;
this.dom.onclick = $.proxy(this.show,this);

使用proxy将list对象绑定到show方法上，就解决了，与原生的js中的bind方法的功能没啥差别。

 onConflict()

防止$变量命名冲突。

//将jQuery的$修改成$c
var $c = $.onConflict();

源码实现的非常简单，我把它粘出来看看：

_$ = window.$;//如果全局自定义了$,就这个自定义的$用_$保存。
noConflict: function( deep ) {
    if ( window.$ === jQuery ) {
        window.$ = _$;
    }

    if ( deep && window.jQuery === jQuery ) {
        window.jQuery = _jQuery;
    }

    return jQuery;
}
//jQuery代码末尾处，将window.$修正为jQuery的简写引用
if ( typeof window === "object" && typeof window.document === "object" ) {
    window.jQuery = window.$ = jQuery;
}

jQuery内部代码将$始终指向jQuery对象，将自定义的$保存在_$上，如果触发noConflict()就通过window.$=_$;修正到自定义的$指向上，还可以给方法传入一个真值(deep)，同步修改jQuery指向。

 each()

在实例方法中讲过$().each()方法，这两个方法功能是一样的，只不过$.each()可以将要操作的数组或者类数组、对象作为参数传入进入，拓展了使用范围。

$.each(arr,function(index,ele){
   //index -- 索引值/属性名称，ele -- 元素值 
   console.log(index + ele); 
})

 map()

手册上说这个方法是用来修改数组，但实质上这个方法的功能是基于一个数组操作来获取一个新的数组，不会修改该原数组，通过回调方法的每次返回值产生一个新的数组。看看下面这个示例：

var arr = [1,2,3];
var a = $.map(arr,function(ele,index){
    return ele + 1;
});
console.log(a);//[2, 3, 4]

值得注意的是map方法传入回调方法的参数和each方法传入回调方法的参数是相反的。

 parseJSON()

将json数据（json字符串）转换成对象，与元素js中的JSON.parse()方法的功能一致。因为jQuery内部只是将原生的JSON.parse()方法封装到自己的jQuery对象上而已，目的只是为了减少调用访问作用域链的长度，提高效率，另一方面防止某处作用域上自定义JSON.parse方法冲突。

parseJSON: JSON.parse；//jQuery内部代码

 makeArray()

 将类数组转换成数组形式，作为一个新的数组返回。

var arr = $.makeArray(obj);

这个方法值得我们思考的是如何实现，假设手写实现这样的功能怎么做？

var obj = {0:"o",1:"a",2:"b",3:"c",length:4}
var arr = Array.prototype.slice.call(obj);// ["o", "a", "b", "c"]

不过jQuery实现的比较复杂，这是因为makeArray()方法除了转换功能，还有添加元素的功能，直接示例来看吧。（这部分API上没有说明哦）

var obj = {
    0:"a",
    1:"b",
    2:"c",
    length:3
}
$.makeArray("d",obj);
console.log(obj);//{0: "a", 1: "b", 2: "c", 3: "d", length: 4}

可以通过makeArray向有序的对象添加元素，但是这还没完，后面还有惊喜：

//还是上一个示例的obj
var arr = [1,2,3];
$.makeArray(arr,obj);
console.log(obj);//{0: "a", 1: "b", 2: "c", 3: 1, 4: 2, 5: 3, length: 6}

除了添加功能还有合并功能哦。