JavaScript Основные паттерны — 2

  • Пишите читаемый код.
  • Снижайте количество глобальных переменных. В идеале одна переменная на одно приложение.
  • Объявляйте переменные вверху функции.
  •  Кешируйте свойство lenght для циклов, во внешних переменных, когда работаете с DOM.
  • Для for-in циклв, проверяйте свойства методом hasOwnProperty(), чтобы избежать обработки унаследованных свойств.
  • eval — evil!
  • Не желательно расширять прототипы.
  • Следуйте соглашения по оформлению кода.
  • Комментируйте код, пишите документацию с описанием API.
  • Не пытайтесь писать сжатый код, используйте для этого специальные инструменты.

JavaScript Основные паттерны

  • JavaScript это ООП язык, в нем все является объектами. (кроме строк, чисел, логических значений (имеют объектно-ориентированные обертки), null и undefined).
  •  В JavaScript отсутствуют классы. (До ECMAScript 6)
  • Каждый объект имеет прототип, который можно расширить.
  • Разные среды выполнения имеют разные встроенные объекты.
  • В ECMAScript5 предусмотрен строгий режим, в котором сложнее допустить ошибку.
  • Инструмент JSLint нужно использовать для проверки синтаксиса. (Можно установить в текстовый редактор или зайти на сайт — http://www.jslint.com)
  • Каждая среда имеет объект console, при помощи которого можно выводить сообщения в консоль.

Как изменить css свойство на всем проекте

Для того чтобы изменить css правило во всех файла проекта, мы будем использовать nodejs, модули: glob, fs и lodash.

Если у вас отсутствуют какие-либо модули, установить их можно через npm:

npm install glob
npm install lodash
npm install fs
// Скрипт замены строки.

// Подключаем необходимые модули.
var glob = require('glob');
var _ = require('lodash');
var fs = require('fs');

// Читаем каждйы файл с расширением css.
glob('bem/blocks/**/*.css', function (er, files) {
    // Для каждого файла.
    _.each(files, function(file) {
        // Читаем файл.
        var readFile = fs.readFileSync(file, 'utf8');
        // Заменяем строку равную RegExp'у со свойством, в нашем случае font-size c числом.
        var result = readFile.replace(/font-size ([0-9\.]+)/g, function () {
            // Указываем на что заменить, в аргументы передаются числа из группы RegExp'а.
            return 'font:' + arguments[1] + ' px;';
        });
        console.log(result);
        // Пишем резуьтат в файл.
        fs.writeFileSync(file, result, 'utf8');
    });
});

Комбинированные селекторы

A B — выбирает элементы документа, которые соответствуют селектору B и являются потомками A.
A > B — выбирает элементы B, которые являются прямыми потомками A.
A + B — выбирает элементы B, которые идут сразу после A.
A ~ B — выбирает элементы B, являющиеся братскими элементам A.

Селекторы описываются в спецификации CSS3 и поддерживаются библиотекой Jquery.

Категории событий JavaScript

Аппаратно-зависимые события ввода.

События этой категории связаны с конкретными устройствами ввода.

  • keypress
  • onmousedown
  • touchmove и т.д.

Аппаратно-независимые события ввода.

Эти события не связаны с конкретными устройством. Например, click указывает на то, что кнопка была активирована. Его причиной может стать не только кнопка мыши, но также нажатие клавиши на клавиатуре или некоторое перемещение на сенсорном экране.

События пользовательского интерфейса.

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

  • focus
  • change
  • submit и т.д.

События изменения состояния.

Отражают состояния браузера и сетевых процессов.

  • load
  • loadstart
  • progress
  • readystatechange и т.д.

Прикладные события.

События собственных интерфейсов. (Определенные стандартом HTML5)

  • play
  • dragstart
  • volumechange и т.д.

Обработчики ошибок и событий от таймеров.

  • onerror

Функции как данные

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

 

var array = [ function square(a, b) { return a * b }, 2, 3];

var s = array[0](array[1], array[2]); // => 2 * 3 = 6

Методы some() и every()

Методы some() и every() являются предикатами массива. Они применяют указанную в аргументе функцию к каждому элементу массива и возвращают true или false.

every() — возвращает true, когда функция в параметре для каждого элемента возвращает true.

some() — вернет true, если хотя бы одна функция в параметре вернет true.

Проверка существования свойств

Для проверки принадлежности свойства к объекту существует три способа:

  • Оператор in
  • Метод hasOwnProperty()
  • propertyIsEnumerable()

in — возвращает true для всех существующих свойств объекта, в том числе и наследуемых.
hasOwnProperty() — true только для собственных. (Наследуемые вернут false)
propertIsEnumerable() — true только для свойств созданных программой.