Question

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, {
        Slick: {
            Grid: SlickGrid
        }
    });

    var scrollbarDimensions; // shared across all grids on this page

    ////////////////////////////////////////////////////////////////////////////
    // SlickGrid class implementation (available as Slick.Grid)

    /**
     * @param {Node}           container   Container node to create the grid in.
     * @param {Array,Object}   data        An array of objects for databinding.
     * @param {Array}          columns     An array of column definitions.
     * @param {Object}         options     Grid options.
     **/
    function SlickGrid(container,data,columns,options) {
        /// <summary>
        /// Create and manage virtual grid in the specified $container,
        /// connecting it to the specified data source. Data is presented
        /// as a grid with the specified columns and data.length rows.
        /// Options alter behaviour of the grid.
        /// </summary>

        // settings
        var defaults = {
            ...
        };

        ...

        // private
        var $container;

        ...


        ////////////////////////////////////////////////////////////////////////
        // Initialization

        function init() {
            /// <summary>
            /// Initialize 'this' (self) instance of a SlickGrid.
            /// This function is called by the constructor.
            /// </summary>

            $container = $(container);

            ...
        }

        ////////////////////////////////////////////////////////////////////////
        // Private & Public Functions, Getters/Setters, Interactivity, etc.
        function measureScrollbar() {
            ...
        }

        ////////////////////////////////////////////////////////////////////////
        // Public API

        $.extend(this, {
            "slickGridVersion": "2.0a1",

            // Events
            "onScroll":                     new Slick.Event(),

            ...

            // Methods
            "registerPlugin":               registerPlugin,

            ...

        });

        init();
    }
}(jQuery));

Some code has been omitted for brevity and clarity, but this should give you the general idea.

1. What is the purpose of the the following: (function($) { // code }(jQuery)); Is this the module pattern that I’ve seen talked about? Is this meant to keep the global namespace clean?

2. What do the $.extend() lines mean?: The top $.extend(true, window, { // code }); looks like it has to do with a “namespace”; what’s a namespace? It looks like the bottom $.extend(this, { // code }); is used to exposed ‘public’ members and functions? How would you define a private function or variable?

3. How would you initialize multiple “SlickGrids” if you wanted to? How much would they share and how would they interact? Note the “constructor” function: function SlickGrid(...) { // code }.

4. What are some books, links, and other resources on coding in this style? Who invented it?

Thanks! ♥

Answer 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.