1. Вступительный анализ
Всем привет! Вы до сих пор помните предыдущую статью ----- начало этой серии (Учебник по разработке плагина JavaScript 1). В основном он рассказывает историю «Как разрабатывать плагины в jQuery»,
Итак, сегодня мы продолжим наше путешествие по разработке плагина со вчерашними вопросами. Предыдущие вопросы следующие:
(1) Если выбор технологии проекта и замена этих плагинов, он опирается на механизм «jQuery», то плагины, которые мы писали ранее, не будут использоваться (при условии, что jQuery не используется), как его рефактор?
(2) Рефакторирование логики ключей плагинов, как мы будем организовать это?
Хорошо, давайте изучим сегодняшнюю статью с вопросами.
Прежде всего, я не отрицаю «метод плагина jQuery», и, во-вторых, нам нужно проанализировать проблему с разных точек зрения, таких как «плагин jQuery имеет следующие преимущества»:
(1) Поместите весь код в закрытие (функция мгновенного выполнения). В настоящее время закрытие эквивалентно частному объему. Внешний не может получить доступ к внутренней информации, и не будет загрязнения глобальных переменных.
(2), а) избегать глобальных зависимостей; б) избегать ущерба третьей стороне; в) совместим с операторами jQuery '$' и «jQuery».
Итак, как мы будем организовать код, какая объектно-ориентированная идея (ООП)? Или мы должны перейти к идее, основанной на процессах? Или это комбинация из двух? Хахаха, продолжай смотреть. Полем Полем Полем Полем Полем
2. Реконструировать вчерашний пример
Ниже приведена часть вчерашней части JS:
Кода -копия выглядит следующим образом:
(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), отобразите информацию о тексту заголовка, которую мы установили.
(2) Динамически получать информацию о контенте с помощью асинхронных средств.
хорошо! Легко обсудить его, если требования ясны. Из приведенного выше кода нетрудно увидеть, что логика свободна, а мышление на основе процессов очевидно, поэтому первый шаг-поместить наши функциональные требования в
Организовывать эффективно в классе. Посмотрите на реформированный код следующим образом:
Кода -копия выглядит следующим образом:
$ (function () {
$ ("#BB"). BigBear ();
});
(function ($) {
$ .fn.bigbear = function (opts) {
opts = $ .extend ({}, $. fn.bigbear.defaults, opts);
вернуть это.
var elem = $ (это);
var bb = new Bigbear (elem, opts);
bb.getelem (). Trigger ("data");
});
};
$ .fn.bigbear.defaults = {
Название: «Это простой тест»,
URL: "data.json"
};
}) (jQuery);
Функция BigBear (elem, Opts) {
this.elem = elem;
this.opts = opts;
this.init ();
};
var bbproto = bigbear.prototype;
bbproto.getelem = function () {
вернуть это.elem;
};
bbproto.getopts = function () {
вернуть это.opts;
};
bbproto.init = function () {
var that = это;
this.getelem (). on ("data", function () {
that._settitle (that.getopts () ["title"]);
$ .get (that.getopts () ["url"], function (result) {
that.getelem (). Найти ("div"). Text (result ["text"]);
});
});
};
bbproto._settitle = function (text) {
this.getelem (). Найти ("span"). Текст (текст);
};
Хахаха, есть гораздо больше кода? Фактически, этот метод состоит в том, чтобы рассмотреть проблему с объектно-ориентированной точки зрения, сначала проанализировать функциональные требования, а затем разработать наш класс. Хотя нам невозможно создать его очень хорошо одновременно.
Тем не менее, перспектива проблемы изменилась, наш код стал более читабельным, и мы можем поддерживать ее лучше, чтобы можно было достичь нашей цели.
Ниже приведено соответствующая реализация исходного кода, выдержка из разделения «Bootstrap», как показано ниже:
Нетрудно видеть, что существуют также аналогичные методы реализации, которые поддерживают основную логику нашего плагина через классы.
(Iii), добавить новые функции и ввести дополнительные классы
Теперь спрос увеличился, и при загрузке данных необходимо быть некоторые изменения в опыте, и при загрузке данных существует эффект «загрузки».
Идея реализации может быть похожа на следующее: установите текст в слово «загружать данные ...» в исходной области контента, а затем ввести новый класс, следующим образом:
Кода -копия выглядит следующим образом:
function alplay () {
};
var olproto = overlay.prototype;
olproto.show = function () {};
olproto.hide = function () {};
// Я не буду записать конкретную реализацию
Хорошо, слой маски уже есть, как мы можем интегрировать его сейчас? Мы получаем доступ к нему в комбинации следующим образом:
Кода -копия выглядит следующим образом:
Функция BigBear (elem, Opts) {
this.elem = elem;
this.opts = opts;
this.Overlay = new Overlay ();
this.init ();
};
var bbproto = bigbear.prototype;
bbproto.getelem = function () {
вернуть это.elem;
};
bbproto.getopts = function () {
вернуть это.opts;
};
bbproto.init = function () {
var that = это;
var loadingText = "загрузка данных ....";
this.getelem (). on ("data", function () {
that._settitle (that.getopts () ["title"]);
that.overlay.show ();
that.getelem (). Найти ("div"). Текст (загрузка текста);
$ .get (that.getopts () ["url"], function (result) {
that.overlay.hide ();
that.getelem (). Найти ("div"). Text (result ["text"]);
});
});
};
bbproto._settitle = function (text) {
this.getelem (). Найти ("span"). Текст (текст);
};
Это только в конце наших функций. Я считаю, что плагин, написанный таким образом, намного лучше, чем первая версия. Конечно, это не оптимальная реализация, и она должна постоянно рефактовать из деталей, но этот метод является необязательным способом разработки плагинов.
Вот полный код:
Кода -копия выглядит следующим образом:
$ (function () {
$ ("#BB"). BigBear ();
});
(function ($) {
$ .fn.bigbear = function (opts) {
opts = $ .extend ({}, $. fn.bigbear.defaults, opts);
вернуть это.
var elem = $ (это);
var bb = new Bigbear (elem, opts);
bb.getelem (). Trigger ("data");
});
};
$ .fn.bigbear.defaults = {
Название: «Это простой тест»,
URL: "data.json"
};
}) (jQuery);
Функция BigBear (elem, Opts) {
this.elem = elem;
this.opts = opts;
this.Overlay = new Overlay ();
this.init ();
};
var bbproto = bigbear.prototype;
bbproto.getelem = function () {
вернуть это.elem;
};
bbproto.getopts = function () {
вернуть это.opts;
};
bbproto.init = function () {
var that = это;
var loadingText = "загрузка данных ....";
this.getelem (). on ("data", function () {
that._settitle (that.getopts () ["title"]);
that.overlay.show ();
that.getelem (). Найти ("div"). Текст (загрузка текста);
$ .get (that.getopts () ["url"], function (result) {
that.overlay.hide ();
that.getelem (). Найти ("div"). Text (result ["text"]);
});
});
};
bbproto._settitle = function (text) {
this.getelem (). Найти ("span"). Текст (текст);
};
function alplay () {
};
var olproto = overlay.prototype;
olproto.show = function () {};
olproto.hide = function () {};
// Я не буду записать конкретную реализацию
Эта статья пока закончилась. У вас есть новое понимание подключаемой разработки JavaScript?