Manipulando colisão de componentes jQuery

4

No desenvolvimento de plug-ins, qual é a melhor prática para evitar a colisão de componentes do jQuery no front end?

Por exemplo, digamos que eu inclua o diálogo jQuery Apprise em um plugin que carrega isso no front-end para alguma coisa, mas outro plugin pode fazer o mesmo. Como isso é carregado e declarado duas vezes, ou talvez um seja bifurcado e personalizado, enquanto o meu não é, obtemos erros de Javascript no frontend (suponho).

(Observe que estou fazendo a melhor prática de usar a estratégia wp_register_script () e wp_enqueue_script () através de um evento de ação wp_head () para carregar um componente jQuery no frontend.

    
por Volomike 14.04.2012 / 18:45

3 respostas

1

Minha sugestão seria usar uma mistura de isolamento de código em uma função anônima e verificar se jquery já está presente.

Veja um exemplo:

(function() {

var jQuery;  // your jquery variable

// check if jquery is present and if it has the version you want
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.8.3') {

    // load jquery lib from 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");

    // wait for jquery lib to load
    if (script_tag.readyState) {
      script_tag.onreadystatechange = function () { // old versions of IE
          if (this.readyState == 'complete' || this.readyState == 'loaded') {
              jqueryLoadHandler();
          }
      };
    } else { // for other browsers
      script_tag.onload = jqueryLoadHandler;
    }

    // Try to find the head, otherwise default to the documentElement
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);

} else {

    // The current site is already using the jquery you want, so just point your variable to that jquery
    jQuery = window.jQuery;
    main();
}

// as soons as jquery is loaded
function jqueryLoadHandler() {
    // Restore $ and window.jQuery to their previous values and store the
    // new jQuery in our local jQuery variable
    jQuery = window.jQuery.noConflict(true);

    // Call plugin main function
    main(); 
}

// plugin main function
function main() { 
    jQuery(document).ready(function($) { 
        // Here you can use the $ without any problems
    });
}

})(); // We call our anonymous function immediately

Desta forma, você pode usar o jQuery sem problemas no seu plugin, mesmo que outros plugins usem o jquery sem o wp_enqueue_script. Todas as variáveis e funções que você usa dentro desta função anônima não interferirão no resto da página.

Talvez isso funcione ainda melhor se for integrado ao wp_enqueue_script.

Você pode ler mais sobre essa abordagem de carregar o jquery dentro de uma função anônima em enlace

    
por dbeja 14.12.2012 / 14:02
1

A prática recomendada para enfileirar ou registrar scripts é usar wp_register_script e wp_enqueue_script . Plugins e temas que não usam essa função para adicionar seus scripts, não devem ser usados.

O motivo é simples: com wp_register_script() , podemos recuperar muitas informações sobre scripts registrados. Especialmente se uma determinada fonte já está registrada ou não.

Eu escrevi uma classe simples para testar se uma fonte já está registrada. A classe pode cancelar o registro do script e registrar o novo script ou pular o novo script. Esta classe deve ser um ponto de partida para o seu próprio desenvolvimento. Não é não para o ambiente de produção!

Como a aula funciona?

A classe recupera uma matriz com os scripts que devem ser registrados. Que compare os nomes dos arquivos (e somente os nomes dos arquivos) de cada script registrado com os nomes de arquivos dos scripts que devem ser registrados. Se o script / nome do arquivo não estiver registrado, o identificador será adicionado a uma matriz e será registrado posteriormente.

A classe pode ser estendida para comparar o caminho completo do script ou a versão ou o que for necessário para decidir se o script deve ser registrado ou não.

Um exemplo simples

    $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'] );

Primeiro definimos uma matriz com todos os nossos scripts para serem registrados. A turma passará por nossos scripts e comparará se a fonte já estiver registrada.

  • o script foo será sempre registrado porque a fonte não está registrada.
  • o script bar nunca será registrado porque sua origem já está registrada.
  • o script jquery é um caso especial. Já existe um identificador chamado jquery , mas o segundo parâmetro na chamada de classe diz que essa fonte de script precisa ser substituída pela nova origem.

Como você pode ver no var_dump() , a fonte do script jquery foi substituída pela classe. Então, se você estender a classe e ajustar o teste (fonte, nome de arquivo js, versão, scripts enfileirados, etc.), isso poderá ajudar a minimizar as colisões de js.

    
por Ralf912 16.12.2012 / 23:38
1

O problema com o núcleo do jQuery é muito comum e muitos plugins têm muitas maneiras de evitá-lo.

Quando falamos de plugins para jQuery, há outro problema, mas você pode removê-lo de maneira similar.

Na sua sittuation eu prefiro uma solução comum para adicionar include switch na página de configurações do seu plugin - eu acho que isso é muito popular para plugins com jQuery core, mas você pode usá-lo para plugins jQuery também.

Outra solução é escrever um script em js para verificar se o método extra do jQuery (do plugin) está definido, quando não é possível incluir o plugin no seu script. Essa solução só funcionará se você adicionar um gancho para scripts com prioridade muito baixa. Ele será executado após outros plugins e essa condição funcionará.

    
por Maciej Płusa 16.12.2012 / 16:35