如何检查是否加载了 jQuery 插件？

我们可以通过多种方式使用 jQuery 简单地检查 jQuery 插件是否成功加载。我们还可以检查插件中的特定函数是否可访问。本教程将演示如何检查 jQuery 插件是否已加载。

• 第 1 步：使用 npm 安装Browsersync 。我们将使用 Browsersync 启动服务器并提供 URL 以查看 HTML 站点并使用 CDN（内容交付网络）加载jQuery 。我们将在全球安装 Browsersync。

  npm install -g browser-sync

• 第 2 步：我们将在本教程中使用jQuery-UI插件。我们将使用 jQuery 测试此插件是否成功加载。下载此插件的最新版本并将其解压缩到您的项目根文件夹。
• 第 3 步：创建一个index.html文件
  示例 1： jQuery 插件是 jQuery 作用域上的命名空间。 jquery-ui插件没有扩展fn命名空间，因此我们可以使用上面的代码检查插件是否加载成功。 ui表示插件的名称，可以替换为要检查的插件名称。我们在head标签中加载了 jQuery，因为它需要可用才能在应用程序中使用。建议的做法是在body标记的末尾加载所有 JavaScript 文件，以提高性能并更快地呈现页面。因此，在检查插件是否成功加载之前，我们使用了$(document).ready()函数。
  typeof运算符以字符串的形式返回其操作数的数据类型。在这种情况下，操作数是jQuery $运算符本身。

  html

      
      JQuery Plugin
      
      
  
  
      Hello GeeksForGeeks
      
          $(document).ready(function () {
              if (typeof $.ui !== 'undefined') {
                  console.log('jquery-ui is loaded successfully')
              }         
          });
      
      

  示例 2：由于每个插件都保证有一些函数定义或值等于true ，我们可以使用代码中所示的较短版本。

  Javascript

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

  注意：对于所有扩展fn命名空间的 jQuery 插件，正确的检查方法是：

  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')
      }
  });

  $.fn.pluginname扩展了 jQuery 对象并且是一个可在所有jQuery.init对象上调用的函数，而$.pluginname扩展了$对象本身。

• 第 4 步：我们现在将检查插件功能是否可访问。这自动表示插件本身已成功加载。
  索引.html

  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();
     });

  注意： jQuery函数jQuery()返回一个新的jQuery.init对象。在大多数情况下， jQuery()也可以用$()运算符替换。

• 步骤 5：要使用 Browsersync 启动应用程序，请在项目目录中运行以下命令：

  browser-sync start --server --files "*"

  这将在服务器模式下启动 Browsersync 并监视目录中的所有文件以查看*通配符指定的更改。默认情况下，应用程序将在http://localhost:3000/ 上启动。
  输出：