Share
Bokmerker kan defineres som miniapplikasjoner som masquerading som små utdrag av JavaScript awesomeness som ligger i nettleseren din og gir flere funksjoner til en nettside.
I dag skal vi se på å skape bookmarklets fra bunnen av og på vei, noen gode fremgangsmåter å følge.
De er ikke for nerdy, faktisk, de er ganske bruker-sentriske.
Vi ser alltid på måter å forbedre nettleseropplevelsen vår, det være seg utbredt eller lite kjent. Bookmarklets, jeg pleide å tenke, tilhørte sistnevnte - bastionen av super nerds. Mye for min chagrin, oppdaget jeg at jeg var helt feil om emnet. De er ikke for nerdy, faktisk, de er ganske bruker-sentriske, implementere mange fine, fine funksjoner og, akkurat som folk spådde, er det blitt en sentral del av måten jeg samhandler med nettleseren på - og internett.
I dag vil jeg gjerne lede deg gjennom å utvikle bokmerker som implementerer noen flotte bokmerker. Ja, bokmerker. Vi skal bygge mer enn en, om enn ganske små. Fascinert? La oss komme i gang!
Å sitere min artikkel intro:
Bokmerker kan defineres som miniapplikasjoner som masquerading som små utdrag av JavaScript awesomeness som ligger i nettleseren din og gir ekstra funksjoner, med bare et klikk.
Ordet selv er en blanding, teleskopord for pedantic, av ordene bokmerke og applet. Også kalt favelets, disse små utdragene av JavaScript lar deg fremheve tilleggsfunksjonalitet for alle sider du besøker.
Fordi de består av bare JavaScript, er de ganske bærbare - de støttes av alle nettlesere på alle plattformer, selv på mobiler og nettbrett. Installere dem er like enkelt som å dra dem til verktøylinjen!
Poenget er at bokmerkene lar deg gjøre mange ting som ellers er for utvikler-sentriske for å oppnå. Hver funksjonalitet du får med en bokmerke kan dupliseres ved hjelp av en nettleserens konsoll og litt tid. Bookmarklets bare forenkle prosessen - pakking opp koden som implementerer noen funksjonalitet inne i en fin liten knapp.
Bookmarklets kan i stor grad kategoriseres i en rekke kategorier:
Det første punktet du må huske, er å prefikse all JavaScript-kode med javascript URI. Nettlesere har implementert dette bestemte prefikset slik at innholdet etterfulgt av det kan behandles og analyseres som riktig JavaScript-kode.
Hvis du for eksempel klikker denne lenken - se koden nedenfor - vil du varsle en tekst.
Linky
Husk at koden din vil løpe mot siden som er lastet inn - en side som sannsynligvis vil ha JavaScript for seg selv og alle de resulterende kollisjonene som det innebærer. Det siste du trenger er å få bookmarkleten din til å bryte den gjeldende siden.
Innpakning av koden din pent i en anonym funksjon, vil sørge for at det er null navngivelse kollisjoner. I tillegg vil JavaScript noobs bli flummoxed og vil tro at du er en gud, hvis du er i den typen ting.
javascript: (funksjon () // din kode her) ();
Dette er relevant når du bruker JavaScript andre steder også. Alltid, alltid isoler koden din.
En bokmerke trenger ikke nødvendigvis å være liten, du er fri til å gå så stor som du vil. I disse tilfellene, for å distribuere og holde koden din oppdatert uten manuell brukerintervensjon, er det best å lage en pakke som trekker inn kode etter behov.
Accentsconagua
javascript: (funksjon () var jsCode = document.createElement ('script'); jsCode.setAttribute ('src', 'http: //path/to/external/file.js'); document.body.appendChild ( jsCode); ()); Det er ganske mye hva koden ovenfor gjør - den lager et skriptelement, setter kilden til en fil som er vert for andre steder og til slutt legger den til dokumentet. På denne måten, når en del av koden endres, kan du distribuere endringene dine til en enkelt kilde og få den til å formidles til hver bruker.
Merk: Du er ikke begrenset til å gjøre dette for JavaScript alene. Hvis bokmerkelappen din bruker en frontend, kan du også trekke inn HTML og CSS eksternt også, slik at bookmarklet virkelig oppdaterer deg selv..
Igjen, hvis du bygger en bokmerke av en bokmerke, kan det hende du trenger et av disse JavaScript-bibliotekene. Men å bruke dem på siden din er ikke så enkelt som bare å inkludere det - du må sørge for at bibliotekene ikke allerede er tilgjengelige. Biblioteker som jQuery og MooTools dominerer markedet, og du vil gjøre det bra for å være sikker på at det ikke allerede er lastet inn.
Et annet problem er at siden kan ha lastet et annet bibliotek som kan føre til konflikter over kontrollen av $ symbolet. Versjonskollisjoner kan også komme i gang på et tidspunkt, så hold det også i bakhodet.
Her er et raskt skall for koden jeg vanligvis bruker. Husk, i produksjonskoden din, må du ta hensyn til problemene jeg har nevnt ovenfor.
hvis (! ($ = window.jQuery)) // typeof jQuery == 'undefined' fungerer for script = document.createElement ('script'); script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'; script.onload = releasetheKraken; document.body.appendChild (script); annet releasetheKraken (); funksjon releasetheKraken () // Kraken er utgitt, master! // Ja, jeg er barnslig. Legg inn koden din her Koden skal være ganske selvforklarende. La oss nå løpe gjennom det uansett.
Hvis du ønsker å unngå all denne stressen, anbefaler jeg Ben Almans fremragende bookmarklet generator. Det tar vare på navne- og versjonskonflikter på en veldig ren måte. Bra saker!
Bookmarklets er ubrukelig hvis de uforstyrret bryter en side.
Jeg kan ikke stresse dette punktet nok. Bookmarklets er ubrukelig hvis de uforstyrret bryter en side. Og bekymre deg for JavaScript er ikke det eneste du må håndtere.
Hvis du har en frontend, kommer HTML og CSS også inn i spillet. Ikke tilordne dine containere og klasser generiske navn - hvis du heter det 'container', vil du alltid ha min utydelige hat.
En enkel måte er å prefikse [eller suffiks, jeg har ikke noe imot] alt med en bokmerke-spesifikk streng. Og når du skriver CSS, vær veldig, veldig spesifikk. Å gjøre bruk av cascading er fin, men bruk den med ultra presisjon. Å ha stiler lekkasje over til hovedsiden er uregelmessig og fremkaller ikke tillit.
Hvis du bygger et mindre bookmarklet, ser det ut til at en deriblant et tredjepartsbibliotek er meningsløst, vil du komme inn i en stadig eksisterende demon-kryss-nettleser-kompatibilitet.
Det kan virke ganske opplagt, men dette er noe mange glemmer, mange ganger. Pass på at du tester over så mange nettlesere på så mange plattformer som mulig.
En annen lettfelle å falle inn er en bokmerke som er ment å fungere på alle nettsteder som bare fungerer selektivt. Sider kan ha forskjellige hierarkier og bruke ulike metoder. Noen nettsteder kan omfavne HTML5 og bruke relaterte beholdere, mens andre kan spille det trygt og bruke generiske div. Mens gruvedrift for informasjon, sørg for å ta hensyn til alle utviklingsskoler.
Nå som vi har sett på noen poeng å huske på under utviklingen, skal vi bygge de tre bokmerkene jeg snakket om tidligere - en tilhørende hver kategori.
Hvis du allerede er kjent med grunnleggende JavaScript, bør følgende kode være en kino - de er bare noen få linjer med kode! Bokmerkene nedenfor har vært med meg for en stund nå, og jeg kan ikke synes å finne ut hvor jeg opprinnelig så dem. Hvis du gjør det, la meg et kort notat i kommentarene, og jeg legger til kreditter tilsvarende.
Vi starter med en super enkel en - sender til en ekstern tjeneste, Reddit i vårt tilfelle.
javascript: location.href = 'http: //www.reddit.com/submit? url =' + encodeURIComponent (location.href) + '& title =' + encodeURIComponent (document.title)
Dette er noen ganske enkle ting, tatt rett fra nettstedet. Ingen anonym wrapper eller namespacing siden funksjonaliteten er ganske begrenset.
Når bookmarklet er påkalt, skjer følgende i logisk rekkefølge:
location.href og dokument tittel encodeURIComponent metodeDette mønsteret fungerer ganske mye for de fleste søker og sender inn. Den eneste variabelen her vil være nettadressen du sender til - hvert program tar en annen tilnærming. Under et minutt med søking bør du se gjennom.
For eksempel vil et valideringsbokmerke se slik ut:
javascript: location.href = 'http: //validator.w3.org/check uri =' + encodeURIComponent (location.href)
Merk at vi bare forkastet sidens tittel og endret nettadressestrukturen for å peke på W3-valideringstjenesten.
javascript: void (document.bgColor = prompt ('Farge? Hex eller navn vil gjøre. Kan jeg foreslå lyserøde?', 'rosa')) Dette er like enkelt som det ser ut. For å holde ting super enkle, har jeg valgt å ikke introdusere variabler og validering. Vi ser bare på kjernekoden.
document.bgColor. Det er det! Ja jeg vet bgcolor er deprecated og ja, jeg vet at jeg burde føle meg skitten, men dette vil gjøre ganske tilstrekkelig siden en rask test på moderne nettlesere kom ut positivt.
Du kan leke med disse ganske mye. Dette ligner på hvordan du vanligvis bruker CSS styling til elementer gjennom JavaScript. Vi bruker bare den til vilkårlige sider. Legg merke til at ulike sider har forskjellige strukturer, så hvis siden har en full innpakningsbeholder, kan effekten være meningsløs. I disse tilfellene må du kanskje jakte på hovedbeholderen og deretter bruke stylingen til den.
javascript: funksjon () var c = document.cookie.split (";"); for (var i = 0; i-? 1 c [i] .substr (0, e): c [i]; document.cookie = n + "=; utløper = torsdag, 01 jan 1970 00:00:00 GMT"; () Ikke så komplisert som det ser ut - cookies har bare en veldig streng syntaks, så vi må analysere det trinnvis. La oss gå gjennom koden:
c blir nå en matrise som inneholder alle informasjonskapsler som er angitt for det nåværende domenet.Husk at bookmarklets fortsatt opererer under siden, slik at du ikke får tilgang til informasjonskapsler fra andre domener. Du er begrenset til siden du påkaller bokmerket på.
Og vi er ferdige. Husk at vi bare har skrapet overflaten av bokmerkene. Mange av dem er komplette applikasjoner i seg selv, med en skikkelig forside for oppstart. De tar mye tid og planlegger å bygge, akkurat som alle ikke-trivielle applikasjoner. Dette var bare for å få foten din i døren til bookmarklet-utvikling. Forhåpentligvis har du funnet denne opplæringen interessant, og dette har vært nyttig for deg.
Spørsmål? Hyggelige ting å si? Kritikk? Treff kommentar delen og la meg en kommentar. Takk så mye for å lese!
