Автор оригинала: Babasanya Craig.
В последнее время как проекты у меня была возможность работать, выросло в масштабе, я нахожу время, чтобы углубиться в проектные шаблоны для написания более ремонтопригодных и масштабируемых кодов JavaScript. Шаблоны дизайна – отличный способ применять время и битвы, протестированные решения общих проблем, чтобы мы могли быстрее и эффективно решать их.
Большинство рисунков дизайна, мы покрываем, основаны на объекте ориентированного на программирование и, как таковые имеются только о том, что мы начнем с того, что мы начнем с того, что мы начнем с того, что мы начнем с того, что начнут взглянуть на то, что называется Cretaction Pattern, потому что рисунок предоставляет нам четкий интерфейс для создания объектов при абстрагировании разнообразная сложность или логика, участвующая в их создании. Этот шаблон называется заводским шаблоном, и он позволяет легко создавать объекты в JavaScript.
Исходя из других ООП, на основе классовых языков, можно испытать соблазн думать, что то, что мы будем делать в строках кода ниже, является создание классов и экземпляров, но на самом деле это просто синтаксический сахар, чтобы выглядеть так, как синтаксис из класса основанный язык.
То, что мы на самом деле делаем, – это используя прототипов JavaScript и OLO – объекты, связанные с другими объектами для создания объектов с общим прототипом. Сам прототип – это просто простой объект JavaScript, а не класс в истинном смысле этого слова. Большое объяснение наследства в JavaScript и его отличия от классического наследования можно найти в статье Эрика Эллиота здесь. Давайте погрузимся в какой-код.
Все примеры этой серии будут доступны в GitHub здесь и включают инструкции для того, как запустить код. Чтобы запустить код в этой статье, вам нужно будет установить узел на вашем компьютере. Следуйте этим инструкциям, если у вас его еще нет. Если вы следуете наряду с REPO, вы найдете инструкции для запуска кода в README.
Первые вещи сначала давайте создадим папку. Мы можем назвать это JavaScript-Design-образцы в этой папке, мы создадим заводскую папку. Фабрика в действии
Фабрика набрасывает конструктор для различных типов объектов и возвращает экземпляры объектов через простой API. Это позволяет легко создавать разные объекты, подвергая простую API, которая возвращает указанный тип объекта. Давайте начнем с создания наших конструкторов. Эти функции будут нести ответственность за возвращение новых объектов определенного типа при вызове.
В заводской папке давайте создадим файл Laptop.js.
const Laptop = function({ ram, hdd, name }) {
this.ram = ram || 0;
this.hdd = hdd || 0;
this.name = name || "";
};
module.exports = Laptop;
В этом файле мы создаем функцию конструктора ноутбука. Он принимает объект в качестве параметра с атрибутами для создания объекта с различными спецификациями, которые мы хотим захватить – в этом случае размер RAM, размер жесткого диска и имя устройства. После этого мы экспортируем функцию конструктора ноутбука из модуля.
Давайте создадим другой файл под названием Tablet.js
Мы сделаем то же самое, но со спецификациями более актуальными для планшета.
const Tablet = function({ ram, hdd, name, network }) {
this.ram = ram || 0;
this.hdd = hdd || 0;
this.network = network || 0;
this.name = name || "";
};
module.exports = Tablet;
Теперь, когда у нас есть наши конструкторы, давайте создадим заводскую функцию, которая вызовет API для создания новых экземпляров этих элементов. Добавить новый файл под названием Gadgetfactory.js
const Laptop = require("./laptop");
const Tablet = require("./tablet");
const gadget = { Laptop, Tablet };
module.exports = {
createGadget(type, attributes) {
const GadgetType = gadget[type];
return new GadgetType(attributes);
}
};
Здесь мы начинаем, импортируя конструкторов для создания объектов ноутбука и планшета. Затем мы создаем объект гаджета, используя имена конструктора в качестве клавиш. Это позволяет нам получить доступ к типу конструктора, который мы хотим использовать Gadget [Type] – где в этом примере тип будет либо «ноутбук», либо «планшет».
Наконец, мы экспортируем объект из этого модуля с помощью метода CreategAdget. Этот метод принимает тип гаджета в качестве первого параметра и вызывает указанный тип конструктора при прохождении в атрибутах к нему.
Вам следует отметить, что когда мы вызываем функцию с новым ключевым словом в JavaScript, мы получаем обратный пустой объект с этим привязкой, установленным на один в функции выполнения. Этот уникальный вызов также создаст прототипическую связь между функцией конструктора и любыми новыми объектами, которые мы создаем таким образом. Мы увидим это подробно в других шаблонах проектирования, мы охватившим.
Также достойно примечания, заключается в том, что столичная первая буква – это только конвенция, а не требование. Это не делает ничего особенного, и мы могли бы просто имели название функций с камерой камеры, поскольку обычно делаем с другими именами переменной и функционирования в JavaScript.
На данный момент мы теперь можем создать файл, который будет использовать (или потреблять) нашим заводским шаблоном API.
Создайте файл index.js и добавьте следующий код.
const gadgetFactory = require("./gadgetFactory");
const myLaptop = gadgetFactory.createGadget("Laptop", {
ram: 8,
ssd: 256,
name: "Bab's MacBook Pro"
});
const myTablet = gadgetFactory.createGadget("Tablet", {
ram: 4,
hdd: 128,
name: "Bab's iPad",
network: '4G'
});
console.log(myLaptop);
console.log(myTablet);
Первое, что вы можете заметить, это то, что в этом файле нам не требуют конструкторов для ноутбуков и таблеток напрямую. Все, что нам нужно требовать, это модуль GadgetFactory (с этим методом CreategAdget). Используя этот метод, мы тогда создаем два экземпляра ноутбука и планшета соответственно и введите их в консоль.
Сейчас в вашем терминале перейдите к папке JavaScript-Design-Paills и Type:
$ Node ./factory/index.js.
Вы должны увидеть следующее, зарегистрированную в консоль:
Laptop { ram: 8, ssd: 256, name: 'Bab\'s MacBook Pro' }
Tablet { ram: 4, hdd: 128, network: '4G', name: 'Bab\'s iPad' }
Как видите, мы создали один тип объекта ноутбука, а также тип таблеток, каждый из которых со своими собственными спецификациями. Используя этот шаблон, вы можете создать столько объектов Gadget, сколько вам требуется с собственными спецификациями.
И это это для фабрики. Это довольно упрощенная реализация, конечно, и в чем-либо, кроме тривиального приложения, которое вы определенно хотите включить более строгое логику – вокруг ваших конструкторов.
В этом примере мы использовали функции конструктора JavaScript, но этот шаблон также может быть реализован с использованием прототипов.