10 полезных советов и рекомендаций по JavaScript, которые вы можете начать применять в своих проектах

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

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

10. Скрипты только во внешних файлах

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

Если ваш скрипт в документе большой (более 30 строк), вам следует подумать об этом, переместив его во внешний скрипт:

Bla bla bla ...
//
// More than 30 lines of Javascript in the Document
// that you can move to an external file
//

Если вы можете переместить свой js-код в файл сценария, делайте это всегда, когда можете.

9. Знать, когда сравнивать с равными или идентичными

== (или же !=) компаратор выполняет автоматическое преобразование типов при необходимости. === (или же !==) оператор не будет выполнять какие-либо преобразования. Он сравнивает значение и тип, который можно считать быстрее (jsPref), чем ==,

[20] ==  20      //  true
[20] === 20      //  false
'45' ==  45      // true
'45' === 45      //  false
[]  ==  0       //  true
[]  === 0       //  false
''  ==  false   //  true but [true == "a"]  false
''  === false   //  false 

== Двойное равенство (иначе говоря, свободное равенство) не будет сравнивать тип, однако оно будет сравнивать значения типов в выражении. Это называется принуждением по типу и считается злой операцией.

=== Тройное равенство (или строгое равенство) будет сравнивать тип, но не будет вводить значения, означающие, что они сравниваются без преобразования. Поскольку нет приведения типов, тройное равенство быстрее и рекомендуемый подход для сравнения всех видов значений. Это означает, что оба типа должны быть одинаковыми, чтобы условие было равно true.

использование == (или же !=) только в том случае, если вы проверили на ноль или неопределенный

8. Будьте осторожны с конкатенацией строк

Вы должны быть уверены в типе ваших переменных во время объединения.

Проанализируйте следующий пример:

var a = 1;// Int
var b = 2;// Int
var c = '3'; // String
var d = " my Number"; // String
console.log(a + b + c + d);
// Output : 33 my Number
// But expected other thing ...

Чтобы избежать неожиданного поведения, преобразуйте его в строку, используйте метод concat или объедините их с плюсами, но установите первую переменную в строке как строку:

var a = 1;// Int
var b = 2;// Int
var c = '3'; // String
var d = " my Number"; // String
console.log("" + a + b + c + d);
console.log(a.toString() + b.toString() + c.toString() + d);
console.log(''.concat(a, b, c, d));
// All of them output : 123 my Number

7. Переписать переменную в 1 строку

Вместо этого используйте следующий синтаксис, который занимает более 3 строк, проверяя, существует ли он с операторами if:

Примечание: хотя проверить с помощью ! Оператор уже короток, использование короткого замыкания еще короче.

var myInitialString = "";
function concatenate(parameter){
// Check if variable exists
// or
// typeof(parameter) == "undefined"
if(!parameter){
parameter = "A previously default value";
}
return myInitialString + parameter;
}

Вместо этого используйте объявление короткого замыкания:

var myInitialString = "";
function concatenate(parameter){
// Re-declare with 1 line instead
parameter = parameter || "Use this value instead if parameter doesn't exists";
return myInitialString + parameter;
}

Как вы знаете, все в Javascript ложно или неверно, ложные значения JavaScript включают в себя:

• false.
• 0.
• пустые строки ('' или же "").
• null.
• undefined.
• NaN (NotANumber).

|| Оператор сначала вычисляет выражение слева, если оно истинно, он возвращает это значение. Если это ложно, он оценивает и возвращает значение правого операнда (выражение справа).

6. Если заявления сокращены

Продолжайте использовать объявление короткого замыкания, чтобы сделать ваш ifЗаявления России даже короче, чем они есть. Если оператор этого класса возвращает логическое значение, вы можете вместо этого вернуть оценку оператора if (который возвращает логическое значение).

function isAdult(age){
// if age parameters exists and its value is greater than 17..
if(age && age > 17){
return true;
}
return false;
}

Логическое значение будет также возвращено после следующей оценки:

function isAdult(age){
// If age parameter doesn't exists, falsy is returned
// and if the parameters exists and is greater than 17 truthy is returned
return age && age > 17;
}

И вы можете создавать короткие, если операторы не только для возвращаемых значений, создать более сложный код, объединяющий && а также || компараторы со стилем короткого замыкания:

// Execute a request to the server if the token is valid, otherwise refresh it
if (tokenIsValid(token)) {
executeRequest(token);
}else{
refreshToken();
}
// If token is valid is truthy, then the executeRequest will be executed too.
// otherwise the refreshToken will be executed.
tokenIsValid(token) && executeRequest(token) || refreshToken();

Однострочный код, чистый и читаемый (сомнительный) не?

5. Не бойтесь побитового оператора Not (~ или ~~), он не кусается

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

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

function bitwiseOperator(value){
var result = Math.floor(value);
// return the negative value of the result + 1;
return - (result+ 1);
}

Он просто возвращает отрицательное значение сложения 1 к числу. Хорошо известное использование — проверить, есть ли в массиве элемент с функцией indexOf вместо дифференцирования с -1, сделать оценку достоверной или ложной:

// true
var hasItemTwo = ~[1,2,3].indexOf(2);
if (hasItemTwo) {
console.log("The array contains 2");
}
// instead of
if([1,2,3].indexOf(2) != -1){
console.log("The array contains 2");
}

Не понял? не паникуйте! если вы хотите больше информации об этом операторе.

Используйте двойной бит НЕ, когда:

1. Вы хотите преобразовать число из числа с плавающей точкой в ​​целое число.
2. Вы хотите выполнить ту же операцию, что и Math.floor (), но намного быстрее.
3. Вы хотите минимизировать свой код.

Не используйте двойной бит НЕ, когда:

1. Вы запускаете Google Chrome (по-видимому?).
2. Вы заботитесь о читабельности своего кода.

4. Правильное объединение данных из двух массивов

Вы должны знать, когда использовать петли, а когда нет. Для объединения двух массивов вам не нужно перебирать второй массив и помещать каждый отдельный элемент в первый массив, как показано в следующем примере (плохая практика):

var firstArr = ["12",{myObject:12},123,"Hi","Test"];
var secondArr = [9,5,23,12,"Hello","Second test"];
for(var i = 0;i < secondArr.length;i++){
var item = secondArr[i];
// add item to second array
firstArr.push(item);
}
console.log(firstArr);
// outputs :
// ["12",{myObject:12},123,"Hi","Test",9,5,23,12,"Hello","Second test"]

Хотя это работает, это не лучший способ сделать это, объединить их без использования петли.

var firstArr = ["12",{myObject:12},123,"Hi","Test"];
var secondArr = [9,5,23,12,"Hello","Second test"];
// Combine arrays
Array.prototype.push.apply(firstArr,secondArr);
console.log(firstArr);
// outputs :
// ["12",{myObject:12},123,"Hi","Test",9,5,23,12,"Hello","Second test"]

Если вы не знаете разницу между .call и .apply свойством функции. В этом случае мы используем свойство .apply, чтобы изменить this контекст метода push в качестве первого массива, как вы знаете, .push Метод добавляет все аргументы, которые он получает в данный массив, например:

var myEmptyArr = [];
myEmptyArr.push(1,2,3,4,5);
console.log(myEmptyArr);
// [1,2,3,4,5]

Поэтому элементы второго параметра (второго массива) будут приниматься в качестве аргументов и добавляться в первый массив благодаря функции apply. Проще написать, чем не цикл?

3. Переключитесь против, если

Классический вопрос о том, использовать ли switch заявление или серия if а также else Заявления не являются уникальными для JavaScript и стимулировали дискуссии почти во всех языках программирования, которые имеют эти конструкции. Конечно, реальная проблема заключается не между отдельными заявлениями, а скорее в скорость с помощью которого каждый может обрабатывать ряд условных операторов.

Проанализируйте следующее if пример :

// the variables : result doesn't exists
function example(value){
if (value < 6){
if (value < 3){
if (value == 0){
return result0;
} else if (value == 1){
return result1;
} else {
return result2;
}
} else {
if (value == 3){
return result3;
} else if (value == 4){
return result4;
} else {
return result5;
}
}
} else {
if (value < 8){
if (value == 6){
return result6;
} else {
return result7;
}
} else {
if (value == 8){
return result8;
} else if (value == 9){
return result9;
} else {
return result10;
}
}
}
}
example(5);

И теперь тот же код, написанный с оператором switch, оператор switch упрощает как внешний вид, так и производительность нескольких условий:

function example(value){
switch(value){
case 0:
return result0;
case 1:
return result1;
case 2:
return result2;
case 3:
return result3;
case 4:
return result4;
case 5:
return result5;
case 6:
return result6;
case 7:
return result7;
case 8:
return result8;
case 9:
return result9;
default:
return result10;
}
}
example(10);

Что бы вы выбрали?

В JavaScript if заявления, как правило, быстрее, чем switch заявления, когда есть только одно или два условия для оценки. Когда имеется более двух условий, а условия просты (не диапазоны), switch утверждение, как правило, быстрее. Это потому, что количество времени, необходимое для выполнения одного условия в switch утверждение часто меньше, чем требуется для выполнения одного условия в if заявление, делая switch Выписка оптимальна только при наличии большего количества условий.

2. Измерить производительность и решить проблемы производительности

Да, капитан, очевидно!

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

Вы можете прочитать подробную статью о том, как измерить производительность ваши функции с Javascript, используя Benchmarks или инструменты разработчика Chrome здесь.

1. Сохраняйте свой код с помощью замыканий

Оберните ваш код в анонимные функции, чтобы избежать проблем в вашем собственном коде. Почти на каждом сайте используются разные скрипты из разных источников. По умолчанию любая функция или переменная, созданная на странице, определяется в глобальной «области видимости». Это может стать серьезной проблемой, если два сценария используют одинаковые точные имена переменных / функций.

var myName = 12;
(function(){
var myName = 123123123123;
// 123123123123
console.log(myName);
})();
// 12
console.log(myName);

Как вы можете видеть, закрытие соблюдается и myName переменная по-прежнему имеет значение 12 в своем контексте как myName внутри обертки принадлежит другой контекст. В этом смысл использования замыканий.

Если вы знаете еще один замечательный совет, которым вы можете поделиться с сообществом, не стесняйтесь и поделитесь им с нами в поле для комментариев! Повеселись