Рубрики
Без рубрики

Введение в стимул .js

ВВЕДЕНИЕ STIMULUS.JS – это скромная структура JavaScript для HTML, которую у вас уже есть … Теги с стимулом, JavaScript, программированием.

ВВЕДЕНИЕ

Стимул.js Это скромный JavaScript Framework для HTML, который вы уже имеете, путем подключения объектов JavaScript (контроллеров) к HTML на странице организованным способом.

В отличие от других JavaScript Frameworks, она не берет на себя все нанесение вашего интерфейса. Команда BaseCamp создала ее, чтобы упростить проблему архитектуры, управляемую для тяжелой передней части, которая в настоящее время в Vogue.

Эта статья представит вас с помощью STEMULUS.JS, создавая слайд-шоу и как она может помочь структурировать фронт-концом приложения кодовая база.

Предпосылка

Для этого учебника вам понадобится:

  • Основное понимание HTML.
  • Пряжа установлен на вашем P.C

Как стимул .JS отличается от современных JavaScript Frameworks

STIMULUS.JS отличается от современных JavaScript Frameworks, которые доступны сегодня. Он не представляет шаблоны, такие как эти современные JavaScript Frameworks, которые полагаются на поворот JSON в элементы DOM через язык шаблона. Он полагается на доме, чтобы держать состояние. Он также соединяет действия и события на переднем конце приложения к контроллерам на бэкэнде.

Основные понятия

STIMULUS.JS имеет три (3) основные концепции. Это контроллеры, действия и цели. Вот пример кода, который вы напишите, чтобы скопировать текст из поля ввода в буфер обмена:

PIN:

И сопровождающий JavaScript выглядит так.

#clipboard_controller.js

import {Controller} from "stimulus"

export default class extends Controller{
    static targets = ['source']
    copy(){
        this.sourceTarget.select()
        document.execCommand('copy')
    }
}

Контроллеры

Контроллеры относятся к экземплярам классов JavaScript, которые вы определяете в своем приложении. Контроллер данных Атрибут подключает HTML к JavaScript.

Действия

Подумайте о действиях как способ обработки событий DOM в вашем контроллере. В разметке буфера обмена атрибут данных Data-Action = "Буфер обмена # копия" Копирует текст, когда мы нажимаем на кнопку в HTML и запускают действие Скопировать в контроллере.

Цели

Цели позволяют определить необходимые элементы, которые будут доступны для вашего контроллера. Copboard-Plusboard-Target = «Источник» Устанавливает цель с именем Источник В контроллере, и мы можем получить доступ к этому, используя This.sourcetarget. .

НАЧИНАЯ

Чтобы начать, вам нужно клонировать и настроить Стимул-стартер Отказ Вы можете сделать это с помощью команд:

$ git clone https://github.com/hotwired/stimulus-starter.git
$ cd stimulus-starter
$ yarn install
$ yarn start

Затем посетите http://localhost: 9000/ в вашем браузере.

Создание слайд-шоу со стимулом.

В этом разделе я продемонстрирую, как создать слайд-шоу, используя Symulus.js.

Создание контроллера

Откройте файл индекса в общественном каталоге и обновите его с помощью этого кода.

 

В Стимул-стартер , есть папка контроллера, поэтому давайте создадим файл Slideshow_controller.js И добавьте это:

import { Controller } from "stimulus"

export default class extends Controller {

}

Давайте сломаемся, что происходит в кодовых фрагцах выше.

Контроллер данных Атрибут соединяет наш контроллер до DOM с помощью слайд-шоу идентификатора.

Подключение действия

Теперь давайте добавим кнопку внутри

Для подключения метода действия к кнопке Нажмите мероприятие. Мы можем сделать это, добавив Data-Action атрибут кнопку.

    
    

У нас сейчас есть

 

А в контроллере добавить:

import { Controller } from "stimulus"

export default class extends Controller {

  initialize() {
    this.index = 0
  }

  next() {
    this.index++
  }

  previous() {
    this.index--
  }
}

Мы можем посмотреть на фрагмент кода выше и понять, что происходит. Data-Action ценность Нажмите-> Слайд-шоу # предыдущий и Нажмите-> Слайд-шоу # Далее называются дескрипторами действий. Дескриптор говорит, что:

  • Нажмите это название события
  • слайд-шоу Идентификатор контроллера
  • предыдущий С Следующий имена метода

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

Используя цели

Добавьте следующее в

Отказ

slide 1
slide 2
slide 3

У нас есть это сейчас.

slide 1
slide 2
slide 3

В указанном выше коде мы создали цель, добавив Data-SlideShow-Target С ценным скольжением к Div элемент.

Далее давайте создадим свойство для цели, добавив слайд в целевое определение в контроллере. STIMULUS.JS автоматически создает Это .sslidetarget Свойство, чтобы получить первый элемент.

 import { Controller } from "stimulus"

 export default class extends Controller {

  static targets = [ "slide" ]

  initialize() {
    this.index = 0
  }

  next() {
    this.index++
  }

  previous() {
    this.index--
  }
}

Теперь давайте добавим метод ShowCurrentsLide () который будет петлен по каждой цели слайд.

showCurrentSlide() {
    this.slideTargets.forEach((element, index) => {
      element.hidden = index != this.index
    })
  }

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

Обновите Slideshow_controller.js так.

import { Controller } from "stimulus"

export default class extends Controller {
  static targets = [ "slide" ]

  initialize() {
    this.index = 0
    this.showCurrentSlide()
  }

  next() {
    this.index++
    this.showCurrentSlide()
  }

  previous() {
    this.index--
    this.showCurrentSlide()
  }

  showCurrentSlide() {
    this.slideTargets.forEach((element, index) => {
      element.hidden = index != this.index
    })
  }
} 

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

ЗАКЛЮЧЕНИЕ

В этом руководстве мы учимся не то, что стимул. Джей, основные понятия, и продемонстрировали, как создать слайд-шоу.

Оригинал: “https://dev.to/buildwithallan/an-introduction-to-stimulus-js-ik1”