Aan de slag met stimulus.js (2023)

Destimulus.jsframework is een lichtgewicht JavaScript-framework ontwikkeld door de grote naam Basecamp, het bedrijf dat het kernframework van Ruby on Rails heeft ontwikkeld. Ik hoor al heel lang van het stimulus.js-framework, maar ik heb het nog nooit echt gebruikt. Onlangs kreeg ik net de kans om te oefenen in een klein eigen project en heb ik wat ervaring opgedaan, dus ik wil graag een samenvatting delen.

Herinnering: Als je snel de demo van stimulus.js wilt ervaren, kun je hier een kijkje nementodomvc-stimulus.

Een ingetogen front-end JavaScript-framework

Over mijn algemene indruk van de gesprokenstimulus.jsframework, ik denk dat het een zeer ingetogen front-end JavaScript-framework is. Het focustover de binding van HTML-elementen aan JavaScript-objecten, en de binding is eenrichtingsverkeer, niet de tweerichtingsbinding die al lang gebruikelijk is bij front-end-ontwikkeling. Verder biedt het geen extra functionaliteit.

Door zijn terughoudendheid islichtgewichtis het onvermijdelijke eerste voordeel. Ten tweede, met zijn ontworpen concept vancontroleur, kan het isolatie en ontkoppeling van de toestand in de interactielogica bereiken. Tenslotte de organisatie van decontroleurcode is bekend voor degenen die bekend zijn met de ontwikkeling van Rails:conventie over configuratie. Elkcontroleurdefinitie moet de conventie volgen dat acontroleurkomt overeen met een bestand in decontroleursdirectory, met dezelfde naam als decontroleur.

De lichtheid vanStimulus.js

Er zijn maar heel weinig kernconceptenStimulus.js, zijn er slechts 4 kernconcepten die u moet begrijpen om aan de slag te gaan met destimulus.jskader.

Controleurs

Controleurszijn JavaScript-objecten gebonden aan HTML-elementen die gegevensattributen declareren, zoalsdata-controller = "alles".

1

<div-gegevens-controleur="alle"></div>

stimulus.jszal automatisch de corresponderende controller voor al deze elementen instantiëren, één exemplaar van elk. In het bovenstaande voorbeeldstimulus.jszoekt automatisch naar het bestand dat zich inapp/javascript/controllers/todos_controller.jsen importeert de standaardklassen die daar worden geëxporteerd, een klassiekerconventie over configuratiebenadering.

1234567

// app/javascript/controllers/todos_controller.jsimporteren{ Beheerder } van'stimulus';exporteren standaard klas strekt zich uitBeheerder {aansluiten() {}}

Als u het afgesproken formulier niet wilt of kunt gebruiken, kunt u de verantwoordelijke uiteraard ook expliciet registreren via de functies vanstimulus.js.

1

applicatie.register("alle", TodosController)

Dergelijke elementen, en hun nakomelingen, zijn zichtbaar voor de controller waaraan het element is gebonden. Dat wil zeggen, in destimulus.jsraamwerk kunnen de acties van de controller alleen worden toegepast op het controller-gebonden element en zijn nakomelingen. Hetzelfde principe geldt in het geval van geneste controllers.

Controllers kunnen met elkaar samenwerken door middel van evenementen, die later worden toegevoegd als we het over Acties hebben.

Doelstellingen

Doelstellingenis een andere manier om binding tussen HTML-elementen en JavaScript-objecten te implementeren, maar het werkt onder een specifieke controller.

12345

<div-gegevens-controleur="alle">  <knop gegevens-alle-doel="addBtn">Toevoegen</knop></div>

De regel voor het verklaren van het doel isdata--target=, en dienovereenkomstig moet het te binden object in de controller worden aangegeven.

12345

// app/javascript/controllers/todos_controller.jsimporteren{ Beheerder } van'stimulus';exporteren standaard klas strekt zich uitBeheerder {stitisch doelwit=["addBtn"]

Zodra je de doelen hebt gebonden, kun je zoiets gebruiken alsthis.addBtnTargetofthis.addBtnTargets(voor gevallen waarin meerdere HTML-elementen aan hetzelfde doel zijn gebonden) in de controllersmethode om toegang te krijgen tot de gebonden HTML-elementen, volgens het stimulus.js-protocol voor doelen ) om toegang te krijgen tot deze gebonden HTML-elementen.

Controleursen Targets voor levenscyclus-callbacks

De hierboven genoemde Controllers en Targets zijn bindende functies tussen HTML-elementen en JavaScript-objecten, omdat HTML-elementen worden geladen met de browser en daaropvolgende DOM-bewerkingen, wat de vraag oproept: wat is de levenscyclus van deze objecten?

Deze callback-functies voor de levenscyclus zijn allemaal nauw verwant aan veranderingen in de DOM en kijken over het algemeen naar deze omstandigheden.

• Bestaat het element?
• Bestaat de gebonden identificatie in de eigenschappenlijst van het element, zoalsgegevensbeheerderofdata--doel?

De callback van het connect-type wordt aangeroepen wanneer de voorwaarde wordt gewijzigd van gedeeltelijk of volledig niet voldoen aan de voorwaarde; omgekeerd wordt de gebeurteniscallback van het type verbroken verbinding aangeroepen als niet langer aan alle voorwaarden wordt voldaan vanwege een DOM-actie.

controllers kunnen initialisatietaken definiëren in deaansluiten()callback, zoals de initialisatie van een bepaalde status van de controller, en dienovereenkomstig,[naam]TargetConnectedkan worden gebruikt voor de initialisatie van een doel.

Acties

Actions is het gebeurtenis-callback-mechanisme instimulus.js, vergelijkbaar met de syntaxis vanbij klikkenEnop veranderingin HTML.

12345

<div-gegevens-controleur="alle">  <knop gegevens-alle-doel="addBtn"gegevens-actie="klik->alles#toevoegen">Toevoegen</knop></div>

Actions ondersteunt meerdere callback-declaraties voor gebeurtenissen, wat ook de samenwerking tussen controllers vergemakkelijkt.

12345

<div-gegevens-controleur="alle indieners"> <! --Houd er rekening mee dat hier meerdere controllerbindingen worden gebruikt-->  <knop gegevens-alle-doel="addBtn"gegevens-actie="klik->taken#voeg taken toe:toegevoegd->inzender#verzenden">Toevoegen</knop></div>

1234567891011121314151617

// app/javascript/controllers/todos_controller.jsimporteren{ Beheerder } van'stimulus';exporteren standaard klas strekt zich uitBeheerder {toevoegen() { // doe iets om de status van de todos-controller te behouden dit.verzenden("toegevoegd", {detail:{alle:[xxxx]}}}})}}// app/javascript/controllers/submitter_controller.jsimporteren{ Beheerder } van'stimulus';exporteren standaard klas strekt zich uitBeheerder {indienen(gebeurtenis) { constalle=evenement.detail.todos;// gebeurtenisgegevens extraheren // doe iets anders}}

In dit voorbeeld is het verloop van de programma-uitvoering als volgt.

1. nadat de gebruiker op de knop Toevoegen heeft geklikt, wordt deKlikgebeurtenis die door de knop wordt geactiveerd, activeert een terugbelactie naar detoegevoegdwerkwijze van deallecontroleur.
2. na detoegevoegdmethode voert zijn eigen kernlogica uit, het activeert detodos: toegevoegdevenement door te bellen naardeze.verzendingmethode, waarbij wordt opgemerkt dat dealle:het voorvoegsel wordt hier automatisch toegevoegd door het raamwerk.
3. detodos: toegevoegdgebeurtenis wordt gegenereerd, waardoor een callback naar deindienercontroleurindienenmethode.

Op deze manier, door verschillende controllers te abstraheren om de scheiding en ontkoppeling van logica te bereiken, en vervolgens via het gebeurtenismechanisme, zal de logica worden samengesteld en georkestreerd.

Het begrijpen van deze 4 kernconcepten is voldoende om een ​​relatief eenvoudige front-end logica mee te ontwikkelenstimulus.js. Natuurlijk zijn er nog een aantal andere conceptenstimulus.js, maar naar mijn mening zijn ze slechts de kers op de taart, dus ik hoef er hier niet op in te gaan.

Praat ook over de scenario's waarinstimulus.jsis niet geschikt

Ondanks dat het een klein project is, zijn er enkele problemen die ik lastig vond bij het gebruikstimulus.js.

1. Gebrek aan inkapseling van DOM-operaties: Sindsstimulus.jsbiedt alleen binding tussen HTML-elementen en JavaScript-objecten, het biedt geen inkapseling van DOM-bewerkingen, dus als u de DOM moet manipuleren, moet u vaak de bewerkingen van native DOM-objecten rechtstreeks gebruiken, zoalsElement.classList .add()type, als het zich in de vroege browser bevindt, hoeft u zich nog steeds zorgen te maken over compatibiliteitsproblemen, enz., maar het goede is dat nu de browsercompatibiliteitsproblemen veel minder zijn, dit geen al te groot probleem is.
2. Gebrek aan ondersteuning voor front-end rendering: Omdat de binding instimulus.jsis niet bidirectioneel, in sommige gevallen waarin u verschillende pagina-inhoud of visuele effecten moet weergeven op basis van JavaScript-objecten, zonder de ondersteuning van andere frameworks, moet u verschillende stringinterpolaties schrijven enElement.innerHTML = xxxx, wat ook inefficiënt is.

Kortom: als uw front-endpagina een pagina met veel interactie is, is het misschien geen verstandige keuze om alleenstimulus.js. Als ik ervoor kies om te gebruikenstimulus.js, Ik denk dat het comfortabeler in gebruik isstimulus.jsals het een op inhoud gebaseerd lichtinteractiescenario is, zoals blogs of forums, waarbij de algemene interactie bestaat uit het commentaargedeelte, eenvoudige tekstinvoer en extra weergave, enz.; maar in andere gevallen zou ik waarschijnlijk rechtstreeks naar gaanvue.jsof een ander uitgebreider raamwerk om de code te minimaliseren die de status tussen de pagina en de logica synchroniseert.

Enkele zaken waarmee u rekening moet houden bij het gebruikstimulus.js

1. Acties buiten het bereik van de Verwerkingsverantwoordelijke kunnen niet teruggrijpen op de methoden van de VerwerkingsverantwoordelijkeHet kostte wat tijd om dit probleem op te lossen, maar ik begreep niet waarom. Toen besefte ik dat dit kwam omdat ik geen aandacht had besteed aan de reikwijdte van de controller. Omdat mijn actie aangeeft dat de controller die moet worden teruggeroepen niet zichtbaar is in de huidige DOM, mislukt de callback.
2. De actie die vóór de initialisatie van de controller is geactiveerd, kan niet terugroepen naar de controllermethodeDit probleem komt doordat ik een actie in de code heb gedeclareerd en ook heb uitgevoerdverzendenin de controller, maar op dit moment lijkt het erop dat de code geen syntaxis heeft of syntaxis gebruikt, omdat de doelcontroller nog niet is geïnitialiseerd. Het lijkt erop dat er geen syntaxis- of gebruiksfout in de code zit, maar het is onmogelijk dat de actie de callback met succes activeert.