Share
I bookmark possono essere definiti come mini applicazioni mascherate da minuscoli frammenti di awesomen JavaScript che risiedono nel browser e forniscono funzionalità aggiuntive a una pagina Web.
Oggi, esamineremo la creazione di bookmarklets da zero e lungo la strada, alcune best practice da seguire.
Non sono per il nerd, anzi, sono piuttosto user-centric.
Siamo sempre alla ricerca di modi per migliorare la nostra esperienza di navigazione, diffusa o poco conosciuta. Bookmarklets, pensavo, apparteneva a quest'ultimo, il bastione dei super nerd. Con mio grande dispiacere, ho scoperto che avevo completamente torto sull'argomento. Non sono per i nerd, anzi, sono piuttosto incentrati sull'utente, implementano molte funzionalità abbastanza pulite e, proprio come le persone hanno previsto, sono diventate parte integrante del modo in cui interagisco con il browser - e Internet.
Oggi, vorrei guidarvi attraverso lo sviluppo di bookmarklets che implementano alcuni segnalibri eleganti. sì, segnalibri. Ne costruiremo più di uno, anche se piuttosto piccoli. Incuriosito? Iniziamo!
Per citare l'intro del mio articolo:
I bookmark possono essere definiti come mini applicazioni mascherate da minuscoli frammenti di meraviglia JavaScript che risiedono nel browser e forniscono funzionalità aggiuntive, con un semplice clic.
La parola stessa è una miscela, valigia per il pedante, delle parole segnalibro e applet. Chiamati anche favelet, questi piccoli frammenti di JavaScript ti permettono di evocare funzionalità aggiuntive per qualsiasi pagina che stai visitando.
Poiché sono costituiti solo da JavaScript, sono abbastanza portabili: sono supportati da tutti i browser su tutte le piattaforme, anche su cellulari e tablet. Installarli è semplice come trascinarli sulla loro barra degli strumenti!
Il punto è che i bookmarklet ti permettono di fare un sacco di cose che altrimenti sarebbero troppo incentrate sullo sviluppatore. Ogni funzionalità che si ottiene con un bookmarklet può essere duplicata utilizzando la console di un browser e un po 'di tempo. Bookmarklets semplifica semplicemente il processo - impacchettando il codice che implementa alcune funzionalità all'interno di un piccolo pulsante pulito.
I bookmark possono essere categorizzati in una serie di categorie:
Il primo punto che devi ricordare è prefisso tutto il codice JavaScript con il javascript URI. I browser hanno implementato questo prefisso specifico in modo che il contenuto da esso seguito possa essere trattato e analizzato come codice JavaScript appropriato.
Ad esempio, facendo clic su questo link - vedi il suo codice qui sotto - avviserà un testo.
Linky
Ricorda che il tuo codice verrà eseguito contro la pagina attualmente caricata, una pagina che probabilmente avrà JavaScript e tutte le collisioni risultanti che implica. L'ultima cosa di cui hai bisogno è che il bookmarklet interrompa la pagina corrente.
Accompagnando ordinatamente il codice all'interno di una funzione anonima ci si assicurerà che non ci siano zero conflitti di nomi. Inoltre, i noob di JavaScript saranno sconcertati e penseranno che tu sia un dio, se ti piace questo genere di cose.
javascript: (function () // your code here) ();
Questo è pertinente quando usi JavaScript anche altrove. Sempre, sempre isolare il tuo codice.
Un bookmarklet non deve necessariamente essere piccolo, sei libero di andare grande quanto vuoi. In questi casi, nell'interesse della distribuzione e mantenendo il tuo codice aggiornato senza l'intervento manuale dell'utente, è meglio creare un wrapper che inserisca il codice secondo necessità.
Accentsconagua
javascript: (function () var jsCode = document.createElement ('script'); jsCode.setAttribute ('src', 'http: //path/to/external/file.js'); document.body.appendChild ( jsCode); ()); Questo è praticamente ciò che fa il codice precedente: crea un elemento script, imposta l'origine su un file ospitato altrove e infine lo aggiunge al documento. In questo modo, ogni volta che una parte del codice cambia, è possibile distribuire le modifiche a una singola fonte e farla immediatamente propagare a tutti gli utenti.
Nota: Non sei limitato a farlo solo per JavaScript. Se il tuo bookmarklet fa uso di un front-end, sei libero di estrarre esternamente anche HTML e CSS, rendendo il tuo bookmarklet davvero autoaggiornante.
Di nuovo, se stai costruendo un mostro di un bookmarklet, potresti avere bisogno di una di quelle librerie JavaScript. Ma usarli nella tua pagina non è semplice come includerlo semplicemente - devi assicurarti che le librerie non siano già disponibili. Librerie come jQuery e MooTools dominano il mercato e faresti bene per assicurarti che non sia già caricato.
Un altro problema è che la pagina potrebbe aver caricato un'altra libreria che potrebbe portare a conflitti sul controllo del simbolo $. Le collisioni di versione possono anche entrare in gioco ad un certo punto, quindi tienilo a mente.
Ecco una shell veloce per il codice che generalmente uso. Ricorda, nel tuo codice di produzione, dovrai tenere conto dei problemi che ho menzionato sopra.
if (! ($ = window.jQuery)) // typeof jQuery == 'undefined' funziona troppo script = document.createElement ('script'); script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'; script.onload = releasetheKraken; document.body.appendChild (sceneggiatura); else releasetheKraken (); function releasetheKraken () // Il Kraken è stato rilasciato, master! // Sì, sono infantile. Inserisci qui il tuo codice Il codice dovrebbe essere abbastanza auto esplicativo. Corriamo comunque velocemente.
Se stai cercando di evitare tutto questo fastidio, consiglio vivamente l'eccellente generatore di bookmarklet di Ben Alman. Si prende cura dei conflitti di namespace e versioning in modo molto pulito. Roba buona!
I segnalibri sono inutili se, involontariamente, rompono una pagina.
Non posso sottolineare abbastanza questo punto. I segnalibri sono inutili se, involontariamente, rompono una pagina. E preoccuparsi di JavaScript non è l'unica cosa che devi affrontare.
Se hai un front-end, anche l'HTML e il CSS entrano in gioco. Non assegnare i tuoi contenitori e classi nomi generici: se lo chiami 'contenitore', avrai il mio eterno odio per sempre.
Un modo semplice è prefisso [o suffisso, non mi interessa] tutto con una stringa specifica di bookmarklet. E quando scrivi il tuo CSS, sii molto, molto specifico. Fare uso di cascading è bello ma usarlo con estrema precisione. Disporre di stili sulla pagina principale è irregolare e non evoca la fiducia.
Se stai creando un bookmarklet più piccolo, uno in cui includere una libreria di terze parti sembra inutile, ti imbatterai in un demone sempre presente - compatibilità cross-browser.
Potrebbe sembrare abbastanza ovvio ma è qualcosa che molte persone dimenticano, molte volte. Assicurati di testare tutti i browser su quante più piattaforme possibili.
Un'altra facile trappola in cui cadere è un bookmarklet che ha lo scopo di funzionare su tutti i siti che funzionano solo in modo selettivo. Le pagine possono avere gerarchie diverse e utilizzare diverse metodologie. Alcuni siti possono includere HTML5 e utilizzare i contenitori correlati mentre altri possono giocare sicuri e utilizzare div generici. Durante l'estrazione di informazioni, assicurati di tenere conto di ogni scuola di sviluppo.
Ora che abbiamo esaminato alcuni punti da tenere presenti durante lo sviluppo, costruiremo i tre bookmarklet di cui ho parlato in precedenza, uno appartenente a ciascuna categoria.
Se hai già familiarità con JavaScript di base, il codice seguente dovrebbe essere un gioco da ragazzi-- sono solo alcune righe di codice! I bookmarklets qui sotto sono stati con me già da un po 'di tempo e non riesco a scoprire dove li ho visti in origine. Se lo fai, lasciami una breve nota nei commenti e aggiungerò i crediti di conseguenza.
Inizieremo con uno molto semplice - presentandoti a un servizio esterno, Reddit nel nostro caso.
javascript: location.href = 'http: //www.reddit.com/submit? url =' + encodeURIComponent (location.href) + '& title =' + encodeURIComponent (document.title)
Questa è una cosa abbastanza semplice, presa direttamente dal sito. Nessun wrapper anonimo o namespacing poiché la funzionalità è piuttosto limitata.
Quando viene richiamato il bookmarklet, si verifica quanto segue, nell'ordine logico:
location.href e titolo del documento encodeURIComponent metodoQuesto modello funziona praticamente per la maggior parte degli scopi di ricerca e presentazione. L'unica variabile qui sarebbe l'URL che invii: ogni applicazione ha un approccio diverso. Sotto un minuto di ricerca dovresti vederti.
Ad esempio, un bookmarklet di convalida sarà simile a questo:
javascript: location.href = 'http:? //validator.w3.org/check uri =' + encodeURIComponent (location.href)
Si noti che abbiamo semplicemente scartato il titolo della pagina e modificato la struttura dell'URL per puntare al servizio di validazione W3.
javascript: void (document.bgColor = prompt ('Colore? Esadecimale o nome farà. Posso suggerire rosa?', 'rosa')) Questo è semplice come sembra. Per mantenere le cose semplicissime, ho deciso di non introdurre variabili e validazioni. Vedremo solo il codice principale.
document.bgcolor. Questo è tutto! Si lo so bgColor è deprecato e sì, so che dovrei sentirmi sporco, ma questo andrà abbastanza bene da quando un rapido test sui browser moderni è uscito positivo.
Puoi giocare con questi un po '. Questo è simile al modo in cui generalmente si applica lo stile CSS agli elementi tramite JavaScript. Lo stiamo solo applicando a pagine arbitrarie. Prendi nota del fatto che le diverse pagine hanno strutture diverse, quindi se la pagina ha un contenitore completo, l'effetto potrebbe essere privo di significato. In questi casi, potrebbe essere necessario cercare il contenitore principale e quindi applicare lo stile su di esso.
javascript: function () var c = document.cookie.split (";"); per (var i = 0; i-? 1 c [i] .substr (0, e): c [i]; document.cookie = n + "=; expires = Gio, 01 gen 1970 00:00:00 GMT"; () Non è così complicato come sembra - i cookie hanno solo una sintassi molto rigida, quindi dovremo analizzarli passo dopo passo. Passiamo attraverso il codice:
c ora diventa una matrice contenente tutti i cookie impostati per il dominio corrente.Ricorda che i bookmarklets funzionano ancora sotto la pagina, quindi non puoi accedere ai cookie da altri domini. Sei limitato alla pagina su cui invochi il bookmarklet.
E abbiamo finito. Ricorda, abbiamo semplicemente graffiato la superficie dei bookmarklets. Molti di loro sono applicazioni complete al loro interno, con un front-end adeguato per l'avvio. Ci vuole un sacco di tempo e pianificazione per costruire, proprio come qualsiasi applicazione non banale. Questo era semplicemente per mettere il piede nella porta dello sviluppo del bookmarklet. Spero che tu abbia trovato questo tutorial interessante e questo ti è stato utile.
Domande? Belle cose da dire? Critiche? Colpisci la sezione dei commenti e lasciami un commento. Grazie mille per la lettura!
