From Bahdan

Clean code

Kiss

Anti pattern

Softcoding

Common query separation

Бдд/tdd

Юнит тесты зачтвляют писать ояень простые методы

Publisher subscriber

Low caplean

DOM

CSS

Children childnodes

Полиморфизм

Sub type

Self presentation

debounce throttle

Delete window. X

Web workers

Cors

Prev . Lite

Long poling polling

D/z self preesentation

Frameworks

sub type/ad hoc полиморфизм

инкапсуляция

runner assertions mock

проверка регрессии,

big O

[HTML] семантические тэги

Семантические элементы HTML5 доступно описывают свой смысл или назначение как для браузеров, так и для веб-разработчиков.

web storage

хранилище сессии (sessionStorage) обслуживает область хранения данных для каждого домена, доступное на протяжении сессии. (пока браузер открыт, даже в случае перезагрузки страницы)
локальное хранилище (localStorage) делает то же самое, но сохраняет данные даже в случае, если переоткрыть браузер

БЭМ

БЛОК - Функционально независимый компонент страницы, который может быть повторно использован. В HTML блоки представлены атрибутом class.

Название блока характеризует смысл («что это?» — «меню»: menu, «кнопка»: button), а не состояние («какой, как выглядит?» — «красный»: red, «большой»: big).

ЭЛЕМЕНТ- Составная часть блока, которая не может использоваться в отрыве от него.

Название элемента характеризует смысл («что это?» — «пункт»: item, «текст»: text), а не состояние («какой, как выглядит?» — «красный»: red, «большой»: big).

Структура полного имени элемента соответствует схеме: имя-блока__имя-элемента. Имя элемента отделяется от имени блока двумя подчеркиваниями (__).

МОДИФИКАТОР -Cущность, определяющая внешний вид, состояние или поведение блока либо элемента.

Название модификатора характеризует внешний вид («какой размер?», «какая тема?» и т. п. — «размер»: size_s, «тема»: theme_islands), состояние («чем отличается от прочих?» — «отключен»: disabled, «фокусированный»: focused) и поведение («как ведет себя?», «как взаимодействует с пользователем?» — «направление»: directions_left-top).

Имя модификатора отделяется от имени блока или элемента одним подчеркиванием (_).

Pre/Postprocessors

CSS препроцессор (CSS preprocessor) - это программа, которая имеет свой собственный синтаксис (syntax), но может сгенерировать из него CSS код

Препроцессоры используют язык, который компилируется в CSS. А постпроцессоры реставрируют CSS код так, чтобы он работал наилучшим образом в современных браузерах

TypeScript

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

generics

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

SOLID

S-Принцип единственной ответственности

Каждый класс должен решать лишь одну задачу.

O-Принцип открытости-закрытости

Программные сущности (классы, модули, функции) должны быть открыты для расширения, но не для модификации.

L-Принцип подстановки Барбары Лисков

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

I-Принцип разделения интерфейса

Создавайте узкоспециализированные интерфейсы, предназначенные для конкретного клиента. Клиенты не должны зависеть от интерфейсов, которые они не используют.

D-Принцип инверсии зависимостей

зависимости внутри системы строятся на основе абстракций

SCOPE(Область видимости )

Область видимости — это место, где (или откуда) мы имеем доступ к переменным или функциям. JS имеем три типа областей видимости: глобальная, функциональная и блочная (ES6).

Глобальная область видимости — переменные и функции, объявленные в глобальном пространстве имен, имеют глобальную область видимости и доступны из любого места в коде.

// глобальное пространство имен
var g = 'global'

function globalFunc() {
    function innerFunc() {
        console.log(g) // имеет доступ к переменной g, поскольку она является глобальной
    }
    innerFunc()
}

Функциональная область видимости (область видимости функции) — переменные, функции и параметры, объявленные внутри функции, доступны только внутри этой функции.

function myFavouriteFunc(a) {
    if (true) {
        var b = 'Hello ' + a
    }
    return b
}
myFavouriteFunc('World')

console.log(a) // Uncaught ReferenceError: a is not defined
console.log(b) // не выполнится

Блочная область видимости — переменные (объявленные с помощью ключевых слов «let» и «const») внутри блока ({ }), доступны только внутри него.

function testBlock() {
    if (true) {
        let z = 5
    }
    return z
}

testBlock() // Uncaught ReferenceError: z is not defined

CLOSURES( Замыкание )

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

Design Patterns

PreviousFrom Siarhei NextTasks

Last updated 4 years ago

Was this helpful?

// глобальное пространство имен var g = 'global' function globalFunc() { function innerFunc() { console.log(g) // имеет доступ к переменной g, поскольку она является глобальной } innerFunc() }

function myFavouriteFunc(a) { if (true) { var b = 'Hello ' + a } return b } myFavouriteFunc('World') console.log(a) // Uncaught ReferenceError: a is not defined console.log(b) // не выполнится