Как этот шаблон дизайна известен в JavaScript / jQuery? - PullRequest
10 голосов
/ 28 февраля 2011

Я просматривал исходный код 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));

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

  1. Какова цель следующего: (function($) { // code }(jQuery)); Это шаблон модуля, о котором я говорил? Это предназначено для поддержания чистоты глобального пространства имен?

  2. Что означают строки $.extend() ?: Верх $.extend(true, window, { // code }); выглядит так, как будто он связан с «пространством имен»; что такое пространство имен? Похоже, что нижний $.extend(this, { // code }); используется для открытых «общественных» членов и функций? Как бы вы определили приватную функцию или переменную?

  3. Как бы вы инициализировали несколько «SlickGrids», если бы захотели? Сколько бы они поделились и как бы они взаимодействовали? Обратите внимание на функцию «конструктор»: function SlickGrid(...) { // code }.

  4. Какие есть книги, ссылки и другие ресурсы по кодированию в этом стиле? Кто это придумал?

Спасибо! ♥

Ответы [ 5 ]

9 голосов
/ 28 февраля 2011

Это плагин jQuery.

(function($) { // code }(jQuery)); дает вам новую область действия функции, чтобы ваши имена не сбрасывались в глобальную область.Передача jQuery как $ позволяет вам использовать сокращение $, даже если другие библиотеки 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.

3 голосов
/ 28 февраля 2011
(function($) { // code }(jQuery))

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

$.extend()

Это функция jQuery, которая будет принимать два объекта и объединять их вместе.Замена первого «окна» объекта вторым объектом {Slick: {Grid: SlickGrid}}.Это означает, что если есть объект окна с 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 от John Resig также является хорошей книгой, которая поможет вам выйти за рамки базовых знаний.

1 голос
/ 28 февраля 2011

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

0 голосов
/ 28 февраля 2011

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

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

0 голосов
/ 28 февраля 2011

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

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

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

...