1. Вступительный анализ
Всем привет! Сегодняшняя серия статей в основном рассказывает о том, как разработать разработку плагина на основе «JavaScript». Я думаю, что многие люди не незнакомы со словом «плагин».
Некоторые люди могут назвать это «компонентом» или «компонентом», что не важно. Ключ в том, чтобы взглянуть на то, как проектировать и как сделать всеобъемлющее рассмотрение. Это концепция, на которой фокусируется эта статья. Я думаю, что все правы
У меня есть определенное понимание «метода плагина jQuery». Мы обсудим это вместе на основе этой темы и, наконец, даем соответствующие планы реализации, чтобы постоянно улучшать наши способности.
2. Введите тему плагина
Вообще говоря, разработка плагинов jQuery делится на два типа: один-глобальная функция, висящая в пространстве имен jQuery, которое также можно назвать статическим методом.
Другим методом является метод уровня объекта jQuery, то есть метод, висевший под прототипом jQuery, так что экземпляры объекта jQuery, полученные через селектор, также могут делиться методом.
(1), разработка плагина на уровне класса
Самое прямое понимание плагина на уровне класса-добавление методов класса в класс «jQuery», который можно понимать как добавление статических методов. Типичным примером является функция «$ .ajax ()», которая определяет функцию в пространстве имен jQuery. О разработке плагина на уровне класса может быть расширена в следующих формах:
1.1 Добавить глобальную функцию, нам нужно только определить ее следующим образом и увидеть код:
Кода -копия выглядит следующим образом:
$ .Hello = function () {
оповещение («Привет, Большой Медведь!»);
};
1.2 Добавьте несколько глобальных функций, которые можно определить следующим образом:
Кода -копия выглядит следующим образом:
$ .extend ({
Привет: функция (имя) {
// Поместите свой код сюда
},
World: function () {
// Поместите свой код сюда
}
});
Описание: «$ .Extend (Target, [Object1], [ObjectN])» (этот метод в основном используется для объединения содержимого (атрибутов) двух или более объектов с первым объектом и возврата объединенного первого объекта.
Если метод имеет только одну цель параметра, параметр расширит пространство имен jQuery, то есть он будет повешен под глобальным объектом jQuery в качестве статического метода).
(2), разработка плагина на уровне объекта
Разработка плагина на уровне объекта требует двух форм:
2.1 Динамически устанавливает соответствующие атрибуты через «$ .fn.extend ()» в качестве прототипа.
Кода -копия выглядит следующим образом:
(function ($) {
$ .fn.extend ({
PluginName: function (Opts) {
// Поместите свой код сюда
}
});
}) (jQuery);
2.2 напрямую добавить динамические атрибуты в цепочку прототипа.
Кода -копия выглядит следующим образом:
(function ($) {
$ .fn.pluginname = function () {
// Поместите свой код сюда
};
}) (jQuery);
Позвольте мне объяснить: эти два эквивалентны. Для плагина jQuery базовая функция может работать хорошо, но для более сложных плагинов необходимо предоставить различные методы и частные функции.
Вы можете использовать различные пространства имен для предоставления различных методов для вашего плагина, но добавление слишком большого количества пространства имен сделает код грязным и менее надежным. Таким образом, лучшее решение - соответствующим образом определить частные функции и методы.
Таким образом, мы реализуем моделируемый частный плагин, объединив функции самостоятельного выполнения с закрытыми, как в нашем примере выше.
(Iii), давайте приведем простой пример, чтобы увидеть процесс реализации:
(1), код фрагмента «HTML» выглядит следующим образом:
Кода -копия выглядит следующим образом:
<div id = "bb">
<pran> </span>
<div
Style = "Margin-Top: 10px;
маржиновый бат: 30px; "
> 8 </div>
</div>
(2), определение «data.json» заключается в следующем:
Кода -копия выглядит следующим образом:
{
"Текст": "Здравствуйте, Big Bear {{bb}}!" ;
}
(3), код "bb.js" выглядит следующим образом:
Кода -копия выглядит следующим образом:
$ (function () {
$ ("#BB"). BigBear ();
});
(function ($) {
$ .fn.bigbear = function (opts) {
opts = $ .extend ({}, $. fn.bigbear.defaults, opts);
вернуть это.
var elem = $ (это);
elem.find ("span"). Текст (Opts ["title"]);
$ .get (opts ["url"], function (data) {
elem.find ("div"). Text (data ["text"]);
});
});
};
$ .fn.bigbear.defaults = {
Название: «Это простой тест»,
URL: "data.json"
};
}) (jQuery);
Эффект бега:
Давайте обобщу :
(1) «$ .fn.bigbear.defaults» предоставляет параметры параметра по умолчанию для плагина. Плагин с хорошей расширяемостью должен позволить пользователям настраивать параметры параметров в соответствии с их потребностями и управлять поведением плагина, поэтому необходимо предоставить восстановленные параметры по умолчанию. Вы можете установить эти параметры с помощью метода расширения JQUERY.
(2), «вернуть это. Это одна из нескольких отличных функций jQuery, и даже если вы не готовы предоставить многоэлементную поддержку вашего плагина во время разработки, подготовка к этому все еще является отличным способом. Кроме того, JQuery имеет хорошую функцию, которая может выполнять каскады методов, которые также можно назвать цепными вызовами, поэтому мы не должны уничтожать эту функцию и всегда возвращать элемент в методе.
(Iv), окончательное резюме
(1) jQuery представила два метода для плагина разработки, а именно: jQuery.fn.extend (Object); Добавьте метод в объект jQuery.
jQuery.extend (Object); Добавляет новые методы в класс, чтобы расширить сам класс jQuery.
(2) Поместите весь код в закрытие (функция мгновенного выполнения). В настоящее время закрытие эквивалентно частному объему. Внешний не может получить доступ к внутренней информации, и не будет загрязнения глобальных переменных. Официальные спецификации развития объясняются: а) избегать глобальных зависимостей; б) избегать ущерба третьей стороне; в) совместимы с операторами jQuery '$' и «jQuery».
(3) Предоставьте параметры параметра по умолчанию для плагина. Плагин с хорошей расширяемостью должен позволить пользователям настраивать параметры параметров в соответствии с их потребностями и контролировать поведение плагина. Следовательно, необходимо предоставить восстановленные параметры по умолчанию. Вы можете установить эти параметры с помощью метода расширения JQUERY
(4), Итерация через несколько элементов и возвращайте jQuery, используя двигатель Sizzle Selecter, Sizzle может предоставить многоэлементные операции для ваших функций (например, элементы с одним именем класса). Это одна из нескольких отличных функций jQuery, и даже если вы не готовы предоставить многоэлементную поддержку вашего плагина в процессе разработки, подготовка к этому все еще является хорошей практикой. Кроме того, JQuery имеет хорошую функцию, которая может выполнять каскады методов, которые также можно назвать цепными вызовами, поэтому мы не должны уничтожать эту функцию и всегда возвращать элемент в методе.
(5) Важно разместить одноразовый код за пределами основного цикла, но его часто игнорируют. Проще говоря, если у вас есть кусок кода, который представляет собой кучу значений по умолчанию, которые необходимо создать только один раз, вместо того, чтобы создать экземпляр каждый раз, когда вы называете функцию плагина, вы должны поместить этот код за пределами метода плагина.
(6) После обучения давайте подумаем об этом. Если выбор технологии проекта и замена этих плагинов, он опирается на механизм «jQuery», плагины, которые мы уже написали ранее, не будут использоваться (при условии, что jQuery не используется). Как это рефактор?
Завтрашняя статья расскажет об этом выпуске и будет рефакторировать логику ключа плагина, так что следите за обновлениями. Полем Полем