how to Custom build a javascript API based on Jquery and some questions about the syntax used in Jquery.

Question

Hi all, I come here with quite a bunch of questions so lets start:

I want to know some things about the syntax used to make jquery as I wish to learn from it an use it for my self.

Question 1: The starting of the jQuery library

(function( window, undefined ) {

// Define a local copy of jQuery
var jQuery = function( selector, context ) {
        // The jQuery object is actually just the init constructor 'enhanced'
        return new jQuery.fn.init( selector, context );
    },

    // Map over jQuery in case of overwrite
    _jQuery = window.jQuery, .......

I would like to know what is meant by the bracket before the function like so "(function(window..." until now I have only declared my function like this

function myFunc(myArg1,myArg2){
//stuff
}

Question 2:

At the end of the jquery library I seem to understand that the $ sign is assigned in the global scope so that we can use the $ anywhere for the selectors, what i dont understand is that what does the "(window);" expression at the very end mean, and what purpose does it serve.

        };

});
// Expose jQuery to the global object
window.jQuery = window.$ = jQuery;

})(window);

My final question is, how can I go about making a globally accessable javascript Object of my own that I can use with lets say "ds.functionName(Arg1);" just like JQuery is used with the $ sign

Thank you :D

Answer 1

1) This creates a closure, so that everything inside is local to this closure, only what the authors intend it exposed and in the global namespace.

2) The window expression is passing a a reference to the window object into that closure, it's the first parameter of function( window, undefined ) { up top, this causes it to immediately be invoked as well.

Answer 2

What you are looking at is called an Anonymous Function. Anonymous Functions can be passed around just like normal variables. They are also executed immediately once they are declared. It's quite a paradigm shift in understanding this concept. I'm sure there are some other explanations here on Stackoverflow that can explain them.

(...your code...)(argument);

So in your second example:

});
// Expose jQuery to the global object
window.jQuery = window.$ = jQuery;

})(window);

the argument window is being passed into the anonymous function that started in example 1

Answer 3

Question 1 and Question 2 are actually related. What they're doing is defining a function with the (function(params){...}) bit, and executing it straight away with the (window) bit, passing in window as the parameter. It looks quite odd, but it's a neat way of making sure you don't end up polluting the global namespace. If you define your function as function foo(){...}, it means that foo is a function in the global namespace (the window) anybody and everybody can call your function. Even worse, it means that nobody else can define a function foo in global without it trampling all over your function foo. Bad Things happen when this happens :-) 188663 has more info about this pattern.

Third question, jQuery does it nicely. What they're doing with the

// Expose jQuery to the global object
window.jQuery = window.$ = jQuery;

means that you can call on jQuery or $, and it "just exists", it's way out there in the global scope. You're probably after the module or singleton pattern - 1479319 has some jolly good answers in this regard