Расширение jQuery: определение вашего плагина

Этот пост является выдержкой из главы Мэннинга Пабликейшнса «Расширение jQuery» Кейта Б. Вуда.

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

Плагин MaxLength

Пример плагина, который мы хотим разработать, предоставляет ограничение максимальной длины для полей textarea, аналогично встроенному атрибуту maxlength для полей ввода. Это называется следующим образом с настройками по умолчанию:

$('#text1').maxlength();

Для настройки плагина вы предоставляете опции для вызова инициализации.

$('#text1').maxlength({max: 400});

Рисунок 1 Плагин MaxLength в действии

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

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

Плагин MaxLength следует принципу прогрессивных улучшений . Это обогащает пользовательский опыт в отношении ввода ограниченного текста в поле текстовой области. Без JavaScript вы все равно можете вводить текст, и при отправке значения на сервер будет наложено ограничение длины (как и должно быть в любом случае).

Есть несколько основных шагов, необходимых для того, чтобы начать разработку специфических функций вашего плагина. Эти:

• Требовать название для плагина.
• Защита вашего кода от более широкой среды JavaScript и наоборот.
• Определение одноэлементного объекта для предоставления доступа к общим настройкам и поведению.

Утверждение пространства имен

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

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

Для этого плагина вы будете использовать имя «maxlength», так как это именно то, что предоставляет плагин. Оно не слишком длинное и не такое короткое, что теряет смысл. В документации вы можете ссылаться на плагин как «MaxLength».

В соответствии с общими правилами jQuery, имя должно использоваться как все строчные буквы. Кроме того, ваш код плагина должен появиться в файле с именем jquery. <Pluginname> .js , а связанные файлы будут названы в том же шаблоне. Таким образом, для этого плагина код отображается в jquery.maxlength.js , а связанный с ним CSS — в jquery.maxlength.css .

Инкапсуляция

Два руководящих принципа — скрыть детали реализации и не полагаться на то, что $ — это то же самое, что jQuery, — могут быть решены с помощью некоторого стандартного кода, который служит для защиты реализации вашего плагина от остальной части среды JavaScript, известной как инкапсуляция в объектно-ориентированного программирования.

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

Объявив эту функцию-обертку, вы заключаете ее в скобки, чтобы убедиться, что она доступна для использования, а затем немедленно вызываете ее ( # 2 ) . Параметром для вызова функции является объект jQuery . Возвращаясь к объявлению функции, вы видите, что он принимает один параметр, который он вызывает $ . Таким образом, объект jQuery отображается непосредственно на параметр $, и последний может использоваться в теле функции, зная, что он всегда будет ссылаться на jQuery и не будет узурпирован какой-либо другой библиотекой JavaScript.

ПРИМЕЧАНИЕ . Возможно, вы видели, что большая часть кода jQuery заключена вобратный вызов $ (document) .ready (function () {…}) или его сокращенную форму $ (function () {…}) . Это делается для того, чтобы код не выполнялся до тех пор, пока DOM не станет доступным для использования. Вы не оборачиваете свой код плагина в ту же структуру, поскольку хотите, чтобы он выполнялся сразу после загрузки и был впоследствии доступен при нормальной инициализации jQuery. Если вам нужно создать чтотопределах DOMкак часть вашего плагина, следует отложить до тех пор, пока не будетсамом деле нужно,правилокогда ваш плагин применяется к набору элементов или могут быть обернуты в своей собственной document.ready обратного вызова из в плагине.

Используя синглтон

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

Класс определения -как объявлен в JavaScript как функция ( # 1 ) . Имя этой функции внешне не видно из-за использования вами замыкания, поэтому оно не обязательно должно быть единственным именем, которое вы выбрали для плагина. На самом деле, для вашего кода будет немного понятнее, если имя будет другим.

$('#text1').maxlength($.maxlength.regional['fr']);