¿Cómo verificar si un complemento jQuery está cargado?

Hay varias formas en las que podemos simplemente verificar si los complementos de jQuery se cargaron correctamente o no usando jQuery. También podemos verificar si una función particular dentro del complemento es accesible o no. Este tutorial demostrará cómo verificar si un complemento jQuery está cargado o no.

Paso 1: Instale Browsersync usando npm . Usaremos Browsersync para iniciar un servidor y proporcionar una URL para ver el sitio HTML y cargar jQuery usando CDN (red de entrega de contenido). Instalaremos Browsersync globalmente.
```
npm install -g browser-sync
```
Paso 2: Usaremos el complemento jQuery-UI para este tutorial. Probaremos si este complemento se cargó con éxito o no usando jQuery. Descargue la última versión de este complemento y extráigalo a la carpeta raíz de su proyecto.

Paso 3: Cree un archivo index.html
Ejemplo 1: Los complementos de jQuery son espacios de nombres en el ámbito de jQuery. El complemento jquery-ui no amplía el espacio de nombres fn , por lo tanto, podemos verificar si el complemento se cargó correctamente utilizando el código anterior. ui representa el nombre del complemento y se puede reemplazar con el nombre del complemento que se va a verificar. Hemos cargado jQuery en la etiqueta principal porque debe estar disponible antes de que pueda usarse en la aplicación. Se recomienda como práctica cargar todos los archivos JavaScript al final de la etiqueta del cuerpo para aumentar el rendimiento y renderizar la página más rápido. Por lo tanto, hemos usado $(document).ready()antes de que podamos verificar si el complemento se cargó correctamente o no.
El operador typeof devuelve el tipo de datos de su operando en forma de string. En este caso, el operando es el propio operador jQuery $.

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery Plugin</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </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>

Ejemplo 2: dado que se garantiza que cada complemento tiene algunas definiciones de función o valores que equivalen a true , podemos usar la versión más corta como se muestra en el código.

JavaScript

if ($.ui) {
    console.log('jquery-ui is loaded successfully')
}

Nota: para todos los complementos de jQuery que amplían el espacio de nombres fn , la forma correcta de verificar es:

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>

$.fn.pluginname extiende los objetos jQuery y es una función a la que se puede llamar en todos los objetos jQuery.init , mientras que $.pluginname extiende el objeto $ en sí.

Paso 4: ahora comprobaremos si las funciones del complemento son accesibles o no. Esto significa automáticamente que el complemento se ha cargado correctamente.
índice.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: La función jQuery jQuery() devuelve un nuevo objeto jQuery.init . El jQuery() también es reemplazable con el operador $() en la mayoría de los casos.

Paso 5: para iniciar la aplicación mediante Browsersync, ejecute el siguiente comando en el directorio del proyecto:
```
browser-sync start --server --files "*"
```
Esto inicia Browsersync en modo servidor y observa todos los archivos dentro del directorio en busca de cambios según lo especificado por el comodín * . La aplicación se iniciará en http://localhost:3000/ de forma predeterminada.
Producción:

Publicación traducida automáticamente

Artículo escrito por radheshkhanna y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

html

JavaScript

JavaScript

JavaScript

Deja una respuesta Cancelar la respuesta