JavaScript *

Прототипно-ориентированный язык программирования

СтатьиПостыНовостиАвторыКомпании

norlin 31 авг 2012 в 08:24

Vanilla JS — очень мощный javascript-фреймворк

4 мин

196K

JavaScript * Веб-разработка * Ненормальное программирование *

Recovery Mode

Как ни странно, на Хабре упоминание этого мощнейшего фреймворка нашлось лишь в одном комментарии от апреля 2012 года.

Вступление

Для меня эта тема особенно актуальна, ведь последнее время на Хабре упоминается огромное количество js-фреймворков. Какие-то из них авторы различных проектов находят в Сети, какие-то — пишут сами, ~~не очень понимая зачем~~. Кто-то просто пишет свои велосипеды.

Моё же мнение — надо стремиться к отсутствию избыточного кода, к максимальному минимализму, простите за тавтологию.
Если на весь сайт вам нужно только выбирать html-элементы по их id — глупо подключать jQuery.

Если вам на Node.js проекте надо собрать пачку js-файлов и сжать их — глупо писать или подключать тяжёлые фреймворки с кучей настроек, параметров, дополнений и методов, ведь простейший скрипт, склеивающий файлы и прогоняющий их через Кроукфордский jsmin будет намного быстрее, надёжнее и проще.

Чем больше кода — тем больше ошибок. Чем больше стороннего кода — тем сложнее поддерживать проект. Ведь когда вы берёте чужой код, вы берёте на себя и ответственность за его поддержку. Нельзя будет сказать «этот баг не мой, а вон из той библиотеки».

Vanilla JS

Итак, начнём обзор этого мощнейшего и самого популярного в мире JS-фреймворка.

+87

Finom 31 авг 2012 в 00:38

Object.defineProperty или как сделать код капельку лучше

3 мин

35K

JavaScript *

Туториал

Этот краткий пост-заметку ~~или температурный бред (в Одессе похолодало, да)~~ хочу посвятить такой прекрасной функции, как Object.defineProperty (и Object.defineProperties). Активно использую её уже около двух месяцев, так как поддержка старых браузеров (в том числе и IE8) в проекте, который я сейчас реализую, не требуется (завидуйте).

Как положено статье на хабре, приведу краткое описание того, что она делает. Object.defineProperty добавляет новое свойство, обладающее неким нестандартным для обычного свойства поведением, и принимает три аргумента:

Объект, который мы модифицируем, добавляя новое свойство
Свойство (строка), которое, собственно, хотим добавить
Дескриптор: объект, содержащий «настройки» нового свойства, например аццессоры (геттер, сеттер)

Дескриптор может содержать следующие свойства:

value (любое значение: строка, функция...) — значение, которое получит определяемое свойство объекта (геттер и сеттер в данном случае определить нельзя)
writable (true/false) — можно ли перезаписать значение свойства (аццессоры тоже не доступны)
get (функция) — геттер (value и writable определить нельзя)
set (функция) — сеттер (value и writable определить нельзя)
configurable (true/false) — можно ли переопределить дескриптор (использовать Object.defineProperty над тем же свойством)
enumerable (true/false) — будет ли свойство перечисляться через for..in и доступно в Object.keys (плохая формулировка)

Пример

Содержимое

// Код сперт с MDN
var o = {};
Object.defineProperty(o, "a", {value : 37,
                               writable : true,
                               enumerable : true,
                               configurable : true});

 
var bValue;
Object.defineProperty(o, "b", {get : function(){ return bValue; },
                               set : function(newValue){ bValue = newValue; },
                               enumerable : true,
                               configurable : true});

Лучше меня объяснит MDN Object/defineProperty. Благо, даже английский знать не надо, и так всё понятно.

Если нужно определить сразу несколько свойств, можно использовать Object.defineProperties, который принимает два аргумента: объект, требующий изменений и объект с определяемыми ключами.
MDN: Object/defineProperties.

Пример

Содержимое

// Код сперт с MDN
Object.defineProperties(obj, {
  "property1": {
    value: true,
    writable: true
  },
  "property2": {
    value: "Hello",
    writable: false
  }
  // etc. etc.
});

Теперь соль. Чего я вообще решил это запостить?

JavaScript *

Вступление

Vanilla JS

Проблема компонент

Что это?

Вступление

Представляю вашему вниманию меню с плавной инверсией цвета при перетекании курсора.