Десять практических советов по js

JavaScript

предисловие

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

Практические статьи

1. Выполнить немедленно

Почему я ставлю на первое место немедленное исполнение, потому что обычно при ведении бизнеса есть функция входа, например такой формат

function init(){
    //...
}
init()

Сначала я написал так, но потом прочитал «JavaScript You Don’t Know» и написал так

(function init(){
    //...
})()

Преимущества сделать это сейчас:
Изоляция области, поскольку имя функции инициализации не обязательно отображается в глобальной области.

2. Постоянная развязка

Я также часто использую эту технику в бизнесе, я написал ее так до того, как научился.

function(){
    console.log(12345678901)
}

Но после обучения, это так

const TEL = 12345678901
function(){
    console.log(TEL)
}

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

  • Когда на эту константу ссылаются в нескольких местах, при ее изменении вам нужно изменить только один код.
  • Код, написанный таким образом, более семантичен, например, константа ERROR в некоторых callback-функциях запросов обычно равна 1, что другим сложно понять.

3. Рекурсивная развязка

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

function a(){
    //...
    a();
}

После обучения моя рекурсия обычно пишется так

function a(){
    //...
    argument.callee();
}

Преимущества развязки:
Вы можете изменить имя функции, не затрагивая код внутри
Пополнить:
Указанный комментарий верен. Его нельзя использовать в строгом режиме. Я зашел на официальный сайт mdn и пролистал документацию по API. Карта выглядит следующим образом:

4. Добавление целочисленного преобразования

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

let str = '123'
console.log(typeof parseInt(str));    //number

Далее оператор плюс

let str = '123'
console.log(typeof +str);    //number

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

5. Операция короткого замыкания

До того, как я изучил этот метод, мой код был таким:

if(!foo){
   foo = bar
}

Но что я узнал после операций короткого замыкания, так это:

foo = foo || bar

выгода:

  1. Сокращение кода
  2. писать элегантно

недостаток:
Снижение читабельности кода

Принцип короткого замыкания:
В js у двух операторов && и || есть особенность: например, есть два выражения до и после &&, первое ложно, второе не будет выполнено, а || будет перевернуто

Дополнение: кто-то в комментариях предложил использовать !! для представления истины и ! для представления ложного, что распознается, эта операция выгодна, !! true/false вместо любого другого значения. Недавно я смотрел исходный код Vue и думал об этом, у Youshen тоже есть приложение для этого.

vue源码
исходный код

6. Условные выражения

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

if(a === true){
   b = c;
}else{
    b = d;
}

Но после того, как вы научитесь, вы будете писать так

let b = a ? c : d

выгода:
1. Уменьшите количество кода
2. Код элегантный

недостаток:
Снижение читабельности кода

7. Оповещение об отладке

Я раньше не любил использовать алерты, не практиковался, да и сейчас почти не использую.Это все console.log, поэтому я могу видеть вывод данных страницы в консоли браузера, но h5 отличается .Иногда h5 не имеет проблем на стороне ПК. , но на мобильном телефоне есть все виды ошибок.Очень хлопотно отлаживать данные, но у нас есть ребенок.Что касается отладки предупреждений на мобильном телефоне лучше Чем console.log, так это то, что мы можем видеть наши данные, и он покажет всплывающее окно, показанное нам в виде

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

vconsole
vconsole

8. Элегантное округление вниз

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

let num = 1.23
let num1 = Math.floor(num);
console.log(num1); //1

Но есть более элегантный способ ниже

let num = 1.23
let num1 = num | 0;
console.log(num1)  // 1

Этот метод более лаконичен, принцип этого метода основан на битовой операции js, здесь | здесь не логическое ИЛИ, а операция ИЛИ.

  • будь осторожен:
    • Math.floor(NaN) возвращает NaN, но или ноль возвращает 0;
    • Math.floor(Infinity) возвращает бесконечность, но или ноль возвращает 0;

Дополнение: Я добавил в комментарий ~~, который тоже можно округлить в меньшую сторону. Это действительно более изящно. Рекомендуется. Друзья, которым интересен этот принцип, могут проверить это на себе. ~ - оператор отрицания. Я пробовал отрицание 1.234.-2, инверсия 1, но вышеприведенные точки внимания изменились

  • ~~NaN равно 0. Принцип заключается в том, что js сначала вызовет Number, чтобы преобразовать NaN в false.Отрицание false равно -1, а отрицание равно 0.

9. Форма единого заявления

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

let a = 0,
     b = 0,
     c = 0,
     d = 0;
  • Преимущества этого:
    • Имена переменных не разбросаны, их легче найти
    • небольшое количество кода
    • предотвратить ошибки при объявлении переменных

10. Свяжите это

Как это объяснить? На самом деле, функция стрелки es6 решена. Я также говорю об этом как о навыке. Когда мы проектируем, как написать весь код js, мы часто объединяем фрагмент кода с одной и той же функцией в один кусок. Взгляните на следующий пример, вы поймете span

function bindEvent(){
    let _this = this;
    function a () {
        //可以在a中使用_this;
    }
    function b () {
        //可以在b中使用_this;
    }
}
  • Суммировать:
    Выше много навыков, которыми обычно пользуюсь, если не так, поправьте пожалуйста, если есть польза, беда, спасибо.

Примечание:
Истинное знание приходит из практики.Этот документ является исключительно оригинальным.Если вы хотите перепечатать, пожалуйста, укажите источник.Если вам это нравится, нажмите звездочку.github

Категории