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] 推荐:

js获取各种宽高(ie6&ie6+,firefox,chrome兼容完整版)

- - CSDN博客Web前端推荐文章
ps.由于获取宽和高是一样的道理,只是把字面上height变成width,所以代码只示例高度. 首先是获取浏览器视窗有关的宽高(BOM有关的部分):. 获取电脑屏幕分辨率宽高:window.screen.height. 获取电脑工作区宽高:window.screen.availHeight(所谓的工作区就是除去任务栏剩下的区域,win7可以隐匿任务栏,,这个时候window.screen.availHeight == window.screen.height).

IE6 的 !important

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

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.

WebView JS 交互

- - ITeye博客
WebView加jquery做页面会怎么样呢. // 创建WebView对象. // 把programList添加到js的全局对象window中,. // 这样就可以使用window.programList来获取数据. * 定义js回调java函数. // 绑定键盘的向上,向下按钮事件触发相应的js事件.

让ie6 7 8 9支持html5 websocket

- - Web前端 - ITeye博客
  从github上的  web-socket-js (socket.io好像也是用这个做的他们的flash替代传输方式)改过来的. 不过值得注意的是里面的flash websocket代理文件,文件实在是很大,有174k. 是flex做的,这点很不喜欢,因为我没有flex builder也不想因为去改代码重新装一个,然后mx包下面的是flex的组件,com包下是adobe封装的socket和两个加密包 ..

JS游戏引擎

- 米随随 - HTML5研究小组
If you don’t have anything better to do and want to help fellow redditors interested in JS game dev out, feel free to fork the list and modify it as you like.

來源請求.js

- 红烧鲤鱼 - Blog: timdream
很早以前就想講了,但講了大概又會被戰. 相較於英文維基百科,中文維基百科在社會和歷史條目充滿了 systemic bias. 但是那些主觀論述又不是編輯者有意加進去的,而是某種編輯者存在的社會所給予的暗示(Inception?)與集體共識,而不是原本百科全書應該有的可驗證的事實. 因為是暗示又是共識,所以有自覺的百科編輯者反而是少數;中文維基只好長成現在這個樣子了.

Js删除节点

- - JavaScript - Web前端 - ITeye博客
 方式一:传this参数调用方法:.  方式二:js方法中通过选择器获取节点:. //此处删除的是a节点 }. 方式三:通过jQuery方式获取节点:(尚未测试,有待测试. 此处a标签传this到js中,js通过this(即a节点)取parent(即p节点). (1)p.remove();可直接删除整个p节点.

JS游戏引擎列表

- sku - 酷壳 - CoolShell.cn
这里有一个网址收集了关于JS游戏引擎开发库的一个列表,转过来. 关于使用JS和HTML5做的一些小游戏,可参见《HTML5 小游戏展示》. Name Latest Release License Type Notes The Render Engine 1.5.3 MIT 跨浏览器; 大规模 API; 开源. 2 gameQuery 0.5.1 CC BY-SA 2.5 和 jQuery 一起使用 gTile 0.0.1 Tile based.