Создание метода также означает написание API — будь то для вас, другого разработчика в вашей команде или других разработчиков, использующих ваш проект. В зависимости от размера, сложности и назначения вашей функции, вы должны думать о настройках по умолчанию и API вашего ввода / вывода.
Параметры функций по умолчанию и сокращения свойств — это две удобные функции ES6, которые могут помочь вам написать свой API.
ES6 Параметры по умолчанию
Давайте быстро освежим наши знания и снова посмотрим на синтаксис. Параметры по умолчанию позволяют нам инициализировать функции со значениями по умолчанию. Значение по умолчанию используется, когда аргумент либо пропущен, либо undefined — это означает, что значение null является допустимым значением. Параметром по умолчанию может быть что угодно, от числа до другой функции.
// Basic syntax function multiply (a, b = 2) { return a * b; } multiply(5); // 10 // Default parameters are also available to later default parameters function foo (num = 1, multi = multiply(num)) { return [num, multi]; } foo(); // [1, 2] foo(6); // [6, 12]
Пример из реального мира
Давайте возьмем основную функцию и продемонстрируем, как параметры по умолчанию могут ускорить вашу разработку и сделать код лучше организованным.
Наш пример метода называется createElement() . Он принимает несколько аргументов конфигурации и возвращает элемент HTML. API выглядит так:
// We want a <p> element, with some text content and two classes attached. // Returns <p class="very-special-text super-big">Such unique text</p> createElement('p', { content: 'Such unique text', classNames: ['very-special-text', 'super-big'] }); // To make this method even more useful, it should always return a default // element when any argument is left out or none are passed at all. createElement(); // <div class="module-text default">Very default</div>
Реализация этого не будет иметь большой логики, но может стать довольно большой из-за покрытия по умолчанию.
// Without default parameters it looks quite bloated and unnecessary large. function createElement (tag, config) { tag = tag || 'div'; config = config || {}; const element = document.createElement(tag); const content = config.content || 'Very default'; const text = document.createTextNode(content); let classNames = config.classNames; if (classNames === undefined) { classNames = ['module-text', 'default']; } element.classList.add(...classNames); element.appendChild(text); return element; }
Все идет нормально. Что тут происходит? Мы делаем следующее:
- установка значений по умолчанию как для нашего
tagпараметров, так и дляconfig, в случае, если они не переданы (обратите внимание, что некоторым линтерам не нравится переназначение параметров ) - создание констант с фактическим содержимым (и значениями по умолчанию)
- проверка определения
classNamesи присвоение массива по умолчанию, если нет - создание и изменение элемента перед его возвратом.
Теперь давайте возьмем эту функцию и оптимизируем ее, чтобы она была чище, быстрее писалась и чтобы было более очевидно, какова ее цель:
// Default all the things function createElement (tag = 'div', { content = 'Very default', classNames = ['module-text', 'special'] } = {}) { const element = document.createElement(tag); const text = document.createTextNode(content); element.classList.add(...classNames); element.appendChild(text); return element; }
Мы не трогали логику функции, но удалили всю обработку по умолчанию из тела функции. Подпись функции теперь содержит все значения по умолчанию.
Позвольте мне далее объяснить одну часть, которая может слегка запутать:
// What exactly happens here? function createElement ({ content = 'Very default', classNames = ['module-text', 'special'] } = {}) { // function body }
Мы объявляем не только параметр object умолчанию, но и свойства объекта по умолчанию. Это делает более очевидным, как должна выглядеть конфигурация по умолчанию, а не только объявляет объект по умолчанию (например, config = {} ) и позже устанавливает свойства по умолчанию. Это может занять некоторое дополнительное время, чтобы привыкнуть к нему, но в конечном итоге это улучшает ваш рабочий процесс.
Конечно, мы могли бы поспорить с большими конфигурациями, что это может создать больше накладных расходов, и было бы проще просто оставить обработку по умолчанию внутри тела функции.
ES6 Property Shorthands
Если метод принимает большие объекты конфигурации в качестве аргумента, ваш код может стать довольно большим. Обычно готовят некоторые переменные и добавляют их к указанному объекту. Сокращения свойств являются синтаксическим сахаром, чтобы сделать этот шаг более коротким и читаемым:
const a = 'foo', b = 42, c = function () {}; // Previously we would use these constants like this. const alphabet = { a: a, b: b, c: c }; // But with the new shorthand we can actually do this now, // which is equivalent to the above. const alphabet = { a, b, c };
Сократите свой API
Хорошо, вернемся к другому, более распространенному примеру. Следующая функция берет некоторые данные, изменяет их и вызывает другой метод:
function updateSomething (data = {}) { const target = data.target; const veryLongProperty = data.veryLongProperty; let willChange = data.willChange; if (willChange === 'unwantedValue') { willChange = 'wayBetter'; } // Do more. useDataSomewhereElse({ target: target, property: veryLongProperty, willChange: willChange, // .. more }); }
Часто случается, что мы называем переменные и имена свойств объекта одинаковыми. Используя сокращение свойства в сочетании с деструктуризацией , мы можем немного сократить наш код:
function updateSomething (data = {}) { // Here we use destructuring to store the constants from the data object. const { target, veryLongProperty: property } = data; let { willChange } = data; if (willChange === 'unwantedValue') { willChange = 'wayBetter'; } // Do more. useDataSomewhereElse({ target, property, willChange }); }
Опять же, это может занять некоторое время, чтобы привыкнуть. В конце концов, это одна из тех новых функций в JavaScript, которая помогла мне быстрее написать код и работать с более чистыми телами функций.
Но подождите, это еще не все! Сокращения свойств также можно применять к определениям методов внутри объекта:
// Instead of writing the function keyword everytime, const module = { foo: 42, bar: function (value) { // do something } }; // we can just omit it and have shorter declarations const module = { foo: 42, bar (value) { // do something } };
Вывод
Параметры по умолчанию и сокращения свойств — отличный способ сделать ваши методы более организованными, а в некоторых случаях даже более короткими. В целом, параметры функции по умолчанию помогли мне больше сосредоточиться на реальной цели метода, не отвлекаясь на множество подготовок по умолчанию и операторов if.
Сокращения свойств действительно являются скорее косметической функцией, но я обнаружил, что более продуктивен и трачу меньше времени на написание всех переменных, объектов конфигурации и ключевых слов функций.
Вы уже используете параметры по умолчанию и сокращения свойств?
Эта статья была рецензирована Себастьяном Зейтцем . Спасибо всем рецензентам SitePoint за то, что сделали контент SitePoint как можно лучше!