1. Вступительный анализ
Что мы говорим в этой статье сегодня? Хе -хе -хе. Затем мы реконструировали недостатки в предыдущей статье и проанализировали их шаг за шагом легко в понимании, чтобы каждый мог улучшить шаг за шагом. Меньше чепухи, дойди до сути. Давайте сначала рассмотрим предыдущий
Код детали JS выглядит следующим образом:
Кода -копия выглядит следующим образом:
Функция electionelector (elem, opts) {
this.elem = elem;
this.opts = opts;
};
var iSproto = itemselector.protototype;
Isproto.getelem = function () {
вернуть это.elem;
};
Isproto.getopts = function () {
вернуть это.opts;
};
/* Манип данных*/
Isproto._setcurrent = function (current) {
this.getopts () ["current"] = current;
};
Isproto.getCurrentValue = function (current) {
вернуть это.getopts () ["current"];
};
/* Манип данных*/
Isproto.init = function () {
var that = это;
this.getopts () ["current"] = null; // курсор данных
this._setitemvalue (this.getopts () ["currentText"]);
var letsElem = this.getElem (). Найти (". Content .Items");
this.getelem (). Найти (". заголовок div"). On ("click", function () {
itemselem.toggle ();
});
this.getelem (). Найти (". заголовок"). On ("click", function () {
itemselem.toggle ();
});
$.
item ["id"] = (new date (). gettime ()). toString ();
это._render (item);
});
};
Isproto._setitemvalue = function (value) {
this.getelem (). Найти (". заголовок div"). Text (value)
};
Isproto._render = function (item) {
var that = это;
var itemelem = $ ("<div> </div>")
.text (item ["text"])
.attr ("id", item ["id"]);
if ("0" == item ["отключен"]) {
itemelem.on ("click", function () {
var onChange = that.getOpts () ["изменение"];
that.getelem (). Найти (". Content .Items"). Hide ();
that._setitemvalue (item ["text"]);
that._setcurrent (item);
Onchange && onchange (item);
})
.mouseOver (function () {
$ (this) .AdDClass ("Hover");
})
.mouseOut (function () {
$ (this) .RemoveClass ("Hover");
});
}
еще{
itemelem.css ("color", "#ccc"). On ("click", function () {
that.getelem (). Найти (". Content .Items"). Hide ();
that._setitemvalue (item ["text"]);
});
}
itemelem.appendto (this.getelem (). find (". content .items")));
};
Эффект показан на рисунке ниже:
а) -------- Необеспечиваемое состояние
б) ------ Операбельное состояние
(Ii) Откройте свои идеи и реконструируйте
Вам не сложно увидеть из кода, что он был эффективно организован объектно-ориентированным образом посредством синтаксических характеристик в «JS», что намного лучше, чем метод организации, основанный на процессах, но вы все равно найдете много недостатков.
(1) В нем слишком много повторений
(2) разделение обязанностей неясно
(3) Процесс не завершен
Мы эффективно рефактировали на основе вышеуказанных пунктов. Во -первых, нам нужно разобраться в требованиях этого компонента, а функциональные точки следующие:
(1) Инициализировать компонент конфигурации
Кода -копия выглядит следующим образом:
$ (function () {
var itemselector = new itemselector ($ ("#item-selector"), {
CurrentText: «Пожалуйста, выберите элемент»,
предметы: [
{
Текст: "JavaScript",
Значение: "JS",
инвалид: "1"
},
{
Текст: "CSS",
Значение: "CSS",
инвалид: "0"
},
{
Текст: "html",
значение: "html",
инвалид: "0"
}
],
});
itemelector.init ();
});
Этот код очень ясен и не требует каких -либо изменений, но вы можете расширить функции на основе приведенной выше конфигурации, таких как добавление элемента конфигурации «режим» для поддержки нескольких параметров. Например: «Режим проверки флажки».
Далее следует завершить логику инициализации следующим образом:
Кода -копия выглядит следующим образом:
Isproto.init = function () {
var that = это;
this.getopts () ["current"] = null; // курсор данных
this._setitemvalue (this.getopts () ["currentText"]);
var letsElem = this.getElem (). Найти (". Content .Items");
this.getelem (). Найти (". заголовок div"). On ("click", function () {
itemselem.toggle ();
});
this.getelem (). Найти (". заголовок"). On ("click", function () {
itemselem.toggle ();
});
$.
item ["id"] = (new date (). gettime ()). toString ();
это._render (item);
});
};
Этот код имеет много проблем, неясных обязанностей, а логика инициализации содержит подробные реализации функциональных точек.
Продолжайте видеть код рендеринга:
Кода -копия выглядит следующим образом:
Isproto._render = function (item) {
var that = это;
var itemelem = $ ("<div> </div>")
.text (item ["text"])
.attr ("id", item ["id"]);
if ("0" == item ["отключен"]) {
itemelem.on ("click", function () {
var onChange = that.getOpts () ["изменение"];
that.getelem (). Найти (". Content .Items"). Hide ();
that._setitemvalue (item ["text"]);
that._setcurrent (item);
Onchange && onchange (item);
})
.mouseOver (function () {
$ (this) .AdDClass ("Hover");
})
.mouseOut (function () {
$ (this) .RemoveClass ("Hover");
});
}
еще{
itemelem.css ("color", "#ccc"). On ("click", function () {
that.getelem (). Найти (". Content .Items"). Hide ();
that._setitemvalue (item ["text"]);
});
}
itemelem.appendto (this.getelem (). find (". content .items")));
};
Проблема очевидна. Повторяемые операции были найдены, и должна быть выполнена разумная абстракция, и цель повторного использования была достигнута.
Весь процесс строительства включает в себя инициализацию, рендеринг (связывание событий), а также соответствующие методы работы данных и вспомогательные методы операций DOM.
Подводя итог, после простой сортировки мы должны установить рабочую цель функции и назначение задачи основной линии процесса, каждая из которых будет нести ответственность за его собственные обязанности.
Таким образом, цель нашей реконструкции очень ясна, верно! Это для абстрактных функциональных моментов и разделения обязанностей на дружеское разделение, так как же мы это достигли?
Первый шаг - установить функции процесса: (интерфейс метода)
Кода -копия выглядит следующим образом:
Isproto.init = function () {
// Поместите вас код здесь!
};
Isproto._render = function () {
// Поместите вас код здесь!
};
Часть 2: установить интерфейс абстрактного метода:
Кода -копия выглядит следующим образом:
Isproto._fnitemlecelectordelegatehandler = function () {
// Поместите вас код здесь!
};
Isproto._fntriggerhandler = function () {
// Поместите вас код здесь!
};
Isproto._addormoveclass = function () {
// Поместите вас код здесь!
};
Третий шаг - установить интерфейс операции данных:
Кода -копия выглядит следующим образом:
Isproto._setcurrent = function () {
// Поместите вас код здесь!
};
Isproto._getCurrent = function () {
// Поместите вас код здесь!
};
Есть также некоторые ссылки на полный исходный код ниже, что является просто идеей, упомянутой здесь.
(Iii), полный код для обучения, этот код был протестирован
Кода -копия выглядит следующим образом:
Функция electionelector (elem, opts) {
this.elem = elem;
this.opts = opts;
this.current = -1; // курсор данных
};
var iSproto = itemselector.protototype;
/* Getter API*/
Isproto.getelem = function () {
вернуть это.elem;
};
Isproto.getopts = function () {
вернуть это.opts;
};
Isproto._getCurrent = function () {
вернуть это.current;
};
/* Getter API*/
/* Манип данных*/
Isproto._setcurrent = function (current) {
this.current = current;
};
Isproto._setitemtext = function (text) {
this.getelem (). Найти (". Название div"). Текст (текст);
};
/* Манип данных*/
/ * Обновление на 2015 г. 1/31 23:38 */
Isproto._fntriggerhandler = function (index, text, value) {
if (this._isdisabled (value)) {
index = -1;
text = this.getopts () ["currentText"];
}
this._setitemtext (text);
this._setcurrent (index);
this.getelem (). Найти (". Content .Items"). Hide ();
};
Isproto._addormoveclass = function (elem, classname, addis) {
if (addis) {
elem.addclass (classname);
}
еще{
elem.removeclass (classname);
}
};
Isproto._fnitemlecelectordelegatehandler = function () {
var that = это;
this.getelem (). on ("click", "[data-toggle]", function () {
that.getelem (). найти (". Content .Items"). Toggle ();
});
};
Isproto._isdisabled = function (value) {
return ("1" == Значение)? Верно: Неверно;
};
/ * Обновление на 2015 г. 1/31 23:38 */
Isproto.init = function () {
var that = это;
this._fnitemelectordelegatehandler ();
$.
item ["index"] = i;
это._render (item);
});
this._fntriggerhandler (this._getCurrent (), this.getopts () ["currentText"], "1");
};
Isproto._render = function (item) {
var that = это;
var itemelem = $ ("<div> </div>"). Text (item ["text"]). attr ("id", item ["index"]);
var activeClass = ("0" == item ["Отключен"])? "Hover": "item-disabled-hover";
itemelem.on ("click", function () {
that._fntriggerhandler (item ["index"], item ["text"], item ["disablet"]);
})
.mouseOver (function () {
that._addormoveclass ($ (this), activeClass, true);
})
.mouseOut (function () {
that._addormoveclass ($ (this), activeClass, false);
});
itemelem.appendto (this.getelem (). find (". content .items")));
};
(Iv), окончательное резюме
(1) Разумный анализ функциональных требований в объектно-ориентированном образе мышления.
(2), организуйте нашу логику плагина в классе.
(3) Непрерывно реконструировать приведенные выше примеры, как разумно реконструировать это? Не перепроектируйте, будьте спокойны. Рекомендуемый метод состоит в том, чтобы объединить дизайн процесса с объектно-ориентированным дизайном мышления.
(4) Следующая статья будет расширять связанные функции, такие как свойство «Режим». Когда это «1», он поддерживает режим многопользования флажки, но теперь это только раскрывающийся режим по умолчанию.
Глядя на мою статью, это намного лучше, чем предыдущий код? Друзья должны думать о себе и делать больше проектов и стараться сделать свой собственный код более разумным.