От автора: я решила собрать 7 основных концепций, которые я часто разъясняю новым разработчикам. Я надеюсь, что вы найдете это полезными в своем стремлении стать лучшим профессионалом..
1. Неизменность, мутация, изменчивость
Когда форма ваших данных не меняется. Итак, если у вас есть объект, который входит в функцию, он выходит из нее в точно такой же форме. Прилагаемые к нему данные могут изменяться, но количество ключей, имен и порядок не меняется.
Например, это мутация:
function changeMe(someObject){ someObject.age = 3; return someObject; }
let exampleOne = {"cat": "Tibbers" };
console.log(changeMe(exampleOne));Функция меняет форму объекта, что означает, что он изменчив.
2. Декларативный
Неважно, в каком порядке вы что-то делаете, базовые правила гарантируют, что вы всегда получаете одинаковый и правильный результат. Например, это математическое уравнение следует декларативной методологии.
(2 х 5) + 8 - 3 = 15
Поэтому, если вы измените порядок, вы все равно получите тот же результат.
- 3 + (2 х 5) + 8 = 15 8 - 3 + (2 х 5) = 15
В программировании на JavaScript декларативный шаблон — это когда порядок функций не имеет значения для построения конечного результата. Вы можете вызвать их в любом порядке. Последовательность не имеет значения.
3. Рекурсия
Когда функция продолжает вызываться, пока не будет выполнено определенное условие. Нет, это не цикл. Это может выглядеть похоже, но это не так.
Цикл for — это условный метод JavaScript. Рекурсия — это целая функция, которая продолжает вызываться. Это означает, что в рекурсии есть две части — вызов, основанный на определенном условии, и оператор выхода. Оператор выхода в основном то, что происходит в конце рекурсии.
Вот как может выглядеть простая и потенциальная рекурсия:
function sumProfit(sales){ if(//condition for ending){ return theFinalObjectOrResult; } else{ //do something. Reduce the condition. return sumProfit(reducedCondition); } }4. Обратные вызовы
Обратный вызов — это функция, которая была выполнена после завершения выполнения другой функции. Для чего это нужно? Потому что JavaScript управляется событиями — это означает, что он не ждет ответов. Когда все работает автономно, это не так важно.
Это становится важным, когда вы начинаете полагаться на внешние ответы, такие как API. Задержка — это время, необходимое коду JavaScript для отправки запроса и получения его обратно.
С точки зрения JavaScript он сделал свое дело — он успешно выполнил код. Однако на самом деле вы все еще ждете ответа. Иногда вы заставляете код успокоиться и подождать некоторое время с помощью промисов или таймера задержки. Как только будет подтверждено выполнение, вы вызываете функцию callback().
В любом случае, вот как может выглядеть обратный вызов:
function waitForMeeeee(someValues, callback){ //do something with someValues callback(); } waitForMeeeee('The answer is 42', function(){ alert('all done now'); });Вы также можете абстрагировать обратный вызов и сделать его похожим на это:
function waitForMeeeee(someValues, callback){ //do something with someValues callback(); } function allDone(){ alert('all done now'); } waitForMeeeee('The answer is 42', allDone);5. async
Представьте себе прямую. Код JavaScript выполняется от одного конца до другого. Но иногда вам нужно сделать паузу, пока вы переходите к внешнему источнику, чтобы что-то захватить. Момент приостановки — асинхронная часть JavaScript. Ключевое слово async также возвращает неявный промис.
Что означает неявный? По умолчанию возвращает промис. Что такое промис? Это то, что заставляет код ждать, поэтому возникает задержка в выполнении чего-либо. Например, вы ожидаете, пока внешний API вернет корректные данные. Почему это важно? Потому что вы можете использовать then() с функцией async.
Что такое then()? Это обратный вызов, эквивалентный функциям, основанным на промисах, которые позволяют вам делать вещи после того, как выполнение промиса было завершено. Как все это выглядит? Вот пример:
async function doSomething(){ //do something there. return 'woot!';
} doSomething().then(
function(result){ console.log(result);
});Или, если вы действительно хотите сделать часть промиса явной:
async function doSomething(){ //do something there. return Promise.resolve('woot!');
} doSomething().then(
function(result){ console.log(result);
});6. Прокси
Представьте его себе, как дополнительное расширение объектов. Это способность создавать пользовательское поведение вместо того, что уже существует. В некотором смысле, он также выступает в качестве посредника между исходным объектом и дополнительными функциями.
Да. Прокси могут изменять и обрабатывать данные. Да. Среди прочего, он часто используется в качестве проверки валидности. Как это работает?
У прокси есть три части — обработчик, ловушки (или методы) и цель. Для прокси доступно 13 ловушек. Вам нужно будет погуглить их, потому что это выходит за рамки данной статьи. Вот пример прокси с реализованной ловушкой:
let handler = { get: function(theObjectPassed, theObjectName){ //some checking logic console.log(theObjectPassed, theObjectName); return 'all done' ; }
} let someObject = { a: 1, b: 2};
let valueName = new Proxy(someObject, handler);
console.log(valueName.someObject);Существует и другие прокси, но этот пример является отправной точкой.
7. Уборка мусора
Все занимает память. Когда переменная инициализируется, для нее выделяется место. Память инициализируется только при вызове. Поэтому, когда функция запускается и внутри нее есть переменные, ее существование длится столько, сколько требуется функции. Уборка мусора — это способ очистки памяти.
Утечка памяти происходит, когда сборка мусора отсутствует, потому что переменная объявлена в глобальном пространстве, что вызывает загрязнение и ненужное выделение пространство. Слишком много утечек, и ваше приложение может замедлиться.
Так что поддерживайте минимально возможное количество переменных и деинициализируйте вещи, которые вам не нужны, с помощью null.
Цель этой статьи — стать справочным материалом / кратким изложением концепций, чтобы помочь вам как можно быстрее понять их. Каждый термин сам по себе является отдельной темой, но я из соображений краткости придерживалась только основных понятий.
Полное описание гораздо больше, чем написано здесь, но в целом, это отражает суть того, что каждое слово пытается передать. Надеюсь, вы нашли эту статью полезной. Спасибо за прочтение!
Автор: Aphinya Dechalert
Источник: https://medium.com
Редакция: Команда webformyself.