Skip to content

Instantly share code, notes, and snippets.

@GoodDayTodayOkey
GoodDayTodayOkey / js-patterns-objects.md
Created December 14, 2017 04:12
JS Шаблоны. Шаблоны создания объектов и повторное использование кода

JS Шаблоны. Шаблоны создания объектов и повторное использование кода

Содержание

  1. Способы создания пространств имен в JS
  2. Шаблон модуль
  3. Повторное использование кода. Классические и современные шаблоны наследования.

Пространства имен в JS

В JS нет специальной конструкции для опредления пространства имен. Для того, чтобы избежать конфликтов имен необходимо использовать глобальный объект.

@GoodDayTodayOkey
GoodDayTodayOkey / js-patterns-functions.md
Created December 14, 2017 04:12
JS Шаблоны. Функции.

JS Шаблоны. Функции

Содержание

  • Терминология
  • Функции обратного вызова
  • Самоопределяемые функции
  • Немедленно вызываемые функции
  • Замыкание
  • Мемоизация
/*
Стенограмма видео https://www.youtube.com/watch?v=xydnbUZqzto
В яваскрипте функции имеют такую особенность, как различные способы вызова.
После вызова функции, она получает 2 доп параметра:
- Ключевое слово this
- Псевдомассив arguments
Всего есть 4 шаблона (паттерна) вызова функций:
@GoodDayTodayOkey
GoodDayTodayOkey / js-pattrens-literals-&-constructors.md
Created December 14, 2017 04:11
JS Шаблоны 01. Литералы и конструкторы.

JavaScript Шаблоны. Литералы и конструкторы.

Содержание

  • Литералы объектов
  • Пользовательские конструкторы
  • Литералы массивов
  • Работа с простыми типами данных

Шаблон - это повторяемая архитектурная конструкция, представляющая собой решение проблемы проектирования в рамках некоторого часто повторяющегося контекста. https://en.wikipedia.org/wiki/Pattern

@GoodDayTodayOkey
GoodDayTodayOkey / js-patterns-4.md
Created December 14, 2017 04:11
JS Шаблоны 4. Шаблоны проектирования

JS Шаблоны 4. Шаблоны проектирования

Содержание

  • Singleton
  • Factory
  • Iterator
  • Strategy
  • Facade
  • Proxy
@GoodDayTodayOkey
GoodDayTodayOkey / js-advanced-1-constructors-&-prototypes.md
Created December 14, 2017 04:09 — forked from ncer/js-advanced-1-constructors-&-prototypes.md
JS Advanced 1. Конструкторы и прототипы

JS Advanced 1. Конструкторы и прототипы

Содержание

  • Конструкторы
  • Создание пользовательских конструкторов, ключевое слово this
  • Прототипы
  • Конструктор Object и его методы
  • Техники ООП: инкапсуляция, наследование, полиморфизм

В ходе урока рассматриваются:

@GoodDayTodayOkey
GoodDayTodayOkey / js-pattterns-dom.md
Created December 14, 2017 04:09
JS Шаблоны 5. Работа с DOM

JS Шаблоны 5. Работа с DOM

Содержание

  • Шаблоны и антишаблоны работы с DOM
  • Сценарии, работающие продолжительное время
  • Развертывание готовых сценариев

Рассмотрим, как правильно замерять производительность веб-приложений и какие ошибки часто допускают новички при работе с DOM.

@GoodDayTodayOkey
GoodDayTodayOkey / web-components-intro.md
Created December 14, 2017 04:09 — forked from ncer/web-components-intro.md
Web Components 1. Введение

Web Components 1. Введение

Веб-компоненты - набор технологий, задача которых позволить нам создавать повторно используемые HTML элементы.

В HTML5 есть ряд элементов, которые являются нечто большим, чем просто теги. Например, <audio> - это целый компонент, который в браузере превращается в набор логики и контролов (play/pause/stop/progressbar). Идея веб-компонентов - дать возможность создавать свои теги, которые в браузере будут превращаться в кусок DOM со своей логикой и структурой. В разметке пишем просто тег, в барузере отрисовывается целый компонент.

Предпосылки возникновения веб-компонентов

Слабая семантика (div soup)

@GoodDayTodayOkey
GoodDayTodayOkey / build-html.md
Created December 14, 2017 04:09 — forked from ncer/build-html.md
Этапы верстки
@GoodDayTodayOkey
GoodDayTodayOkey / device.css
Created December 14, 2017 04:07 — forked from ncer/device.css
Quick css hacks to target android/ios
.visible-android {
display:none;
}
.visible-ios {
display:none;
}
.on-device .visible-android, .on-device .visible-android {
display:inherit;
}
.device-ios .visible-android {