dearlordchen commented 8 years ago

javascript的健壮性

今天常规访问我司首页的时候，突然发现商品价格拉不出来了，打开控制台一看，错误提示如下： check了一下发现是取类目数据的接口没有走https请求，导致SearchNavData没有取到，整个页面的js挂掉，出问题的代码如下：

if(SearchNavData && SearchNavData.length > 0){
            var SearchNavDataLength = SearchNavData.length;
            ...

修复了这个bug之后，越想越觉得这个问题不能小瞧，而且这个问题还有一定的普遍性（近期已经发现了2次，而且都导致重要功能出问题），所以写一篇小文章来探讨一下写js代码时候应该考虑的健壮性。

首先要说的是通过数据接口往页面注入变量已经是比较通用的做法（比如上文中提到的类目数据就是后台直接推送更新为js文件），但是这个做法有一个很明显的副作用就是接口有异常的时候会直接导致变量undefined，如果我们像普通程序员那样写上面那样的代码，页面就挂了，那么文艺的程序员会怎么写呢？

方法1：

先判断，如果undefined就return掉

if (typeof(SearchNavData) == "undefined") {
    return false
}else{
    ...
}

方法2：

try catch

      try{
            if(SearchNavData){
                ...
            }
        }

        catch (e)
        {
            alert(e.description);
        }

方法3：

不要直接用注入的变量，在程序内定义一个新的变量

//这里的{}也可以改成一套比较固定的类目数据，会更友好
var SearchNavData = window.SearchNavData || {};
...

以上三种方法，大家可以根据需要选用，强烈建议和要求大家不要再裸用不在控制范围内的变量，我个人比较推荐方法3。：）

ok，that's all。希望对大家有帮助，这个问题其实还可以延伸：比如对象key值不一定存在，数据长度可变、值类型不一定可控的情况下，怎么写出健壮的js代码呢，后面有需要我们再探讨。

visamz commented 8 years ago

谢 lord 大神提醒~

qlboob commented 8 years ago

lord好帅一定要帅到天荒地老

dearlordchen / blog