Как добавить служебные методы в плагин jQuery?

Question

Как добавить служебные методы в плагин jQuery?

0

Обычно я использую шаблон рисунка ниже для создания плагинов jQuery (http://jsbin.com/vegevido/1/).

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

Как показано ниже, я добавил multiply метод утилиты, к которому обращается родительский скрипт, используя $('#elem').makeRed('multiply',5,3).

Так я должен это реализовать? Похоже, было бы лучше получить доступ к этому методу, используя что-то вроде myPlugin.multiple(5,3) поскольку оно не имеет ничего общего с #elem.

благодаря

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Testing</title>  
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script>
        <style type="text/css">
        </style> 
        <script type="text/javascript"> 
            (function($){
                var defaults = {};

                var methods = {
                    init : function (options) {
                        var settings = $.extend({}, defaults, options);
                        return this.each(function () {
                            $(this).css('color', 'red');
                        });
                    },
                    makeBlue : function () {
                        $(this).css('color', 'blue');
                    },
                    multiply : function (x,y) {
                        return x*y;
                    },
                    destroy : function () {
                        return this.each(function () {});
                    }
                };

                $.fn.makeRed = function(method) {
                    if ( methods[method] ) {
                        return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
                    } else if ( typeof method === 'object' || ! method ) {
                        return methods.init.apply( this, arguments );
                    } else {
                        $.error( 'Method ' +  method + ' does not exist on jQuery.makeRed' );
                    }    
                };

                }(jQuery));
            $(function(){
                var myPlugin=$('#elem').makeRed();
                $('#makeBlue').click(function() {$('#elem').makeRed('makeBlue');});
                $('#multiply').click(function() {
                    console.log(myPlugin);
                    alert($('#elem').makeRed('multiply',5,3));
                });
            });
        </script>
    </head>

    <body>

        <div id="elem">Some Text</div>

        <button id="makeBlue">makeBlue</button>
        <button id="multiply">multiply</button>

    </body> 
</html>

user1032531 21 фев. 2014, в 17:26

Источник

Теги:

javascript

jquery

1 ответ

Ещё вопросы

Arun P Johny · Accepted Answer · 2014-02-21T13-12-00.000Z

Один общий шаблон - добавить его в определение плагина, например

$.makeRed = {
    multiply: function (x, y) {
        return x * y;
    }
}

Демо: скрипка

Вот как пользовательский интерфейс jQuery предоставляет утилиты, такие как $.datepicker.formatDate (формат, дата, настройки)

Спасибо Арун, Первый способ отлично работает. Пробую второй «чище». Куда идет этот скрипт? Как это называется?
@ user1032531 оформить заказ на скрипке
$.makeRed = {multiply: function (x, y) {return x * y;}} не использует $.makeRed = {multiply: function (x, y) {return x * y;}} или я что-то упустил?
Ах, я вижу, я просто называю это, используя $.makeRed.multiply(5, 3) . Очень хорошо! Почему кто-то хочет использовать первый способ?