Share
Stimul este un "cadru modest JavaScript", construit de oamenii de la Basecamp care v-au adus Rails.
Este, în multe privințe, opusul altor cadre moderne disponibile astăzi. În timp ce ați putea vedea unele concepte și denumiri similare, Stimulul este foarte diferit în câteva moduri fundamentale. Vom discuta aceste diferențe pe scurt și apoi vom construi prima noastră aplicație cu Stimulus.
Conceptele de bază ale multor cadre moderne constau în separarea "statului" de "DOM". În acest fel, DOM-ul acționează doar ca un client pentru datele pe care le reprezintă.
Stimulul învine acest concept pe cap și, în schimb, se bazează pe DOM pentru a ține statul.
În cele din urmă, acest lucru înseamnă că Stimulul este cel mai potrivit pentru aplicațiile care servesc HTML (mai degrabă decât, de exemplu, integrarea cu un API JSON).
Cu Stimulus, nu veți vedea șabloane HTML. În schimb, veți vedea date-* atributele care conectează codul HTML la aplicația JavaScript.
Acest lucru înseamnă, de asemenea, că nu veți vedea lucruri de genul fiecare sau Hartă buclele pe care le-ați putea vedea în Handlebars sau React.
Stimularea nu are rolul de a redacta HTML decât dacă creați în mod explicit acea funcționalitate.
Stimulul nu oferă șabloane. Mai degrabă este construit pentru a conecta acțiunile și evenimentele pe care le faceți la capătul frontal al unei aplicații către controlorii din spate.
Stimulul folosește trei concepte pentru a realiza acest lucru: ținte, controlori, și acţiuni.
Dar, înainte să ajungem prea departe, să mergem mai departe și să obținem Stimulus pe calculatorul dumneavoastră!
Această configurație presupune că ați instalat deja o versiune recentă de NodeJS pe computer. Treceți la nodejs.org dacă nu ați făcut deja acest lucru.
Vom folosi o statică de bază index.html fișier care va arăta inițial astfel:
Notă: Nu vom acoperi, de fapt, niciun stil sau construire de procese pentru CSS în acest tutorial.
Apoi, creați un dosar numit src. Interior de src, creați un alt dosar numit controlere și un singur index.js fişier.
Vom folosi Webpack pentru a construi aplicația noastră JavaScript, deoarece Stimulus utilizează câteva funcții avansate ale JavaScript care nu vor funcționa direct în browsere.
Creați un fișier în rădăcina proiectului dvs. numit package.json care are următorul conținut:
"name": "wdstimulus", "versiune": "1.0.0", "descriere": "Introducere stimulare", "script" "," devendependencies ":" babel / core ":" ^ 7.0.0-beta.39 " : "^ 8.0.0-beta.0", "babel-preset-stage-0": "^ 6.24.1", "stimul"
Notă: aceste versiuni se vor schimba în viitor și vă recomandăm să rămâneți la curent cu cea mai recentă versiune a oricărui instrument cât de mult este posibil.
De asemenea, puteți genera acest fișier utilizând npm init și instalarea dependențelor unul câte unul folosind npm instalare [nume-pachet].
Acest fișier include tot ce ne trebuie pentru a crea o construcție compatibilă cu browser-ul aplicației noastre Stimul. Din rădăcina aplicației, rulați npm install. Aceasta va instala aceste dependențe în node_modules în interiorul aplicației.
Apoi, vom crea un fișier de configurare astfel încât Webpack să știe ce vrem să facem cu fișierele noastre atunci când le salvăm. În același director rădăcină unde package.json este localizat, a creat un fișier numit webpack.config.js, și adăugați aceste conținuturi:
modul.exports = modul: rules: test: /\.js$/, exclude: / (node_modules) /, utilizează: loader: 'babel-loader', opțiuni: presets: env "], plugin-uri: [" transform-class-properties "]];
Acest fișier îi spune în esență Webpack-ul să compileze JavaScript folosind presetarea env. Avem setul de stadiu-0 disponibil în modulele noastre de nod și am adăugat, de asemenea, pluginul proprietăților de transformare necesare.
Ultimul pas pentru a fi pregătit pentru o aplicație de stimulare este să ne completați index.js fișier cu următorul conținut:
Accentsconagua
import Application de la "stimul" import definitionsFromContext din "stimul / webpack-helpers" const aplicație = Application.start () const context = require.context (" application.load (definitionsFromContext (context))Acest cod vine direct din documentele Stimulus. Ea face niște magie pentru a ne permite să folosim o structură convențională de denumire atunci când creăm codul nostru de aplicare.
Denumirea fișierelor dvs. contează cu adevărat pentru stimularea dacă utilizați acest lucru index.js cod (această nuanță este ceva dezvoltatorii Rails va găsi familiar).
Acum, când suntem pregătiți, asigurați-vă că funcționează construirea Webpack-ului nostru. Din directorul rădăcină, executați următoarea comandă:
npx webpack src / index.js dist / bundle.js - vizionează
npx parte din această comandă este o modalitate convenabilă de a rula binarele care sunt situate în node_modules director. Această comandă va urmări modificările aduse fișierelor JavaScript și va reconstrui aplicația în timp ce faceți aceste modificări.
Atâta timp cât nu vedeți erori în consola dvs., sunteți bine să mergeți!
Dacă sunteți familiarizat cu Rails sau Laravel, conceptul de controlori ar putea fi ușor de adoptat pentru dvs..
Gândiți-vă la un controler în cazul Stimulului ca o clasă JavaScript care conține anumite metode și date care funcționează împreună.
Un controler ar putea arăta astfel în Stimulus:
// src / controllers / refreshable_controller.js import Controller din clasa implicită de export "stimul" extinde Controller
Există câteva puncte importante pe care trebuie să le notați despre acest controler. În primul rând, controlerul este atât HTML, cât și JavaScript. date-controler atributul este ceea ce spune JavaScript pentru a crea o nouă instanță a clasei.
O altă caracteristică interesantă este faptul că numele clasei nu se găsește nicăieri în clasa controlerului. Acest lucru se întâmplă din cauza liniei application.load (definitionsFromContext (context)) în index.js fişier. Această linie încarcă codul aplicației și folosește numele fișierelor deduce nume de clasă. Acest lucru ar putea fi confuz la început, dar odată ce începeți să utilizați această convenție în mod regulat, devine mult mai fluid.
Un acțiune este ceea ce pare: o procedură pe care doriți să o faceți după un anumit eveniment de la un utilizator. Pentru controlerul nostru de refresh, vrem să efectuăm o reîmprospătare a unei anumite zone de conținut atunci când se face clic pe un buton. În acest caz, acțiunea noastră ar putea fi chemată reîmprospăta.
// src / controllers / refreshable_controller.js import Controller din clasa implicită pentru export "stimul" extinde Controller refresh () console.log ("refresh!")Dar doar dacă această metodă de acțiune disponibilă în controlorul nostru nu face nimic. Trebuie să îl conectăm la codul HTML.
Când utilizatorul face clic pe butonul din acest HTML, ar executa acțiunea de refresh în controler.
Acum, cum putem folosi această acțiune pentru a face ceva pe pagină?
Stimulul utilizează, de asemenea, un concept numit "Obiective" pentru a vă conecta la elementele importante de pe pagină. Vom folosi acest lucru pentru a gestiona un element de container care deține conținutul pe care dorim să îl reînnoim.
// src / controllers / refreshable_controller.js Importul Controller din clasa implicită de export "stimul" extinde controlerul static targets = ["content"] refresh () this.contentTarget.innerHTML = "Refresh!
În acest exemplu, avem toate cele trei concepte de Stimul reprezentate. A actualizabil controler, a reîmprospăta acțiune, și a conţinut ţintă.
Dacă vă uitați atent, veți vedea ceva în acest cod care ar putea să vă prindă deoparte: manipularea directă a DOM. Aceasta este o modalitate prin care stimulul este diferit de alte cadre. Manipularea directă a elementelor DOM nu este posibilă, ci este încurajată.
Acest lucru înseamnă, de asemenea, că, dacă sunteți bine pregătit în jQuery sau în JavaScript și API-urile de browser, puteți profita de aceste cunoștințe! De exemplu, o versiune cu jQuery a metodei de actualizare ar putea arăta astfel:
// src / controllers / refreshable_controller.js import Controller de la "stimul" import $ din 'jquery'; // necesită adăugarea jQuery la pachetul default.class.json extinde Controller static targets = ["content"] refresh () let target = this.contentTarget; $ .get ("/ content", funcție (conținut) $ (target) .html (conținut))Stimularea nu se oprește dacă doriți să folosiți alte instrumente deja cunoscute.
Acum aveți suficiente informații pentru a începe să construiți aplicații mai sustenabile cu Stimul! Dezvoltatorii care au creat Stimulul ne reamintesc că regulile și tendințele pot fi rupte și uneori putem să ne despărțim de "cele mai bune practici" și să facem ceva care să funcționeze pentru noi.
Bucurați-vă de scufundări în Stimul!
Am creat un ghid complet care vă ajută să învățați JavaScript, indiferent dacă începeți doar ca dezvoltator web sau doriți să explorați subiecte mai avansate.
