Stimulus.js: JS sistemos alternatyva "Rails" programoms

Žinau, ką galvojate... JavaScript sistemą? Jų jau yra tiek daug! Jūs teisūs, bet šis patraukė mano dėmesį, nes jį sukūrė "Basecamp". Tikriausiai žinote šią įmonę, jie yra kūrėjai Ruby on Rails. Jie taip pat sukūrė Turbolinks, paminėjau tai, nes "Stimulus" puikiai dera su juo. Taigi, gal verta išbandyti "Stimulus"?

Kaip tai veikia?

"Stimulus" veikia stebėdama puslapį, laukdama, kol duomenų valdiklis rodomas atributas. Adresas duomenų valdiklis reikšmė sujungia ir atjungia "Stimulus" valdiklius. Prielaida paprasta: kaip ir klasė jungia HTML ir CSS, duomenų valdiklis yra tiltas iš HTML į JavaScript. Stimulus taip pat prideda duomenų veiksmas atributas, kuriame aprašoma, kaip puslapio įvykiai turėtų sukelti valdiklio metodus, ir atributas duomenys-tikslas atributas, kuris suteikia galimybę surasti elementus valdiklio srityje.

Lengvas montavimas

Jei jūsų Bėgiai programa naudoja Webpacker brangakmenį, galite įdiegti Stimulus viena paprasta komanda, nes Webpacker brangakmenyje numatyta Stimulus diegimo užduotis. Tiesiog paleiskite šią komandą Rails šakniniame kataloge:

rails webpacker:install:stimulus
Tai skatina package.json ir sukuria šiuos du failus: app/javascript/controllers/index.js:

importuoti { Application } iš "stimulus"
importas { definitionsFromContext } iš "stimulus/webpack-helpers"

const application = Application.start()
const context = require.context("controllers", true, /_controller.js$/)
application.load(definitionsFromContext(context))

Matote, kad iškviečiama "Webpack" pagalbinė funkcija require.context. Tada gautas kontekstas perduodamas Application#load metodui. Tai reiškia, kad mūsų programa ieško failų, pavadintų[identifikatorius]_controller.js į app/javascript/controllers/ kataloge, kur identifikatorius atitinka valdiklio duomenų valdiklio identifikatorių jūsų HTML. Būtent į šią vietą turėtume įdėti "Stimulus" valdiklius.
Programėlė/javascript/controllers/hello_controller.js taip pat sukuriamas. Tai tik pavyzdinis valdiklis, su kuriuo galime žaisti.

Pagrindinis naudojimas

Gerai, taigi turime hello_controller.js failą, sukurtą taip kodas:

importas { Controller } iš "stimulus"

export default class extends Controller {
static targets = ["output"]
connect() {
this.outputTarget.textContent = 'Hello, Stimulus!'
}
}

Tačiau, kaip žinote, nepamatysime jokio poveikio, jei nesusijungsime HTML ir JavaScript. Pridėkime šiek tiek kodo į savo HTML rodinį. Jį galite įdėti, kada tik norite:

<div data-controller="hello">
<p data-target="hello.output">&nbsp;</p>
</div>

Ir žinote ką? Tai viskas! Jei perkraunate puslapį ir jame matote užrašą “Hello, Stimulus!”, tai reiškia, kad ryšys veikia tinkamai. Paprasta, tiesa?
Gerai, bet tai tik paprasto teksto rodymas. Ar galime atlikti kokį nors veiksmą? Taip, galime! Kaip minėjau anksčiau, taip pat yra duomenų veiksmas atributas. Tada pakeiskime HTML rodinį:

<div data-controller="hello">
<p><input type="number" data-target="hello.days"><br><button data-action="click->hello#calculate">Apskaičiuokite</button></p>
</div>

Ir skatinamasis valdiklis app/javascript/controllers/hello_controller.js:

importas { Controller } iš "stimulus"

export default class extends Controller {
static targets = ["output", "days"]
connect() {
this.outputTarget.textContent = 'Kiek laiko esate karantine?
}
calculate() {
const element = this.daysTarget
const days = element.value
const lockdownDays = 14
let daysLeft = lockdownDays - days

if (daysLeft < 1) {
  alert('Jūs esate laisvas!')
}
else {
  alert(`Amount of days you need to stay in quarantine: ${daysLeft}`)
}

}
}

Čia turime labai paprastą programėlę, kuri apskaičiuoja, kiek laiko turime būti karantine. Tai pavyko padaryti naudojant HTML atributą data-action.
Matote, kad į JavaScript kodo tikslų sąrašą taip pat įtraukėme “dienas”. Kai tai padarome, "Stimulus" automatiškai sukuria this.daysTarget savybė, kuri grąžina pirmąjį atitinkamą tikslinį elementą.

Ką dar reikia žinoti?

Atgaliniai skambučiai

Tikriausiai pastebėjote, kad yra prisijungti() metodą abiejuose pavyzdžiuose. Šis metodas skirtas integruotoms grįžtamosioms iškvietoms. Turėtumėte žinoti visas jas ir jų gyvavimo ciklą, todėl čia jos pateikiamos:
inicializuoti: vieną kartą, kai valdiklis instancuojamas pirmą kartą,
prisijungti: bet kada, kai valdiklis prijungtas prie DOM,
atjungti: bet kada, kai valdiklis atjungiamas nuo DOM.

Veiksmų deskriptorius

Svetainė duomenų veiksmas vertė spustelėkite->hello#apskaičiuoti vadinamas veiksmo deskriptoriumi. Šis deskriptorius nurodo, kad:

• spustelėkite yra įvykio pavadinimas,
• Sveiki yra valdiklio identifikatorius,
• apskaičiuoti yra metodo pavadinimas.

Tikslai

Kaip ir veiksmams, "Stimulus" turi tikslinį deskriptorių. . hello.days deskriptorius sako, kad: Sveiki yra valdiklio identifikatorius,
dienos yra tikslo pavadinimas.

Ankstesniame pavyzdyje minėjau, kad "Stimulus" sukuria this.daysTarget savybė, kai tikslų sąraše yra “days”. Taip pat reikia žinoti, kad galima sukurti daugiau savybių. Atsižvelgiant į pavyzdį, galite turėti:

this.daysTarget kuris įvertinamas iki pirmojo valdiklio srities tikslo. Jei taikinio nėra, savybė žymi klaidą,
this.daysTargets įvertina iki visų valdiklio srityje esančių šaltinio tikslų masyvo,
this.hasDaysTarget grąžina true, jei yra tikslas, arba false, jei jo nėra.

Kaip matote, "Stimulus" yra paprastas ir gali būti lengvai pridedamas prie jūsų programos. Ji tampa vis populiaresnė RoR bendruomenė ir aš nesu nustebęs. Kaip Ruby kūrėjas man pačiam labai patinka dirbti su "Stimulus". Taigi, kaip dėl to, kad jį išbandyti?

Skaityti daugiau:

• Interneto programų kūrimas: Kodėl verta rinktis Ruby on Rails technologiją?
• Laikas naujai tikrovei. Prieš mėnesį prasidėjo nuotolinio darbo era
• 5 priežastys, kodėl Lenkijoje rasite kvalifikuotų "Ruby" programuotojų