Что такое шаблон дизайна, известный как JavaScript/jQuery?

Я просматривал исходный код JavaScript для SlickGrid.

Я заметил, что slick.grid.js имеет следующую структуру:

(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));

Некоторые коды были опущены для краткости и ясности, но это должно дать вам общую идею.

Какова цель следующего: (function($) { // code }(jQuery)); Является ли это образцом модуля, о котором я говорил? Это означает, что глобальное пространство имен будет чистым?
Что означают строки $.extend(): Верхний $.extend(true, window, { // code }); выглядит так, как будто он имеет отношение к "пространству имен"; какое пространство имен? Похоже, что нижняя $.extend(this, { // code }); используется для выставления "публичных" членов и функций? Как бы вы определили частную функцию или переменную?
Как бы вы инициализировали несколько "SlickGrids", если хотите? Сколько они будут делиться и как они будут взаимодействовать? Обратите внимание на функцию "конструктор": function SlickGrid(...) { // code }.
Каковы некоторые книги, ссылки и другие ресурсы по кодированию в этом стиле? Кто его придумал?

Спасибо! ♥

Ответы

Ответ 1

Это плагин jQuery.

(function($) { // code }(jQuery)); дает вам новую область функций, чтобы ваши имена не были сброшены в глобальную область. Передача jQuery как $позволяет использовать $shorthand, даже если другие библиотеки Javascript используют $.

$.extend - это метод jQuery для копирования свойств из одного объекта в другой. Первый аргумент true означает, что он должен быть глубоким, а не мелким экземпляром. Расширяя window, в этом случае создаются новые глобальные свойства Slick.

$.extend(this,...) внизу находится в заглавной функции SlickGrid. SlickGrid предназначен для использования в качестве конструктора, и в этом случае this будет вновь созданным объектом, поэтому этот extend добавляет свойства к объекту. Они являются фактически общественными членами. В этом примере кода measureScrollbar является закрытым: он доступен только для кода, определенного в этой функции, а не вне его.

Вы можете создать ряд сеток с помощью:

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

В коде, который вы указали, единственное, что разделили эти два экземпляра, это переменная scrollBarDimensions.

Ответ 2

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

Это закрытие. Он в основном держит все внутри "кода" безопасным от вещей вне его. Вы передаете jQuery и $, но кто-то с большим количеством знаний должен будет объяснить, почему это необходимо.

$.extend()

Это функция jQuery, которая будет принимать два объекта и объединить их вместе. Замена первого объекта "окно" на второй объект {Slick: {Grid: SlickGrid}}. Это означает, что если есть объект Window с Grid: Null, теперь он будет равен Grid: SlickGrid.

Добавление true в качестве первого параметра означает, что он также заменит вложенные объекты:

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

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

Это полезно, если вы используете множество объектов для хранения информации.

Не уверен, что вы подразумеваете под № 3, но посмотрите на http://960.gs для хорошей сетки.

JavaScript Хорошие детали - отличная книга. Pro JavaScript от Джона Ресига также является хорошей книгой, которая поможет вам выйти за рамки основ.

Ответ 3

Проще говоря, парень в вашем примере просто написал jQuery-подключаемый модуль... Проверьте раздел PLUGINS на jquery.com для получения дополнительных ссылок на источники о том, как закодировать плагины. Они просты, понятны и интересны для изучения.

Ответ 4

1) Эта функция вызывается немедленно при загрузке JS файла. Он получает экземпляр jquery как параметр и делает его доступным внутренне как "$". Весь код инкапсулирован в эту функцию, поэтому (если вы не забудете var впереди еще не объявленной переменной), ничто не загрязняет глобальное пространство имен.

2) Все свойства 2-го объекта копируются в 1-й объект, здесь "окно", которое также является объектом глобального пространства имен в веб-браузере. Поэтому этот код не имеет большого смысла. Он претендует на инкапсуляцию, но делает обратное. И второй вызов $.extend не имеет столь большого смысла. Это не так, я просто думаю, что код "притворяется".

4) Я очень сильно рекомендую вам посмотреть видео от Дугласа Крокфорда по адресу http://developer.yahoo.com/yui/theater/ Крокфорд - бог JS, очень известный (среди серьезных программистов JS) - и, кроме того, большое удовольствие слушать:)

Ответ 5

Для первого вопроса эта конструкция является способом, позволяющим jQuery сосуществовать с другими библиотеками, которые могут использовать функцию $, но все равно использовать $для ссылки на jQuery в кодовом блоке.

Весь пакет завернут в вызов функции с $ в качестве параметра. Единственное "основное" действие при его запуске - это вызов этой функции с помощью jQuery в качестве аргумента, что дает ссылку на общеизвестный глобальный jQuery на локальный параметр $, который маскирует любое глобальное значение, которое $ может иметь.