Автор оригинала: Catalin Tudorache.
Самый простой код, чтобы поддерживать, это код, который вы никогда не пишете
Вы, наверное, знаете это поговорка. Мне всегда нравилось держать свой код чистым и лаконичным, надеясь, что это поможет людям, которые позаботятся о проекте в будущем. Это позволило бы мне принести мне пользу, если бы я сохраню этот проект, потому что я могу забыть некоторые аспекты и пропустить прочесть кодовую базу, дает всем хорошую стартую голову. Посмотрим, как вы можете Написать меньше JS Код и проще прочитать/поддерживать/DEBUG Project.
Примечание: В этой статье представлена коллекция известных концепций и некоторых соответствующих примеров.
Оглавление:
- Шаблонные строки
- foreach, карта и уменьшение
- Функции стрелки
- async/a ждать
- Утилита библиотеки: Лоташ, подчеркивание
1. Шаблонные строки
Это легкий, и вы, вероятно, уже его используете. Вместо использования + Для объединения строк и переменных вы можете использовать синтаксис Back-Tick (`).
console.log('My name is ' + name + ' and I\'m ' + age + ' years old.')
// becomes
console.log(`My name is ${name} and I'm ${age} years old.`)
Обратите внимание, как $ {} используется для вставки Переменные в строковый шаблон.
Вы всегда можете делать основные операции или использовать Условный тройной оператор В число фигурных скобок:
console.log(`x + y = ${x + y}`)
console.log(`You ${ age >= 18 ? 'can' : 'can\'t' } drive`)
Еще одна прохладная вещь, которую вы можете сделать с этим синтаксисом, создает многоровный строки.
const multiline = ` This is just another multiline string. `
Больше информации о шаблонах строки .
2. Foreach, карта и уменьшение
а. для каждого
Прошло долгое время, так как я написал для петля в JavaScript. Давайте сравним это с foreach Отказ
const books = [
{name: 'How to win friends and influence people', year: 1936},
{name: 'The Four Steps to the Epiphany', year: 2005},
{name: 'Brave New World', year: 1932}
]
// traditional for loop
let step;
for (step = 0; step < books.length; step++) {
console.log(books[step].name);
}
// forEach loop
books.forEach(function(book) {
console.log(book.name);
});
foreach будет работать на каждом массиве в JavaScript.
Подробнее о foreache. .
б. карта
карта Работает на массивах (как foreach) и это Возвращает новый массив Получается от вызова предоставленной функции на каждом элементе в начальном массиве. Конечно, вы могли бы сделать это с для или foreach Но карта обеспечивает простейший синтаксис.
let upperCaseBookTitles = [];
books.forEach(function(book) {
upperCaseBookTitles.push(book.name.toUpperCase());
});
console.log(upperCaseBookTitles)
// ['HOW TO WIN FRIENDS AND INFLUENCE PEOPLE', 'THE FOUR STEPS TO THE EPIPHANY', 'BRAVE NEW WORLD']
upperCaseBookTitles = books.map(function(book) {
return book.name.toUpperCase();
});
console.log(upperCaseBookTitles)
// ['HOW TO WIN FRIENDS AND INFLUENCE PEOPLE', 'THE FOUR STEPS TO THE EPIPHANY', 'BRAVE NEW WORLD']
Подробнее о карте.
с. уменьшать
Уменьшить действительно полезен, когда вам нужно Уменьшите массив на значение/объект Отказ Это относится к так называемому Редуктор Функция (предоставлена вами) на каждом значении в вашем массиве.
Допустим, мы хотим получить новейшую книгу в нашем массиве. Вот как вы это делаете с Уменьшить Отказ (Это глупый пример, но вы получаете идею)
let newestBook = books.reduce(function (acc, cur) {
if (acc.year < cur.year) acc = cur;
return acc;
}, {year: 0});
Первый параметр функции Уменьшить это Редуктор функция. У него есть 2 параметра:
- ACC Аккумонт – где мы положили значение, мы пытаемся получить
- Cur The Текущий Артикул Accessible на каждой итерации Второй параметр
Уменьшитьявляется начальным значением аккультора.
Как я уже говорил, мы могли бы получить тот же результат с для или foreach Отказ
Больше информации о сокращении.
3. Функции стрелки
Некоторые примеры сначала.
function() {}
// becomes
() => {}
function sum(a,b) {
return a + b;
}
// becomes
const sum = (a,b) => a + b // notice how return and the curly brackets can be dropped if the function body has only one line
function (x) {
return x;
}
// becomes
(x) => { return x; }
// or even better
x => x // the brackets are not mandatory if the function has only one argument
В двух словах были представлены функции стрелки, чтобы предложить Более короткий синтаксис и решить Несколько эта проблема (который происходит особенно при выполнении ООП)
Теперь давайте посмотрим, как мы можем использовать этот синтаксис с foreach , карта и Уменьшить Функции.
для каждого
books.forEach(function(book) {
console.log(book.name);
});
// becomes
books.forEach(book => console.log(book.name));
карта
upperCaseBookTitles = books.map(function(book) {
return book.name.toUpperCase();
});
// becomes
upperCaseBookTitles = books.map(book => book.name.toUpperCase());
Уменьшить Мы можем преобразовать редуктор, используя Условный тройной оператор и получить одноклассник.
let newestBook = books.reduce(function (acc, cur) {
if (acc.year < cur.year) acc = cur;
return acc;
}, {year: 0});
// becomes
let newestBook = books.reduce((acc, cur) => acc.year < cur.year ? cur : acc, { year: 0 });
На данный момент я думаю, что вы можете получить представление о том, сколько вы можете достичь, сочетая foreach , карта и Уменьшить со стрелками функциями.
Подробнее о функциях стрелки.
4. async/ждать
Обратный вызов Ад это реально. Вы, вероятно, оказались в ситуации, когда вы должны были пройти обратные вызовы, чтобы убедиться, что код выполняется в нужный момент. Это нормально, но если проект растет вас (а другие), будет трудно прочитать код.
Давайте увидимся в действии! Примечание: Рассмотрите GetResourcea, GetResourceb и GetResourcec являются асинхронизанными функциями.
getResourceA(function(error, resourceA) {
if (!error) {
getResourceB(function(error, resourceB) {
if (!error) {
getResourceC(function(error, resourceC) {
if (!error)
console.log('Resources', resourceA, resourceB, resourceC);
else {
// do something with error
}
})
} else {
// do something with error
}
})
} else {
// do something with error
}
})
Первое решение для обратного вызова ада было Обещание Отказ Я использовал много обещаний в моей работе, и это Хорошее решение И я определенно рекомендую попробовать это. Но теперь мы сосредоточимся на Async/ждут.
Первый шаг – это Определите свои функции async используя async ключевое слово.
async function getResourceA() {
try {
let users = await fs.readFile('/etc/passwd', 'utf8');
// note: readFile is async and it can be called with await
// you can use await only within an async function
} catch (err) {
throw err;
}
return users;
}
async function getResourceB {...}
async function getResourceC {...}
Затем все, что вам нужно сделать, это вызвать вновь созданные асинхронные функции, используя ждать Отказ
try {
let resourceA = await getResourceA();
let resourceB = await getResourceB();
let resourceC = await getResourceC();
// use resources as you wish
} catch (err) {
console.error('Something went wrong: ', err);
}
Это хорошая практика, чтобы обернуть свои асинхронистые вызовы в блоках Try-Catch. Я позволю вам сравнить код и выбрать, какой вам нравится.
Подробнее о Async/ждут.
5. Утилита библиотеки: Лоташ, подчеркивание, Ramda
Я настоятельно рекомендую вам проверить подчеркивание или Лоташ Отказ Если вам интересно, в чем разница между ними проверяет это Ответ на стойке.
Вы можете увидеть Loadash/подчеркивание в качестве панели инструментов расширенных функций, готовых помочь вам в различных сценариях, таких как: работа с массивами, объектами или строками. Посмотрите на свои документы, и вы найдете несколько действительно мощных функций.
Лично я начал экспериментировать с Рамда Потому что я заинтересован в Функциональное прогрессирование Отказ Я не могу рекомендовать достаточно этого серии Blogpost под названием Думать в Рамде Отказ
Зачем использовать библиотеку утилиты?
Прежде всего, вы в конечном итоге пишут меньше кода. Одинаково важно, это силы Вы должны соответствовать их API, и это приводит к гораздому уборщику и читаемому коду. Это также может вдохновить вас создавать свои собственные правила стиля кодирования.
Выводы
Меньше – больше. Но вы не должны поставить под угрозу ясность ради написания меньшего количества кода. Хороший разработчик не пишет код, который узнавает только для него; Хороший разработчик пишет код, который можно понять командой или разработчиком, который продолжит свою работу.
Оставаться в курсе, Экспериментировать новые вещи и держите те, которые работают для вас.
Дайте мне знать, что отсутствует в этом списке. Какие другие Техника Вы используете, чтобы написать лаконичные JS?
Код на!