2012-03-16 3 views
4

Я просмотрел различные темы, размещенные в stackoverflow и других форумах, в которых объясняется, как писать и расширять плагин jquery.создать и расширить jquery плагин

Я написал следующий код, чтобы проверить мое понимание

(function($) { 
    $.fn.myPlugin = function() { 

    this.firstAPI(param) 
    { 
     alert(param); 
    }; 
    return this; 
    }; 
})(jQuery); 

Теперь я простирающийся плагин.

function($) { 
    var extensionMethods = { 
      secondAPI: function(param){ 
      alert(param); 
     } 
    }; 

    $.extend(true, $[fn][myPlugin].prototype, extensionMethods); 

})(jQuery); 

Теперь я доступ плагина $().myPlugin().firstAPI("Hello"), который успешно призывающие к API и показывая предупреждающее сообщение. Но я не могу получить доступ к secondAPI$().myPlugin().secondAPI("Hello"). $().myPlugin() Объект не имеет secondAPI.

Кроме того, я заметил, что объект инициализируется каждый раз, когда я вызываю API на объекте $().myPlugin(). Я также попытался передать элемент DOM $('#divid'), а затем позвонить. В этом сценарии тоже не удалось.

+0

Не могли бы вы сообщить нам, какой учебник вы изучили до сих пор, чтобы сгенерировать этот код. Это поможет увидеть, какую архитектуру плагина вы используете. Есть несколько разных, и я лично предпочитаю, что это обсуждается в официальном учебнике плагина и используется командой jQuery UI. – Simon

+0

http: //forum.jquery.com/topic/how-to-extend-plugins-ui-plugins – Sanmoy

+0

http://stackoverflow.com/questions/2050985/best-way-to-extend-a-jquery-plugin – Sanmoy

ответ

1

Я думаю, это не правильный способ расширить плагин прочитать http://docs.jquery.com/Plugins/Authoring

При использовании $.extend(true, $['fn']['myPlugin'].prototype, extensionMethods);, у пропустил кавычки я догадываюсь, вы на самом деле добавить функцию закрывающего сферы MyPlugin это не может будем называть $(). myPlugin(). Function() ;, , если u использует $.extend($.fn.myPlugin, extensionMethods);, он добавит метод в контекст myPlugin, но фактически не расширит его.

Читать эту https://github.com/mhuggins/jquery-ui-autocomplete-hints/blob/master/jquery.autocomplete.js

+0

Я слишком устал, чтобы держаться это, но если вы хотите продолжать ковырять, вот скрипка: http://jsfiddle.net/wGCkn/3/ - Используя рекомендуемый метод (сначала передавая в литературе объекта) следующий '$ .extend ($ .fn.myPlugin, extensionMethods) 'также не добавляет дополнительный метод. Сейчас я сдаюсь. –

+0

Yup в обоих направлениях u просто добавит его к закрытию, и это не рекомендуется, либо – Deepu

+0

приближался к моей попытке обучения, поэтому я не имел в виду, что я являюсь авторитетом в отношении того, что рекомендуется. Я просто имел в виду, что здесь: http://docs.jquery.com/Plugins/Authoring#Defaults_and_Options в разделе «Способы подключения» они дают четкое сообщение «ЭТО ХОРОШО !!» для передачи объектного литерала методов в новый объект плагина. Это было бы не в первый раз, когда документы API jQuery дали вводящую в заблуждение или неполную информацию. –

0

EDIT: на основе ссылок, предоставленных.

Причина, по которой ваш метод secondAPI не работает, заключается в том, что $.fn.myPlugin - это объект Function, который наследуется от этой прототипной цепочки. Чтобы создать экземпляр объекта, который наследуется от прототипа $.fn.myPlugin, вам необходимо использовать оператор new для создания нового объекта $.fn.myPlugin.

Похоже, что метод, который вы используете, основан на фабрике виджета jQuery. Посмотрите на источник для jQuery UI Widget (в частности, метод $.widget), а затем источник того, что использует фабрику виджета jQuery.

Во-первых, Виджет принимает в качестве своего второго аргумента конструктор объекта, который вы хотите расширить. Затем он создает объект этого типа с помощью оператора new, а затем расширяет этот объект с помощью метода, который вы указали. После этого он создает вашу логику плагина, используя метод $.widget.bridge, чтобы вы могли использовать плагин в обычном режиме, т.е. $(element).myPlugin();. Затем вы можете вызвать любые функции, используя $(element).myPlugin("apiMethod");

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

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