What Is This Design Pattern Known As In Javascript/jquery?

February 28, 2024 Post a Comment

I was looking over the JavaScript source code for SlickGrid. I've noticed that slick.grid.js has the following structure: (function($) { // Slick.Grid $.extend(true, window

Solution 1:

This is a jQuery plugin.

(function($) { // code }(jQuery)); gives you a new function scope so your names are not dumped into the global scope. Passing jQuery as $ lets you use the $ shorthand even if other Javascript libraries use $.

$.extend is a jQuery method to copy properties from one object to another. The first argument true means it should be a deep rather than a shallow copy. By extending window, new global properties are created, in this case, Slick.

The $.extend(this,...) at the bottom is in a capitalized function SlickGrid. SlickGrid is meant to be used as a constructor, in which case this will be the newly-created object, so this extend is adding properties to the object. They are effectively public members. In this code sample, measureScrollbar is private: it is only visible to the code defined in this function, not outside it.

You can create a number of grids with:

var grid1 = new Slick.Grid(blah, blah);
var grid2 = new Slick.Grid(blah, blah);

In the code you've shown, the only thing these two instances will share is the scrollBarDimensions variable.

Solution 2:

(function($) { // code }(jQuery))

This is a closure. It basically keeps everything inside it "// code" safe from things outside it. You pass in jQuery and the $, but someone with more knowledge will have to explain why that is necessary.

$.extend()

This is a jQuery function that will take two objects and merge them together. Replacing the first object "window" with the second object {Slick: {Grid: SlickGrid}}. This means if there is a window object with Grid:Null it would now equal Grid:SlickGrid.

Adding true as a first parameter means it will replace nested objects as well:

var firstObj = { myObj:{
    first:this,
    second: {
        new: obj
    }
}}

$.extend(true, firstObj, {myObj:{second:{new:newer}}});

This is useful if you are using a lot of objects to store information.

Not sure what you mean by #3, but look at http://960.gs for a good grid system.

JavaScript the Good Parts is a great book. Pro JavaScript by John Resig is also a good book to take you beyond the basics.

Solution 3:

Simply put, guy in your example just wrote jQuery plug-in of sorts... Check PLUGINS section of jquery.com for more references to sources on how to code plugins. They are simple, straightforward and fun to explore.

Solution 4:

For the first question, this construct is a way to allow jQuery to coexist with other libraries which may use the $ function, but still use $ to reference jQuery within a code block.

The entire package is wrapped in a function call with $ as a parameter. The only "main" activity when this is run is to call that function with jQuery as an argument, this giving a reference to the well-known global jQuery to the local parameter $, which masks any global value that $ may have.

Solution 5:

1) That function is invoked immediately when the JS file is loaded. It receives the jquery instance as parameter and makes it available internally as "$". All code is encapsulated in that function so (unless you forget a var in front a yet undeclared variable) nothing pollutes the global namespace.

2) All properties of the 2nd object are copied to the 1st object, here "window", which also is the global namespace object in a web browser. Therefore this code does not make much sense. It pretends to encapsulate but does the opposite. Neither does the second invocation of $.extend make all that much sense. It's not wrong, I just think the code "pretends".

4) I very highly recommend you check out the videos from Douglas Crockford at http://developer.yahoo.com/yui/theater/ Crockford is a JS god, very famous (among serious JS programmers) - and in addition great fun to listen to :)

JavaScript Free