Рубрики
Без рубрики

Чистый JavaScript – 10 советов

Мы все были там. Мы смотрим на наш JavaScript с недели, месяц, год назад, и мы удивляемся, что … Помечено JavaScript, CleanCode, Refactor.

Мы все были там. Мы смотрим на наш JavaScript с недели, месяц, год назад, и мы удивляемся, какой кофе мы пьем, когда мы изначально написали это. 🤷. ♂️. Большое время, оно до смеси трех вещей: время, доступное для завершения работы, старые лучшие практики или новые шаблоны и принципы написания нашего кода.

Тем не менее, есть несколько вещей, которые мы можем сделать, это будет доказательством времени и поможет всем, кто придет к нашей кодовой базе, будь то будущий нами или младший разработчик, который на борту. Я составлял список из 10 советов ниже, что я люблю нанимать при записи JavaScript, чтобы держать его в чистоте и легко читать.

Сложные условные условные? array.some () к спасению

Хорошо, у нас есть заявление, и это довольно многословие. Много зависимых факторов на независимо от того, должен ли мы выполнять кусок кода. Или условия динамически генерируются из другой логики в нашем приложении. Нередко посмотреть, будут ли такие операторы, как это:

if(condition1
  || condition2
  || condition3 === 'myEquality'
  || ...
  || conditionN.includes('truthy')) {
    // do something
  }

И это может получить довольно чертовски волосатыми! 🤢 Как мы можем очистить это!? Легкий! Массивы!

const myConditions: boolean = [];
myConditions.push(condition1);
myConditions.push(condition2);
myConditions.push(condition3 === 'myEquality');
myConditions.push(conditionN.includes('truthy'));

if (myConditions.some((c) => c)) {
  // do something
}

Создавая массив условий, мы можем проверить, правда ли кто-либо из них, и если да, то оператор IF выполняет. Это также означает, что имеется в необходимости создавать условия динамически или через петлю, мы можем просто подтолкнуть к массиву условий. Мы также можем легко удалить Conidttions довольно легко, просто прокомментируйте MyCondition.push () или удалить его полностью.

ЗАМЕТКА: Это создает массив и управление контуром через условия и, следовательно, ожидают небольшое, обычно незаметное, воздействие производительности

Массивы для или как насчет ands? array.ewyy () Шардировать!

В значительной степени тот же совет, что и выше, за исключением вместо того, чтобы просто проверить, что любой из условий, Array.ewly () Проверим, что каждое условие – это правда!

const myConditions: boolean = [];
myConditions.push(condition1);
myConditions.push(condition2);
myConditions.push(condition3 === 'myEquality');
myConditions.push(conditionN.includes('truthy'));

if (myConditions.every((c) => c)) {
  // do something
}

Это так просто, как это!

Нет волшебных струн

Не уверен, что такое волшебная строка? Он сводится к ожиданию, ожидая, что вход будет равным произвольным строковым значению, которое может или не может представлять собой реализацию и может быть потенциально использоваться в других местах, что делает рефакторы трудными и ведущими к преобразованию ошибок кода. Вот пример волшебной строки в действии:

function myFunc(input) {
  if (input === 'myString') {
    // do something
  }
}

myFunc('myString'); // works
myFunc('myStrung'); // doesn't work

Как вы можете видеть из приведенного выше примера, используя MyString Волшебная строка может вызвать реализацию ошибок довольно легко. Не только от орфографических ошибок от разработчика, но и, если вы измените MyFunc Изменяя волшебную строку, она ожидает, то все, что звонит MyFunc Также нужно будет изменить, или это полностью сломается:

function myFunc(input) {
  if (input === 'bar') {
    // do something
  }
}

myFunc('myString'); // no longer works
myFunc('myStrung'); // still doesn't work

Мы можем легко обойти это довольно легко, но создание общего объекта, который определяет эти волшебные строки с соответствующим настроек клавиш:

const MY_FUNC_ARGS = {
  DoSomething: 'bar',
};

function myFunc(input) {
  if (input === MY_FUNC_ARGS.DoSomething) {
    // do something
  }
}

myFunc(MY_FUNC_ARGS.DoSomething); // works and is refactor proof!

Не только определяет волшебную строку в объекте, предоставляющий контекст реализации кода, он также помогает предотвратить ошибки, проскользнувшись через ошибки и рефакторы! 💪.

РАЗРЕШЕНИЕ РАЗРЕШЕНИЯ РАЗРЕШЕНИЯ

Я не уверен в тебе, но, безусловно, были времена, когда я хотел, чтобы иметь возможность вернуть более одной вещи из функции, и я либо выбираю, чтобы вернуть массив или объект, содержащий информацию. На некоторое время я имел тенденцию к управлению возвращающимися массивами, когда я ненавидел, глядя на синтаксис, как это:

const myResult = myFunc();

if (myResult[0] === 'yes' && myResult[1] === 2) {
  // Do something
}

Там нет контекста вообще к тому, что индекс массива MyResult Представляет, и становится немного сложнее понять, что здесь происходит. Однако с деструкурированием массива мы можем сделать это намного более читаемой 🤓. Проверьте это:

const [userAnswer, numberOfItems] = myFunc();
if (userAnswer === 'yes' && numberOfItems === 2) {
  // Do something
  // Refactor that magic string to use an Object 🤫
}

Разве это не так легче работать с!?

Разрушение объекта Возврат

Хорошо, деструктурируют массив потрясающе, и мы можем получить хороший контекст того, что происходит из-за этого, но, если мы только заботимся о некоторые Из чего возвращается из функции, и то, о чем мы заботимся о том же порядке, что и возвращенный массив?

Возвращая объект может быть лучшее решение здесь, чтобы мы могли выполнить деструктурирование объекта на нем:

function myFunc() {
  return {
    userAnswer: 'yes',
    numberOfItems: 2,
    someKey: 10,
  };
}

const { numberOfItems, someKey } = myFunc();

if (numberOfItems === 2 || someKey === 10) {
  // Do Something
}

Теперь нам не нужно заботиться о том, каком порядке существуют предметы в массиве, и мы можем безопасно игнорировать любые значения, предшествующие тем, что мы заботимся о 🔥

Многие файлы против общих файлов

I.e. Принцип одной ответственности … Хорошо, услыши меня. С BUNDLERS, это кропотливо легко и стоит создавать новые файлы JS, которые только делают только одну вещь, а не иметь меньшего количества общих файлов, которые делают много вещей.

Если у вас есть файл под названием Models.js И он содержит объекты, определяющие структуру всех моделей в вашем приложении, рассмотрим расщепление их в свои собственные файлы! Возьми этот пример:

Младший разработчик пытается работать над запросами API, соответствующих добавлению товара Todo. Они должны пойти в Models.js и копать через 1000 строк кода, чтобы найти Addtodorequest объект.

Младший разработчик открывает data-access/todo-requests.js и видит Addtodorequest в верхней части файла.

Я знаю, какой из них я бы предпочел! Подумай об этом. Посмотрите на свои файлы и посмотрите, слишком ли они делают слишком много. Если это так, разрывайте этот код в файл более допущенным названием.

Назовите свои хаки

Хорошо, так вы пытаетесь сделать что-то фанк, и нет подходящего метода, чтобы получить его на работу. Может быть, вам нужно добавить обходной путь для определенного браузера кашель То есть кашель . Вы можете точно понять, что именно вы сделали с разделом кода, который специально для этого обходного пути, но кто-то приходит после того, как вы, возможно, не имеете представления, даже вы за месяц.

Сделайте сам, и все остальные, одолжение и назвать этот обходной путь! Это довольно просто сделать, либо перетягивайте его в функцию на свою собственную или несущую локальную переменную с подходящим именем:

function myIE11FlexWorkaround() {
  /// Workaround code
}

function main() {
  myIE11FlexWorkaround();

  const ie11CssVarsPonyFill = (() => {
    /* some pony fill code */
  })();
}

Теперь кто-нибудь приходит после того, как вы знаете, именно то, что пытается! 🚀

Меньшие методы

Это выходит, не говоря. Я знаю, что мы все стремимся иметь небольшие методы, но на самом деле, со временными ограничениями, это может быть легче сказать, чем сделано. Но, если мы перевернум его на голове, если мы пишем модульные тесты, я знаю, что я бы предпочел написать тест подразделения для небольшого способа, а не большой метод.

Я бы предпочел увидеть это:

function myLargeComplexMethod() {
  const resultA = doSomePiece();
  const resultB = transformResult(resultA);
  const apiData = mapToApiData(resultB);
  const response = doApiRequest(apiData);
  return response;
}

Чем метод, который пытается сделать все эти отдельные единицы за один раз. Мы также можем написать некоторые модульные тесты для каждого из этих небольших единиц и напишите очень простой тест FPR MyLargeComplexMethod Это только гарантирует, что эти меньшие единицы называются правильно. Нам не нужно заботиться, работают ли они, что и тесты подразделения, относящиеся к тем меньшим блокам, будут гарантировать, что для нас.

за … VS foreach

Я думаю, что это выходит, не говоря, но мы все сожжены обратным аддом, а .для каждого () Напоминает мне слишком много обратного обратного списка, чтобы даже хотеть развлечь его. Кроме того, у нас есть довольно аккуратный способ зацикливаться через метки всех типов, так почему бы не использовать его? Давайте посмотрим foreach () по сравнению с для ... из И вы можете сделать свое собственное решение.

const myArrayOfObjects = [{ id: 1 }, { id: 2 }, { id: 3 }];
const myMapOfObjects = new Map([
  [1, { id: 1 }],
  [2, { id: 2 }],
  [3, { id: 3 }],
]);

// forEach()

myArrayOfObjects.forEach((obj, index) => {
  // do some code
});

Array.from(myMapOfObjects.values()).forEach((obj, index) => {
  // do some code
});

// For ... of
for (const obj of myArrayOfObjects) {
  // do some code
}

for (const obj of myMapOfObjects.values()) {
  // do some code
}

Лично я предпочитаю для ... из по двум причинам:

  1. Вы можете увидеть прямо сейчас, намерение – это петлю через все предметы в массиве
  2. Это согласуется для любых, которые у вас есть в вашей кодовой базе, будь то массив или карта

Foreach Есть преимущества предоставления индекса в обратном вызове, поэтому, если это полезно для вас, то может быть лучше пойти с этим методом.

Удалить пробовать блоки

Наконец, личная ручка моего. попробовать блоки. Лично я чувствую, что они чрезмерно использованы, используются неправильно, они слишком много, или поймают ошибки, которые они никогда не собирались поймать, и все они вплоть до того, как они структурированы и как они выглядят.

У меня гораздо дольше описание того, почему я им не люблю здесь , но кратко вот проблемный попыток:

try {
  const myResult = myThrowableMethod(); // I expect this one to potentially throw
  const response = transformResult(myResult);
  const answer = doRequestThatThrowsButIWasntAware(response); // I didn't realise this could have thrown
} catch (error) {
  console.error(error); // Wait... Which method threw!?
  // do something specifc to handle error coming from myThrowableMethod
  // without expecting the error to be from a different method
}

// Ok, let me refactor so I know for certain that I'm only catching the error I'm expecting
let myResult;

try {
  myResult = myThrowableMethod();
} catch (error) {
  // do something specifc to handle error coming from myThrowableMethod
}

const response = transformResult(myResult);
const answer = doRequestThatThrowsButIWasntAware(response);

Подскажите, что вы не думаете, что ни один из них проблематично … Если ваша логика обработки ошибок находится в любом случае комплекс, он может просто отвлечь читателя от того, что пытается достичь вашего метода.

Я создал небольшую библиотеку, чтобы решить это: Нет, попробуйте Отказ С этим мы можем преобразовать вышесказанное в:

function handleError(error) {
  console.log(error);
}

const [myResult] = noTry(() => myThrowableMethod(), handleError);
const response = transformResult(myResult);
const answer = doRequestThatThrowsButIWasntAware(response);

Что я лично думаю, это Лот очиститель. Но это личная вещь!

Я надеюсь, что вы получите несколько полезных советов из этой статьи, которая поможет вам написать ваш JavaScript!

Если у вас есть какие-либо вопросы, не стесняйтесь спрашивать ниже или добраться до меня в Twitter: @Ferrycolum Отказ

Оригинал: “https://dev.to/coly010/clean-javascript-10-tips-37f4”

Читайте ещё по теме: