为什么前端语言会有兼容性问题？而后端语言却没有兼容性问题。附前端兼容性问题的通用解决办法。

最新推荐文章于 2024-03-30 11:45:32 发布

Vgbire

最新推荐文章于 2024-03-30 11:45:32 发布

阅读量1.3k

点赞数 1

文章标签： javascript css html chrome edge

本文链接：https://blog.csdn.net/RkHker/article/details/104616973

版权

为什么会有兼容性问题。

前端会出现兼容性问题，主要是因为前端代码的运行环境不同。
前端代码的运行环境是浏览器，前端写出来的代码，开发阶段在谷歌上进行测试能正常运行，在IE浏览器可能样式、功能就无法达到预期的效果；通过如果开发阶段在IE上进行测试运行，那很可能在其他浏览器上会存在大小不一的问题。
什么是兼容性？兼容性就是前端的代码所有浏览器都能正常解释执行并渲染出符合自己预期的页面

这里的兼容性指的是前端的兼容性，这里的前端代码指css、js这些代码，html不需要兼容，每个浏览器都是统一的，所以不需要兼容，大家处理方式都一样。

后端根本就不存在兼容性问题，因为他的运行环境都只有一种。java就是JVM，python就是python解释器，不需要python也能在JVM上运行（不需要也没必要）。
每一个浏览器的开发团队都不同，他们对前端都有自己的团队理解，都尽量将自己的浏览器做的有特性，被更多人使用。这就导致，虽然都是浏览器，但是不同的浏览器对CSS、JS的解释执行是不同的。比如我们要阻止事件冒泡，IE得这么写event.cancelBubble=true，放到谷歌，谷歌不认识，还可能会报错，因为谷歌用event.stopPropagation()阻止冒泡。同样谷歌的event.stopPropagation()放到IE，IE也不认识。为了兼容IE和谷歌，我们得像下面这么写。

// 只有IE浏览器认识，火狐、谷歌不认识
event.cancelBubble=true
// 谷歌、火狐都认识，IE不认识。
event.stopPropagation()

// 兼容IE、火狐、谷歌写法
// 如果存在event.stopPropagation，则执行event.stopPropagation()
if(event.stopPropagation){
 event.stopPropagation();            
}else{
	// 否则为执行IE浏览器组织冒泡行为的代码
    event.cancaleBubble==true;          
}

本来各大浏览器开发团队都遵循W3C的规范，就完全不存在兼容性问题。但是为了突出自己浏览器的个性，开发团队也会偏离规范进行开发，导致兼容性问题。这就是为什么早期jQuery那么火的原因之一，他底层的实现都加了一层兼容性处理，这样开发人员使用jQuery就不用考虑兼容性问题了，代码写起来就没有这么多if else分支处理。

再来说为什么开发人员都喜欢谷歌浏览器，摒弃IE浏览器。

随着时间推移，各大浏览器开发团队发现各自搞自己的一套不行，要遵循W3C标准进行开发。随着版本的更迭，高版本的浏览器写法逐渐趋同。早期的低版本的火狐和谷歌在获取事件对象时也要采取兼容性写法。高版本火狐和谷歌就不需要兼容了，可以直接使用事件对象event。欸，这样是不是随着版本更新，大家遵循W3C标准进行开发，是不是不用解决兼容性了？

// 低版本火狐获取事件对象，必须传入一个事件对象参数，并且参数名不能随便取
// 而谷歌可以直接使用事件对象event。一下是兼容写法
function eventHandle(e){
	var event = e || window.event;
}

别忘了，还有个IE浏览器。其实IE浏览器也进行着版本的迭代，也朝着W3C标准进行开发。为什么还要兼容IE呢？
主要还是火狐和谷歌，版本更新之后，他之前的版本会在很短的时间内被新版本给取代，大家都用着高版本的火狐和谷歌。但是IE呢？他是跟随系统的，跟系统适配的，你现在装一台window XP系统，它自带的IE浏览器还是IE7（XP系统IE版本在6-8之间）。这使的情况变为更为复杂，IE6-8的写法不同，IE9的写法不同，火狐和谷歌的写法还可能不同。还不能不管window的IE，因为window使用人群基数非常大，而且用户根本就会重装系统，升级windows来升级IE浏览器。
所以开发人员都喜欢用遵循W3C的谷歌，摒弃开发时兼容性处理非常麻烦的IE，简直恨不得IE从世界上消失。
但是大家也不要慌，从jQuery出现以来，兼容性问题就交给开发框架、开发库的那些人去解决了，我们拿过来使用就可以了。而且随着时间推移，window不再对XP、window7维护更新。低版本IE也最终会被淘汰，现在一些框架、库都已声明不再支持IE6-8。目前兼容性问题依然存在，随着大家都遵循W3C标准进行开发，兼容性问题会慢慢减少。
所以一个开发标准显得尤为的重要。

最后再来说一下，万一遇到兼容性要自己处理时怎么办？

其实看前面的代码就可以知道了，主要有两种。
1、if else判断，既然每个浏览器有不同的属性方法，我们就判断这个存不存在就好了。

// 存在证明是火狐、谷歌
if(event.stopPropagation){
 event.stopPropagation();            
}else{
	// 否则为执行IE浏览器组织冒泡行为的代码
    event.cancaleBubble==true;          
}