Vă dau un exemplu simplu de aspect al unui magazin online, de exemplu, folosim unul dintre elementele standard jQuery UI Slider pentru a adăuga un formular de căutare la site-ul / magazinul online cu un cursor de gama de prețuri sau numărul de produse.
În formularul de căutare, avem următorul cod:
- id = "maxPrice" - câmpul asociat cu valoarea prețului maxim al produsului în timpul căutării;
- id = "minPrice" - câmpul asociat cu valoarea prețului minim al bunurilor în timpul căutării;
- id = "jsSlider" - container pentru adăugarea cursorului de selectare a intervalului.
Și adăugați la antetul site-ului între inițierea tag-urilor capului plug-in-ului (sau redați-l într-un fișier separat):
Dar! Și ce se întâmplă atunci când formularul de căutare nu se află pe pagină? Codul specificat va cauza erori și va opri executarea lui js pe pagină după ce apare o eroare. Și în Internet Explorer 8 și mai jos, va începe să vă callizeze ochii, vizitatori enervanți cu mesaje de eroare intruzive (de asemenea, cu un semnal audio). Ca rezultat, site-ul își va pierde vizitatorii cu vechile versiuni ale Internet Explorer. Și magazinul va pierde potențialii cumpărători.
Vom rescrie corect codul specificat (dacă intenționăm practic pentru toate paginile să părăsească forma minimă de căutare după mărfuri):
După cum puteți vedea, exemplul diferă doar în câteva rânduri: dacă (jQuery ("# jsSlider"). jQuery ("# minPrice") .length jQuery ("# maxPrice")) - dacă există un container pentru cursor în contextul paginii - div id = "jsSlider". și, de asemenea, ambele câmpuri de text: id = "minPrice", id = "maxPrice" - numai atunci efectuăm inițializarea pluginului jquery slider ui. Un astfel de cod nu va cauza o eroare chiar dacă toate aceste elemente lipsesc (pur și simplu nu există o formă minimă de căutare pe pagina specificată). Pluginul nu va fi pur și simplu inițializat.
Concluzia este simplă: înainte de a inițializa pluginurile jQuery, verificați elementele necesare pentru funcționarea lor în contextul paginii utilizând proprietatea .length pentru a evita alte erori.
Mai multe informații despre tehnologiile web pot fi găsite în lista noastră cu toate articolele de pe site:
Trimiteți-le prietenilor: