Difference between jquery functions and regular javascript functions?

Question

What't the point of writing jquery functions like this:

(function( $ ) {
  $.fn.simple_hide_function = function() {
  var $t = this;
  $t.hide();
  };
})( jQuery );

$(window).load(function () {
$('#myId').simple_hide_function();
});

Why not do it like this:

function simple_hide_function(id){
id.hide();
};

$(window).load(function () {
var my_id = $('#my_id');
simple_hide_function(my_id);
});

Added question:

Would it be any problem doing this?

function simple_hide_function(id){
id.hide();
};

$(window).load(function () {
var my_id1 = $('#my_id1'),
my_id2 = $('#my_id2'),
my_id3 = $('#my_id3');
simple_hide_function(my_id1);
simple_hide_function(my_id2);
simple_hide_function(my_id3);
});

For the added question: if you don't mind that your code is hard to read, reuse and maintain, why not. It is called "bad practice". As you become a better and better developer, you will realize how you just cannot do things like that. — kapa
– kapa, Commented Dec 29, 2011 at 10:54

Interrobang · Accepted Answer · 2011-12-29 10:44:16Z

4

In the plugin version, you are creating a new function and attaching it to the jQuery object. By making your function a member of the object, you can take advantage of things like jQuery's chaining, where multiple functions are invoked on the same object in a row.

In the second version, you are creating a function in the global scope and passing it a jQuery object. This pollutes the global namespace (now your function is visible everywhere) and it just doesn't really fall in line with the jQuery philosophy.

However, as you've found, there are no functional differences. Both will execute fine.

answered Dec 29, 2011 at 10:44

Interrobang

17.5k3 gold badges57 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hakan Over a year ago

Thanks Interrobang, I think I understand what you mean. Just to make shore, there is nothing wrong doing like the secound version?

Interrobang Over a year ago

Well, with your second version, you can't do $('#my_id1, #my_id2, #my_id3').simple_hide_function(); like you can with the plugin version. If you are going to be operating on things with jQuery, you should definitely use a jQuery plugin, that's the whole point of them.

jkeesh · Accepted Answer · 2011-12-29 10:46:15Z

0

I think the main idea is that you are not cluttering up the global namespace. In your second example simple_hide_function belongs to the window, and could possibly cause a name conflict, but in the first example it is a local variable.

answered Dec 29, 2011 at 10:46

jkeesh

3,3493 gold badges33 silver badges42 bronze badges

2 Comments

Hakan Over a year ago

thanks jkeesh! I added a question. Would this "clutter up" anything?

jkeesh Over a year ago

The second example also clutters the global namespace since simple_hide_function is stil bound to the window. Parts of the answer above explain the other benefits of using jQuery plugins.

Collectives™ on Stack Overflow

Difference between jquery functions and regular javascript functions?

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related