menu search

杀死IE

Jun 30, 2017

花时间重写了一遍主题,用上了一些新的前端特性来节省时间。

打开IE,基本上全挂。Edge还好,只是部分挂掉而已。但是Debug起来超烦,自带的开发者工具太难用了。

转移到Hugo后我已经放弃jQuery了。用不到那么多功能,同时也能学习原生JS。而且,原生JS的执行效率比jQuery高许多,速度会更快。

另一方面,我一般会将jQuery放在页底加载。但如果在文章中插入需要jQuery的脚本,由于$还未被定义,导致报错,可能还会影响到其余的脚本运行。原生JS就没有这个问题。

当然,我也承认jQuery非常好用。至少我用了它自带的方法后基本上都不需要担心跨浏览器的兼容问题。例如我在原生JS中使用的forEach方法就不能兼容IE。如果使用jQuery的.each()就不用担心了。


今天第一次学到了fetch(),用起来比XMLHttpRequest方便了不少。IE不支持这个方法,我也不打算加入Polyfill:好不容易减少的代码我为什么还要再加大

目前在首页的评论计数和热门页面用上了这个方法。评论脚本里还在使用XMLHttpRequest,最近会迁移过去。

另外,文章底部的点赞按钮用到了includes()方法,目前也不支持IE,但支持Edge。

现在的想法是优先支持Chrome > Safari > Firefox > Edge,IE直接排除。(省时省力)

根据Google Analytic的数据,来我博客的人大部分都使用了Safari和Chrome。所以这个想法执行起来应该不会有很大的问题。

总感觉Safari会成为下一个IE:移动设备上的Safari只能通过系统更新来升级。旧设备总有一天会留在一个版本上。


另外,新的主题里面也用上了Flexbox。主流浏览器大部分都支持它,所以应该没什么问题。

用新的技术可以省开发者的时间,访客用起来也舒服,多好。


2017/06/30 21:05 更新:

已经把评论和点赞脚本的请求方式改为fetch(),并使用new FormData()来代替serialize()。前者的兼容性不错,后者似乎还没完全普及,但特别好用,配合fetch爽到不行:

var form = document.getElementById('form');
var formData = new FormData(form)

fetch('/submit', {
    method: 'post',
    body: formData
});

目前测试Chrome桌面版和Safari@iPad似乎没什么问题。如果你遇到评论错误,如果有空请通过联系方式告诉我。

Comments

edit x send markdown image
paragraph comment heart