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

Очистите свой код с этими советами!

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

TL: доктор

Увидеть внизу;

Поломка

Прочитав обсуждение, если/else или просто если? Это заставило меня думать, что для некоторых из вас может быть полезно для некоторых, чтобы я поделился несколькими узорами, которые мне нравится следовать, это помогает мне сохранить свой код меньшим и уборщиком.

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

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

Вот как вы можете увидеть, что некоторые разработчики пишут это.

Примечание: Я кодирую в ES6 для примера.

Мой код должен подтвердить имя хоста, проверьте, есть ли сайт localhost, с которым я работаю, и если это так, то установить мои файлы cookie небезопасно. Это требуется, потому что в противном случае Chrome и некоторые другие браузеры не позволят хранению Cookie через localhost, когда помечены как безопасные. Смотрите здесь Похоронен в глубине в штате

let secure;

// Check if window.location.hostname is set.
if (
    typeof window !== 'undefined'
    && window.hasOwnProperty('location')
    && window.location.hasOwnProperty('hostname')
) {
    const domain = window.location.hostname;

    if (domain == "localhost" || domain == "127.0.0.1") {
        secure = false;
    } else {
        secure = true;
    }
} else {
    secure = true;
}

export default new Cookie({secure: secure});

Теперь несколько вещей, которые вы можете заметить прямо с летучей мыши. Такие как избавление от операторов «else», установив верх Пусть защищать к Пусть Отказ

Как насчет использования Значение недвижимости сокращение ? {безопасный: безопасный} Теперь становится {Безопасный} Отказ

let secure = true;

// Check if window.location.hostname is set, 
if (
    typeof window !== 'undefined'
    && window.hasOwnProperty('location')
    && window.location.hasOwnProperty('hostname')
) {
    const domain = window.location.hostname;

    if (domain == "localhost" || domain == "127.0.0.1") {
        secure = false;
    } 
}

export default new Cookie({secure});

Мы немного убрали его, но мы можем определенно сделать лучше. В любое время вы видите заявление под «если», вы должны задать себе «Как я могу убрать это?». Редко, что вам нужно иметь подскаженные заявления, если вы знаете, как их избежать.

Давайте сначала сломаем выступление под «если», если вы выделите его ниже главного оператора «IF».

Мы можем сделать это, инициализируя нашу переменную «домен» выше на «NULL» или «FALSE» (я предпочитаю NULL, не стесняйтесь обсуждать), затем установите домен в имя хоста, если он доступен через Window.location.hostName.

Далее мы обновляем наш Sub «Если сейчас», чтобы проверить «домен», имеющую Пвердые Значение сверху оригинальной проверки против localhost/127.0.0.1.

Это напоминает мне, давайте убрать эту проверку для localhost/127.0.0.1 с некоторым регелем. Домен Домен Теперь становится

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

const localDomains = [ 'localhost', '127.0.0.1' ];
const isLocal = domain && localDomains.includes(domain);

или вы могли бы сделать очистительную версию, упомянутую Mincruff. с участием Задавать

const localDomains = new Set([ 'localhost', '127.0.0.1' ])
const isLocal = localDomains.has(domain)

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

Это оставляет нас с ниже.

let secure = true;

// Declared domain variable as a let
let domain = null;

// Check if window.location.hostname is set, 
if (
    typeof window !== 'undefined'
    && window.hasOwnProperty('location')
    && window.location.hasOwnProperty('hostname')
) {
    domain = window.location.hostname;
}

// Moved out and now checks additionally "domain" is set
if (domain && /^(localhost|127\.0\.0\.1)$/.test(domain)) {
    secure = false;
} 

export default new Cookie({secure});

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

Так как далеко мы можем взять это? Посмотрим, что еще мы можем сделать.

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

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

Итак, мы теперь пошли от

if (
    typeof window !== 'undefined'
    && window.hasOwnProperty('location')
    && window.location.hasOwnProperty('hostname')
) 

к

const hostnameAvailable = typeof window !== 'undefined'
    && window.hasOwnProperty('location')
    && window.location.hasOwnProperty('hostname');

Там, где находится сила в этом, состоит в том, что вы можете начать убирать ваши заявления, чтобы быть более читаемыми или даже отойти от них все вместе (в пределах от причины).

Так что зная эту новую хитрость, мы идем вперед с этим.

Если вы платите пристальное внимание, вы увидите, что мы строим утверждения «если», отключение друг друга … Так что, возможно, мы могли бы воспользоваться Темнарный оператор Отказ

Объедините новую хитрость, о котором мы узнали о выходе из «если» логика к переменным, с тройным, и вы можете сделать это!

let secure = true;

const hostnameAvailable = typeof window !== 'undefined'
    && window.hasOwnProperty('location')
    && window.location.hasOwnProperty('hostname');
const domain = hostnameAvailable ? window.location.hostname : null;
const isLocal = domain && domain.match(/localhost|127\.0\.0\.1/);

if (isLocal) {
    const secure = false; 
}

export default new Cookie({secure});

Но, dechamp … что “если” заявление! О, верно, мы можем это тоже это исправить. Воспользуйтесь листыми листьями/язву с Логично не “!” . Посмотрите на двойную логику, на этой же странице тоже.

const hostnameAvailable = typeof window !== 'undefined'
    && window.hasOwnProperty('location')
    && window.location.hasOwnProperty('hostname');
const domain = hostnameAvailable ? window.location.hostname : null;
const isLocal = domain && /^(localhost|127\.0\.0\.1)$/.test(domain);
const secure = !isLocal;     

export default new Cookie({secure});

Вау, это выглядит намного лучше!

Заворачивать

  • Мы узнали, что объявление переменных со значениями вверху, может помочь устранить «остальные» заявления.

  • Разбиение подпози «если» утверждения.

  • Выезд из логики «Если» логика к переменным, а затем, используя тройнику, может помочь облегчить чтение и цепочку вместе.

  • Regex позволяет дополнительно очистить, при выполнении нескольких проверок в одной переменной.

  • Использование оператора «не», чтобы взломать логические значения.

Больше советов!

// instead of this
if (foo === 'a') {
    bar = 'first';
} else {
    bar = 'second';
}

return bar;


// use return to clean it up!

if (foo === 'a') {
    return 'first';
}

return 'second';

// instead of this

const foo = bar ? bar : baz;

// do this
const foo = bar || baz;

Этот был предоставлен через пользователь Kayis

let secure = true;

try {
  secure = !window.location.hostname.match(/localhost|127\.0\.0\.1/);
} catch (e) {}

export default new Cookie({ secure });

Добавьте свой в комментарий, и я добавлю их здесь и даю вам кредит!

TL: доктор

от

let secure;

// Check if window.location.hostname is set.
if (
    typeof window !== 'undefined'
    && window.hasOwnProperty('location')
    && window.location.hasOwnProperty('hostname')
) {
    const domain = window.location.hostname;

    if (domain == "localhost" || domain == "127.0.0.1") {
        secure = false;
    } else {
        secure = true;
    }
} else {
    secure = true;
}

export default new Cookie({secure: secure});

к

const hostnameAvailable = typeof window !== 'undefined'
    && window.hasOwnProperty('location')
    && window.location.hasOwnProperty('hostname');
const domain = hostnameAvailable ? window.location.hostname : null;
const isLocal = domain && /^(localhost|127\.0\.0\.1)$/.test(domain);
const secure = !isLocal;     

export default new Cookie({secure});

Следовать за

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

Вам понравился мой пост? Есть вопросы? Я что-то пропустил или ошибился? Дайте мне знать!

–Dechamp.

Varymade LLC.

Текущие проекты являются https://charactergenerator4000.com и https://coder.exchange. . Пожалуйста, проверьте их и дайте нам знать ваши мысли.

Оригинал: “https://dev.to/dechamp/clean-up-your-code-with-these-tips-4p5f”