Stimulus.js: JS ietvara alternatīva Rails lietojumprogrammām

Es zinu, ko jūs domājat... Vēl viens JavaScript sistēmu? To jau ir tik daudz! Jums ir taisnība, bet šis piesaistīja manu uzmanību, jo to izveidoja Basecamp. Jūs, iespējams, zināt šo uzņēmumu, viņi ir radījuši Ruby on Rails. Viņi arī izveidoja Turbolinks, un es to pieminēju tāpēc, ka Stimulus lieliski sader ar to. Tātad, varbūt ir vērts izmēģināt Stimulus?

Kā tas darbojas?

Stimulus darbojas, uzraugot lapu, gaidot, kad datu kontrolieris atribūts, lai parādītos. . datu kontrolieris vērtība savieno un atvieno Stimulus kontrolierus. Priekšnoteikums ir vienkāršs: tāpat kā klase ir savienojums starp HTML un CSS, datu kontrolieris ir tilts no HTML uz JavaScript. Stimulus pievieno arī datu darbība atribūts, kas apraksta, kā notikumiem lapā jāiedarbina kontroliera metodes, un atribūts datu mērķauditorija atribūts, kas sniedz iespēju atrast elementus kontroliera darbības jomā.

Viegla uzstādīšana

Ja jūsu Sliedes lietojumprogramma izmanto Webpacker gem, varat instalēt Stimulus ar vienu vienkāršu komandu, jo Webpacker gem nodrošina Stimulus instalēšanas uzdevumu. Vienkārši izpildiet šādu komandu savā Rails saknes direktorijā:

rails webpacker:install:stimulus
Tas palielina stimulu package.json un izveido šādus divus failus: app/javascript/controllers/index.js:

importēt { Application } no "stimulus"
importēt { definitionsFromContext } no "stimulus/webpack-helpers"

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

Var redzēt, ka tiek izsaukts webpack palīgs require.context. Pēc tam iegūtais konteksts tiek nodots Application#load metodei. Tas nozīmē, ka mūsu lietojumprogramma meklē failus ar nosaukumu[identifikators]_controller.js in the app/javascript/controllers/ direktorijā, kur identifikators atbilst kontroliera datu kontroliera identifikatoram jūsu HTML. Šī ir tieši tā vieta, kur mums jāievieto Stimulus kontrolieri.
Lietotne/javascript/controllers/hello_controller.js tiek arī ģenerēts. Šis ir tikai kontroliera piemērs, ar kuru mēs varam spēlēties.

Pamata lietošana

Labi, tātad mums ir hello_controller.js failu, kas izveidots ar šādu kods:

importēt { Controller } no "stimulus"

eksportēt noklusējuma klasi, kas paplašina Controller {
static targets = ["output"]
connect() {
this.outputTarget.textContent = 'Hello, Stimulus!'
}
}

Taču, kā jau jūs zināt, mēs neredzēsim nekādu ietekmi, ja nesaistīsim HTML un JavaScript. Pievienosim HTML skatam kādu kodu. To varat ievietot, kad vien vēlaties:

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

Un ziniet ko? Tas ir viss! Ja pārlādējat lapu un redzat tajā uzrakstu “Hello, Stimulus!”, tas nozīmē, ka savienojums darbojas pareizi. Vienkārši, vai ne?
Labi, bet tas ir tikai teksta displejs. Vai mēs varam veikt kādu darbību? Jā, varam! Kā jau minēju iepriekš, ir arī datu darbība atribūts. Pēc tam mainīsim mūsu HTML skatu:

<div data-controller="hello">
<p><input type="number" data-target="hello.days"><br><button data-action="click->hello#calculate">Aprēķināt</button></p>
</div>

Un stimulējošais kontrolieris app/javascript/controllers/hello_controller.js:

importēt { Controller } no "stimulus"

eksportēt noklusējuma klasi, kas paplašina Controller {
static targets = ["output", "days"]
connect() {
this.outputTarget.textContent = 'Cik ilgi jūs esat karantīnā?'
}
calculate() {
const element = this.daysTarget
const days = element.value
const lockdownDays = 14
let daysLeft = lockdownDays - days

if (daysLeft < 1) {
  alert('Jūs esat brīvs!')
}
citādi {
  alert(`Amount of days you need to stay on quarantine: ${daysLeft}`)
}

}
}

Šeit mums ir ļoti vienkārša lietotne, kas aprēķina, cik ilgi mums jāpaliek karantīnā. To mums izdevās izdarīt, izmantojot HTML atribūtu data-action.
Varat redzēt, ka JavaScript kodā mērķu sarakstam pievienojām arī “dienas”. Kad mēs to izdarām, Stimulus automātiski izveido this.daysTarget īpašība, kas atgriež pirmo atbilstošo mērķa elementu.

Kas vēl jums jāzina?

Atgriezeniskie izsaukumi

Iespējams, pamanījāt, ka ir savienot() metode abos piemēros. Šī metode ir paredzēta iebūvētajiem atpakaļsaukumiem. Jums būtu jāzina visi tie un to dzīves cikls, tāpēc šeit tie ir norādīti:
inicializēt: vienreiz, kad kontrolieris tiek pirmo reizi instalēts,
savienot: jebkurā laikā, kad kontrolieris ir savienots ar DOM,
atslēgt: jebkurā laikā, kad kontrolieris ir atvienots no DOM.

Darbības deskriptors

Portāls datu darbība vērtība klikšķis->hello#aprēķināt sauc par darbības deskriptoru. Šis deskriptors norāda, ka:

• noklikšķiniet uz ir notikuma nosaukums,
• Sveiki ir kontroliera identifikators,
• aprēķināt ir metodes nosaukums.

Mērķi

Tāpat kā darbībām, arī Stimulējumam ir mērķa deskriptors. . hello.days deskriptors norāda, ka: Sveiki ir kontroliera identifikators,
dienas ir mērķa nosaukums.

Iepriekšējā piemērā es minēju, ka Stimulus izveido this.daysTarget īpašība, ja mērķu sarakstā ir “dienas”. Jums arī jāzina, ka var izveidot vairāk īpašību. Saistībā ar piemēru var būt:

this.daysTarget kas novērtē līdz pirmajam mērķim kontroliera darbības jomā. Ja mērķa nav, īpašība izziņo kļūdu,
this.daysTargets novērtē līdz visu avota mērķu masīvam kontroliera darbības jomā,
this.hasDaysTarget atgriež true, ja ir mērķis, vai false, ja mērķa nav.

Kā redzat, programma Stimulus ir vienkārša, un to var viegli pievienot jūsu lietojumprogrammai. Tas gūst zināmu popularitāti lietojumprogrammā RoR kopiena, un es neesmu pārsteigts. Kā Rubīns izstrādātājs man pašam ļoti patīk strādāt ar Stimulus. Tad kā par iespēju to izmēģināt?

Lasīt vairāk:

• Web lietojumprogrammu izstrāde: Kāpēc ir vērts izvēlēties Ruby on Rails tehnoloģiju?
• Laiks jaunai realitātei. Pirms mēneša sākās attālinātā darba ēra
• 5 iemesli, kāpēc Polijā atradīsiet kvalificētus Ruby izstrādātājus