Что такое шаблон
Я готовился к выпускному экзамену некоторое время назад, но это был кропотливый человек, и я был очень занят. У меня не было времени, чтобы обновить статью. Сегодня я расскажу вам о шаблонах дизайна в JavaScript.
Прежде всего, нам нужно знать, что паттерн-это повторное решение, в то время как анти-паттерн является плохим решением определенной проблемы.
Общие примеры анти-паттернов JS
1. Пропустите строки в установку и SetInterval, а не функции, которые запускают внутреннее использование eval ().
2. Определите большое количество переменных в глобальном контексте для загрязнения глобального пространства имен
3. Измените прототип класса объекта
4. Используйте JS Inline, а код JS, встроенный в HTML -файлы, не может быть включен в инструменты внешнего модульного тестирования.
5. Насильственное документ.write. Если вы выполняете Document.Write после загрузки страницы, она переписывает страницу, на которой мы находимся. Если вы можете использовать Document.CreatElement, попробуйте не использовать Document.Write.
Категория дизайнерских шаблонов
Создание шаблона дизайна
Творческие шаблоны дизайна сосредоточены на обработке механизмов создания объектов, чтобы создавать объекты таким образом, чтобы это соответствовало данной ситуации. Атрибуты, которые попадают в эту категорию, включают:
Конструктор конструктор, заводская фабрика, абстрактная абстракция, прототип прототипа, генератор Singleton Singleton и Builder
Структурный дизайн
Структурные паттерны связаны с комбинациями объектов и часто могут использоваться для поиска простых способов установления отношений между различными объектами.
Шаблоны, которые попадают в эту категорию, включают:
Декоратор декоратор, внешний вид фасада, энциклопедия, адаптер адаптер и прокси -сервер
Шаблон дизайна поведения
Модели поведения сосредоточены на улучшении или упрощении связи между различными объектами в системе.
Паттерны поведения включают в себя:
Итератор итератор, посредник посредника, наблюдатель наблюдателей и посетителя посетителя
Заводский режим
Чтобы решить проблему нескольких аналогичных объявлений объектов, мы можем использовать метод, называемый заводским шаблоном, который должен решить проблему создания объектов с большим количеством дублирования.
Кода -копия выглядит следующим образом:
<script type = "text/javascript">
Функция createObject (имя, возраст, профессия) {// Центральная созданная функция {//
var obj = new Object ();
obj.name = name;
obj.age = возраст;
obj.profession = профессия;
obj.move = function () {
вернуть это.
};
вернуть OBJ;
}
var test1 = createObject ('trigkit4', 22, 'Programmer'); // Первый экземпляр
var test2 = createObject ('mike', 25, 'инженер'); // Второй экземпляр
Alert (test1.move ());
Alert (test2.move ());
</script>
Категория заводской модели
Заводской шаблон разделен на простые фабрики, абстрактные фабрики и умные фабрики. Заводской шаблон требует использования конструктора, не отображая его.
Простая заводская шаблон: используйте класс (обычно мономер), чтобы генерировать экземпляр.
Сложный заводской шаблон: используйте подклассы, чтобы определить, какой конкретный экземпляр класса должна быть переменная элемента.
Преимущества заводской модели
Основное преимущество заключается в том, что он может устранить связь между объектами с помощью инженерных методов вместо новых ключевых слов. Концентрируйте весь созданный код в одном месте, чтобы предотвратить дублирование кода.
Недостатки заводской модели
Большинство классов лучше всего используются с новыми ключевыми словами и конструкторами, которые могут облегчить чтение кода. Вместо того, чтобы проверить фабричный метод, чтобы знать.
Заводская шаблон решает проблему повторного экземпляра, но есть другая проблема, то есть определение проблемы, потому что невозможно выяснить, какой экземпляр объекта они.
Кода -копия выглядит следующим образом:
оповещение (TypeOf test1); //Объект
Alert (Test1 EncementOf объекта); //истинный
Когда использовать фабричный режим?
Заводский режим в основном используется в следующих сценариях:
1. Когда объект или компонент включает в себя высокую сложность
2. Когда необходимо легко генерировать различные экземпляры объектов в соответствии с различными средами, в которых они находятся
3. Когда дело со многими небольшими объектами или компонентами, которые имеют одинаковые атрибуты
Режим конструктора
В Ecmascript конструкторы (конструкторы) могут использоваться для создания конкретных объектов. Этот режим может просто решить проблему, которую вышеуказанный заводский режим не может распознать экземпляры объектов.
Кода -копия выглядит следующим образом:
<script type = "text/javascript">
Функциональный автомобиль (модель, год, миль) {// режим конструктора
this.model = модель;
this.year = год;
this.miles = miles;
this.run = function () {
вернуть это. Model + "сделал" + this.miles + "Miles";
}
}
var benz = new Car ('Benz', 2014, 20000);
var bmw = new Car ("BMW", 2013,12000);
Блюдо (экземпляр Benz); // я ясно идентифицирую это как подчиненное автомобилю, истинно
console.log (benz.run ());
console.log (bmw.run ());
</script>
Использование метода конструктора решает проблему повторного экземпляра и проблему распознавания объектов. Разница между этой моделью и заводской схемой состоит в том, чтобы:
1. Создать объект (новый объект ()), который не отображается методом конструктора;
2. Прямо присваивать атрибуты и методы этому объекту;
3. Нет ответа.
Есть некоторые спецификации для методов конструктора:
1. Имя функции и созданный конструктор одинаковы и заслужены (PS: не обязательнее, но написание это помогает различать конструкторы и обычные функции);
2. Чтобы создать объект через конструктор, должен использоваться новый оператор.
Поскольку объект может быть создан с помощью конструктора, откуда взялся этот объект и откуда был выполнен новый объект ()? Процесс выполнения следующим образом:
1. Когда используется конструктор и используется новый конструктор (), тогда новый объект () выполняется на заднем плане;
2. Область конструктор к новому объекту (то есть объект, созданный New Object ()), и это в корпусе функции представляет объект, созданный New Object ().
3. Выполнить код в конструкторе;
4. вернуть новый объект (вернуть непосредственно в фоновом режиме).
Конструктор с прототипом (конструктор)
В JS есть собственность, называемая прототипом. После вызова конструктора JS для создания объекта новый объект будет обладать всеми свойствами прототипа конструктора. Таким образом, можно создать несколько автомобильных объектов, и можно получить доступ к одному и тому же прототипу.
Кода -копия выглядит следующим образом:
<script type = "text/javascript">
Функциональный автомобиль (модель, год, миль) {
this.model = модель;
this.year = год;
this.miles = miles;
}
Car.prototype.run = function () {
вернуть это. Model + "сделал" + this.miles + "Miles";
};
var benz = new Car ('S350', 2010,20000);
var ford = new Car ('Ford', 2012,12000);
console.log (benz.run ()); // "S350 сделал 20000 миль"
console.log (ford.run ());
</script>
Теперь один экземпляр run () может быть разделен среди всех автомобильных объектов.