자극적인 소개.JS

머리말
Stimulus.js은 적절한 자바스크립트 프레임워크로 자바스크립트 대상(컨트롤러)을 페이지의 HTML에 조직적으로 연결시켜 기존의 HTML을 실현한다.
다른 JavaScript 프레임워크와 달리 전체 프런트엔드 응용 프로그램은 관리되지 않습니다.Basecamp팀은 현재 유행하는 중형 전단 구동 구조의 문제를 간소화하기 위해 만들었습니다.
이 글은 너에게 자극을 소개할 것이다.js, 그리고 응용 프로그램의 전단 코드 라이브러리 구축을 어떻게 도와줍니까?

선결 조건
이 자습서의 경우 다음을 수행해야 합니다.

은 HTML에 대해 기본적으로 알고 있습니다.

PC

에 Yarn 설치

얼마나 자극적인데.JS는 현대 JAVASCRIPT 프레임워크와 다르다
자극js는 현재 사용 가능한 현대 자바스크립트 프레임워크와 다르다.이것은 이러한 현대 자바스크립트 프레임워크처럼 템플릿 언어를 통해 JSON을 DOM 요소로 변환하는 템플릿에 의존하지 않습니다.그것은 DOM에 의해 국가를 통제한다.또한 애플리케이션의 프런트엔드 작업과 이벤트를 백엔드 디렉터에 연결합니다.

핵심 개념
자극js는 세 가지 주요 개념이 있다.이것들은 컨트롤러, 동작, 목표들이다.다음은 입력 필드에서 클립보드로 텍스트를 복사하는 코드 예입니다.

<div data-controller="clipboard">
  PIN: <input data-clipboard-target="source" type="text" value="1234" readonly>
  <button data-action="clipboard#copy">Copy to Clipboard</button>
</div>

제공된 JavaScript는 다음과 같습니다.

#clipboard_controller.js

import {Controller} from "stimulus"

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

컨트롤러
컨트롤러는 응용 프로그램에 정의된 JavaScript 클래스의 인스턴스입니다.data-controller 속성은 HTML을 JavaScript에 연결합니다.

행동
DOM 이벤트를 디렉터에서 처리하는 방법으로 간주합니다.클립보드 표시줄에서 HTML의 단추를 누르고 컨트롤러에서 data-action="clipboard#copy"을 실행할 때 데이터 속성 copy은 텍스트를 복사합니다.

목표
대상은 컨트롤러가 사용할 수 있는 기본 요소를 정의할 수 있도록 합니다.data-clipboard-target=" source"은 컨트롤러에 source이라는 목표를 설정하여 this.sourceTarget으로 접근할 수 있습니다.

개시하다
시작하려면 클론을 생성하고 stimulus-starter을 설정해야 합니다.다음 명령을 사용하여 이 작업을 수행할 수 있습니다.

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

그리고 브라우저에서 http://localhost:9000/을 방문하세요.

자극으로 슬라이드를 만들다.JS
이 절에서는 자극을 사용하여 슬라이드를 만드는 방법을 보여 드리겠습니다.js.

컨트롤러 만들기
공공 디렉터리에서 색인 파일을 열고 다음 코드로 업데이트합니다.

 <div data-controller="slideshow">

 </div>

stimulus-starter에는 컨트롤러 폴더가 있으므로 파일 slideshow_controller.js을 만들고 다음을 추가합니다.

import { Controller } from "stimulus"

export default class extends Controller {

}

위의 코드 세션에서 무슨 일이 일어났는지 분석해 봅시다.data-controller 속성은 식별자 슬라이드를 통해 컨트롤러를 DOM에 연결합니다.

연결 동작
이제 <div>에 버튼을 추가하여 버튼의 click 이벤트에 조작 방법을 연결합시다.우리는 버튼에 data-action 속성을 추가해서 이 점을 실현할 수 있다.

    <button data-action="click->slideshow#previous" class="btn"> ← </button>
    <button data-action="click->slideshow#next" class="btn">  → </button>

저희 지금 있어요.

 <div data-controller="slideshow">
    <button data-action="click->slideshow#previous" class="btn"> ← </button>
    <button data-action="click->slideshow#next" class="btn">  → </button>
  </div>

디렉터에 다음을 추가합니다.

import { Controller } from "stimulus"

export default class extends Controller {

  initialize() {
    this.index = 0
  }

  next() {
    this.index++
  }

  previous() {
    this.index--
  }
}

우리는 위의 코드 세션을 보고 무슨 일이 일어났는지 알 수 있다.data-action치 click->slideshow#previous과 click->slideshow#next을 동작 묘사부라고 부른다.설명자:

click은 이벤트

의 이름입니다.

slideshow은 컨트롤러 식별자

previous, next은 메소드

의 이름입니다.initialize 방법은 첫 번째 슬라이드를 보여 줍니다.우리가 단추를 눌렀을 때, 컨트롤러의 next()과 previous() 방법은 현재 슬라이드로 전진하고 되돌아왔다. (현재 우리가 단추를 눌렀을 때 단추가 아무런 역할을 하지 않는다.)

사용 목표<div>에 다음을 추가합니다.

<div data-slideshow-target="slide">slide 1</div>
<div data-slideshow-target="slide">slide 2</div>
<div data-slideshow-target="slide">slide 3</div>

우리 이제 이거 생겼어.

<div data-controller="slideshow">
    <button data-action="click->slideshow#previous" class="btn"> ← </button>
    <button data-action="click->slideshow#next" class="btn">  → </button>

    <div data-slideshow-target="slide">slide 1</div>
    <div data-slideshow-target="slide">slide 2</div>
    <div data-slideshow-target="slide">slide 3</div>
  </div>

위 코드에서 우리는 data-slideshow-target 요소에 값 슬라이드를 추가한 div을 통해 목표를 만들었다.
다음은 컨트롤러의 목표 정의에 슬라이드를 추가해서 목표의 속성을 만듭니다.자극js는 첫 번째 요소를 얻기 위해 this.slideTarget 속성을 자동으로 생성합니다.

 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
    })
  }

이것은 모든 슬라이드 목표를 순환하고 색인이 일치할 때 hidden 속성을 전환합니다.
이렇게 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
    })
  }
} 

브라우저에서 페이지를 다시 로드하고 이전 또는 다음 단추를 확인하여 다음 슬라이드로 돌아가거나 이동할 수 있습니다.

결론
이 강좌에서 우리는 자극이 무엇인지 모른다.js는 핵심 개념으로 슬라이드를 만드는 방법을 보여 준다.