老项目中，如何将jQuery从1.4迁移到3.6 ？

2021-05-06 3,013 阅读2分钟

将jQuery从1.4迁移到3.6

前言

jquery版本过低出现安全漏洞问题，在项目中使用的jQuery的版本是1.x ，现在需要整改。将 1.x 提升到 3.x 版本

出现问题

过滤用户输入数据的正则存在缺陷
可能造成跨站漏洞

升级版本后出现的问题

最新版的jquery不兼容旧版本，很多的api被废除了

解决方案

jquery团队推出的一个插件migrate
这个插件能够自动恢复那些在最新版本里之后被废弃的API，从而让已有的js代码无须改动就能和最新的jQuery库一起正常运行。
分两个版本，压缩和未压缩
- 未压缩 -> 开发版本，可以诊断兼容问题并在控制台上生成警告开
- 压缩 -> 生产版本，可以让控制台无法生成警告

jQuery Migrate 插件用法实例详解

jQuery Migrate是应用迁移辅助插件，是用于高级版本兼容低级版本辅助插件。

将低版本的 jQuery文件 <script type="text/javascript" src="jquery-1.6.1.js"></script>

替换成 3.6版本 <script type="text/javascript" src="jquery-3.6js"></script>
此时在Chrome浏览器开发者窗口中显示脚本错误：

在 <script type="text/javascript" src="jquery-3.6js"></script> 之后引用 Migrate插件需要下载 ( 复制 )

1->  jQuery 3.6版本`  <script type="text/javascript" src="jquery-3.6js"></script>
2->  Migrate插件   <script src="jquery-migrate-3.0.1.js"></script>

可能出现的新 bug 打开控制台出现 Uncaught TypeError: Cannot read property 'msie' of undefined1
```
Uncaught TypeError: Cannot read property 'msie' of undefined1
```
此时需要排除由于jQuery引入的顺序问题，或者重复引用的问题会导致出现$.conter is not fefined等等乱七八糟未定义的情况，

如：还是在控制台出现 Cannot read property ‘msie’ of undefined 则需要在自己的 js文件中加入如下代码：

//在代码中加上
<script type="text/javascript">
    jQuery.browser = {};
    (function () {
        jQuery.browser.msie = false;
        jQuery.browser.version = 0;
        if (navigator.userAgent.match(/MSIE ([0-9]+)\./)) {
            jQuery.browser.msie = true;
            jQuery.browser.version = RegExp.$1;
        }
    })();
</script>

结束

以上就是我的解决方案，当然还有一个方案 (推荐上面的方法)

隐藏版本号

这个方法其实挺苟的，就是让扫描器无法识别该js版本号，操作方法就是将jquery文件头部带版本号的注释删除，并将文件内的版本号删除。不想删的可以改成最新的版本号：3.5.1 😄

「点赞、收藏和评论」

❤️关注+点赞+收藏+评论+转发❤️，鼓励笔者创作更好的文章，谢谢🙏大家。