jQuery升级踩坑大全

445 查看

jQuery升级踩坑大全

背景

jQuery想必各个web工程师都再熟悉不过了，不过现如今很多网站还采用了很古老的jQuery版本。其实如果早期版本使用不当，可能会有DOMXSS漏洞，非常建议升级到jQuery 1.9.x或以上版本。前段时间我就主导了这件事情，把公司里我们组负责的项目jQuery版本从1.4.2升级到了jQuery 1.11.3。jQuery官方也为类似升级工作提供了jQuery Migrate插件。

言归正传。

坑从何处来

jQuery 1.11.3是1.x时代的最后一个版本（作者更新：2016年1月8日，jQuery 1.12.0上线，jQuery 1.11.3不再是1.x时代最后一个版本了），由于我的部门项目已经有一定年头了，当时还是采用的jQuery 1.4.2，这次升级步子迈得算是比较大。早期时候jQuery的很多写法，在新版本中已经被废弃，亦或者有些不规范的写法，当时版本还能支持，但是现在已经不支持。更糟糕的情况是，新版本还支持，但是功能已经和以前不一样了……这种情况连个错都不会报，需要深入到代码逻辑里面去看。

jQuery官方推荐了jQuery Migrate 库来解决jQuery升级问题。不过一直采用这个库终究不是长久之计，开发中建议使用jQuery Migrate的开发版，可以在浏览器控制台上打印出来不兼容的地方详细信息。需要注意的是开发中一定要使用jQuery Migrate的开发版，因为压缩版的是不会在控制台给出警告的……把jQuery Migrate的库紧跟在jQuery库后面引用即可：

1 2	<script src="<path>/<to>/jquery-1.11.3.js"></script> <script src="<path>/<to>/jquery-migrate-1.2.1.js"></script>

等升级完毕，确定没问题了之后，再将jQuery Migrate库去掉就可以了。根据个人经验，下面我把坑分成 常见坑，少见坑两类来论述。

常见坑

1. 使用了被废弃的`jQuery.fn.live`方法

jQuery Migrate库对此错误也在控制台有相应的警告：

1	JQMIGRATE: jQuery.fn.live() is deprecated

live方法原本的作用是设置事件代理，该方法在jQuery 1.7之后就不推荐使用了，取代之的是jQuery.fn.on函数。他们的接口分别是：

1 2	$(selector).live('click', function(){/* some code /}); $(selector).on('click', [selector,] function(){/ some code */});

乍一看，中括号里面的参数可以省略掉，俩函数不是一模一样么？于是天真地把函数名live直接替换成on，大部分时候，这么做好像没有引起任何异常。但是如果在你调用on函数的时候，前面的$(selector)在当前的网页上根本不匹配任何元素（该元素可能是后面的代码才加到DOM里的），那是不会绑定成功的。事实上，live函数将$(selector)代理到了document元素上，这个元素是肯定存在的，所以不会出现类似情况。正确的替换方法应该是：

1 2	$(selector).live('click', function(){/* some code /}); 替换为 $(document).on('click', selector, function(){/ some code */});

2. 使用了被废弃的`jQuery.fn.die`方法

jQuery Migrate对此错误的警告是：

1	JQMIGRATE: jQuery.fn.die() is deprecated

这个方法和前面的live刚好反过来，取消事件处理函数的绑定。新版本中应该使用off函数代替之，替换方式类似。

3. 使用了被废弃的`jQuery.fn.toggle`函数

jQuery Migrate对此错误的警告是：

1	JQMIGRATE: jQuery.fn.toggle(handler, handler...) is deprecated

早期jQuery中名字叫toggle的函数有两个，一个是用于控制元素的显示和隐藏，这个用途的函数目前jQuery中依旧存在；另一个就是上面提到的被废弃的toggle函数，它用于绑定至少两个函数到同一个元素，点击该元素的时候两个函数交替着执行。这两个同名函数功能相差甚远，为了不引起误导，在jQuery 1.8中就不再建议使用了。替换的方式是把两个函数合并成一个函数的if-else两个区段，然后自己设置一个boolean变量，控制每次点击时应该执行哪个区段即可。

4. 使用了被废弃的`jQuery.browser`属性

jQuery Migrate对此错误的警告是

1	JQMIGRATE: jQuery.browser is deprecated

在前端开发中我们经常要根据不同的浏览器版本做出不同的处理，jQuery.browser本来是通过浏览器的userAgent字段来提取浏览器相关信息的。新版本中已经将其废弃，而是建议使用特征检测的方法去判断，并且给了一个Modernizr库作为推荐。不过，改成这个库可能改动成本有点大，如果你还是想沿用jQuery.browser的思路的话，可以自己去实现一下它。例如，判断是不是IE浏览器，可以用

1	/msie/.test(navigator.userAgent.toLowerCase());

即自己手动获取userAgent字段，并且做一个正则表达式匹配。其他浏览器思路类似，都是对navigator.userAgent做一个正则匹配。

5. `$(html)`格式书写错误

在jQuery Migrate中，出现以下三种警告中的任何一种，都是属于这个错误：

1. JQMIGRATE: $(html) HTML strings must start with '<' character

2. JQMIGRATE: $(html) HTML text after last tag ison-o">: $(html) HTML text after last tag isery版本从1.4.2升级到了jQuery 1.11.3。jQuery官方也为类似升级工作提供了jQuery Migrate插件。

言归正传。

坑从何处来

1 2	<script src="<path>/<to>/jquery-1.11.3.js"></script> <script src="<path>/<to>/jquery-migrate-1.2.1.js"></script>

等升级完毕，确定没问题了之后，再将jQuery Migrate库去掉就可以了。根据个人经验，下面我把坑分成 常见坑，少见坑两类来论述。

常见坑

1. 使用了被废弃的`jQuery.fn.live`方法

jQuery Migrate库对此错误也在控制台有相应的警告：

1	JQMIGRATE: jQuery.fn.live() is deprecated

live方法原本的作用是设置事件代理，该方法在jQuery 1.7之后就不推荐使用了，取代之的是jQuery.fn.on函数。他们的接口分别是：

1 2	$(selector).live('click', function(){/* some code /}); $(selector).on('click', [selector,] function(){/ some code */});

1 2	$(selector).live('click', function(){/* some code /}); 替换为 $(document).on('click', selector, function(){/ some code */});

2. 使用了被废弃的`jQuery.fn.die`方法

jQuery Migrate对此错误的警告是：

1	JQMIGRATE: jQuery.fn.die() is deprecated

这个方法和前面的live刚好反过来，取消事件处理函数的绑定。新版本中应该使用off函数代替之，替换方式类似。

3. 使用了被废弃的`jQuery.fn.toggle`函数

jQuery Migrate对此错误的警告是：

1	JQMIGRATE: jQuery.fn.toggle(handler, handler...) is deprecated

4. 使用了被废弃的`jQuery.browser`属性

jQuery Migrate对此错误的警告是

1	JQMIGRATE: jQuery.browser is deprecated

1	/msie/.test(navigator.userAgent.toLowerCase());

即自己手动获取userAgent字段，并且做一个正则表达式匹配。其他浏览器思路类似，都是对navigator.userAgent做一个正则匹配。

5. `$(html)`格式书写错误

在jQuery Migrate中，出现以下三种警告中的任何一种，都是属于这个错误：

1. JQMIGRATE: $(html) HTML strings must start with '<' character

2. JQMIGRATE