ieBetter.js-让IE6-IE8拥有IE9+,Chrome等浏览器特性

标签: js实例 chrome IE8 ie9 ieBetter.js | 发表时间:2013-12-18 09:49 | 作者:张 鑫旭
出处:http://www.zhangxinxu.com/wordpress

by zhangxinxu from http://www.zhangxinxu.com
本文地址: http://www.zhangxinxu.com/wordpress/?p=3835

一、发展与变化,疑问到实践

我之前就多次提过(例如介绍 HTML5 API classList的时候)这样的疑问:“现代浏览器的API相当丰富与强大,几乎可以很轻松应付各类交互,为何还要引入庞大的JS框架?”

事物总是在不断发展的,人的认知也要随着事物的发展不断变化。

在北京奥运会如火如荼举行的那会儿,jQuery等一些JS框架犹如农场的鸡毛满天飞,争论孰好孰坏优缺点的口水喷得鸡毛飞得更高。

大家现在静下心来想一想,为什么那个时候,JS框架这么的炙手可热,争相关注?

在那个点,Chrome浏览器还没有正式出生(2008-09-02),还没有现代浏览器的概念,高档点的浏览器也就是FireFox以及出众但没受众的Opera浏览器。在China, 还是IE6一统天下,IE8 3月底才发布。

从目前的眼光看,那时候的浏览器世界是不是弱爆了哈!兼容性差异是不是强爆了啊!那是时候,我厂甚至只关心IE浏览器的兼容,FireFox就像农场的鸡屎,走路时候都是避开的。

此时,解决了兼容性问题,很多优秀方便API的JS框架自然成了香饽饽。这种感觉就像是,没吃没穿的旧时代里看到自行车的那种感觉,酷啊!

但是,现在呢?

变了,诸位。世界已经大便,错了,是大变!已经不是你骑个大杠自行车就嚣张的时代了。
大杠自行车

我们来审时度势下现在的浏览器世界:
近3个月浏览器市场份额

以上为 百度浏览器研究院提供的最近3个月的浏览器份额。

可以看到,IE6-IE8浏览器加起来已经不足50%. IE9+, Chrome等其他现代浏览器已经占据了大半的江山。要知道,这大部分的浏览器有着丰富且兼容统一的API,可以很好的支持日常的一些或数据的或DOM的操作功能。

也就是说,浏览器世界现在分为了两个阵营: IE6-IE8保守派IE9+, Chrome等现代派

对于现代派浏览器而言,实际上类似jQuery这样的框架已经没有多少真正的价值可言!现代浏览器在选择器、事件处理、数据处理等方面都很高大上。除了API名称长了一点,我是看不到什么明显不足的!

要知道: 这个世界,绝大多数的网站都不复杂!

我敢打包票,很多人在自己的页面上引入jQuery, 可能就是仅仅用下其中的选择器API,方便选择一些元素,如获取 className包含 .ieYouCanntSelectMe的元素!

我说亲哪,占了大半江山的现代浏览器自己有超级强大的选择器API的,你为何为了老不死的IE6-IE8让我们也去加载庞大啰嗦的jQuery文件啊!

看到没,诸位,看到没,都21世纪了,还有“株连”这样匪夷所思的事情发生,难道你都没有一点感觉吗!!?

现代浏览器不断发展,却还跟10年前一页,要依赖庞大的框架,那浏览器规范、发展的的价值又在什么地方呢?

从实际工作讲,类似的情形还有很多。

作为技术分享者,必定要经常写demo. 由于选择器API以及事件兼容性,同时要兼顾页面不要太笨重,我是使用自己写的 zxx.js库。虽然小,但还是有问题,现代浏览器还是要额外加载JS文件,还是要请求,空间流量还是被消耗。显然,我需要更适合的东西。

我们都会参与一些周期较短的小项目。可能总共就几百行的JS代码。结果,超过97%的流量被用在了加载mini压缩后还80-90K的jQuery框架上。现代浏览器活脱脱躺着也中枪啊!

因此,我觉得 理想的情况应该是这样的
撇开类似网盘这种富交互的项目,大多数的页面,淘宝页面这种程度的,现代浏览器不加载任何的JS框架,jQuery, Kissy通通扔到别人碗里去,至于IE6-IE8浏览器,按照现代浏览器的API来工作就好了!也就是,你只要关心在现代浏览器下如何使用,至于IE6-IE8,额外引入一个补丁JS,万事OK,歌舞升平,天下大吉!

这个引入的补丁JS就是这里的 ieBetter.js. 我将这种引入称之为JS的“ 趋同策略”。

换种更通俗的描述就是:
以前——用苹果手机的和用塞班手机的为了兼容统一,全部使用重新包装的红旗手机;
现在——塞班手机单独自己外面套层壳子,伪装成苹果手机,而这个壳子就是 ieBetter.js.

不知不觉中,我之前的疑问现在已经成了真实的实践!

二、Github项目、使用以及API文档

Github项目
该项目已放在Github上,地址是: https://github.com/zhangxinxu/ieBetter

在我写这篇文章的时候, ieBetter.js还是v1.0.0测试版本,其中必定有诸多可以完善的地方。欢迎一同建设!

//zxx: 项目名称应该是 ieBetter.js结果没注意, .js没加,有谁知道如何修改项目名称吗?

目前, ieBetter.js压缩后大小 30K. 大小基本上是jQuery的 1/3.

如何使用
IE9+以及Chrome, FireFox等浏览器直接出门左转欣赏浪漫的雾霾景色。IE6-IE8浏览器引入 ieBetter.js. 如何无干扰引入?

第一个想到的是IE的条件注释,如下:

<!--[if lte IE 8]>
<script src="ieBetter.js"></script>
<![endif]-->

但是,IE10+浏览器已经跟条件注释say googbye了!因此,例如我的IE11浏览器的IE7, IE8兼容模式下,条件注释直接被吊死,没气了!

于是,为了更广泛的适用性,可以试试下面这个方法:

if (!document.addEventListener) {
    // IE6~IE8
    document.write('<script src="ieBetter.js"><\/script>');	
}

或者您有什么更好的只让IE6~IE8加载 ieBetter.js的方法?

API文档
目前, ieBetter.js跟现代浏览器套近乎的API有:
• 选择器相关API
*.querySelector
*.querySelectorAll
*.getElementsByClassName

• 事件相关API
*.addEventListener
*.removeEventListener
*.dispatchEvent
document.createEvent
init[|Mouse|UI]Event
input
window.onhashchange

• DOM特性相关API
window.getComputedStyle

• ES5 JSON扩展
JSON.parse
JSON.stringify

• ES5 Object扩展
Object.create
Object.keys

• Date对象
Date.now

• ES5 Function扩展
Function.bind

• ES5 String扩展
String.trim

• ES5 数组方法扩展
Array.isArray
Array.forEach
Array.map
Array.filter
Array.some
Array.every
Array.indexOf
Array.lastIndexOf
Array.reduce
Array.reduceRight

个中使用可参见我专门制作的API文档页面: ieBetter.js中文API文档页面

ieBetter.js API中文文档页面截图

欢迎反馈API文档页面的打开速度。分”慢”, “还行”, “快”三档。如果大家都反映速度不给力,我就要在自己的空间里也放一份。

由于IE9浏览器不支持 classList API, 我斟酌再三,没有对其支持。

三、ieBetter.js – 与JS的内心世界亲密接触

如果要给 ieBetter.js做广告的话,广告词我都已经想好了。就是“ieBetter.js – 与JS的内心世界亲密接触”。

我不清楚大家有没有这样的感觉,使用浏览器原生的API完成一些应用的时候,有一种直击心灵的感觉,有一种面对面对话的感觉,真实的,没有伪装的,与JS内心世界的亲密接触。

美好的感觉是会产生依赖的。虽然每天拿着望远镜偷窥女神的吃饭洗澡睡觉觉也是一种享受,但是,我想,直接跟女神一起吃饭洗澡睡觉觉应该更有一番滋味。难道你不这么认为吗?

虽然你可能没有多少与女神相处的经验,可能开始的时候你会碰壁,会经常犯错。但是,久了,纠正了,学习了,习惯了,你就强大了。因为,你连女神都能应付自如了,其他那些庸脂俗粉岂不根本就不在话下。

可见, ieBetter.js也是把妹技能提升了一条快速路径啊,众未来的“(const)富帅”们,还不赶快使用 ieBetter.js,来和女神进行心灵交织,肉体碰撞的接触吧!还等什么呢!

压轴镇楼图

其他点什么
我个人觉得这个项目的价值和意义是蛮大的,所以非常欢迎大家fork,一同维护与建设。如果 star足够多,项目趋于稳定,我会试着贡献到 staticfile.org上,直接CDN访问。

我也知道,肯定也有其他同行和我有类似的想法(但我没有找到),欢迎共享你的一些心得。

欢迎交流。

原创文章,转载请注明来自 张鑫旭-鑫空间-鑫生活[ http://www.zhangxinxu.com]
本文地址: http://www.zhangxinxu.com/wordpress/?p=3835

(本篇完)

有话要说?点击 这里发表评论。

相关 [iebetter.js ie6 ie8] 推荐:

CSS HACK:IE6、IE7、IE8、Firefox兼容性问题解决方案

- - 博客园_首页
1.区别IE和非IE浏览器. background:blue; /*非IE 背景藍色*/. background:red \9; /*IE6、IE7、IE8背景紅色*/. 2.区别IE6,IE7,IE8,FF. 【区别符号】:「\9」、「*」、「_」. background:blue; /*Firefox 背景变蓝色*/.

全面兼容IE6、IE7、IE8、Firefox的CSS HACK方法

- - JavaScript - Web前端 - ITeye博客
本文和大家重点讨论一下DIV+CSS=2010全面兼容IE6/IE7/IE8/Firefox的CSS HACK,这里主要有两种方法解决IE兼容性问题,请看下文详细介绍. DIV+CSS=2010全面兼容IE6/IE7/IE8/Firefox的CSSHACK. 浏览器市场的混乱,给设计师造成很大的麻烦,设计的页面兼容完这个浏览器还得兼容那个浏览器,本来IE6跟Firefox之间的兼容是很容易解决的.

DIV+CSS解决IE6,IE7,IE8,FF兼容问题

- - Web前端 - ITeye博客
1.ie8下兼容问题,这个最好处理,转化成ie7兼容就可以. 在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了. 2.flaot浮动造成IE6下面双倍边距问题,这个最常见,也最好处理,!important解决,比如. margin-left:10px !important;/*IE7,IE8,FF下是10PX*/;.

使用windows7的virtual PC打造原装IE6、IE7、IE8测试环境

- LiuWeifeng - 断桥残雪部落格
公司使用的是windows7操作系统,自己之前一直使用IETester来测试页面在IE6~IE8下的兼容性,可是在测试js的时候还是会出现实际使用的还是windows7的IE8内核问题. 所以自己想通过virtual PC来搭建个虚拟的测试环境,为什么选择virtual PC呢. 1、windows 7系统自带,并且xp mode就可以直接安装上xp系统.

DIV CSS 网页兼容全搞定 (IE6 IE7 IE8 IE9 火狐 谷歌)

- - CSDN博客研发管理推荐文章
本文收集整理了IE7,6与Fireofx的CSS兼容性处理技巧,供大家参考.   请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C标准,一定要加DOCTYPE声明.    1.div的垂直居中问题.   vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.

IE6 的 !important

- 蓝精灵 - 幸福收藏夹
从开始要学解决 CSS 兼容问题时候起,就经常听 important 有各种坏处,不要使用,并且 IE6 下不能生效. 所以一下没有用 !important. 直到昨天给新人讲 CSS 的时候,这个问题才被提起. 早上旁边的小姑娘又问起,我说写个测试. 由此我们可以得出的结论是:IE6 下是可以使用 !important 的,但相同选择器内如果 !important 不是写在最后,则 !important 失效.

ieBetter.js-让IE6-IE8拥有IE9+,Chrome等浏览器特性

- - 张鑫旭-鑫空间-鑫生活
本文地址: http://www.zhangxinxu.com/wordpress/?p=3835. 一、发展与变化,疑问到实践. 我之前就多次提过(例如介绍 HTML5 API classList的时候)这样的疑问:“现代浏览器的API相当丰富与强大,几乎可以很轻松应付各类交互,为何还要引入庞大的JS框架.

IE6: 不死心还在

- Titian - 帕兰映像
在刚发布的WordPress 3.2功能一览里面,我认为wordpress 3.2真正的革新是更高的服务器环境要求和不再支持IE6. 其中不支持IE6这一条,勾起了我常久以来想长篇大论一下IE6的冲动. 正好最近循环播放信乐团的一首歌“不死心还在”,该歌名很适合说明当下IE6在中国的状况. 我每次去帮不同的朋友解决电脑问题的时候,他们都在用着IE6.

漫画:IE6这一辈子

- FlyFire - UXD2
原作者网站: http://bradcolbow.com/. 原作者内容授权方式: Creative Commons 2.5. 转载请务必注明原作者署名: Brad Colbow.

media query ie8- 兼容实现总结

- - ria之家--RIA三部曲:jquery、ext、flex
由于业务形态原因,随着用户分辨率的提高,1024×768已不再是主流,宽屏用户比例越来越大,因此我们的响应式考虑如何充分利用PC用户设备上更多空间而设计. 下图为淘宝用户的屏幕分辨率和浏览器比例,鉴于ie8-浏览器目前占比约70%,media query的ie8-兼容迫于现实还是要做,泪……. media query简介.