我认为自己(充其量)是一个中级JavaScript家伙......当然......我想了解一些事情已经完成,所以我可以编写更好的代码。因此,我一直在寻找jQuery的内幕,试图更多地了解它如何完成某些事情。
例如:
jQuery处理IE和Opera通过执行以下操作按名称而不是ID返回项目的情况:
// HANDLE: $("#id")
else
{
var elem = document.getElementById( match[3] );
// Handle the case where IE and Opera return items
// by name instead of ID
if ( elem && elem.id != match[3] )
return jQuery().find( selector );
// Otherwise, we inject the element directly into the jQuery object
var ret = jQuery( elem || [] )
ret.context = document;
ret.selector = selector;
return ret;
}
......好吧,这很容易!
但是,典型的jQuery代码链将一系列命令链接在一起:
$('#someElementId').fadeIn().css({ ...Some CSS Properties ... });
现在......我认为'链接部分在以下区域处理:
jQuery.extend = jQuery.fn.extend = function() { ... };
我正在梳理这个区域......我看到如何处理单个命令...但我没有看到WHERE或者链如何?命令是受管理的。所以我显然错过了一些东西。
所以我的问题是:
答案 0 :(得分:3)
jQuery
对象上的所有方法都将返回jQuery
个对象。
在此特定示例中,您可以看到正在创建jQuery().find( selector )
和jQuery( elem || [] )
答案 1 :(得分:2)
我将尝试用一个例子来解释。对于此示例,您应该打开chrome developer console或firebug。
var $m = function() {
return this;
};
$m.log = function(param) {
console.log(param);
return this;
};
$m.alert = function(param) {
this.log('alerting: ' + param);
alert(param);
return this;
};
$m.log('start').alert('Sample message').log('end').log('success');
如您所见,每个函数都返回this
,在此示例中引用$m
。通过这种方式,我可以根据需要链接任意数量的方法。
答案 2 :(得分:2)
根据你的评论:
这是来自此处的示例:http://en.wikipedia.org/wiki/Fluent_interface#JavaScript 附加评论
var Car = function() {
var speed, color, doors;
this.setSpeed = function(speed) {
this.speed = speed;
**//Returns the reference to the calling `car` object**
return this;
};
this.setColor = function(color) {
this.color = color;
**//Returns the reference to the calling `car` object**
return this;
};
this.setDoors = function(doors) {
this.doors = doors;
**//Returns the reference to the calling `car` object**
return this;
};
};
// Fluent interface
**//Each method returns a reference to the object itself**
**//so the next method chain is refering back to the previous returned value**
**//ie - itself, the orginal object that started the call chain**
myCar = new Car();
myCar.setSpeed(100).setColor('blue').setDoors(5);
// Example without fluent interface
**// normal, non fluent style, where each method returns Void**
**// so you need to start with the object reference yourself each time**
myCar2 = new Car();
myCar2.setSpeed(100);
myCar2.setColor('blue');
myCar2.setDoors(5);
答案 3 :(得分:1)
我的理解是:Jquery函数在执行时返回对相关对象的引用,这允许您将操作链接在一起。因此,如果执行查找div的操作,该函数将返回一个引用,允许您立即将另一个操作链接到它的末尾。
答案 4 :(得分:1)
使用返回此项; 返回父OBJECT
var myObject = {
a: function(){
alert('a');
return this;
//this == myObject, so returning myObject means
//the next function in the chain will call myObject.___
},
b: function(){
alert('b');
return this;
}
}
myObject.a().b();//alerts 'a' then alerts 'b'