Hur man skapar ett ramverk-agnostiskt JavaScript-plugin

introduktion

Plugins i JavaScript tillåter oss att utöka språket för att uppnå några kraftfulla (eller inte så kraftfulla) funktioner Vi önskar. Plugins / bibliotek är i huvudsak förpackad kod som räddar oss från att skriva samma sak (funktioner) om och om igen.

Anslut bara den och spela!

det finns hundratals ramar i JavaScript-ekosystemet, och var och en av dessa ramar ger oss ett system för att skapa plugins för att lägga till nya saker i ramverket.

om du tittar på npm-registret, där nästan alla JavaScript-plugins publiceras, ser du mer än en miljon plugins publicerade som både enkla bibliotek och ramar.

hur du skapar plugins för varje ramverk kan skilja sig avsevärt. Till exempel Vue.js har sitt eget plugin-system, vilket skiljer sig från hur du skulle skapa plugins för React.js. Men allt kokar ner till samma JavaScript-kod.

därför kan du skapa plugins med vanilj JavaScript ger Dig möjlighet att skapa ett plugin som fungerar oavsett ramverket i fråga.

”en framework-agnostic JavaScript plugin är en plugin som fungerar utan att behöva ramen för ett ramverk. Du kan använda plugin i alla ramar, och även utan ramverk”

vad du ska tänka på när du bygger ett bibliotek:

• du bör ha ett mål för din plugin — detta är det viktigaste din plugin är tänkt att uppnå
• din plugin bör vara lätt att använda för den avsedda användningen
• din plugin bör vara anpassningsbar i stor utsträckning
• din plugin bör ha en dokumentation som guidar utvecklare som kommer att använda plugin

låt oss nu komma till affärer med ovanstående punkter i åtanke.

vad vi kommer att skapa

i den här artikeln kommer jag att visa dig hur du skapar ett ramverk-agnostiskt plugin. I denna handledning kommer vi att skapa ett karusell/slider — plugin-målet för plugin.

detta plugin kommer att avslöja några metoder som kan anropas av användaren av plugin .next() och .prev()

komma igång

• Låt oss skapa en ny mapp för att hysa vår plugin kod och alla andra filer som behövs. Jag ringer min mapp TooSlidePlugin.
• i den här mappen skapar du en ny JavaScript-fil i din favoritredigerare. Den här filen innehåller koden för plugin. Jag ringer min tooSlide.js

jag gillar ibland att föreställa mig hur ett plugin skulle användas (från en slututvecklares perspektiv) innan jag ens börjar skapa den.

om du tittar på kodblocket ovan antar det att det finns en konstruktör som heter TooSlides som tar emot ett objekt med vissa egenskaper som ett argument.

egenskaperna hos objektet är slidesClass, container, nextButton, och previousButton. Det här är egenskaper som vi vill att användaren ska kunna anpassa.

vi börjar med att skapa vårt plugin som en enda konstruktörsfunktion så att den har en namnrymd till sig själv.

alternativ

eftersom vårt plugin, TooSlides, förväntar sig ett alternativargument, kommer vi att definiera några standardegenskaper, så att om vår användare inte anger sina egna används de vanliga.

vi skapade ett defaultOptions – objekt för att hålla vissa egenskaper, och vi använde också en JavaScript-spridningsoperatör för att slå samman inkommande alternativ med standardalternativet.

vi tilldelade this till en annan variabel så att vi fortfarande kan få tillgång till den i inre funktioner.

vi skapade också två variabler slides som innehåller alla bilder vi vill använda som skjutreglage och currentSlideIndex, som innehåller indexet för bilden som för närvarande visas.

nästa, eftersom vår skjutreglage förväntas ha viss kontroll som kan användas för att flytta bilden framåt och bakåt, lägger vi till nedan metoden i vår konstruktörfunktion:

i metoden .prepareControls() skapade vi ett container DOM-element för att hålla kontrollknapparna. Vi skapade nästa och Föregående knappar själva och bifogade dem till controlContainer.

sedan bifogade vi händelselyssnare till de två knapparna som kallar metoderna .next() respektive .previous(). Oroa dig inte, vi kommer att skapa dessa metoder inom kort.

därefter lägger vi till två metoder: .goToSlide() och .hideOtherSlides().

metoden .goToSlide() tar ett argument, index, vilket är indexet för bilden vi vill visa. Den här metoden döljer först Alla bilder som för närvarande visas och visar sedan bara den vi vill ska visas.

därefter lägger vi till hjälpmetoderna .next() och .previous() som hjälper oss att flytta ett steg framåt respektive ett steg bakåt (kom ihåg händelselyssnarna vi bifogade tidigare?)

dessa två metoder kallar i princip .goToSlide() – metoden och flyttar currentSlideIndex med 1.

vi kommer nu också att skapa en .init() – metod som hjälper oss att ställa in saker när vår konstruktörsfunktion instansieras

som du kan se får metoden .init() alla bildbilder och lagrar dem i slides-arrayen som vi förklarade tidigare och döljer dem alla som standard.

den visar sedan den första bilden i bilden genom att ringa .goToSlide(0) – metoden, och den ställer också in våra kontrollknappar genom att ringa .prepareControls().

för att sätta upp vår konstruktörskod kommer vi att ringa .init() – metoden inom konstruktören, så att när konstruktören initieras kallas .init() – metoden alltid.

den slutliga koden kommer att se ut så här:

lägga till CSS

i mappen som innehåller vårt plugin-projekt lägger vi till en CSS-fil som innehåller grundläggande styling för vår reglage. Jag ringer den här filen tooSlide.css:

* {box-sizing: border-box} body {font-family: Verdana, sans-serif; margin:0}.too-slide-single-slide { display: none; max-height: 100%; width: 100%; } .too-slide-single-slide img{ height: 100%; width: 100%;}img {vertical-align: middle;} /* Slideshow container */.too-slide-slider-container { width: 100%; max-width: 100%; position: relative; margin: auto; height: 400px;} .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 10px; margin-right: 5px; margin-left: 5px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; border-style: unset; background-color: blue;} .next { right: 0; border-radius: 3px 0 0 3px;} .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8);} .too-slide-fade { -webkit-animation-name: too-slide-fade; -webkit-animation-duration: 1.5s; animation-name: too-slide-fade; animation-duration: 1.5s;} @-webkit-keyframes too-slide-fade { from {opacity: .4} to {opacity: 1}} @keyframes too-slide-fade { from {opacity: .4} to {opacity: 1}} /* On smaller screens, decrease text size */@media only screen and (max-width: 300px) { .prev, .next,.text {font-size: 11px}}

testa vårt plugin

för att testa vårt plugin skapar vi en HTML-fil. Jag ringer min index.html. Vi lägger också till 4 bilder som ska användas som bilder, alla inom samma katalog som vår plugin JavaScript-kod.

min HTML-fil ser ut så här:

i huvudsektionen i HTML-filen ringde jag filen tooSlide.css, medan jag i slutet av filen ringde filen tooSlide.js.

efter att ha gjort detta kommer vi att kunna instantiera vår plugin-konstruktör:

du kan kolla in resultatet av vår plugin i denna penna:

TooSlidePlugin

ingen beskrivning

dokumentera din plugin

dokumentationen av din plugin är lika viktig som alla andra delar.

dokumentationen är hur du lär människor att använda din plugin. Som sådan kräver det att du tänker på det.

för vårt nyskapade plugin skulle jag börja med att skapa en README.md fil i katalogen för projektet.

publicera ditt plugin:

när du har skrivit ditt plugin vill du troligen att andra utvecklare ska dra nytta av din nya skapelse, så jag ska visa dig hur du gör det.

du kan göra ditt plugin tillgängligt för andra på två huvudsakliga sätt:

• värd det på Github. När du gör detta kan vem som helst ladda ner repo, inkludera filerna (.js och .css), och Använd din plugin direkt
• publicera den på npm. Kontrollera den officiella npm-dokumentationen för att vägleda dig igenom.

och det är det.

slutsats

under den här artikeln har vi byggt ett plugin som gör en sak: Skjut bilder. Det är också beroendefritt. Nu kan vi börja hjälpa andra med vår kod precis som vi har fått hjälp också.

koden för denna plugin handledning finns på github.