CODEWITHSUNDEEP
javascriptjquery
liam xu
liam xu

Reputation: 3030

Could you please explain this sort of JavaScript syntax from Jquery for me?

As an example, here is a screenshot from jQuery1.8. enter image description here

Why can I do something like this from the perspective of jQuery source code ? Is addClass jquery's method? But what i saw was from jQuery.fn.extend.

$("xid").addClass("xxx");

I am relatively new to JavaScript and wrote some pretty simple code like directly add a method in .html.

 <html>
    <script>
        function m() {
            alert("simple");
        }
    </script>
 </html>

I couldn't understand the complex syntax particularly in the JavaScript Framework like ExtJs,jQuery, although I have searched a number of relative documents about this, but I still don't have a clear understanding. Maybe I need to spend time seriously reading a special JavaScript book, but this moment I want to know the answer.

Thanks.

Upvotes: -1

Views: 227

Answers (2)

slebetman
slebetman

Reputation: 113896

There are several layers to this question. The first is object literals. Javascript allows you to declare objects using object literal syntax (you may have heard of JSON which is just the syntax stored/transferred in a string). The syntax is as follows:

var obj = { key1 : "value1", key2 : "value2" };

A more structured/readable way to write this is:

var obj = {
  key1 : "value1",
  key2 : "value2"
};

The code above is exactly the same as doing:

var obj = new Object();
obj.key1 = "value1";
obj.key2 = "value2";

So what you're seeing in the line:

addClass : function () {

is merely a part of the object literal declaration. Essentially the code is doing this:

var tmp = new Object();
// ...
tmp.addClass = function () { /* ... */ };
// ...
jQuery.fn.extend(tmp).

Except that it declares the object literal directly in the call to extend() so it is not necessary to use a temporary variable.

The second thing is functions in javascript are not special. What I mean is, functions are treated the same as everything else: strings, numbers, arrays & objects. In fact, in javascript, strings, numbers, arrays and functions are all objects. So you can assign a function to a variable:

var n = function () {alert("Hello World");}

So there is nothing magical happening at all. It's simply creating an anonymous object in object literal syntax that contains a collection of functions that is passed as an argument to the extend method.

That is the explanation of the syntax. That is, what is happening in javascript per se.

We know that we're looking at jQuery code. So that gives us more clues as to what's happening. First thing first: jQuery.fn is simply a pointer to jQuery.prototype. And jQuery itself is a constructor. In javascript constructors are regular functions that can be used to create objects. When you create an object with a constructor, that object inherits from the constructor's prototype.

And jQuery has modified its prototype and added an extend method which allows you to add other methods and attributes to jQuery's prototype. Which is what it's doing. All the functions contained in the object literal mentioned earlier will be processed by the extend method to be added to jQuery itself so that when you create new jQuery objects they'll inherit them.

Based on your comment it looks like there are lots of things about javascript you need to learn. May I suggest reading through the Rhino book: "JavaScript: The Definitive Guide". And once you know more and are more comfortable with javascript I'd also suggest reading "Javascript: The Good Parts".

I'll try to answer the best I can here about your comment. To explain everything requires a whole book.

First, about the line:

jQuery.extend = jQuery.fn.extend = function() {

As mentioned before, jQuery.fn is just a pointer to jQuery.prototype. So what it's doing is basically this:

jQuery.prototype.extend = function () { /* ... */ };
jQuery.extend = jQuery.prototype.extend;

What's the difference between the two? The first thing you need to remember is that jQuery is a constructor. An object that is created by a constructor inherits it's prototype (javascript don't have classes but switch the word "prototype" with "class" and you begin to get an understanding of how objects work). So, the first declaration of extend defines it as a method for all instances of jQuery objects:

// note: The following is not the recommended way to write jQuery code
//       but it does illustrate the point about inheritance:

var foo = new jQuery();
foo.extend(); // this works because foo inherits jQuery's extend method

Now, remember I said that in javascript functions are also objects? The second declaration treats the jQuery function as an object and adds a function directly to it. This is mostly syntax sugar. It's so that you can write:

jQuery.extend();

instead of the longer:

jQuery.prototype.extend();

or something convoluted like:

new jQuery().extend.call(jQuery);

depending on how extend was written.

So, jQuery.extend() is simply a method of the jQuery constructor itself. It is not inherited by objects created by the jQuery constructor. Think of it as a class method.

Upvotes: 2

karaxuna
karaxuna

Reputation: 26940

Yes, addClass is jQuery method. The screenshot of the code is extending jquery's methods, so you can call it like this: $().method. $ is equal to jQuery. Take a look at jquery source, there is nothing complex in it if you understand js well.

Upvotes: 0

Related Questions