Шаблоны проектирования JavaScript
Шаблоны проектирования JavaScript: шаблон модуля
Как следует из названия, этот шаблон в основном делит код на несколько небольших частей, которые мы можем повторно использовать.
Допустим, у нас есть такой код, который просто манипулирует некоторыми пользовательскими свойствами.
// input.js
const user = {
name: 'John Doe',
type:"admin",
location: 'New York'
}
const GetUserDispaly = (user) => {
return {
name: user.name.charAt(0).toUpperCase() + user.name.slice(1),
userName:user.name.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (m, chr) => chr.toUpperCase()),
location: user.location.toLowerCase(),
type: user.type.toUpperCase()
}
}
const obj = GetUserDispaly(user);
console.log(obj)
// {
name: 'John Doe',
userName: 'johnDoe',
location: 'new york',
type: 'ADMIN'
}
В настоящее время логика используется непосредственно в основном коде,
но скажем, если вы хотите использовать эти функции где-то еще, тогда мы также должны переписать код.
Решение :
// stringUtils.js
exports.lowerCase =(str) => {
return str.toLowerCase();
}
exports.upperCase =(str) => {
return str.toUpperCase();
}
exports.capitalize =(str) => {
return str.charAt(0).toUpperCase() + str.slice(1);
}
exports.camelCase = (str) => {
return str.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (m, chr) => chr.toUpperCase())
}
//index.js
const {camelCase, capitalize, lowerCase, upperCase} = require('./stringUtils');
const user = {
name: 'John Doe',
type: 'admin',
location: 'New York',
};
const GetUserDispaly = user => {
return {
name: capitalize(user.name),
userName: camelCase(user.name),
location: lowerCase(user.location),
type: upperCase(user.type),
};
};
const obj = GetUserDispaly(user);
console.log(obj);
Преимущества
- В другие файлы доступны только те значения, которые явно экспортированы с помощью ключевого слова
export. - Шаблон модуля позволяет иметь как общедоступные, так и частные части с ключевым словом
export. Это предотвращает утечку значений в глобальную область видимости или конфликт имен.
