码迷,mamicode.com
首页 > Web开发 > 详细

判断浏览器是否支持CSS3 已经初步探索JS 惰性加载

时间:2015-07-27 19:14:32      阅读:125      评论:0      收藏:0      [点我收藏+]

标签:

分享一个判断浏览器是否支持的函数,然后有牵扯到了一个懒性加载的概念。

var iscss3=(function(){
            var _style=document.createElement("div").style;
            return 'transition' in _style||'mozTransition' in _style||'webkitTransition' in _style;
        })()


什么是惰性加载呢,像我们JS和CSS一样 很多浏览器属性和方法都不兼容,需要用到大量的分支来兼容。

比如说常用事件绑定:

function addEvent (type, element, fun) {
    if (element.addEventListener) {
        element.addEventListener(type, fun, false);
    }
    else if(element.attachEvent){
        element.attachEvent('on' + type, fun);
    }
    else{
        element['on' + type] = fun;
    }
}

每次我们运行它都要进行分支判断,这样针对性能来说就不高了。我们如果换成这样,以匿名函数的方式结合函数表达式。就懒惰了。

var addEvent = (function () {
    if (document.addEventListener) {
        return function (type, element, fun) {
            element.addEventListener(type, fun, false);
        }
    }
    else if (document.attachEvent) {
        return function (type, element, fun) {
            element.attachEvent('on' + type, fun);
        }
    }
    else {
        return function (type, element, fun) {
            element['on' + type] = fun;
        }
    }
})();

这样的话,只要执行一次,就会把正确的函数赋值给变量。

版权声明:本文为博主原创文章,未经博主允许不得转载。

判断浏览器是否支持CSS3 已经初步探索JS 惰性加载

标签:

原文地址:http://blog.csdn.net/u011551941/article/details/47086433

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!