javascript - 这两种onload方法有什么不同的做法&哪个更好

Question

当我偶然发现 loadCSS 时，我正在编写一个 onload 函数。 。它的 onloadcss 函数以不同的方式工作。

我的功能

var onLoadElement = function(element, callback) {

    if (element.addEventListener) {
        element.addEventListener("load", callback, 0);
    } else if (element.readyState) {
        element.onreadystatechange = callback;
    } else {
        element.onload = callback;
    }
}

loadcss的函数

function onloadCSS( ss, callback ) {
    ss.onload = function() {
        ss.onload = null;
        if( callback ) {
            callback.call( ss );
        }
    };
    // No support for onload:
    // Weak inference targets Android < 4.4
    if( "isApplicationInstalled" in navigator && "onloadcssdefined" in ss ) {
        ss.onloadcssdefined( callback );
    }
}

显然它添加了 android 支持，但我不清楚为什么不使用 ss.onload=callback 而不是使用以下代码片段。

 ss.onload = null;
 if( callback ) {
     callback.call( ss );
 }

我尝试调整我的函数以包含对 .onload 的不支持，但我想知道是否进一步修改它。

var onLoadElement = function(element, callback) {

    if (element.addEventListener) {
        element.addEventListener("load", callback, false);
    } else if (element.readyState) {
        element.onreadystatechange = callback;
    } else if(element.onload){
        element.onload = callback;
    } else if( "isApplicationInstalled" in navigator && "onloadcssdefined" in element ) {
        element.onloadcssdefined( callback );
    }
}

更新

感谢 Mike-C 的 answer ，我现在明白它的loadCSS的方法可能是为了节省内存。

所以理论上这可以减少内存使用并有更好的浏览器支持？

var onLoadElement = function(element, callback) {

    if(typeof callback !== 'function') return;

    if (element.addEventListener) {
        var cb = function(){
            callback.call( element );
            element.removeEventListener("load", cb)
        }
        element.addEventListener("load", cb, false);
    } else if (element.readyState) {
        element.onreadystatechange = function(){
            element.onreadystatechange = null;
            callback.call( element );
        }
    } else if(element.onload){
        element.onload = function(){
            element.onload = null;
            callback.call( element );
        }
    } else if( "isApplicationInstalled" in navigator && "onloadcssdefined" in element ) {
        element.onloadcssdefined( callback );
    }
}

好主意还是坏主意？

Answer 1

他们的方法可以处理旧版浏览器(所有 if(element.addEventListener) 内容)，并在加载完成后删除事件处理程序。这可以节省内存，因为它允许对回调和事件处理程序进行垃圾收集。

更新:

是的，您的新方法现在可以处理旧版浏览器，并且应该节省内存，因为您没有悬空事件处理程序。