在Web应用程序中将jQuery版本从1.8升级到3.7

最近，我的任务是将2013年最后一次维护的Web门户中的jQuery升级到最新版本的jQuery，即截至2024年3月的3.7版。快速检查发现代码中有超过2000+个地方引用了jQuery 1.8.3：

<script src="/js/jquery-1.8.3.js"></script>
<script src="/js/jquery-ui-1.9.1.js"></script>

在花了一整天的时间更新数百个页面的所有这些引用以指向最新的jQuery版本，并添加对jQuery Migrate插件的引用之后，该插件可以帮助处理已弃用的代码，我收到了一个带有无响应登录按钮的登录页面，并显示错误“无法在初始化之前在对话框中调用方法——尝试调用方法关闭”：

  

堆栈跟踪指向以下行，该行是jQuery UI对话框的“关闭”按钮的事件句柄：

.click(function() {
	$(this).dialog('close');
	location.reload();
})

我花了一段时间才意识到，在jQuery 3上运行时，上面代码中的$(this)不再引用活动的jQuery UI对话框。因此，$(this).dialog()未定义，并且错误消息要求您在调用close方法之前先初始化对话框。为了解决这个问题，我们添加.closest(‘.ui-dialog-content’)以找到最近的jQuery UI对话框：

.click(function() {
	$(this).closest('.ui-dialog-content').dialog('close');
	location.reload();
})

有了这个，登录页面可以工作，但后续页面上的一个按钮失败了，并显示类似的消息，“无法在初始化之前在对话框中调用方法——尝试调用方法启用”：

$('#remove-button').toolbarbutton(
'enable',
function()
{
...
});

下面toolbarbutton是代码中使用的自定义UI控件。经过一些调试后，我确定由于某些原因，在调用方法enable之前，$(‘#remove-button’)没有初始化为toolbarbutton()，尽管初始化代码存在于$(document).ready()方法中。我通过在调用enable之前再次初始化按钮来解决此问题：

$('#remove-button').toolbarbutton({
	state : 'enabled'
});
$('#remove-button').toolbarbutton(
'enable',
function()
{
...
});

然后是这个顽固的jQuery微调器控件，尽管有上述技巧，但它抱怨在调用该spinner-up方法时未初始化。我现在只是通过捕获异常来修复它。由于该方法在某些情况下只是禁用微调器（无论如何都是可选的），因此似乎对UI没有影响：

try {
   $(this.element).next().next('.spinner-up').setElementDisabled(false);
}
catch (err) { console.log("spinner error: " + err); }

我很少在JavaScript中尝试/捕获，但在这种情况下，捕获异常并忽略错误是我使事情正常工作的唯一方法。

在修复了数百个类似的事件后，我的页面似乎部分功能正常，除了复选框。然后，我必须在我的复选框再次起作用之前替换已弃用的.attr()或.prop()：

// element.attr('checked', false); // old version
element.prop('checked', false); // new version

然后，我还更新了对.live()（已被删除）的几个调用.on()（jQuery v3支持），以使事件绑定正常工作。接下来，我遇到了一个JavaScript错误$.browser.msie，该错误是确定用户是否在Microsoft Internet Explorer上的布尔值。由于不再支持IE，因此在最新的jQuery版本中删除了此属性。我通过声明一个自定义方法来修复这个问题，该方法对$.browser.msie返回false：

(function($) {
    // Define an empty object for $.browser
    $.browser = {}

    // Extend jQuery.browser with a dummy msie property
    $.extend($.browser, {
        msie: false
    });

    // Override the access to $.browser.msie
    Object.defineProperty($.browser, 'msie', {
        get: function() {
            return false;
        }
    });
})(jQuery);

这样，解析用户代理的代码现在可以正常工作。最后一个挑战也是最困难的挑战是jQuery对话框偶尔为空的OK/Cancel按钮，如以下示例屏幕截图所示：

这两个按钮应该是OK和Cancel，虽然是空的，但它们仍然按设计工作。根据此报告，如果页面加载多个冲突的jQuery版本，例如同时加载版本1.8和版本3的.js文件，则会出现此问题。经过大量的故障排除工作，结果发现，虽然我已将代码中的所有jQuery引用更新到最新版本，但门户的这一部分从远程站点加载了应用程序，该站点仍然包含过时的jQuery库。由于我无法更新远程jQuery库，因此我求助于使用CSS来添加❌“取消”按钮和“✓”按钮，以便按钮看起来不会为空：

button.okbutton::before {
   content: "\2713"
button.cancelbutton::before {
   content: "\274C"
}

对话框按钮上的图标现在可以正确显示，允许用户知道它们的用途：

为什么我不能通过CSS添加“OK”和“Cancel”，而不是Unicode字符？原因是问题并不总是发生，在其他地方，按钮显示正常。因此，我们必须使用图标来确保在正确显示按钮标签的其他地方，图标在文本旁边看起来很漂亮：

通过上述所有技巧，经过几周的艰苦开发工作，我能够令人满意地将Web门户移植到jQuery 3。我希望这些技巧能帮助其他人在他们自己的旅程中成功地将他们的项目移植到jQuery 3。

本文最初发表于 Upgrading jQuery version from 1.8 to 3.7 in a Web application | ToughDev

https://www.codeproject.com/Articles/5383203/Upgrading-jQuery-Version-from-1-8-to-3-7-in-a-Web