时间戳

首页 > 解决方案 > 即使加载了 jquery ui 库，$.ui 也未定义

javascript - 即使加载了 jquery ui 库，$.ui 也未定义

问题描述

我有一个带有 JavaScript 的页面，其中有一个自调用函数，该函数在页面加载时执行。此页面还包括 jquery 和 jquery ui 库（包括第一个 jquery，然后包括 jquery ui）。

以下 JavaScript 包含在页面末尾关闭 body 标记之前。

在下面的代码中，即使变量 x 和 y 正确地表明 jquery ui 存在，但在global.method1函数中变量 z 始终未定义，当它应该在加载 jquery ui 后定义时。

问题

为什么 $.ui 在自调用函数之外以及在同一个自调用函数中的文档就绪事件中定义，而不是在global.method1方法中定义？

我在以下链接中有一个演示，其中我没有看到这种行为，即在 method1 $.ui 中定义：示例可运行代码。所以，它真的很混乱。

var x = $.ui;//defined

(function (global) {

     var dialogOptions;

    $(
        function () {
            var y = $.ui;//defined

            //some more code here

        }
    );

    global.method1 = function () {
        var z = $.ui; //not defined

       //some more code here
    }

    //some more code here

})(window);

标签： javascriptjqueryjquery-ui

解决方案

我试图为您创建一个最小的示例；

  • 创建了一个片段，其中包含指向 jQuery 的链接。
  • 向控制台添加了一些日志
  • 添加了对全局方法的调用

一切似乎都已定义。您的问题必须在您的示例中未链接的代码中。

var x = $.ui; //defined
console.log(`first: ${x}`);
(function(global) {

  var dialogOptions;

  $(
    function() {
      var y = $.ui; //defined
      console.log(`second: ${y}`);
      //some more code here

    }
  );

  global.method1 = function() {
    var z = $.ui; //not defined
    console.log(`third: ${z}`);
    //some more code here
  }

  //some more code here
  global.method1(); //added this call

})(window);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

推荐阅读