vue中多做兜底工作,多判断,减免复杂的语法报错带来的隐患。

对比下以下两个代码片段,说明哪个更好?

片段一:

    // 获取uuid
    get_uuid (state) {
    
    
      // 解密uuid
      return (state.uuid && secret.decrypt(state.uuid)) || (sessionStorage.getItem('uuid') && secret.decrypt(sessionStorage.getItem('uuid'))) || null
    }

片段二:

    // 获取uuid
    get_uuid (state) {
    
    
      // 解密uuid
      return secret.decrypt(state.uuid) || secret.decrypt(sessionStorage.getItem('uuid')) || null
    }

我们发现片段一比片段二多做了一点工作:在secret.decrypt()之前对传入的参数做校验,判断该参数是否存在。这样能保证在参数为空值时get_uuid能正确返回最后的那个nul,否则【片段二】state.uuid为空值时secret.decrypt无法处理该空值参数,从而报语法错误。

在vue中报语法语法错误,不会给你指出第几行!这样就存在很大的隐患,一旦项目复杂点,报的语法错误就很难找到它的位置。

这是项目过程中的经验教训。记录一下。当时做的是游客浏览作品页,游客是没有uuid,登录才有uuid,我就用了上文的片段二,结果我整个页面都不显示了。如下图
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/printf____/article/details/121745584