2013-11-29 4 views
0

В настоящее время я создаю свой плагины JQuery, используя этот «шаблон»:Abstractize JQuery создание плагина

;(function($, window, document){ 

    var defaultOptions = { 
     option1: value1, 
     option2: value2, 
     }; 

    function plugin(el, options){ 

    this.options = $.extend({}, defaultOptions, options); 
    this.el = el; 

    this.__construct(); 
    }; 

    plugin.prototype = { 

    __construct: function(){ 
     // do the plugin stuff, set up events etc. 
    }, 

    __destruct: function(){ 
     $(this.el).removeData('myPlugin'); 
    }, 

    // other plugin functions here... 
    }; 

    $.fn.myPlugin = function(options){ 
    var additionalArguments = Array.prototype.slice.call(arguments, 1); 

    return this.each(function(){ 
     var inst = $.data(this, 'myPlugin'); 

     if(!(inst instanceof plugin)){ 
     var inst = new plugin(this, options); 
     $.data(this, 'myPlugin', inst); 
     return inst; 
     } 

     if(typeof options == 'string'){ 
     inst[options].apply(inst, additionalArguments); 
     } 
    }); 
    }; 

    $(document).ready(function(){ 
    $('.my-plugin').myPlugin(); 
    }); 

})(jQuery, window, document); 

я получил большинство идей от https://github.com/jquery-boilerplate/jquery-boilerplate/blob/master/src/jquery.boilerplate.js

Так что этот пример не делает ничего на самом деле, это просто «позвоночник» плагина, и, как вы можете видеть, это довольно немного кода ....

Могу ли я построить какую-то функцию создателя плагина, которая позволила бы мне переписать код выше на нечто меньшее:

createPlugin('myPlugin', { 

    defaultOptions: {}, 

    __construct: function() { 
    ... 
    }, 

    __destruct: function() { 
    ... 
    }, 

    somePublicFunction: function(){ 
    ... 
    } 

}); 

Но все-таки быть в состоянии использовать его как

$('.element').myPlugin(); 

?

В PHP я хотел бы использовать абстрактные классы для такого рода вещей, но я не знаю, как это сделать в JavaScript ...

ответ

1

Это шаблон плагин:

(function ($){ 

    $.fn.myPlugin = function (options){ 
    // do something or not to do 
    // anyway it will work 
    return(this);//because 'this' will return the input selector 
    }; 

})(jQuery); 

Это достаточно кода для достижения базовой функциональности.

Если вам нужна функция createjQueryPlugin(name, methods), то ДА, вы можете. Просто оберните $.fn.myPlugin в определении функции, но вы все равно должны определить пространство имен:

(function ($){  
//... 
})(jQuery); 

И, наконец, ваш код будет таким же, но дольше и излишним.

+0

действительно хотите вернуть 'this' not' $ (this) ' – charlietfl

0

Плагин может быть таким же простым или сложным, каким вы хотите. Шаблон шаблона является достаточно прочной основой, с помощью которого может быть разработан очень надежный API, в том числе изменение параметров «на лету».

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

Смежные вопросы