1.$()的含义及实现
()的含义就是创建一个jquery的实例对象。那么可以将$()的功能初步实现如下:
(function(root) {
var jQuery = function() {
return new jQuery();
}
root.$ = root.jQuery = jQuery;
})(this);
但是这样实现有一个,就是在构造函数中又重新调用了new jQuery(),引起了函数的无限循环调用,jquery为了解决此问题,引入了
的方法。即在jquery的原型对象中增加了init方法作为其构造函数,其共享jquery的原型对象具体实现如下:
(function(root) {
var jQuery = function() {
return new jQuery.prototype.init();
}
jQuery.fn = jQuery.prototype = {
init: function() {
}
}
//共享原型对象
jQuery.fn.init.prototype = jQuery.fn;
root.$ = root.jQuery = jQuery;
})(this);
此时,调用$()方法即可生成一个空的jquery对象。
2.对象扩展方法$.extend()
使用场景
$.extend()常见的使用方法有以下三种:
(1)扩展jquery本身(jquery源码中实现基础功能的方法)
//jQuery 本身扩展 this == jQuery
$.extend({
css: function(){}
});
jQuery.css();
(2)扩展实例对象(将方法或属性挂载jq的实例对象上)
//实例对象扩展 this == 实例对象
$.fn.extend({
sex:"男"
});
$().sex;
(3)扩展任意对象
var ret = {name:"max",list:{age:"30"}};
var res = {list:{sex:"女"}};
//任意对象扩展
//第一个对象为boolean值--是否深拷贝 默认为false 可不传
var obj = $.extend(true,{}, ret, res);
此时obj对象中就已经扩展了ret和res对象中的属性,并对其list属性的对象进行了合并。
以上就是 $.extend方法的使用场景,那么它在jquery中怎么实现呢?
$.extend方法在jquery中的实现
现将$.extend()方法简单实现如下:
jQuery.fn.extend = jQuery.extend = function() {
//取第一个参数,若未传值则赋予空对象
var target = arguments[0] || {};
var length = arguments.length;
var i = 1;
var deep = false;
var option, name,copy,src,copyIsArray,clone;
if (typeof target === "boolean") {
deep = target;
target = arguments[1];
i = 2;
}
if (typeof target !== "object") {
target = {};
}
//参数的个数 1 为jq本身或其实例对象的扩展,将目前的上下问对象this赋值给要返回的对象target
if (length === i) {
target = this;
i--;
}
//浅拷贝 深拷贝
for (; i < length; i++) {
if ((option = arguments[i]) != null) {
for (name in option) {
copy = option[name];
src = target[name];
//深拷贝的原理其实是将相同key值得属性再进行一次拷贝操作,因此可以使用递归算法完成
//isPlainObject和isArray为jq扩展的判断元素类型的方法
if(deep && (jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)))){
if(copyIsArray){
copyIsArray = false;
clone = src && jQuery.isArray(src) ? src : [];
} else {
clone = src && jQuery.isPlainObject(src) ? src : {};
}
target[name] = jQuery.extend(deep, clone, copy);
} else if(copy != undefined){
target[name] = copy;
}
}
}
}
return target;
}
此时,返回的target即为扩展后的对象,其中代码中提到的isPlainObject和isArray方法的实现也十分简单,实现代码如下:
jQuery.extend({
//类型检测
isPlainObject: function(obj){
return toString.call(obj) === "[object Object]";
},
isArray: function(obj){
return toString.call(obj) === "[object Array]";
}
});
至此,$.extend()在jquery中的实现便搞定了。