Cum să eviți coliziunile componentelor jQuery în WordPress

Sugestia mea ar fi să utilizați un mix de izolare a codului într-o funcție anonimă și verificarea dacă jQuery este deja prezent.

Iată un exemplu:

(function() {

var jQuery;  // variabila ta jQuery

// verifică dacă jQuery este prezent și dacă are versiunea dorită
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.8.3') {

    // încarcă biblioteca jQuery de la Google Hosted Libraries
    var script_tag = document.createElement('script');
    script_tag.setAttribute("type","text/javascript");
    script_tag.setAttribute("src","http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js");

    // așteaptă încărcarea bibliotecii jQuery
    if (script_tag.readyState) {
      script_tag.onreadystatechange = function () { // versiuni vechi de IE
          if (this.readyState == 'complete' || this.readyState == 'loaded') {
              jqueryLoadHandler();
          }
      };
    } else { // pentru alte browsere
      script_tag.onload = jqueryLoadHandler;
    }

    // Încearcă să găsească head-ul, altfol folosește documentElement
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);

} else {

    // Site-ul curent folosește deja jQuery-ul dorit, așa că doar direcționează variabila ta către acel jQuery
    jQuery = window.jQuery;
    main();
}

// imediat ce jQuery este încărcat
function jqueryLoadHandler() {
    // Restaurează $ și window.jQuery la valorile lor anterioare și stochează
    // noul jQuery în variabila noastră locală jQuery
    jQuery = window.jQuery.noConflict(true);

    // Apelează funcția principală a plugin-ului
    main(); 
}

// funcția principală a plugin-ului
function main() { 
    jQuery(document).ready(function($) { 
        // Aici poți folosi $ fără probleme
    });
}

})(); // Apelăm imediat funcția noastră anonimă

În acest fel poți folosi jQuery fără probleme în plugin-ul tău, chiar dacă alte plugin-uri au folosit jQuery fără wp_enqueue_script. Toate variabilele și funcțiile pe care le folosești în interiorul acestei funcții anonime nu vor interfera cu restul paginii.

Poate că ar funcționa și mai bine dacă ar fi integrată cu wp_enqueue_script.

Poți citi mai multe despre această abordare de încărcare a jQuery într-o funcție anonimă la http://alexmarandon.com/articles/web_widget_jquery/

Problema cu nucleul jQuery este foarte comună și multe plugin-uri au numeroase metode de a o preveni.

Când vorbim despre plugin-uri pentru jQuery, există o altă problemă, dar o puteți elimina într-un mod similar.

În situația dumneavoastră, prefer soluția comună de a adăuga un comutator de includere pe pagina de setări a plugin-ului dumneavoastră - cred că acest lucru este foarte popular pentru plugin-urile care folosesc nucleul jQuery, dar îl puteți folosi și pentru plugin-urile jQuery.

O altă soluție este să scrieți un script în js pentru a verifica dacă metoda suplimentară jQuery (din plugin) este definită, iar când nu este, puteți include plugin-ul în scriptul dumneavoastră. Această soluție va funcționa doar dacă adăugați un hook pentru scripturi cu o prioritate foarte mică. Acesta va rula după alte plugin-uri și această condiție va funcționa.

Cea mai bună practică pentru a încărca sau înregistra scripturi este să folosești wp_register_script și wp_enqueue_script. Pluginurile și temele care nu folosesc aceste funcții pentru a adăuga scripturile lor nu ar trebui utilizate.

Motivul este simplu: cu wp_register_script() putem obține o mulțime de informații despre scripturile înregistrate. În special dacă o anumită sursă este deja înregistrată sau nu.

Am scris o clasă simplă pentru a testa dacă o sursă este deja înregistrată. Clasa poate dezînregistra scriptul și înregistra noul script sau poate sări peste noul script. Această clasă ar trebui să fie un punct de plecare pentru propria ta dezvoltare. Este nu pentru mediu de producție!

Cum funcționează clasa?

Clasa preia un array cu scripturile care ar trebui înregistrate. Apoi compară numele fișierelor (și doar numele fișierelor) ale fiecărui script înregistrat cu numele fișierelor ale scripturilor care ar trebui înregistrate. Dacă scriptul/numele fișierului nu este deja înregistrat, handle-ul său va fi adăugat într-un array și va fi înregistrat ulterior.

Clasa poate fi extinsă pentru a compara calea completă a scriptului sau versiunea sau orice altceva este necesar pentru a decide dacă scriptul ar trebui înregistrat sau nu.

Un exemplu simplu

    $my_scripts = array(

            'foo' => array(
                    'src' => 'external/ressource/foo.js',
                    'deps' => array( 'jquery' ),
                    'version' => false,
                    'in_footer' => true
                    ),

            'bar' => array(
                    'src' => home_url( '/wp-admin/js/common.min.js' ),
                    'deps' => false,
                    'version' => false,
                    'in_footer' => true
                    ),

            'jquery' => array(
                    'src' => '//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js',
                    'deps' => false,
                    'version' => '1.8.3',
                    'in_footer' => true
                    ),

    );

    $safe_register = new Safe_Registering_Scripts( $my_scripts, true );

    global $wp_scripts;

    var_dump( $wp_scripts->registered['jquery'] );

La început definim un array cu toate scripturile noastre care trebuie înregistrate. Clasa va parcurge scripturile noastre și va compara dacă sursa este deja înregistrată.

• scriptul foo va fi întotdeauna înregistrat deoarece sursa nu este înregistrată.
• scriptul bar nu va fi niciodată înregistrat deoarece sursa sa este deja înregistrată.
• scriptul jquery este un caz special. Există deja un handle numit jquery, dar al doilea parametru din apelul clasei spune că această sursă de script trebuie înlocuită cu noua sursă.

După cum puteți vedea în var_dump(), sursa scriptului jquery a fost înlocuită de clasă. Deci, dacă extindeți clasa și ajustați testul (sursa, numele fișierului js, versiunea, scripturile încărcate etc.), aceasta ar putea ajuta la minimizarea coliziunilor js.