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

将jQuery从1.4迁移到3.6

前言

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

出现问题

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

升级版本后出现的问题

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

  

解决方案

• jquery团队推出的一个插件migrate

• 这个插件能够自动恢复那些在最新版本里之后被废弃的API，从而让已有的js代码无须改动就能和最新的jQuery库一起正常运行。

• 分两个版本，压缩和未压缩

  • 未压缩 -> 开发版本，可以诊断兼容问题并在控制台上生成警告 开
  • 压缩 -> 生产版本，可以让控制台无法生成 警告

jQuery Migrate 插件用法实例详解

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

1. ​ 将 低版本的 jQuery文件 <script type="text/javascript" src="https://juejin.cn/post/jquery-1.6.1.js"></script>

   替换成 3.6版本 <script type="text/javascript" src="https://juejin.cn/post/jquery-3.6js"></script>

2. 此时 在Chrome浏览器开发者窗口中显示脚本错误：

   

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

   1->  jQuery 3.6版本`  <script type="text/javascript" src="https://juejin.cn/post/jquery-3.6js"></script>
   2->  Migrate插件   <script src="https://juejin.cn/post/jquery-migrate-3.0.1.js"></script>
   
   复制代码

4. 可能出现的新 bug 打开控制台出现 Uncaught TypeError: Cannot read property 'msie' of undefined1

   Uncaught TypeError: Cannot read property 'msie' of undefined1
   复制代码

5. 此时需要排除 由于jQuery引入的顺序问题，或者重复引用的问题会导致出现$.conter is not fefined等等乱七八糟未定义的情况，

6. 如 ：还是在控制台出现 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 ?

「点赞、收藏和评论」

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