FlightJS
FlightJs не новичок в этом районе. Этот небольшой фреймворк годами оставался незамеченным в мире Github. Взято из FlightJS Github: Flight — это легкий, основанный на компонентах JavaScript-фреймворк, который сопоставляет поведение с узлами DOM. В переформулировке мы используем повторно используемые компоненты, которые прослушивают вызовы событий. Затем эти события, в свою очередь, выполняют действия над DOM или манипулируют частями нашего кода. Сегодня мы начнем с FlightJs и покажем, насколько он прост в использовании. Хотя это руководство является вводным, я предполагаю, что мы неплохо разбираемся в HTML, CSS и JavaScript.
Начиная
В этом руководстве Intro to FlightJS мы сделаем то, что делают многие вводные руководства по фреймворку, — создадим счетчик. Приступим к работе.
Перейдите на Github FlightJS и установите FlightJS, используя ваш любимый метод.
HTML-код:
<h1>FlightJS Counter</h1>
<div class=”counter”>
<h2 class=”counter-total”>0</h2>
<div class=”counter-function”>
<a href=”#subtract” class=”counter-subtract”>-</a>
<a href=”#add” class=”counter-add”>+</a>
</div>
</div>
Прилавок
Для начала давайте создадим компонент FlightJS. Поскольку мы будем создавать счетчик, мы создадим компонент счетчика.
var Counter = flight.component(function() {
this.defaultAttrs({});
this.after(“initialize”, function() {
});
});
Мы сделали несколько вещей в примере выше. Во-первых, мы создали новый компонент Flight под названием Counter. Затем мы определили, что у компонента Counter нет атрибутов по умолчанию (это скоро изменится). Атрибуты обеспечивают два больших преимущества: Атрибуты компонента создают частные переменные для компонента. Во-вторых, атрибуты дают нам возможность назначать уникальные данные каждому экземпляру компонента. Наконец, в конце происходит странная вещь this.after(“initialize”). Отсюда большая сила. Flight выполнит функцию, которую мы указали в качестве второго аргумента, после запуска функции initialize (initialize — это внутренняя функция полета) . По сути, мы говорим Flight, что как только он наведется в порядок, давайте делать то, что нам нужно.
Так что же нужно счетчику? Нам нужно общее число, которое будет считаться. Ах да, и некоторые кнопки, которые при нажатии либо добавляют, либо вычитают единицу из общего количества. Давайте добавим это в наш JavaScript.
var Counter = flight.component(function() {
this.defaultAttrs({
"subtractSelector": ".counter-subtract",
"additionSelector": ".counter-add",
"count": 0
});
this.subtract(function() {});
this.add(function() {});
this.after(“initialize”, function() {
this.on("click", {
"subtractSelector": this.subtract,
"additionSelector": this.add
});
});
});
Сначала мы добавили некоторые атрибуты. Эти атрибуты предоставляют нам элемент DOM для кнопок вычитания и добавления — с именами subtractSelector и additionSelector соответственно — и определяют наш начальный счетчик. Затем мы создали несколько функций-заглушек на случай срабатывания события селектора. Наконец, создается обработчик события. this.on(“”) создает событие, связывающее его с тем, что мы определяем в кавычках. В этом случае мы ожидаем, что событие щелчка будет выполнено для наших селекторов DOM subtractSelector и additionSelector. После распознавания клика вызывается соответствующая функция. (this.subtract() или this.add())
Продолжая, вот наш готовый код:
var Counter = flight.component(function() {
this.defaultAttrs({
"subtractSelector": ".counter-subtract",
"additionSelector": ".counter-add",
"count": 0
});
this.subtract = function() {
this.attr.count--;
}
this.add = function() {
this.attr.count++;
}
this.uiDisplayCount = function() {
this.$node.find(“h2.counter-total”).html( this.attr.count );
}
this.after("add subtract", function() {
this.uiDisplayCount();
});
this.after(“initialize”, function() {
this.uiDisplayCount();
this.on("click", {
"subtractSelector": this.subtract,
"additionSelector": this.add
});
});
});
Наконец мы получаем функциональность. Функции вычитания и добавления выполняют -1 или +1 общее количество в зависимости от того, какое событие инициировано. . После того, как мы выполним эти действия с нашим счетчиком, у нас не будет возможности отобразить новую информацию. Здесь играет роль this.uiDisplayCount. Для любого энтузиаста jQuery эта функция очевидна. Возьмите наш атрибут count и вставьте его в HTML-код .counter-total. Но что такое this.$node? This.$node — это свойство, полученное от Flight, которое захватывает объект jQuery DOM, к которому прикреплен этот компонент. Позже мы присоединим компонент Counter к DOM и посмотрим, как это работает. Переходя к следующей функции, мы говорим нашему компоненту выполнить функцию uiDisplayCount после того, какфункции add или subtract будут выполнены. сделано казнено.
Теперь не хватает одной вещи, как мы на самом деле прикрепим это к DOM?
Counter.attachTo(“.counter”, { count: 100 });
Возвращаясь к предыдущему, наше свойство this.$node возвращает объект jQuery нашего .counter, $(“.counter”). Как мы видим по второму параметру, мы также можем изменить наши атрибуты по умолчанию после присоединения компонента. Это помогает применять модульный код, который проповедует Flight. Мы можем изменить атрибуты, чтобы они соответствовали любой ситуации.
Counter.attachTo(“.counter”, { count: 100 });
Counter.attachTo(“.counter-new”, {
count: 0,
subtractSelector: ".new-subtract"
});
Counter.attachTo(".counter-new-new", {
subtractSelector: ".s",
additionSelector: ".a"
});
Мы сделали это
Вот и все, мы завершили наш счетчик! Из этого небольшого примера видно, что Flight дает нам несколько мощных инструментов для создания модулированного кода без необходимости изучения новых парадигм. Как всегда, Flight может сделать гораздо больше. Для получения дополнительной информации о Flight посетите их Github.
Пример счетчика
Вот наш готовый продукт: http://codepen.io/ganderzz/pen/pjNdNq
