Monday, June 3, 2024
 Popular · Latest · Hot · Upcoming
95
rated 0 times [  100] [ 5]  / answers: 1 / hits: 16117  / 12 Years ago, wed, november 7, 2012, 12:00:00

According to this StackOverflow answer What does jQuery.fn mean?, the fn property in jQuery.fn.jquery is an alias to the prototype property. I assume that this would be the same in these two methods whose full code is below



$.fn.map = function() and $.fn.tweets = function()



My question then, is, if, for example, $.fn.tweets uses the prototype to create a tweets method, would this code with $('tweets').tweets be calling it...



var $tweets = $('#tweets').tweets({
query: buildQuery(approxLocation),
template: '#tweet-template'
});


and, if so, how might it trigger that method. For example, does the mere creation of the variable on file loading trigger that function, which has other methods inside of it, namely query? Thanks for your help



Full code of methods



  $.fn.map = function(method) {
console.trace();
console.log(method);
if (method == 'getInstance') {
console.log(fn.map);
return this.data('map');
}

return this.each(function() {
var $this = $(this);
var map = $this.data('map');

if (map && MyMap.prototype[method]) {
map[method] (Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
var options = method;
$this.data('map', new MyMap( this, options ));
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.map' );
}
});
}

$.fn.tweets = function(method) {

if ( methods[method] ) {
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {

return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.tweets' );
}
}


variables that call those methods?



 var $tweets = $('#tweets').tweets({
query: buildQuery(approxLocation),
template: '#tweet-template'
});
var $map = $('#map').map({
initialLocation: approxLocation,
radius: 1000,
locationChanged: function(location) {
$tweets.tweets('setQuery', buildQuery(location));
}
});

More From » jquery

 Answers
5

Firstly, prototypes are just objects. In this case, yes:



jQuery.prototype === jQuery.fn


So saying jQuery.fn.map = function() {} is like saying jQuery.prototype.map = function() {}



When you instantiate a new jquery object with $(selector | dom node | ...) you are returning a jQuery object which automatically inherits all the prototype methods, including map, tweet, etc. Research Javascript's prototypal inheritence model and how object prototypes work in regard to new



$ is just a reference to jQuery which returns a specially modified new object. $ is a function which returns a new object reference. Here's a simplified example (but you really should research more about prototypal inheritence, it has been answered many times repeatedly):



var A = function() {
};

A.prototype.doThing = function() {
};

var newObj = new A();

newObj.doThing // this new object has this method because it's on A's prototype


so newObj.doThing is just like $(selector).tweet



Also feel free to read the source of jQuery and trace what happens when a new object is created. You can see near the top exactly what is happening under the comment // Define a local copy of jQuery


[#82146] Monday, November 5, 2012, 12 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
leighamarleem

Total Points: 75
Total Questions: 121
Total Answers: 111

Location: Norway
Member since Mon, May 23, 2022
2 Years ago
;