Фронтендщик
前往频道在 Telegram
Все для frontend developer, шуточки, тесты, статьи Администрация/Реклама @vtopua
显示更多1 076
订阅者
无数据24 小时
-57 天
-1230 天
数据加载中...
相似频道
![Frontender's notes [ru]](https://cdn.tlmtr.io/_next/image?url=https%3A%2F%2Fimg.tlmtr.io%2Fc%2F1qrVZ3%2F5348049928330532677%3Fty%3Dx&w=96&q=75){kind=small}
标签云
进出提及
---
---
---
---
---
---
吸引订阅者
九月 '26
九月 '26
+1
在0个频道中
八月 '26
+1
在0个频道中
Get PRO
七月 '26
+1
在0个频道中
Get PRO
六月 '260
在1个频道中
Get PRO
五月 '260
在0个频道中
Get PRO
四月 '260
在1个频道中
Get PRO
三月 '26
+1
在0个频道中
Get PRO
二月 '26
+1
在0个频道中
Get PRO
一月 '260
在0个频道中
Get PRO
十二月 '25
+1
在0个频道中
Get PRO
十一月 '25
+1
在0个频道中
Get PRO
十月 '250
在0个频道中
Get PRO
九月 '25
+7
在0个频道中
Get PRO
八月 '25
+1
在0个频道中
Get PRO
七月 '25
+2
在0个频道中
Get PRO
六月 '25
+1
在0个频道中
Get PRO
五月 '250
在0个频道中
Get PRO
四月 '25
+1
在0个频道中
Get PRO
三月 '25
+6
在0个频道中
Get PRO
二月 '25
+4
在0个频道中
Get PRO
一月 '25
+2
在0个频道中
Get PRO
十二月 '240
在1个频道中
Get PRO
十一月 '24
+1
在0个频道中
Get PRO
十月 '24
+1
在0个频道中
Get PRO
九月 '24
+2
在0个频道中
Get PRO
八月 '24
+2
在0个频道中
Get PRO
七月 '24
+3
在0个频道中
Get PRO
六月 '24
+3
在0个频道中
Get PRO
五月 '24
+4
在0个频道中
Get PRO
四月 '24
+3
在0个频道中
Get PRO
三月 '24
+3
在0个频道中
Get PRO
二月 '24
+3
在1个频道中
Get PRO
一月 '24
+2
在0个频道中
Get PRO
十二月 '23
+3
在0个频道中
Get PRO
十一月 '23
+4
在0个频道中
Get PRO
十月 '23
+3
在0个频道中
Get PRO
九月 '23
+8
在0个频道中
Get PRO
八月 '23
+4
在0个频道中
Get PRO
七月 '23
+14
在0个频道中
Get PRO
六月 '23
+6
在0个频道中
Get PRO
五月 '23
+8
在0个频道中
Get PRO
四月 '23
+41
在0个频道中
Get PRO
三月 '23
+6
在0个频道中
Get PRO
二月 '23
+9
在0个频道中
Get PRO
一月 '23
+17
在0个频道中
Get PRO
十二月 '22
+177
在0个频道中
Get PRO
十一月 '22
+142
在0个频道中
Get PRO
十月 '22
+26
在0个频道中
Get PRO
九月 '22
+328
在0个频道中
Get PRO
八月 '22
+1 290
在0个频道中
Get PRO
七月 '22
+106
在0个频道中
Get PRO
六月 '22
+2
在0个频道中
Get PRO
五月 '220
在0个频道中
Get PRO
四月 '220
在0个频道中
Get PRO
三月 '220
在0个频道中
Get PRO
二月 '220
在0个频道中
Get PRO
一月 '220
在0个频道中
Get PRO
十二月 '210
在0个频道中
Get PRO
十一月 '21
+1
在0个频道中
Get PRO
十月 '21
+1
在0个频道中
Get PRO
九月 '21
+4
在0个频道中
Get PRO
八月 '210
在0个频道中
Get PRO
七月 '210
在0个频道中
Get PRO
六月 '21
+1
在0个频道中
Get PRO
五月 '210
在0个频道中
Get PRO
四月 '21
+3
在0个频道中
Get PRO
三月 '21
+2
在0个频道中
Get PRO
二月 '210
在0个频道中
Get PRO
一月 '21
+1
在0个频道中
Get PRO
十二月 '20
+1 226
在0个频道中
| 日期 | 订阅者增长 | 提及 | 频道 | |
| 18 九月 | 0 | |||
| 17 九月 | 0 | |||
| 16 九月 | 0 | |||
| 15 九月 | 0 | |||
| 14 九月 | 0 | |||
| 13 九月 | 0 | |||
| 12 九月 | 0 | |||
| 11 九月 | 0 | |||
| 10 九月 | 0 | |||
| 09 九月 | 0 | |||
| 08 九月 | 0 | |||
| 07 九月 | 0 | |||
| 06 九月 | 0 | |||
| 05 九月 | 0 | |||
| 04 九月 | 0 | |||
| 03 九月 | 0 | |||
| 02 九月 | +1 | |||
| 01 九月 | 0 |
频道帖子
Первый путь - это сказать, что это нормальное поведение и просто проверять ифами наличие нужных нам атрибутов:
function getCost(elem) {
if (elem.dataset.price
!== undefined && elem.dataset.amount
!== undefined) {
return elem.dataset.price
* elem.dataset.amount;
} else {
return 0; // вернем
что-нибудь, например,
0 или null или false
}
}
📌 #instr || Фронтендщик
| 2 | Если теперь попробовать посчитать стоимость товара, то результате на экран выведется NaN. Согласитесь, не очень информативно.
Получается, нам нужно как-то обезопасится от того, что будут отсутствовать нужные нам атрибуты. Это можно сделать двумя путями.
📌 #instr || Фронтендщик | 14 |
| 3 | Найдем стоимость нашего продукта:
let product = document.querySelector('#product');
let cost = getCost(product);
alert(cost);
Предположим теперь следующую ситуацию: из-за какого-то сбоя на сервере он прислал нам товар, в котором отсутствует цена или количество (или оба сразу), например, вот так:
<div id="product"
data-product="яблоко" data-price="1000">
</div>
📌 #instr || Фронтендщик | 18 |
| 4 | Давайте сделаем функцию, которая будет принимать ссылку на элемент с продуктом и находить полную стоимость товара (цену умножать на количество):
function getCost(elem) {
return elem.dataset.price
* elem.dataset.amount;
}
📌 #instr || Фронтендщик | 21 |
| 5 |  Пример исключения с data- атрибутами в JavaScript
Пусть при загрузке страницы сервер создает HTML код, в котором хранится название, цена и количество купленного продукта:
<div id="product"
data-product="яблоко" data-price="1000"
data-amount="5"></div>
📌 #instr || Фронтендщик | 23 |
| 6 | Существуют разные способы сделать это. Самый простой - в throw передать объект с ключами name и message:
try {
throw {name: 'MyError',
message: 'текст
исключения'};
} catch (error) {
console.log(error.name);
// 'MyError'
console.log(error.message);
// 'текст
исключения'
}
📌 #instr || Фронтендщик | 19 |
| 7 | Выбрасывание своих типов исключений в JavaScript
Количество встроенных в JavaScript исключений не такое большое и они чаще всего не могут удовлетворить все наши потребности в разных типах исключений. Поэтому в JavaScript встроена возможность создавать исключения со своим типом.
📌 #instr || Фронтендщик | 16 |
| 8 |  В JavaScript предусмотрено решение этой проблемы: можно выбрасывать исключения не только типа
Error, но и любого встроенного в JavaScript типа ошибки, например, TypeError, SyntaxError, RangeError.
Давайте для примера выбросим исключение типа
SyntaxError:
try {
throw new SyntaxError('текст
исключения');
} catch (error) {
console.log(error.name);
// 'SyntaxError'
console.log(error.message);
// 'текст
исключения'
}
📌 #instr || Фронтендщик | 18 |
| 9 | Как вы видите, тип нашего исключения - 'Error'. Такой же тип будет у любых исключений, выброшенных подобным образом. Это, однако, не всегда будет удобно, так как, если у нас могут быть несколько исключений, мы не сможем их отличить друг от друга.
📌 #instr || Фронтендщик | 16 |
| 10 | Давайте для примера выбросим исключение типа SyntaxError:
try {
throw new SyntaxError('текст
исключения');
} catch (error) {
console.log(error.name);
// 'SyntaxError'
console.log(error.message);
// 'текст
исключения'
}
📌 #instr || Фронтендщик | 20 |
| 11 | В JavaScript предусмотрено решение этой проблемы: можно выбрасывать исключения не только типа Error, но и любого встроенного в JavaScript типа ошибки, например, TypeError, SyntaxError, RangeError.
📌 #instr || Фронтендщик | 18 |
| 12 | Как вы видите, тип нашего исключения - 'Error'. Такой же тип будет у любых исключений, выброшенных подобным образом. Это, однако, не всегда будет удобно, так как, если у нас могут быть несколько исключений, мы не сможем их отличить друг от друга.
📌 #instr || Фронтендщик | 19 |
| 13 | Выбрасывание различных типов исключений в JavaScript
Давайте выбросим свое исключение и посмотрим, как будет вести себя объект с ошибкой в этом случае:
try {
throw new Error('текст
исключения');
} catch (error) {
console.log(error.name);
// 'Error'
console.log(error.message);
// 'текст
исключения'
}
📌 #instr || Фронтендщик | 19 |
| 14 |  Давайте теперь будем перехватывать нашу ошибку и как-то ее обрабатывать:
try {
alert( div(3, 0) );
} catch (error) {
alert('вы пытаетесь
делить на
0, что запрещено');
}
📌 #instr || Фронтендщик | 20 |
| 15 | Давайте для начала просто попробуем поделить на 0, не перехватывая исключение:
alert( div(3, 0) );
В этом случае выполнение скрипта прервется и в консоли появится ошибка с текстом 'ошибка деления на ноль' (проверьте).
📌 #instr || Фронтендщик | 24 |
| 16 | Давайте будем считать, что деление на ноль запрещено и при попытке сделать это должна возникать исключительная ситуация. Для этого будем проверять в функции, нет ли попытки делить на 0. Если нет - будем делить, а если да - будем бросать исключение:
function div(a, b) {
if (b !== 0) {
return a / b;
} else {
throw new Error('ошибка
деления на
ноль');
}
}
📌 #instr || Фронтендщик | 21 |
| 17 | Выбрасывание исключения заставляет JavaScript считать, что случилась исключительная ситуация. Это значит, что такое исключение можно отловить с помощью конструкции try-catch и обработать нужным образом.
Давайте посмотрим на примере, как этим пользоваться. Пусть у нас есть функция, которая делит одно число на другое:
function div(a, b) {
return a / b;
}
📌 #instr || Фронтендщик | 21 |
| 18 | Давайте разберем синтаксис, необходимый для этого. Для начала исключение нужно создать с помощью команды new Error, параметром передав текст исключения:
new Error('текст исключения');
Затем это исключение нужно выбросить с помощью команды throw:
throw new Error('текст
исключения');
📌 #instr || Фронтендщик | 21 |
| 19 | Выбрасывание исключений в JavaScript
В предыдущих уроках мы изучили два места, в которых JavaScript выбрасывает исключение в случае каких-то проблем.
В вашем проекте, однако, могут быть и другие ситуации, которые для вас являются исключительными, а для JavaScript - нет. В таком случае мы можете создавать и выбрасывать свои, пользовательские исключения.
📌 #instr || Фронтендщик | 25 |
| 20 |  Наше сообщение, это, конечно, хорошо, но оно никак не дифференцирует возникшие проблемы. Более логично было бы вывести сообщение о том, какая именно проблема возникла.
Для этого отличим возникшие ошибки по имени:
try {
saveData('{1,2,3,4,5}');
} catch (error) {
if (error.name ==
'QuotaExceededError') {
alert('закончилось
место в
хранилище');
}
if (error.name ==
'SyntaxError') {
alert('некорректный JSON');
}
}
📌 #instr || Фронтендщик | 23 |
