Внедряем js модуль в query plugin

Например написан модуль SelectControl по принципу amd :

define("SelectControl", ["jquery"/* TODO uncomment: , "addJqueryPlugin" */], function($) {

    function SelectControl() {
        this.init.apply(this, arguments);
    }

    $.extend(SelectControl.prototype = new ParentClass(), {

        defaults: {
            element: $() 
            , someProperty: "someProperty"
        }

        , init: function (options) {
            $.extend(true, this, ParenClass.defaults, this.defaults, options);
        }
        , someMethod: function() {
            console.log("I am " + this.element);
        }
    });
    // TODO: add jquery plugin

    return SelectControl;
});

И мы создаем объекты таким образом

require(["jquery", "SelectControl"], function($, SelectControl){
    var element = $("#mySelect");
    var selectControl = new SelectControl({
        element: element
        , someProperty: "SelectControl Module"
    });
    selectControl.someMethod();
});

Но нам хочется инициировать селекты как обычные jquery plugin-ы

require(["jquery", "SelectControl"], function($, SelectControl){
    $("#mySelect").selectControl({
        someProperty: "selectControl plugin"
    })
    .selectControl("someMethod");
});

Для этого напишем функцию addJqueryPlugin, которая добавляет js модуль в jquery plugin

define("addJqueryPlugin", [], function () {
    function addJqueryPlugin(classFunc, pluginName) {
        $.fn[pluginName] = function (method) {

            var params = arguments;
            var result = undefined;

            this.each(function () {
                var element = $(this);
                if (!element.data(pluginName)) {
                    var options = method || {};
                    if (typeof options === 'object') {
                        if (!options.element) {
                            options.element = element;
                        }
                    }
                    element.data(pluginName, new classFunc(options));
                    if (!element.data(pluginName).element) {
                        element.data(pluginName).element = element;
                    }
                }
                else if (element.data(pluginName)[method]) {
                    result = element.data(pluginName)[method].apply(element.data(pluginName), 
Array.prototype.slice.call(params, 1));

                    return result !== undefined ? false : true;
                }
                else {
                    if (typeof method == "string" && element.data(pluginName)) {
                        $.error('Метод ' + method + ' не существует в jQuery.' + pluginName);
                    }
                }
            });

            return result !== undefined ? result : this;
        };
    }

    return addJqueryPlugin;
});

И вызывим ее на месте TODO в модуле SelectControl

addJqueryPlugin(SelectControl, "selectControl");

Вот и все!

По теме:
Soap вызов, используя jquery.ajax

Иногда не хочется делать запрос с клиента на свой сервер, который в свою очередь, используя soap клиент, делает запрос еще на Read more

Реализуем менеджер картинок в редакторе tinymce

На официальном сайте tinymce предлагают подключить файловый менеджер MoxieManager. Но этот менеджер вовсе не бесплатный. Реализуем свой менеджер для картинок. Покажем кнопку Read more

Работаем с JQuery Deferred

В JQuery есть такой удобный объект — Deferred, который позволяет выполнять отложенные действия в зависимости от состояния, которое нужно установить Read more

Пишем модули на javascript и загружаем их при помощи requirejs

В ECMAScript 6 есть уже классы. Но думаю их пока рано еще использовать. Опишу способ создания модулей, которым пользуюсь я. Создадим файл Read more

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *