Creați pictograme - calea cea bună

Seturile de cărți de vizită pot fi definite ca mini-aplicații care se comportă ca niște fragmente minuscule de javascript JavaScript care se găsesc în browserul dvs. și oferă funcționalități suplimentare unei pagini Web.

Astăzi, vom analiza crearea cărților de marcare de la zero și pe drum, câteva bune practici de urmat.

Nu sunt pentru nenorocitul, de fapt, sunt destul de orientați spre utilizator.

Întotdeauna ne uităm la modalități de îmbunătățire a experienței noastre de navigare, fie ea larg răspândită sau puțin cunoscută. Bookmarklet, de obicei, cred că aparținea ultimului - bastionul de tocilari super. Multumesc mult pentru dezordinea mea, am descoperit ca am fost complet gresit in legatura cu acest subiect. Nu sunt pentru nerdy, de fapt, sunt destul de orientate spre utilizator, pun în aplicare o mulțime de funcții destul de îngrijite și, așa cum au prezis oamenii, a devenit o parte esențială a modului în care interacționez cu browserul - și Internet.

Astăzi, aș vrea să vă conduc prin dezvoltarea de broșuri care pun în aplicare câteva marcaje minuțioase. da, marcaje. Vom construi mai mult de unul, deși destul de mici. Intrigat? Să începem!

Deci, ce sunt exact pictogramele?

Pentru a cita intro articolul meu:

Bookmarkets pot fi definite ca aplicații minuscule care se comportă ca niște fragmente minuscule de JavaScript care apar în browser și oferă funcționalități suplimentare, cu doar un clic.

Cuvântul în sine este un amestec, geamantan pentru pedant, cuvintele și applet-ul. De asemenea, numite favelet-uri, aceste fragmente mici de JavaScript vă permit să creați funcționalități suplimentare pentru orice pagină pe care o vizitați.

Pentru că constau doar din JavaScript, sunt destul de portabile - sunt susținute de toate browserele de pe toate platformele, chiar și pe telefoane mobile și tablete. Instalarea acestora este la fel de simplă precum tragerea lor în bara de instrumente!

Da, dar care este punctul?

Punctul este că bookmarklets vă permit să faceți o mulțime de lucruri care altfel sunt prea dezvoltator-centric pentru a realiza. Fiecare funcționalitate pe care o obțineți cu un bookmarklet poate fi duplicată folosind consola browserului și puțin timp. Simbolurile simplifică simplificarea procesului - împachetează codul care implementează anumite funcții în interiorul unui buton mic.

Bookmarkleturile pot fi clasificate pe larg în mai multe categorii:

Cei care transmit date. Bookmarkleturile care trimit o pagină către un serviciu intră sub această categorie. Bookmarklets care se ocupă de medii sociale, căutări de dicționare, toate căutările se încadrează în această categorie. Vom construi unul care se supune lui Reddit.
Cei care obțin informații și / sau modifică pagina curentă. Vom construi un marcator care stabilește culoarea de fundal a unei pagini.
Cei care lucrează în spatele scenei. Un marcator de carte care șterge toate cookie-urile de pe site-ul curent este un prim exemplu și unul pe care îl vom construi.

# 1 - Noțiuni de bază

Primul punct pe care va trebui să vă amintiți este să prefixați tot codul JavaScript cu JavaScript URI. Browserele au implementat acest prefix specific, astfel încât conținutul urmat de acesta să poată fi tratat și analizat ca un cod JavaScript corect.

De exemplu, dacă faceți clic pe acest link - vedeți codul de mai jos - veți alerta un text.

 Linky

# 2 - Utilizați o funcție anonimă ca un wrapper

Amintiți-vă că codul dvs. se va difuza în raport cu pagina încărcată în prezent - o pagină care probabil va avea JavaScript propriu și toate coliziunile rezultate pe care le implică. Ultimul lucru de care aveți nevoie este să vă blocați pagina curentă.

Împachetarea codului dvs. într-o funcție anonimă vă va asigura că există numeroase coliziuni de numire. În plus, JavaScript noobs va fi flummoxed și va crede că sunteți un zeu, dacă sunteți în acest fel de lucruri.

javascript: (funcția () // codul dvs. aici) ();

Acest lucru este pertinent atunci când utilizați JavaScript și în altă parte. Mereu, mereu izolați-vă codul.

# 3 - Externalizați, dacă este necesar

Un marcator de carte nu trebuie neapărat să fie mic, sunteți liberi să mergeți la fel de mare cum doriți. În aceste cazuri, în scopul distribuirii și păstrării actualizării codului fără intervenția manuală a utilizatorului, este mai bine să creați un pachet care să tragă codul după cum este necesar.

 javascript: (funcție () var jsCode = document.createElement ('script'); jsCode.setAttribute ('src', 'http: //path/to/external/file.js'); document.body.appendChild jsCode); ());

Exact ceea ce face codul de mai sus - creează un element de script, stabilește sursa într-un fișier găzduit în altă parte și în final îl adaugă la document. În acest fel, ori de câte ori o parte din codul dvs. se schimbă, puteți implementa modificările dvs. într-o singură sursă și le puteți propaga instantaneu pentru fiecare utilizator.

Notă: Nu vă limitați la a face acest lucru doar pentru JavaScript. Dacă bookmarklet-ul dvs. folosește un front-end, aveți libertatea de a trage extern și HTML și CSS, făcând bookmarklet-ul dvs. cu adevărat actualizat.

# 4 - Exercițiu Atenție la adăugarea unei Biblioteci

Din nou, dacă construiți o marcă a unui marcator, este posibil să aveți nevoie de una dintre acele biblioteci JavaScript. Dar folosirea lor în pagina dvs. nu este la fel de simplă ca includerea - trebuie să vă asigurați că bibliotecile nu sunt deja disponibile. Bibliotecile precum jQuery și MooTools domină piața și ați face bine pentru a vă asigura că nu este deja încărcat.

O altă problemă este că pagina poate să fi încărcat o altă bibliotecă care ar putea duce la conflicte asupra controlului simbolului $. Versiunile de coliziune pot, de asemenea, să intre în joc la un moment dat astfel încât să țină cont și de asta.

Iată o coajă rapidă pentru codul pe care îl folosesc în general. Rețineți că, în codul dvs. de producție, va trebui să țineți cont de problemele pe care le-am menționat mai sus.

 dacă ! ($ = window.jQuery)) // tipul jQuery == 'undefined' funcționează prea script = document.createElement ('script'); script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'; script.onload = releasetheKraken; document.body.appendChild (script);  altfel releasetheKraken ();  function releasetheKraken () // Kraken a fost eliberat, maestru! // Da, sunt copilăresc. Plasați codul aici

Codul trebuie să fie destul de explicabil. Hai să trecem repede prin ea oricum.

În primul rând, determinăm dacă jQuery este încărcat verificând dacă obiectul jQuery există în spațiul de nume.
Dacă nu, pregătim rapid pentru includere. Urmăm cele mai bune practici și încărcați-o de la un CDN. În cele din urmă, asigurați-vă că indicați funcția principală care conține codul care urmează să fie executat.
Dacă este deja inclusă, trebuie doar să rulați funcția de împachetare principală.

Dacă căutați să evitați toate aceste probleme, recomandăm un generator excelent de benzi desenate Ben Alman. Ea are grijă de conflictele de nume și de versiuni în mod foarte curat. Lucruri bune!

# 5 - Nu mâncați pe pagina părinte, dacă nu trebuie

Semnele de carte sunt inutile dacă, în mod neintenționat, sparge o pagină.

Nu pot să subliniez acest lucru suficient. Semnele de carte sunt inutile dacă, în mod neintenționat, sparge o pagină. Și îngrijorarea cu privire la JavaScript nu este singurul lucru cu care trebuie să vă ocupați.

Dacă aveți un front-end, HTML și CSS intră și în joc. Nu vă alocați containerele și clasele generice - dacă îl numiți "container", veți avea pentru totdeauna ură moartă.

O modalitate ușoară este de a prefixa [sau sufixul, nu mă deranjează] totul cu un șir de caractere specific. Și atunci când scrieți CSS, fiți foarte, foarte specifici. Folosirea cascadării este drăguță, dar folosiți-o cu ultra-precizie. Dacă stilurile scapă de pagina principală este neregulată și nu provoacă încredere.

# 6 - Test, Test, Test

Dacă construiți un marcator mai mic, unul în care este inclusă o bibliotecă terță parte pare inutilă, veți fi implicați într-o compatibilitate care va apărea vreodată.

Ar părea destul de evident, dar acest lucru este un lucru pe care mulți o uită, de multe ori. Asigurați-vă că testați cât mai multe browsere pe cât mai multe platforme posibil.

O altă capcană ușor de tras este un bookmarklet care este destinat să lucreze pe toate site-urile care funcționează doar selectiv. Paginile pot avea diferite ierarhii și pot folosi diferite metodologii. Unele site-uri pot să îmbrățișeze HTML5 și să utilizeze containerele aferente, în timp ce altele pot juca în siguranță și pot folosi divizii generice. În timp ce miniere pentru informații, asigurați-vă că pentru fiecare școală de dezvoltare.

Și plecăm

Acum, când ne-am uitat la câteva puncte pe care să le ținem cont în timpul dezvoltării, vom construi cele trei cărți despre care am vorbit anterior - unul care aparține fiecărei categorii.

Un magazin de cărți pe care îl transmite lui Reddit
Un bookmarket care șterge cookie-urile de pe site-ul curent
Un marcator de carte care modifică culoarea de fundal a unei pagini

Dacă sunteți deja familiarizat cu JavaScript de bază, codul următor ar trebui să fie un cinch - sunt doar câteva rânduri de cod! Marcajele de mai jos au fost cu mine de ceva timp și nu par să aflu unde le-am văzut inițial. Dacă nu, lăsați-mi o notă rapidă în comentarii și voi adăuga credite în consecință.

Bookmarklet # 1 - Trimiteți-l la Reddit

Vom începe cu unul foarte ușor - trimiterea la un serviciu extern, Reddit în cazul nostru.

 javascript: location.href = 'http: //www.reddit.com/submit? url =' + encodeURIComponent (loc.href) + '& title =' + encodeURIComponent (document.title)

Acestea sunt niște lucruri destul de simple, luate chiar de pe site. Nu există niciun pachet anonim sau nicio colecție de nume, deoarece funcționalitatea este destul de limitată.

Când se invocă marcatorul de marcaj, au loc următoarele, în ordine logică:

Titlul și adresa URL ale paginii sunt înregistrate folosind location.href și titlul documentului
Pentru a vă asigura că nu se strecoară caracterele ilegale, codificăm-o folosind encodeURIComponent metodă
În cele din urmă, concatenăm totul pentru a obține adresa URL și pentru a schimba locația paginii

Acest model funcționează destul de mult pentru majoritatea scopurilor de căutare și trimitere. Singura variabilă aici ar fi adresa URL la care trimiteți - fiecare aplicație are o abordare diferită. Sub un minut de căutare ar trebui să te vadă prin tine.

De exemplu, un marcator de validare ar arăta astfel:

 javascript: location.href = 'http: //validator.w3.org/check uri =' + encodeURIComponent (location.href)

Rețineți că am renunțat doar la titlul paginii și am modificat structura adresei URL pentru a indica serviciul de validare W3.

Bookmarklet # 2 - Schimbați fundalul unei pagini

 javascript: void (document.roColor = prompt ("Culoare? Hex sau numele va face, pot sugera roz?", "roz"))

Acest lucru este la fel de simplu cum arată. Pentru a păstra lucrurile foarte simple, am optat să nu introduc variabilele și validarea. Ne vom uita la codul de bază.

În primul rând, vom crea un prompt care îi cere utilizatorului o culoare pentru a seta fundalul. Deoarece nu verificăm intrarea, mă bazez pe faptul că nu ești nebun.
In cele din urma, am setat fundalul la culoarea aleasă prin document.bgColor. Asta e!

Da, stiu bgcolor este depreciat și da, știu că ar trebui să mă simt murdar, dar acest lucru va face destul de adecvat, deoarece un test rapid pe browserele moderne a ieșit pozitiv.

Poți să te joci cu acestea destul de puțin. Acesta este similar cu modul în care aplicați în general stilul CSS elementelor prin JavaScript. Pur și simplu o aplicăm paginilor arbitrare. Rețineți că paginile diferite au structuri diferite, astfel încât, dacă pagina are un container complet de înfășurare, efectul poate fi lipsit de sens. În aceste cazuri, este posibil să trebuiască să vânați containerul principal și apoi să îl aplicați stilului.

Bookmarklet # 3 - Ștergerea cookie-urilor

 javascript: funcția () var c = document.cookie.split (";"); pentru (var i = 0; i-? 1 c [i] .substr (0, e): c [i]; document.cookie = n + "=; expira = Joi, 01 Jan 1970 00:00:00 GMT";  ()

Nu chiar așa de complicat cum arată - cookie-urile au doar o sintaxă foarte strictă, așa că va trebui să o analizăm pas cu pas. Să trecem prin cod:

Split document.cookie bazat pe semicolori. c acum devine o matrice care conține toate cookie-urile setate pentru domeniul curent.
Faceți buclă prin matrice.
Verificați dacă cookie-ul conține simbolul egal, adică dacă a fost setată și returnată o valoare cookie
Dacă da, vom capta toate informațiile doar până la el. Dacă nu, lăsați ca cookie-ul să fie așa cum este
În cele din urmă, adăugați o valoare de șir care golește valoarea cookie-ului împreună cu definirea unei date de expirare din trecut, ștergându-l efectiv

Amintiți-vă că marcajele încă funcționează sub pagină, astfel încât să nu puteți accesa modulele cookie din alte domenii. Sunteți limitat la pagina pe care ați invocat marcatorul de carte.

E un Wrap

Și am terminat. Amintiți-vă, am zgâriat doar suprafața de marcare. Multe dintre acestea sunt aplicații complete în interiorul lor, cu un capăt frontal adecvat pentru a porni. Cei care iau mult timp și planifică să construiască, la fel ca orice aplicație non-trivială. Acest lucru a fost doar pentru a vă piciorul în ușa de dezvoltare bookmarklet. Sperăm că ați găsit acest tutorial interesant și acest lucru a fost util pentru dvs..

Întrebări? Ce lucruri frumoase de spus? Critici? Activați secțiunea de comentarii și lasă-mă un comentariu. Vă mulțumesc foarte mult pentru lectură!

Cod