Комментарии в сложном коде и рефакторинг
В сложной и запутанной программе не обойтись без поясняющих комментариев. Но иногда лучше упростить сам код: разбить на отдельные функции, уменьшить размеры элементов, упростить циклы и так далее. А самим функциям, константам и переменным дать «говорящие» имена, объясняющие их назначение.
Например, есть метод, который сравнивает числа a и b. Если a > b, он возвращает true, a если a < b — false:
Весь этот громоздкий кусок кода можно значительно упростить, просто убрав блок if-else:
Теперь метод выглядит намного проще и элегантнее, хотя его суть не изменилась. Подобные преобразования называются рефакторингом.
Параметры, которые можно вызвать функцией
При вызове function ей можно отправить данные для обработки. Например, нижеследующий код выведет 2 сообщения:
function showMessage(from, text) { // параметры from, text
from = "** " + from + " **"; // здесь вставляем сложный код оформления
alert(from + ': ' + text);
}
showMessage('Петя', 'Привет!');
showMessage('Петя', 'Как дела?');
Помните, что когда код будет передан, параметры скопируются в локальные переменные. Также функцию можно вызвать практически с любым количеством аргументов, а если при вызове параметр не будет передан, он считается равным undefined. К примеру, функцию отображения сообщений showMessage(from, text) можно без проблем вызвать, используя один аргумент:
showMessage("Петя");
Шаблонные литералы (строки) в JavaScript
Шаблонными литералами называются строковые литералы, допускающие использование выражений внутри, обозначаемых знаком $ и фигурными скобками (${выражение}). Заключаются в обратные кавычки () (буква «ё»). Позволяют использовать многострочные литералы и строковую интерполяцию.
JavaScript
const firstName = «Alex»;
const lastName = «NAV»;
const age = 40;
let str;
// Использование выражений внутри литерала
str = `Hello, my name ${firstName} ${lastName}, i’m ${age} years old`;
console.log(str);
// Пример многострочного литерала
str = `
<ul>
<li>First name: ${firstName}</li>
<li>Last name: ${lastName}</li>
<li>Age: ${age}</li>
<li>Math.random: ${Math.random().toFixed(2)}</li>
</ul>
`;
document.body.innerHTML = str;
|
1 |
constfirstName=»Alex»; constlastName=»NAV»; constage=40; let str; str=`Hello,myname${firstName}${lastName},i’m${age}years old`; console.log(str); str=` <ul> <li>First name${firstName}<li> <li>Last name${lastName}<li> <li>Age${age}<li> <li>Math.random${Math.random().toFixed(2)}<li> <ul> `; document.body.innerHTML=str; |
Результат выполнения кода
Глоссарий
Разобравшись немного с приведением типов в JavaScript, давайте составим небольшое резюме в виде словарика терминов:
- При преобразовании типов (type conversion) мы хотим, чтобы выходное значение имело некоторый заданный тип. Если входное значение уже имеет этот тип, то оно просто возвращается без изменений. В противном случае, оно будет сконвертировано по определенным правилам к желаемому типу.
-
Явное преобразование типов (explicit type conversion) означает, что программист использует операцию (функцию или оператор) для запуска преобразования типов. Явное преобразование может быть:
- Проверенным (Checked): Если преобразование невозможно, выбрасывается исключение.
- Непроверенным (Unchecked): Если преобразование невозможно, возвращается ошибка.
- Приведение типов (type coercion) — это неявное преобразование типов. Операции автоматически преобразуют свои аргументы в те типы, которые им нужны. Такое преобразование может быть и проверенным, и непроверенным.
Замена символов в строке
Вы можете использовать для замены определенного текста в строке.
Первый аргумент — это текст, который нужно найти и заменить, второй — текст, которым его нужно заменить.
Передача строки в качестве первого аргумента заменяет только первое совпадение:
"no no no!".replace("no", "yes")
// "yes no no!"
Если вы хотите заменить все совпадения, вы можете передать регулярное выражение с модификатором ‘greedy’ () в качестве первого аргумента:
"no no no!".replace(/no/g, "yes") // "yes yes yes!"
ES2021 добавил , чтобы упростить замену всех совпадений:
"no no no!".replaceAll("no", "yes")
// "yes yes yes!"
Поддержка браузерами:
- Chrome: 85+
- Edge: 85+
- Firefox: 77+
- Safari: 13.1+
- Opera: 71+
HTTP-запрос методом GET.
Одним из способов, как можно отправить запрос по протоколу HTTP к серверу, является запрос методом GET. Этот метод является самым распространенным и запросы к серверу чаще всего происходят с его использованием.
Самый простой способ, как можно создать запрос методом GET- это набрать URL-адрес в адресную строку браузера.
Браузер передаст серверу примерно следующую информацию:
GET / HTTP/1.1Host: webgyry.infoUser-Agent: Mozilla/5.0 (Windows NT 6.1; rv:18.0) Gecko/20100101 Firefox/18.0Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8Accept-Language: ru-RU,ru;q=0.8,en-US;q=0.5,en;q=0.3Accept-Encoding: gzip, deflateCookie: wp-settingsConnection: keep-alive
Запрос состоит из двух частей:
1. строка запроса (Request Line)
2. заголовки (Message Headers)
Обратите внимание, что GET запрос не имеет тела сообщения. Но, это не означает, что с его помощью мы не можем передать серверу никакую информацию
Это можно делать с помощью специальных GET параметров.
Чтобы добавить GET параметры к запросу, нужно в конце URL-адреса поставить знак «?» и после него начинать задавать их по следующему правилу:
имя_параметра1=значение_параметра1& имя_параметра2=значение_параметра2&…
Разделителем между параметрами служит знак «&».
К примеру, если мы хотим передать серверу два значения, имя пользователя и его возраст, то это можно сделать следующей строкой:
http://site.ru/page.php?name=dima&age=27
Когда выполнен данный запрос, данные попадают в так называемую переменную окружения QUERY_STRING, из которой их можно получить на сервере с помощью серверного языка веб-программирования.
Вот пример, как это можно сделать на PHP.
<?phpecho «Ваше имя: » . $_GET . «<br />»;echo «Ваш возраст: » . $_GET . «<br />»;?>
![Методы и структура протокола http [айти бубен]](https://luxe-host.ru/wp-content/uploads/2/9/2/292543076683ed93aa1118e7c2ef9b79.jpeg)
Конструкция $_GET позволяет выводить значение переданного параметра.
В результате выполнения этого кода в браузере выведется:
Ваше имя: dimaВаш возраст: 27
Кстати, переходя по какой-либо ссылке, которая оформлена в HTML вот так:
<a href=”link.php?name=dima”>Ссылка</a>
мы тоже выполняем запрос к серверу методом GET.
Нюансы сравнения строк
Если мы
проверяем строки на равенство, то никаких особых проблем в JavaScript это не
вызывает, например:
if("abc" == "abc") console.log( "строки равны" );
if("abc" != "ABC") console.log( "строки не равны" );
Но, когда мы
используем знаки больше/меньше, то строки сравниваются в лексикографическом
порядке. То есть:
1. Если код
текущего символа одной строки больше кода текущего символа другой строки, то
первая строка больше второй (остальные символы не имеют значения), например:
console.log( "z" > "Za" ); //true
2. Если код
текущего символа одной строки меньше кода текущего символа другой строки, то
первая строка меньше второй:
console.log( "B" < "a" ); //true
3. При равенстве
символов больше та строка, которая содержит больше символов:
console.log( "abc" < "abcd" ); //true
4. В остальных
случаях строки равны:
console.log( "abc" == "abc" ); //true
Но в этом
алгоритме есть один нюанс. Например, вот такое сравнение:
console.log( "Америка" > "Japan" ); //true
Дает значение true, так как
русская буква A имеет больший
код, чем латинская буква J. В этом легко убедиться,
воспользовавшись методом
str.codePointAt(pos)
который
возвращает код символа, стоящего в позиции pos:
console.log( "А".codePointAt(), "J".codePointAt() );
Сморите, у буквы
А код равен 1040, а у буквы J – 74. Напомню,
что строки в JavaScript хранятся в
кодировке UTF-16. К чему
может привести такой результат сравнения? Например, при сортировке мы получим
на первом месте страну «Japan», а потом «Америка». Возможно, это не
то, что нам бы хотелось? И здесь на помощь приходит специальный метод для
корректного сравнения таких строк:
str.localeCompare(compareStr)
он возвращает
отрицательное число, если str < compareStr, положительное
при str > compareStr и 0 если строки
равны. Например:
console.log( "Америка".localeCompare("Japan") ); // -1
возвращает -1
как и должно быть с учетом языкового сравнения. У этого метода есть два
дополнительных аргумента, которые указаны в документации JavaScript. Первый
позволяет указать язык (по умолчанию берётся из окружения) — от него зависит
порядок букв. Второй позволяет определять дополнительные правила, например, чувствительность
к регистру.
Создание строк
По сути, в JavaScript есть две категории строк: строковые примитивы и объекты String.
Примитивы
Строковые примитивы создаются следующими способами:
let example1 = "BaseClass"
// или
let example2 = String("BaseClass")
Почти во всех случаях вы должны использовать один из этих методов для создания новой строки.
При определении строкового литерала можно использовать одинарные кавычки () или двойные кавычки ().
Объекты
Вы можете создать объект String, используя ключевое слово .
Единственное реальное преимущество объекта перед строковым примитивом состоит в том, что вы можете назначить ему дополнительные свойства:
let website = new String("BaseClass")
website.rating = "great!"
Однако очень мало случаев, когда это полезно. Практически во всех случаях следует создавать строковый примитив.
Все знакомые вам методы строк являются частью объекта String, а не примитива.
Когда вы вызываете метод для строкового примитива, JavaScript оборачивает примитив в String-объект и вызывает метод этого объекта.
Принципы работы
Функция извлекает строку запроса: между знаками и .
Если представлена строка запроса, то будет анализироваться именно она. В противном случае извлекаем URL объекта .
var queryString = url ? url.split('?') : window.location.search.slice(1);
Далее создаём объект куда будем складывать параметры.
var obj = {};
Начинаем разбор строки запроса. Отсекаем всё что находится после знака .
queryString = queryString.split('#');
Далее разделяем параметры.
var arr = queryString.split('&');
В результате получим массив следующего вида:
Далее проходимся по элементам данного массива, разделяем ключи и значения.
var a = arr.split('=');
Далее нам нужно научить функции работать с дублирующимися параметрами или массивами:
colors=red&colors=green&colors=blue colors[]=red&colors[]=green&colors[]=blue colors=red&colors=green&colors=blue
Для начала задаём индекс по умолчанию: . Далее разбираем значения между . Записываем индекс если он задан.
var paramNum = undefined;
var paramName = a.replace(/\/, function(v){
paramNum = v.slice(1,-1);
return '';
});
Далее задаём значение параметра. Если значение отсутствует, то записываем .
var paramValue = typeof(a)==='undefined' ? true : a;
Далее мы преобразуем параметры и значения к нижнему регистру чтобы избежать непредвиденных ситуаций:
paramName = paramName.toLowerCase(); paramValue = paramValue.toLowerCase();
Если название текущего параметра уже задано, то помещаем его в массив:
if (obj) {
if (typeof obj === 'string') {
obj = ];
}
if (typeof paramNum === 'undefined') {
obj.push(paramValue);
}
else {
obj = paramValue;
}
}
Если же такой параметр ещё не задан, то просто напросто передаём значение.
obj = paramValue;
Если в URL были переданы закодированные символы, то мы из декодируем:
// test=a%20space var original = getAllUrlParams().test; // 'a%20space' var decoded = decodeURIComponent(original); // 'a space'
Поздравляем! Теперь вы знаете как извлечь параметры из URL.
Типы HTTP-запросов и философия REST / Habr
В статье я хочу рассказать, что же из себя представляют HTTP-методы GET/POST/PUT/DELETE и другие, для чего они были придуманы и как их использовать в соответствии с REST.
Этот протокол описывает взаимодействие между двумя компьютерами (клиентом и сервером), построенное на базе сообщений, называемых запрос (Request) и ответ (Response). Каждое сообщение состоит из трех частей: стартовая строка, заголовки и тело. При этом обязательной является только стартовая строка.
Стартовые строки для запроса и ответа имеют различный формат — нам интересна только стартовая строка запроса, которая выглядит так:
,
где METHOD — это как раз метод HTTP-запроса, URI — идентификатор ресурса, VERSION — версия протокола (на данный момент актуальна версия 1.1).
Заголовки — это набор пар имя-значение, разделенных двоеточием. В заголовках передается различная служебная информация: кодировка сообщения, название и версия браузера, адрес, с которого пришел клиент (Referrer) и так далее.
Тело сообщения — это, собственно, передаваемые данные. В ответе передаваемыми данными, как правило, является html-страница, которую запросил браузер, а в запросе, например, в теле сообщения передается содержимое файлов, загружаемых на сервер. Но как правило, тело сообщения в запросе вообще отсутствует.
Запрос:
GET /index.php HTTP/1.1 Host: example.com User-Agent: Mozilla/5.0 (X11; U; Linux i686; ru; rv:1.9b5) Gecko/2008050509 Firefox/3.0b5 Accept: text/html Connection: close
Ответ:
HTTP/1.0 200 OK Server: nginx/0.6.31 Content-Language: ru Content-Type: text/html; charset=utf-8 Content-Length: 1234 Connection: close ... САМА HTML-СТРАНИЦА ...
Тип HTTP-запроса (также называемый HTTP-метод) указывает серверу на то, какое действие мы хотим произвести с ресурсом. Изначально (в начале 90-х) предполагалось, что клиент может хотеть от ресурса только одно — получить его, однако сейчас по протоколу HTTP можно создавать посты, редактировать профиль, удалять сообщения и многое другое. И эти действия сложно объединить термином «получение».
Для разграничения действий с ресурсами на уровне HTTP-методов и были придуманы следующие варианты:
- GET — получение ресурса
- POST — создание ресурса
- PUT — обновление ресурса
- DELETE — удаление ресурса
не обязанне обязан
REST предлагает отказаться от использования одинаковых URI для разных ресурсов (то есть адреса двух разных статей вроде /index.php?article_id=10 и /index.php?article_id=20 — это не REST-way) и использовать разные HTTP-методы для разных действий. То есть веб-приложение, написанное с использованием REST подхода будет удалять ресурс при обращении к нему с HTTP-методом DELETE (разумеется, это не значит, что надо давать возможность удалить всё и вся, но любой запрос на удаление в приложении должен использовать HTTP-метод DELETE).
REST дает программистам возможность писать стандартизованные и чуть более красивые веб-приложения, чем раньше. Используя REST, URI для добавления нового юзера будет не /user.php?action=create (метод GET/POST), а просто /user.php (метод строго POST).
В итоге, совместив имеющуюся спецификацию HTTP и REST-подход наконец-то обретают смысл различные HTTP-методы. GET — возвращает ресурс, POST — создает новый, PUT — обновляет существующий, DELETE — удаляет.
PUT/DELETE запросы можно отправлять посредством XMLHttpRequest, посредством обращения к серверу «вручную» (скажем, через curl или даже через telnet), но нельзя сделать HTML-форму, отправляющую полноценный PUT/DELETE-запрос.
Дело в том, спецификация HTML не позволяет создавать формы, отправляющие данные иначе, чем через GET или POST. Поэтому для нормальной работы с другими методами приходится имитировать их искусственно. Например, в Rack (механизм, на базе которого Ruby взаимодействует с веб-сервером; с применением Rack сделаны Rails, Merb и другие Ruby-фреймворки) в форму можно добавить hidden-поле с именем «_method», а в качестве значения указать название метода (например, «PUT») — в этом случае будет отправлен POST-запрос, но Rack сможет сделать вид, что получил PUT, а не POST.
Перевод других типов данных в строку
Для того чтобы перевести в строку такие типы данных как (целое число), (массив), (логический тип), а также другие типы, нужно всего лишь сложить значение любого типа с пустой строкой.
//Перевод целого числа в строку
var num = 454; //В переменной num хранится число — 454
num = num + «»; //Переопределение num, теперь в ней хранится строка — «454»
//Перевод массива в строку
var arr = ; //В arr сейчас хранится массив Array
arr += «»; //После переопределения arr содержит строку «one, two, three»
|
1 |
//Перевод целого числа в строку varnum=454;//В переменной num хранится число — 454 num=num+»»;//Переопределение num, теперь в ней хранится строка — «454» //Перевод массива в строку vararr=’one’,’two’,’three’;//В arr сейчас хранится массив Array arr+=»»;//После переопределения arr содержит строку «one, two, three» |
Вызовы функций как параметры по умолчанию
Помимо примитивов и объектов, в качестве параметра по умолчанию можно использовать результат вызова функции.
В этом блоке кода мы создадим функцию, возвращающую случайное число, и используем результат как значение параметра по умолчанию для функции :
Теперь при каждом вызове функции без параметра результаты могут отличаться:
Вывод вызова этих функций будет отличаться:
Вы также можете использовать встроенные методы, такие как в объекте , и использовать значение, возвращаемое при вызове одной функции, в качестве параметра для другой функции.
В следующем примере в качестве значения назначается случайное число, которое используется как параметр для созданной нами функции . Параметр рассчитывает кубический корень числа и проверяет равенство и :
В результате вы получите следующий вывод:
Параметр по умолчанию даже может представлять собой определение функции, как видно в этом примере, где параметр определяется как функция и возвращается вызов функции :
функция создается с нуля каждый раз при вызове функции.
Получаем некоторые элементы
Самое простое, что мы можем делать с jQuery — это получить некоторые элементы и что-то ними выполнить. Если вы знакомы с селекторами CSS, получить произвольные элементы очень легко: вы просто передаёте соответствующий селектор в $().
Важно понимать, что любая сделанная выборка будет содержать только те элементы, которые существовали на странице на момент выбора. Иными словами, если вы пишете var anchors = $( ‘a’ ), а затем позже добавите ещё один элемент на свою страницу, то переменная anchors не будет содержать этот новый элемент
Моя выборка содержит что-нибудь?
Иногда вам требуется что-то сделать, только когда вашему выбору соответствует несколько элементов. Поскольку функция $() всегда возвращает объект jQuery и он всегда истинный, вы должны проверить содержимое вашей выборки, чтобы определить, было ли что-то найдено.
Внимание! Ошибочный код
Мы можем сократить проверку ещё больше, если вспомним, что 0 это ложное значение:
Получение отдельных элементов из выборки
Если вам нужно работать с исходным элементом DOM из выборки, то следует получить доступ к элементу из объекта jQuery. Например, если вы хотите напрямую получить доступ к свойству value элемента <input>, то должны работать с исходным элементом DOM.
Заметьте, что вы не можете вызвать методы jQuery для исходных элементов DOM. Поэтому следующий пример работать не будет:
Если вам требуется работать с одним элементом в выборке и вы хотите использовать методы jQuery для этого элемента, то можете получить новый объект jQuery, содержащий единственный элемент, через .eq(), передавая ему индекс элемента.
Определение строки
Строкой считается любая последовательность символов в пределах двойных или одинарных кавычек.
var someString = «This is a string»;
var anotherString = ‘This is another string’;
|
1 |
varsomeString=»This is a string»; varanotherString=’This is another string’; |
Для создания строки с кавычками, нужно их экранировать (обособить) с помощью символа обратный слэш или использовать два разных вида кавычек.
var string = «String with \»quoted\» word»;
var string = ‘String with \’quoted\’ word’;
var string = ‘String with «quoted» word’;
var string = «String with ‘quoted’ word»;
var string = «It’s single quote string»; //Апостроф внутри строки
var string = ‘<div id=»block»>This is block</div>’; //В строке может содержаться код HTML
|
1 |
varstring=»String with \»quoted\» word»; varstring=’String with \’quoted\’ word’; varstring=’String with «quoted» word’; varstring=»String with ‘quoted’ word»; varstring=»It’s single quote string»;//Апостроф внутри строки varstring='<div id=»block»>This is block</div>’;//В строке может содержаться код HTML |
Помимо двойных и одинарных кавычек, экранизации подлежат и другие символы (escape последовательности), управляющие форматированием текста.
| Символ | Обозначение |
|---|---|
| \’ | одинарная кавычка |
| \» | двойная кавычка |
| \\ | обратный слэш (не путать с // — знаком начала комментария) |
| \n | новая строка (работает как кнопка Enter) |
| \r | возврат каретки в начало строки (работает как кнопка Home) |
| \t | табуляция (работает как кнопка Tab) |
| \b | удаление символа (работает как кнопка Backspace) |
| \f | печать с новой страницы (устаревшее) |
| \v | вертикальная табуляция (устаревшее) |
| \a | звуковой сигнал (устаревшее) |
| \xXX | символ из Latin-1, где XX шестнадцатеричные цифры (например: \xAF — символ ‘-‘) |
| \XXX | символ из Latin-1, где XXX восьмеричные цифры от 1 до 377 (например: \300 — символ ‘À’) |
| \ucXXXX | символ из Unicode, где XXXX шестнадцатеричные цифры (например: \uc454 — символ ‘쑔’) |
В случае если строка достаточно длинная, то для более легкого чтения ее можно разбить на подстроки с помощью символа обратного слэша , не нарушая при этом самой структуры строки.
var longString = «Lorem ipsum dolor sit amet, consectetur adipisicing elit.\
Aliquam eligendi non ipsum autem facere repellendus doloremque, \
architecto obcaecati culpa dolores eveniet qui, beatae suscipit ab nisi ad vero, sed cum!»;
|
1 |
varlongString=»Lorem ipsum dolor sit amet, consectetur adipisicing elit.\ Aliquam eligendi non ipsum autem facere repellendus doloremque, \ architecto obcaecati culpa dolores eveniet qui, beatae suscipit ab nisi ad vero, sed cum!»; |
Однако использование следующего приема для разбиения кода недопустимо.
var string = «Lorem ipsum dolor sit amet,» + \
«consectetur adipisicing elit.»;
|
1 |
varstring=»Lorem ipsum dolor sit amet,»+\ «consectetur adipisicing elit.»; |
Параметры строки запроса
Параметры строки запроса указываются после знака вопроса В конечной точке. Знак вопроса, параметры, которые следуют за ним и их значения, называется «строкой запроса». В строке запроса каждый параметр перечисляется один за другим с амперсандом , разделяющим их. Порядок параметров строки запроса не имеет значения.
Эта строка запроса:
или эта
вернут один и тот же результат.
Однако в параметрах path порядок имеет значение. Если параметр является частью фактической конечной точки (не добавляется после строки запроса), это значение обычно описывается в описании самой конечной точки.
Что в итоге
Комментарии — отличная штука. Они помогают команде разработчиков работать над общим проектом. А если программист один, позволят ему даже через много лет вспомнить ход своих мыслей. Но комментариев должно быть мало, иначе они превратятся во флуд.
Комментировать нужно основные элементы кода, неочевидные решения, сложные бизнес-процессы, тонкости решений и тому подобное. Не пишите комментарии, объясняющие, что и как делает процедура или функция, — это бессмысленно.
И помните, что комментарий — не панацея, он не спасёт плохой код, даже если сделает его понятнее. Сложные и запутанные фрагменты сокращайте и делайте рефакторинг, а комментируйте по минимуму.
