这个评估是如何假的？

Question

当我单步执行此代码时，图中的值导致cssLoaded = 0;从我所看到的，长度大于0并且cssStylesheet.sheet具有属性所以应该是true，因此cssLoaded应该设置为1，但是它不会发生。我必须在这里遗漏一些东西..？

function _cssIsLoaded(cssStylesheet, stylePath) {
var cssLoaded = 0;
if (tryCount == 3){
    console.log('oops');
}
if (cssStylesheet.href == stylePath){
    try {
        if ( cssStylesheet.sheet && cssStylesheet.sheet.cssRules.length > 0 ){
            cssLoaded = 1;}
        else if ( cssStylesheet.styleSheet && cssStylesheet.styleSheet.cssText.length > 0 ){
            cssLoaded = 1;}
        else if ( cssStylesheet.innerHTML && cssStylesheet.innerHTML.length > 0 ){
            cssLoaded = 1;}
        }
        catch(ex){ }
}
    if(cssLoaded) {
        //alert('cssloadedcomplete');
        resetPops();
        $('#video-overlay').show();
        positionElements();
        saveBizzmail();
        console.log('try:' + tryCount)
    } else {
        tryCount+=1;
        console.log('try:' + tryCount);
        setTimeout(function() { this._cssIsLoaded(cssStylesheet); }, 2000);
    }
}

Answer 1

您的代码有三种可能的方式来获取cssLoaded == 0;

1. if (cssStylesheet.href == stylePath)评估为false。
2. 所有三个if/else语句都评估为false。
3. 其中一个if/else语句抛出异常，因此不会执行其他if/else语句。

在解决您的问题时，您应该验证前两个不是问题，因为这些可能只是比较中的逻辑错误，或者进入该功能的数据不是您所期望的。

对于第三个问题，您可以实施防御性编码，以确保通过将代码更改为此来检查所有三个if/else语句（您甚至不再需要try / catch，因为它允许您代码绕过一些测试）：

function _cssIsLoaded(cssStylesheet, stylePath) {
    var cssLoaded = 0;
    if (tryCount == 3){
        console.log('oops');
    }
    if (cssStylesheet && cssStylesheet.href == stylePath) {
        if ( cssStylesheet.sheet && cssStylesheet.sheet.cssRules && cssStylesheet.sheet.cssRules.length > 0 ) {
            cssLoaded = 1;
        }
        else if ( cssStylesheet.styleSheet && cssStylesheet.styleSheet.cssText && cssStylesheet.styleSheet.cssText.length > 0 ) {
            cssLoaded = 1;
        }
        else if ( cssStylesheet.innerHTML && cssStylesheet.innerHTML.length > 0 ) {
            cssLoaded = 1;
        }
    }
    if(cssLoaded) {
        //alert('cssloadedcomplete');
        resetPops();
        $('#video-overlay').show();
        positionElements();
        saveBizzmail();
        console.log('try:' + tryCount)
    } else {
        tryCount+=1;
        console.log('try:' + tryCount);
        setTimeout(function() { this._cssIsLoaded(cssStylesheet); }, 2000);
    }
}

Answer 2

您必须检查元素是否存在，否则可能会发生错误（cssStylesheet.sheet为undefined）。在以下情况下，表达式将评估为false：

• 该变量不存在（undefined，null，void 0）
• 等于0（零）
• 等于false
• 等于空字符串（""，''）
• 非数字值（0/0，NaN）

请注意，空对象{}的计算结果为true，因为它是一个对象。

另一个例子：

if(window.addEventListener) window.addEventListener("load", function(){}, true);
else if(window.attachEvent) window.attachEvent("onload", function(){});
else window.onload = function();

如果if条件不存在，代码将在较旧版本的IE中抛出错误，而IE版本没有这种名为window.addEventListener的方法。

Answer 3

前一项检查确保您避免类似NPE（通过检查cssStylesheet.sheet不为空）。