Простой виджет на JavaScript, не засоряя глобальное пространство имен?


Я написал некоторый код JavaScript с jQuery, чтобы отобразить диалоговое окно на веб-страницу, которая "плавает" в Кордер страницы.

(1) она имеет следующие особенности: диалог следует как пользователь прокручивает страницу.

(2) если пользователь держит нажатой клавишу [Ctrl] и, диалоговое окно не скрывается, так что он не неясным содержанием.

Я знаю, что я, как правило, интуитивно лечить JavaScript как если бы это был код на C, потому что это выглядит как код на C и это привычка, я работаю до перерыва.

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

Я имею в виду диалог как "маленькая черная книга".

Имея это в виду, прошу критики моего кода:

function getNewLittleBlackBook(blackBookId, blackBookWidth, blackBookHeight) {
    var jQueryBlackBook = $('#' + blackBookId);
    if (jQueryBlackBook.length == 0)
        throw "Could not locate the element specified by blackBookId";
    if (!blackBookWidth > 0 || !blackBookHeight > 0)
        throw "Invalid width or height specified for Little Black Book";

    var LittleBlackBook = {
        id: blackBookId,
        width: blackBookWidth,
        height: blackBookHeight,
        jQueryObj: jQueryBlackBook,

        // Functions to show and hide the little black book
        hide: function () { jQueryBlackBook.hide(); },
        show: function () { jQueryBlackBook.show(); },

        // This setPosition function determines the position based on the document scrolling.
        setPosition: function () {
            var windowHeight = $(self).height();
            var windowWidth = $(self).width();
            var scrollPosition = $(self).scrollTop();
            var newModalTop = windowHeight - this.height + scrollPosition - 40;
            var newModalLeft = windowWidth - this.width - 40;
            this.jQueryObj.css('top', newModalTop + 'px');
            this.jQueryObj.css('left', newModalLeft + 'px');
            this.jQueryObj.css('height', this.height);
            this.jQueryObj.css('width', this.width);
        }, // end setPosition

        handlers: {
            ExternalScroll: function () {                
                LittleBlackBook.setPosition();
            },
            // These next two handlers serve to show/hide the Little Black Book when the user holds down the [Ctrl] key.
            ExternalKeyDown: function (e) {
                if (e.keyCode == 17)
                    LittleBlackBook.hide();
            },
            ExternalKeyUp: function (e) {
                if (e.keyCode == 17)
                    LittleBlackBook.show();
            }
        } // end handlers
    };     // end LittleBlackBook object

    // Attach event handlers.
    $(self).scroll(LittleBlackBook.handlers.ExternalScroll);
    $(document).keydown(LittleBlackBook.handlers.ExternalKeyDown);
    $(document).keyup(LittleBlackBook.handlers.ExternalKeyUp);

    LittleBlackBook.setPosition();
    LittleBlackBook.show();

    // Return the object
    return LittleBlackBook;
}


Комментарии
4 ответа

Я использую следующий шаблон

; var _ = _ || {}; // Gets the _ object or creates it if it doesn't yet exist, think of it as your namespace, or your $ for jQuery

_.Stuff = (function() {
var _privateStuff = 1;
var _morePrivateStuff = "beer";

function _selectBox()
{
// stuff
}

function _checkBox()
{
// stuff
}

function _radioButton()
{
// stuff
}

return {
SelectBox : _selectBox,
CheckBox : _checkBox,
RadioButton : _radioButton,
ExposedVariable : _privateStuff
};
})();

таким образом, вы называете свои функции в своеобразном "пространстве имен.Класс.Функция" шаблон, для экземпляр _.Вещи.Поля выбрать();, вы получаете возможность быть частные переменные которые могут или не могут быть доступны за пределами вашей псевдо-класс, и вы получите расширяемость возможность сохранить отдельные файлы для каждого из ваших классов, используя шаблон в них

; var _ = _ || {};

_.MoreStuff = (function() {
return {
Moar : "moar"
};
})();

Здесь я выложил подобное, возможно более подробное, аналогичный ответ.

Обновление: вы также можете вернуть функции такой:

; var _ = _ || {};

_.Superb = (function() {
return {
Moar : function(a,b){
alert(a);
return b;
}
};
})();

1
ответ дан 24 июня 2011 в 08:06 Источник Поделиться

Вы должны скинуть ошибки объектов, а не строк:

throw new Error("Invalid width or height specified for Little Black Book");

Это обеспечивает трассировку стека.

3
ответ дан 24 июня 2011 в 07:06 Источник Поделиться

Вы можете объединить ваши Усс называет:

this.jQueryObj.css({
top: newModalTop,
left: newModalLeft,
height: this.height,
width: this.width
});

библиотека jQuery автоматически вставляет пикселей при определении размера свойства.

2
ответ дан 24 июня 2011 в 07:06 Источник Поделиться

Вы должны рассмотреть вопрос об изменении вашей библиотеки jQuery плагин.
Таким образом, люди могут написать $("любой").littleBlackBook().

Вы должны хранить объект в $.данных , так что вы можете вернуть его, если плагин вызывается снова на один и тот же элемент.


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

$.fn.littleBlackBook.alreadyExists = true;

1
ответ дан 24 июня 2011 в 08:06 Источник Поделиться