React - привязка методов

В классах Реакта можно заметить биндинг методов-обработчиков событий:

this.method = this.method.bind(this)

Биндинг внутри класса может показаться нелогичным. Виновник потребности в нем - потеря контекста this, когда метод присваивается другой переменной:

<element onClick=this.method>

Биндинг связывает this с контекстом класса, и контекст уже не теряется.

Есть и другие способы привязки this в классе. Подробнее:
https://getinstance.info/articles/react/react-and-es6-part3/

#React #JS

Тонкости импорта

В нативных модулях ES6 параметр import принимает строкой путь к модулю:

import React from 'react'

Этот путь может быть нескольких видов. Относительный и абсолютный используется по-умолчанию для кастомных модулей:
'./relativePath'
'/absolute/Path'/

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

Есть два предположения, почему так происходит:

1. Такой способ импорта допустим для встроенных модулей и библиотек со специфическими настройками;
2. Такой способ специфичен для Webpack.

А вы как думаете?

#JS #React

Спасибо всем, кто участвовал в опросе.
Верный вариант - специфика Webpack.

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

#JS #React #Webpack

jQuery - лучшие практики:

- Для подключения:
1. Всегда оставлять возможность загрузки локальной копии:
window.jQuery || document.write(путь к CDN)
2. В пути к CDN опускать протокол:
//...путь

- Для переменных:
1. Желательно сохранять jQuery-объекты в переменные, таким образом кэшируя их.
2. Созданные для этого переменные желательно именовать с префиксом $: const $selectors = $(...)

- Для селекторов:
1. Предпочтительно использовать ID-селекторы.
2. Для поиска дочерних вложенных элементов предпочтительнее метод .find(), чем указание вложенности в селекторе:
$("#products").find("div.id");
3. Вообще конкретизировать область поиска селекторов:
$('.class', '#class-container');
4. Не смешивать ID с другими селекторами (теряется оптимизация поиска).

- Обработка DOM:
1. Если элемент нужно обработать, его нужно извлечь из DOM с сохранением информации о нем. Для этого используется .detach():
let $myList = $("...").detach();
//... действия по обработке $myList
$myList.appendTo("#list-container");
2. Если элемента может не быть на странице, нужно выполнять проверку его присутствия, прежде чем запускать логику взаимодействия.

#JS #jQuery #best_practices

jQuery - лучшие практики, часть 2:

- События:
1. Использовать только один обработчик события document.ready, а не распихивать код по нескольким.
2. Описывать функции обработки событий вне обработчика, передавая ему только имя функции. Выгода - читабельность, легкость отладки.
3. Используя jQuery, стоит всегда назначать события через него - без инлайн-кода. Выгода - консистентность.

- Анимация:
1. Лучше предустановленные значения скорости анимации, чем кастомные.

- Плагины:
1. Хорошо задокументированные популярные плагины предпочтительнее - сообщество следит за багами и уязвимостями.

- Чейнинг:
1. Чейнинг методов предпочтительнее создания новых переменных или селекторов. Для легкости чтения звенья лучше разносить по строкам. В длинных цепочках можно кэшировать промежуточные объекты.

- Прочее:
1. Для передачи нескольких однотипных параметров лучше не вызывать метод несколько раз, а передать параметры литералом объекта:

$myLink.attr({
href: "#",
title: "my link",
rel: "external"
});

2. Не стоит писать CSS прямо в jQuery, вместо этого лучше определить правило в таблице стилей и передавать его элементу.

Warning! Часть инфы может быть неактуальной для новых версий jQuery.

#JS #jQuery #best_practices

Полезные практики в React:

- Сократить код обращения к this.state можно, пользуясь деструктуризацией:

const { firstState, secondState } = this.state

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

const handler = itemToFind => item => item.title.includes(itemTiFind)

Здесь функция handler возвращает функцию, которая передается, например, в map и используется для фильтрации.

#React #JS

JS: любопытные решения задач

- Найти сумму чисел от 1 до n короче всего не через цикл или рекурсию, а по уравнению Гаусса:
lastNumber * (lastNumber + 1) / 2;

- Самый короткий способ найти количество цифр в числе:
String(number).length;

- Кратчайший поиск индекса последнего вхождения числа в массив:
array.lastIndexOf(number);

#JS

JS - Map/WeakMap, Set/WeakSet

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

- WeakMap - аналог Map, который гарантированно удаляется сборщиком мусора после удаления ссылок на объекты, добавленные в коллекцию.

- Set создает множества:
const s = new Set([0, 1, 2, 3]);
Его weak-аналог отличается тем же, чем и в случае с Map.

#JS

Тонкости let и const

- Хотя константе нельзя присвоить новое значение, само это значение менять можно:

const x = [2,4,5];
x[0] = 6; // массив в константе x изменится на [6, 4 ,5]

- Дважды объявить через let переменную с одинаковым именем в одной области видимости нельзя, а в разных - можно:

let x = 10;
const z = () => {
let x = 20;
console.log(x)
}
z() // выведет 20

- Существует феномен Temporal Dead Zone - "временная мёртвая зона", появляющаяся, когда поток входит в лексическую область видимости, содержащую переменную, но еще не доходит до неё. Попытка обратиться к переменной в мёртвой зоне вызовет ошибку - в отличие от var, которая поднимается в самое начало блока и выводит undefined, если обратиться к ней до привязки.

const x = () => {
console.log(typeof z);
let z = 10;
}
x() // выбросит ошибку

Любопытно, что обращение к let-переменной в более высокой области видимости до её инициализации с операцией typeof выведет undefined.

- При объявлении в глобальной области видимости var становится свойством глобального объекта window. Это небезопасное поведение изменили в ES6: let и const не связаны с глобальным объектом.

#JS

Коротко о Vue-Class-Component:

- Computed properties определяются как геттеры и сеттеры класса:
// Declared as computed property getter
get name() {
return this.firstName + ' ' + this.lastName
}

- Хуки и методы жизненного цикла можно определять как простые методы.

- Хуки из vue router и другие не из коробки нужно регистрировать, желательно в отдельном файле, через Component.registerHooks.

- Можно создавать кастомные декораторы:
@MyDecorator
method(arg)

- Возможно наследование через обычный ES6 синтаксис.

- Нельзя использовать функции-стрелки с this внутри и конструкторы. Вместо них используют обычные методы (вместо стрелок) и методы жизненного цикла. Почему нельзя? Конструктор вызывается под капотом компонента, собирая данные, если вызывать вручную - вызовется дважды:

// DO NOT do this. Use "created" lifecycle hook instead.
constructor() {
fetch('/posts.json')
.then(res => res.json())
.then(posts => {
this.posts = posts
})
}

#Vue #JS