欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jQuery Utilities 分类下的函数(或属性)的实现方式分析

程序员文章站 2022-04-26 17:32:14
...
jQuery Utilities 分类下的函数(或属性)的实现方式分析


  本文将介绍jQuery Utilities 分类下的函数(或属性)的实现方式。

  首先,可以先从 jQuery 官方 API 中找到 Utilities 分类的介绍:
  http://api.jquery.com/category/utilities/

  其中,不进行分析的函数(或属性)包括:
  jQuery.boxMode:已经不推荐使用,可以用 jQUery.support.boxModel 代替
  queue相关函数:与动画相关,并且也属于 “Custom” 分类,等分析 “Custom” 分类下的函数时再一并分析

  已经分析过的函数(或属性):
  jQuery.browser  :http://xxing22657-yahoo-com-cn.iteye.com/blog/1035780
  jQuery.data()      :http://xxing22657-yahoo-com-cn.iteye.com/blog/1042440
  jQuery.extend()  :http://xxing22657-yahoo-com-cn.iteye.com/blog/1025297
  jQuery.unique()  :http://xxing22657-yahoo-com-cn.iteye.com/blog/1038480
  jQuery.support   :http://xxing22657-yahoo-com-cn.iteye.com/blog/1044984

  另外,jQuery.isArray(), jQuery.isPlainOject(), jQuery.isWindow(), jQUery.type() 在分析 jQuery.extend() 时已经一并分析。

  这里更给出的实现都是简化的版本,没有考虑性能优化、异常处理和某些特殊情况。实际上,jQuery的完整实现完全可以自己在未压缩版的源代码(这里分析的版本是 jQuery 1.6)中 search,因为这里主要讲解实现思路,作为引导和参考,所以下面的分析中将忽略一些次要因素,以避免冲淡主题。

jQuery.globalEval()

  通常情况下使用 eval,this 所指向的都是当前对象;有的时候我们希望  this 指向全局对象( window ),就可以使用 jQuery.globalEval() 了。这在动态加载外部 JavaScript 文件并执行时十分有用。

  功能测试代码如下:
<script type="text/javascript" src="jquery.js"></script>
<script>
a = {
	func : function() {
		eval("alert(this === window)");
	},
	globalFunc: function() {
		$.globalEval("alert(this === window)");
	}
}

a.func();     // alert( flase )
a.globalFunc();    // alert( true )
</script>

  可以看到,通常情况下调用附加在对象上的函数,并在函数中使用 eval() 时, this 并不指向 window;但如果使用 globalEval() ,那么 this 就会指向 window 。

  简单的实现方式如下:
$ = {
    globalEval: function(data) {
        (function() { eval(data); }())
    }
}

  在匿名函数内使用 eval 。由于匿名函数不指向任何一个对象,因此其指向的对象也就是全局对象( window )了。jQuery 的源代码中还先检查了 window.execScript 是否存在,如果存在则优先使用 window.execScript 。

jQuery.parseJSON() 与 jQuery.parseXML()

  jQuery 与后台的数据交互最好采用某种规范的格式,经常使用的就是 JSON 和 XML 格式了。从后台得到的数据通常是字符串,还需要将字符串转为 JavaScript 对象,这也就是 jQuery.parJSON() 和 jQuery.parseXML() 的功能了。

  jQuery.parseJSON() 的功能测试代码如下:
<script type="text/javascript" src="jquery.js"></script>
<script>
obj = $.parseJSON('{ "s": "string value", "i": 1234 }');
document.write('obj.s = ' + obj.s);
document.write('<br />');
document.write('obj.i = ' + obj.i);
</script>

  显示结果如下:
obj.s = string value
obj.i = 1234

  jQuery.parseXML() 的功能测试代码如下:
<script type="text/javascript" src="jquery.js"></script>
<script>
str = "<root><customer name='John'></customer></root>";
xml = $.parseXML(str);

customer = xml.getElementsByTagName ("customer")[0];
name = customer.getAttribute ("name");
document.write("customer.name = "+ name);
</script>

  显示结果如下:
customer.name = John

  这两个函数的简单实现如下:
$ = {
    parseJSON: function(data) {
        return new Function("return " + data)();
    },

    parseXML : window.DOMParser ?
    function(data) {
		var parser = new DOMParser();
		return parser.parseFromString(data, "text/xml");
	} :
    function(data) {
		xml = new ActiveXObject("Microsoft.XMLDOM");
		xml.async = "false";
		xml.loadXML(data);
		return xml;
	}
}

  parseJSON() 只需要直接创建一个 Function ,并将内容设置为 "return " + data 就可以了。这类似于 eval 。因为 JSON 本身就是 JavaScript 的对象(或数组)的格式,因此转换起来异常简单。同样地,jQuery 的源代码中优先检查了 window.JSON.parse ,如果存在则使用浏览器内置的解析器。虽然可能在性能上略有提升,但也可能导致不同浏览器中的解析行为有所不同(通常我会把这个检查注释掉)。
  parseXML() 需要分两种情况,大多数浏览器都可以使用 DOMParser 进行解析,但 IE 中需要使用 ActiveXObject。jQuery 源代码中还有一些抛出 error 的处理。

jQuery.trim()

  jQuery.trim() 函数用于去除字符串中的空白字符。

  功能测试代码如下:
<script type="text/javascript" src="jquery.js"></script>
<script>
alert($.trim('    aaaa\r\n\t'));    // aaaa
</script>

  我们可以用正则表达式实现这个功能:
$ =  {
    trim : function(text) {
        return text == null ? '' :
            text.toString()
                .replace(/^\s+/, '')
                .replace(/\s+$/, '');
    }
};

  jQuery的源代码中还对 String.prototype.trim 进行检查,如果浏览器本身支持这个函数,就优先使用浏览器自带的 trim 函数。

jQuery.isFunction()

  该函数用于检查一个变量是否用于表示一个函数的引用。

  功能测试代码如下:
<script type="text/javascript" src="jquery.js"></script>
<script>
function a() {}
alert($.isFunction(a));    // true
</script>

  实现方式如下:
$ = function(){
    // implemention of class2type and type(obj) ...

    return {
        isFunction: function( obj ) {
            return type(obj) === "function";
        }
    }
}();

  其中 type 和 class2type 的实现请参考:  http://xxing22657-yahoo-com-cn.iteye.com/blog/1025297

jquery.isEmptyObject()

  该函数用于检查一个对象是否为空对象。

  功能测试代码如下:
<script type="text/javascript" src="jquery.js"></script>
<script>
a = {}
alert($.isEmptyObject(a));    // true
</script>

  实现方式如下:
$ = {
    isEmptyObject: function(obj) {
        for (var name in obj) {
            return false;
        }
        return true;
    }
};


jQuery.isXMLDoc()

  该函数用于检查一个对象是否表示一个 XML 文档。

  功能测试代码如下:
<script type="text/javascript" src="jquery.js"></script>
<script>
str = "<root><customer name='John'></customer></root>";
xml = $.parseXML(str);

customer = xml.getElementsByTagName ("customer")[0];
name = customer.getAttribute ("name");
document.write("customer.name = "+ name);
</script>

  简单实现如下:
$ = {
	// parseXML : ...,
    isXMLDoc: function( elem ) {
        var documentElement = (elem ? elem.ownerDocument || elem : 0).documentElement;
        return documentElement ? documentElement.nodeName !== "HTML" : false;
    }
};

  parseXML() 的实现请参考之前的分析。
  isXMLDoc() 的实现方式为检查元素的 documentElement 是否存在,存在且不为 HTML ,则表示这是一个 XML 文档。

jQuery.contains()

  检查一个 DOM Element 是否包含了另一个 DOM Element。

  功能测试代码如下:
<div id="a">
	<div id="b" />
</div>

<script type="text/javascript" src="jquery.js"></script>
<script>
window.onload = function() {
	var a = document.getElementById('a');
	var b = document.getElementById('b');
	
	alert($.contains(a, b)); // true
	alert($.contains(b, a)); // false
}
</script>

  简单实现如下:
$ = {
    contains: document.documentElement.contains ?
    function(a, b) {
        return a !== b && (a.contains ? a.contains(b) : true);
    } :
    function(a, b) {
        return !!(a.compareDocumentPosition(b) & 16);
    }
}

  根据不同浏览器的支持情况,借助浏览器内置的 contains() 或 compareDocumentPosition() 函数来实现这个功能。

jQuery.inArray()

  命名为 indexOf 可能会更合适些。返回一个元素在数组中的序号,不存在则返回  -1 。

  功能测试代码如下:
<script type="text/javascript" src="jquery.js"></script>
<script>
alert( $.inArray( 3, [1, 2, 3, 4] ) );    // 2
alert( $.inArray( 5, [1, 2, 3, 4] ) );    // -1
</script>

  简单实现如下:
$ = {
    inArray: function(elem, array) {
        for (var i = 0, length = array.length; i < length; i++) {
            if (array[i] === elem) {
                return i;
            }
        }
        return -1;
    }
};

  遍历数组,检查是否包含所查找的元素,找到则返回对应的序号,否则返回 -1。除了数组,也可以用于遍历 “类数组”的对象,如 {0:"aaa", 1: "bbb", length: 2}, 函数调用时的隐藏变量 “arguments” 就是典型的“类数组”对象。
  jQuery 源代码的实现中,在浏览器支持 Array.prototype.indexOf 的情况下,会优先采用浏览器自带的 indexOf 函数。

jQuery.merge()

  合并两个数组或“类数组”的对象( arguments 就是典型的“类数组”)。
  功能测试代码如下:
<script type="text/javascript" src="jquery.js"></script>
<script>
a = ['aaa', 'bbb'];
b = ['ccc', 'ddd'];
$.merge(a, b);

for (i in a) {
	alert(a[i]); // aaa, bbb, ccc, ddd
}


a = ['aaa', 'bbb'];
b = {0: 'ccc', 1: 'ddd'}
$.merge(a, b);

for (i in a) {
	alert(a[i]); // aaa, bbb, ccc, ddd
}
</script>

  简单实现如下:
$ = {
	merge : function(a, b) {
		for (var i = a.length, j = 0; b[j] !== undefined; ++i, ++j) {
			a[i] = b[j];
		}
		a.length = i;
		return a;
	}
}

  jQuery 的源代码中的分类更详细些,数组用  for (i = 0; i < leng; ++i) 的方式进行遍历。这可能也是一种性能优化吧,不过实际上并不必要。

jQuery.makeArray()

  将单个对象或“类数组”对象转为数组。
  功能测试代码如下:
<script type="text/javascript" src="jquery.js"></script>
<script>
a = $.makeArray('aaa');
a.push('bbb');
alert(a)    // aaa, bbb

b = $.makeArray({0:'aaa', 1:'bbb', length: 2});
b.push('ccc');

alert(b)    /// aaa, bbb, ccc
</script>

  简单实现如下:
$ = function(){
    // implemention of class2type, type(obj), isWindow(obj), merge(a, b) ...

    function makeArray(array) {
        var ret = [];
        if ( array != null ) {
            var t = type(array);
            if ( array.length == null || t === "string" || t === "function" || t === "regexp" || isWindow(array) ) {
                ret.push(array);
            } else {
                merge(ret, array);
            }
        }
    
        return ret;
    };

    return { merge: merge, makeArray: makeArray }
}();

  首先检查输入参数是否为“单个”对象,是的话就  push 到数组中,不是的话就 merge 到数组中。
  class2type, type(obj), isWindow(obj) 的实现请参考:  http://xxing22657-yahoo-com-cn.iteye.com/blog/1025297
  meger(a, b) 的实现请参考上一小节。

jQuery.each()

  该函数提供一种遍历数组和对象的函数,支持传入一个回调函数,在遍历过程中执行。
  功能测试代码如下:
<script type="text/javascript" src="jquery.js"></script>
<script>
a = ['aaa', 'bbb'];
$.each(a, function(i, value){
	alert('a[' + i + '] = ' + value);    // a[0] = aaa, a[1] = bbb
})

b = {a: 'aaa', b: 'bbb'}
$.each(b, function(name, value){
	alert('b.' + name + ' = ' + value);    // b.a = aaa, b.b = bbb
})
</script>

  简单实现如下:
$ = {
    each : function(obj, callback) {
        for (var n in obj ) {
            if (callback.call(obj[n], n, obj[n]) === false) {
                break;
            }
        }
    }
};

  同样,jQuery 的源代码对数组和对象采用了不同的遍历方式。

    更正:
  这里区分数组(或“类数组”)和对象还是有必要的。
  $('body')方式产生的对象就是一个“类数组”,有length,有下标等,但又有其他属性(及函数),直接用 for (i in $('body'))遍历是有问题的(会遍历到我们不关心的“隐藏”属性),还是应该检查 length 属性,用 for (i = 0; i < xxx.length; ++i) 遍历。

$ = {
	// isFunction() { ... }
    each : function(obj, callback) {
    	var length = obj.length,
    		isObj = length === undefined || isFunction(obj);
    	
    	if (isObj) {
			for (var n in obj ) {
				if (callback.call( obj[n], n, obj[n]) === false ) {
					break;
				}
			}
		} else {
			for (var i = 0; i < length; ++i) {
				if (callback.call(obj[i], i, obj[i]) === false) {
					break;
				}
			}
		}
    }
};


jQuery.grep()

  用于过滤数组,第一个参数表示被过滤的数组,第二个参数表示用于判断是否被过滤的函数。
  第三个参数为 true ,表示执行过滤的函数的返回值为 false 时保留;否则表示执行过滤的函数的返回值为 true 时保留。
  功能测试代码如下:
<script type="text/javascript" src="jquery.js"></script>
<script>
var arr = [ 1, 2, 3, 4 ];

ret = $.grep(arr, function(value, i){
  return (value != 3 && i >= 1);
});
alert(ret);     // 2, 4

ret = $.grep(arr, function(value, i){
  return (value != 3 && i >= 1);
}, true);
alert(ret);     // 1, 3
</script>

  简单实现如下:
$ = {
    grep : function(elems, callback, inv) {
        var ret = [];
        inv = !!inv;

        for (var i = 0; i < elems.length; ++i) {
            if (inv !== !!callback(elems[i], i)) {
                ret.push(elems[i]);
            }
        }

        return ret;
    }
};


jQuery.map()

  该函数提供对每个元素进行变换并产生一个新数组的功能。
  功能测试代码如下:
<script type="text/javascript" src="jquery.js"></script>
<script>
var arr = {a: false, b: 111, c: 'ccc', d: 'ddd'};

ret = $.map(arr, function(value, i){
	if (!value || i === 'd') { return undefined; }
	if (typeof value === 'number') {
		return value * 2;
	} else {
		return [value, value];
	}
});
alert(ret);     // 222, ccc, ccc
</script>

  可以看出,如果返回值为 undefined 或 null 时,表示该元素不会被保留;因此,我们完全可以用 jQuery.map() 代替 jQuery.grep() 。
  简单实现如下:
$ =  {
    map: function(elems, callback) {
        var ret = [];

        for (var key in elems) {
            value = callback(elems[key], key);
            if ( value != null ) {
                ret.push(value);
            }
        }

        return ret.concat.apply([], ret);
    }
};

  对每个 key 调用 callback 并检查返回值,如果不为 undefined 或 null 则 push 到结果中。
  这个函数很容易让人想起大名鼎鼎的 MapReduce,实际上,还真的有人做了 jQuery 的 MapReduce Plugin:
  http://plugins.jquery.com/project/MapReduce


jQuery.proxy()

  用于改变函数中 this 指向的对象。有两种使用方式
  1.用第一个参数表示 this 指向的对象,第二个参数表示函数名称(必须为参数一的成员函数)
  2.用第一个参数表示被改变上下文的函数,第二个参数表示 this 指向的对象
  功能测试代码如下:
<script type="text/javascript" src="jquery.js"></script>
<script>
a = { name: 'name of a' }
b = {
	name: 'name of b', 
	getName: function(){
		return this.name;
	}
}

alert(b.getName());    // name of b
proxy = $.proxy(b.getName, a);
alert(proxy());    // name of a


a.onclick = b.getName;
alert(a.onclick());   // name of a
a.onclick = $.proxy(b, 'getName');
alert(a.onclick());    // name of b
</script>

  实现方式如下:
$ =  {
    proxy: function(fn, context) {
        return typeof context === 'string' ?
        function() {
            return fn[context].apply(fn, arguments);       
        } :
        function() {
            return fn.apply(context, arguments);
        };
    }
};

  实际上是利用了 finction.apply 可以指定上下文环境( this 指向的对象)的特性。根据参数类型,使用不同的 function.applay 方式。
  finction.apply 的第一个参数表示 this 指向的对象,第二个参数为调用函数时的参数数组。

jQuery.removeData()

  移除附加在对象上的数据。由于一些浏览器不允许直接 delete DOM Elemnt 的属性,因此 jQuery 进行了对象类型和浏览器支持的检查,选择性地采用 delete 和直接置为 undefined 两种方式来移除数据。但下面的简单实现中统一采用将要移除的数据置为 undefined 的方法。
  功能测试代码如下:

  移除 name , value 方式附加的数据:
<script type="text/javascript" src="jquery.js"></script>
<script>
obj = {};
$.data(obj, 'name', 'value');
document.write("$.data(obj, 'name') = " + $.data(obj, 'name') + '<br />');

$.removeData(obj, 'name');
document.write("$.data(obj, 'name') = " + $.data(obj, 'name'));
</script>


  移除通过对象附加的数据:
<script type="text/javascript" src="jquery.js"></script>
<script>
obj = {};
$.data(obj, {name1: 'value1', name2: 'value2'});

document.write("$.data(obj, 'name1') = " + $.data(obj, 'name1')  + '<br />' );
document.write("$.data(obj, 'name2') = " + $.data(obj, 'name2') + '<br /><br />');

$.removeData(obj, 'name1');
document.write("$.data(obj, 'name1') = " + $.data(obj, 'name1')  + '<br />' );
document.write("$.data(obj, 'name2') = " + $.data(obj, 'name2') + '<br /><br />');

$.removeData(obj);
document.write("$.data(obj, 'name1') = " + $.data(obj, 'name1')  + '<br />' );
document.write("$.data(obj, 'name2') = " + $.data(obj, 'name2'));
</script>

  移除附加到 DOM Element 上的数据:
<div id="div_test" />

<script type="text/javascript" src="jquery.js"></script>
<script>
window.onload = function() {
	div = document.getElementById('div_test');
	$.data(div, 'name', 'value');
	document.write($.data(div, 'name'));

	document.write('<br />');

	$.removeData(div, 'name');
	document.write($.data(div, 'name'));
}
</script>

  实现方式如下:
$ = function() {
    // implemention of globalCache, getCache(obj) ...
    // function data(obj, name, value) { ... }
    // function isEmptyObject(obj) { ... }

    function removeData(obj, name, value) {
        if (name) {
            getCache(obj)[name] = undefined;
            if (!isEmptyObject(obj)) {
                return;
            }
        }

        if (obj.nodeType) {
            globalCache[obj[expando]] = undefined;
        } else {
            obj[expando] = undefined;
        }
    }

	return {
        isEmptyObject : isEmptyObject,
		data : data,
        removeData : removeData
	}
}();

  globalCache, getCache(obj), data(obj, name, value) 的实现方式请参考:
  http://xxing22657-yahoo-com-cn.iteye.com/blog/1042440
  isEmptyObject 的实现请参考之前的小节。

jQUery.now()


  返回当前时间:
function() { return (new Date()).getTime(); }

jQuery.noop()


  空函数:
noop: function() {}

  以上就是就是我对 jQuery Utilities 分类下的函数的实现方式的分析了。

题外话

  最近一直在看 jQuery 的源代码,jQuery 源码算是一个学习JavaScript编程模式的经典范例吧。之所以决定花时间钻研JavaScript,一个重要的原因是最近 server-side JavaScript 和 一些 “JavaScript Friendly” 的 NoSQL 数据库似乎在慢慢兴起。仔细想想, JavaScript 也算是一门各大厂商都在努力改善的语言了(浏览器之争推动了 JavaScript 性能的提升),并且 JavaScript 的一些语言特性也比较有吸引力。
  分析 jQuery 源码的思路,是先从 API 入手,“自底向上”地进行分析,先把基础函数了解清楚,再去看“高阶函数”的实现。具体分析某个函数(或属性)时,先测试这个函数(或属性)的功能,再想办法自己实现一遍,然后与jQuery的实现进行比较。
  我简单地搜索了一下,这边分析过jQuery源代码的朋友也不少,能否分享一下经验?