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

JavaScript: Запишите код очистителя с функциональным программированием

Как написать Cleaner JavaScript код с функциональным программированием. Помечено JavaScript, Node, Cleancode.

В качестве веб-разработчика Web Pull-Stack я потратил много времени, написание и чтению JavaScript Code, часто настолько плохо написано, что забирает меня больше времени, чтобы понять, чем он должен.

Это действительно, разочаровывает, когда нам нужно реформировать некоторые наследие и неравновешенные кодовые произведения в наших проектах на основе JS, но им не хватает Jsdocs он имеет смешанную переменную декларацию шаблона const, пусть, var Функциональные декларации идут от Функция f () {} к var () {} или const f = () = > {} , что более важно, весь код в модуле содержится в одном функциональном теле.

Давайте посмотрим на следующий код:

var fetch = require('node-fetch'); // if using NodeJS

function articles () {
  var arr = [];
  return fetch('https://dev.to/api/articles').then(function(a) {
    if (a) {
      return a.json().then(function(b) {
        if (b) {
          b.forEach((c) => {
            if (c.tag_list.indexOf('javascript') !== -1 && c.tag_list.indexOf('node') !== -1) {
              arr.push(c);
            }
          });
          return arr;
        }
      });
    }
  });
}

articles().then(function(d) {
  console.log(d);
});

В приведенном выше примере мы пытаемся запросить помеченные статьи «JavaScript» и «Узел», используя Dev API ; оно работает. Так в чем проблема? Что ж, как определение «сделано» изменяется значительно со временем, в наши дни наша способность добиться вещей не только измеряется только путем получения вещей на работу, они также должны быть читабельными, значимыми и поддерживаемыми.

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

Давайте попробуем реформируйте наш запрос API, следуя этим шагам:

  • Оптимизирующий код часто включает в себя использование новейших доступных языковых функций. Мы могли бы не знать всех из них, но к этому времени все разработчики JavaScript должны знать функции, представленные в ES6. Итак, как первый шаг, я думаю, мы должны убить всех var Декларации в нашем коде, для этого примера эти объявления могут быть связаны с конститут .
const fetch = require('node-fetch'); // <-

function articles () {
  const arr = []; // <-
  ...
}

articles().then(function(d) {
  console.log(d);
});
  • Некоторые из вас согласятся, некоторые не будут, но я думаю, что что-то, что результаты действительно сложно, сначала в программировании называют надлежащим образом. Тем не менее, это важная часть нашей работы. У нас есть наша основная функция, названная как статьи , что это означает? Это не имеет смысла, потому что это имя функции не выражает никаких действий (глагол), которые говорят нам, что это делает. Я думаю, что мы должны иметь возможность найти лучшее имя для этой функции, потому что мы уже знаем, что мы ожидаем от этого.
...

function fetchDevArticles () {
...
}

fetchDevArticles().then(function(d) {
  console.log(d);
});

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

  • Наша функция и переменное название становятся проблемой, потому что основная функция отвечает за синхронно делать несколько вещей. В функциональном программировании мы можем дать функцию имя, связанное с его точным поведением. Итак, мы можем разделить основную функцию на несколько меньших функций, которые описывают себя.
const fetch = require('node-fetch'); // if using NodeJS

const arr = [];

function pushFilteredArticlesToAuxArray (c) {
  if (
    c.tag_list.indexOf('javascript') !== -1
    && c.tag_list.indexOf('node') !== -1
  ) {
    arr.push(c);
  }
}

function filterAndReturnValues (b) {
  if (b) {
    b.forEach(pushFilteredArticlesToAuxArray);
    return arr;
  }
}

function fetchJSDevArticles () {
  return fetch('https://dev.to/api/articles').then(function(a) {
    if (a) {
      return a.json().then(filterAndReturnValues);
    }
  });
}

fetchJSDevArticles().then(function(d) {
  console.log(d);
});

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

  • Несмотря на это работает на данный момент, код может получить гораздо более проще, если мы сможем найти лучше Методы массива чтобы помочь нам.
const fetch = require('node-fetch');

const tagsToFilter = ['javascript', 'node'];

const isIncludedIn = (arr) => tag => arr.includes(tag);
const byTags = (tags) => (article) => tags.every(isIncludedIn(article.tag_list));
const filterAndReturnValues = (articles) => articles.filter(byTags(tagsToFilter));

function fetchJSDevArticles () {
  return fetch('https://dev.to/api/articles').then(function(a) {
    if (a) {
      return a.json().then(filterAndReturnValues);
    }
  });
}

fetchJSDevArticles().then(function(d) {
  console.log(d);
});

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

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

const fetch = require('node-fetch');

const tagsToFilter = ['javascript', 'node'];
const devArticlesApiURL = 'https://dev.to/api/articles';

const isIncludedIn = (arr) => tag => arr.includes(tag);
const byTags = (tags) => (article) => tags.every(isIncludedIn(article.tag_list));
const filterAndReturnValues = (articles) => articles.filter(byTags(tagsToFilter));

const fetchJSDevArticles = () =>
  fetch(devArticlesApiURL)
    .then(response => response.json())
    .then(filterAndReturnValues)
    .catch(console.log);

fetchJSDevArticles().then(console.log);

На этот раз я сократил код, повернув все обратные вызовы в функции one-line arrow, избегая фигурных скобок и оператора возврата. Для меня это уже выглядит уже хорошо, но учитывая эти советы, которые вы будете мотивированы, чтобы попытаться уменьшить код еще больше, по крайней мере, я надеюсь так.

Вывод

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

Как затыкающиеся примечания:

  • ES6 важно.
  • Там может быть метод массива для того, что вы пытаетесь сделать.
  • Если нет, попробуйте лоташ 🙂
  • Коды комментариев не всегда то, что вам нужно сделать свой код более читаемым.
  • Стремиться к лучшему.

Оригинал: “https://dev.to/r0r71z/javascript-write-cleaner-code-with-functional-programming-279a”

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