Existem várias maneiras pelas quais podemos simplesmente verificar se os plug-ins do jQuery foram carregados com êxito ou não usando o jQuery. Também podemos verificar se uma função específica dentro do plugin está acessível ou não. Este tutorial irá demonstrar como verificar se um plugin jQuery está carregado ou não. 
 

  • Etapa 1: Instale o Browsersync usando npm . Usaremos o Browsersync para iniciar um servidor e fornecer uma URL para visualizar o site HTML e para carregar o jQuery usando CDN (Content Delivery Network). Vamos instalar o Browsersync globalmente.
    npm install -g browser-sync
  • Etapa 2: Usaremos o plugin jQuery-UI para este tutorial. Vamos testar se este plugin foi carregado com sucesso ou não usando jQuery. Baixe a versão mais recente deste plug-in e extraia-o para a pasta raiz do projeto.
  • Etapa 3: Criar um arquivo index.html
    Exemplo 1: Os plug-ins jQuery são namespaces no escopo jQuery. O plugin jquery-ui não estende o namespace fn , portanto, podemos verificar se o plugin foi carregado com sucesso usando o código acima. ui representa o nome do plugin e pode ser substituído pelo nome do plugin a ser verificado. Carregamos o jQuery na tag head porque ele precisa estar disponível antes de ser usado no aplicativo. É uma prática recomendada carregar todos os arquivos JavaScript no final da tag body para aumentar o desempenho e renderizar a página mais rapidamente. Portanto, usamos o $(document) .ready()antes de podermos verificar se o plugin foi carregado com sucesso ou não. 
    O operador typeof retorna o tipo de dados de seu operando na forma de uma string. Nesse caso, o operando é o próprio operador jQuery $ .

    html




    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JQuery Plugin</title>
        <script src=
        </script>
    </head>
    <body>
        <div>Hello GeeksForGeeks</div>
        <script type="text/javascript">
            $(document).ready(function() {
                if (typeof $.ui !== 'undefined') {
                    console.log('jquery-ui is loaded successfully')
                }         
            });
        </script>
        <script src="jquery-ui-1.12.1/jquery-ui.js" 
                type="text/javascript"></script>
    </body>
    </html>
    Exemplo 2: Como é garantido que cada plugin tenha algumas definições de função ou valores que sejam iguais a true , podemos usar a versão mais curta, conforme mostrado no código.
    Javascript





    if ($.ui) {
        console.log('jquery-ui is loaded successfully')
    }
    Observação: para todos os plug-ins jQuery que estendem o namespace fn , a maneira correta de verificar é:
    Javascript



    <script type="text/javascript">
    $(document).ready(function () {
        if (typeof $.fn.pluginname !== 'undefined') {
            console.log('jquery-ui is loaded - 2')
        }
        if ($.fn.pluginname) {
            console.log('jquery-ui is loaded - 3')
        }
    });
    </script>
    O $.fn.pluginname estende os objetos jQuery e é uma função que pode ser chamada em todos os objetos jQuery.init , enquanto $.pluginname estende o próprio $ objeto.
  • Passo 4: Vamos agora verificar se as funções do plugin estão acessíveis ou não. Isso significa automaticamente que o próprio plugin foi carregado com sucesso. 
    index.html
    Javascript



    <input type="text" name="date" id="date">
    <script type="text/javascript">
       $(document).ready(function () {
           if (jQuery().datepicker()) {
              console.log('jquery-ui datepicker() function is accessible')
           }
           if (typeof $.fn.datepicker() !== 'undefined') {
               console.log('jquery-ui datepicker() function is accessible')
           }
           if ($.fn.datepicker()) {
               console.log('jquery-ui datepicker() function is accessible')
           }   
           $("#date").datepicker();
       });
    </script>
    Nota: A função jQuery jQuery() retorna um novo objeto jQuery.init . O jQuery() também pode ser substituído pelo operador $() na maioria dos casos.
  • Etapa 5: para iniciar o aplicativo usando Browsersync, execute o seguinte comando no diretório do projeto:
    browser-sync start --server --files "*"
    Isso inicia o Browsersync no modo de servidor e observa todos os arquivos no diretório para alterações conforme especificado pelo * curinga. O aplicativo será iniciado em http: // localhost: 3000 / por padrão. 
    Saída: