关于提升前端代码健壮性

最近在工作当中，遇到一些有关代码健壮性的问题。比如没有对异常数据进行判断处理等。于是诱发了思考，是否在实际工作当中，很多时候都忽略了这些小而能解决的问题呢？于是想要做一下整理，以便自查代码。

       所谓前端的代码健壮性，是保证代码在正确和规范的环境中运行时，能够正确的应对一些特殊的情景。以便可以应对一些异常情景或者是误操作。

简单整理一下，大致要注意以下几个方面：

处理数据异常（例如进行非空判断）：

        在从后端获取数据时，一般情况是正常的，但是后端有时候处理不得当，会产生一些空数据或者null。

       如上图，这个时候我们在取用data时进行循环或者取值时就会发生报错。并且有可能影响到后续的运算或者回显。

       此时就需要对数据提前进行异常的预处理。例如进行非空判断，或是trycatch将异常抛出到控制台或是忽略。

if (res.data && res.data.length > 0) {   // 非空/null
   ...  // 处理数据
}

// try catch

try {
  ... // 处理数据
} catch {
  ... // 应对异常
}

处理页面展示兼容：

       便于我们的页面能够兼容到大部分主流的分辨率和跨端的展示。可以考虑在实际场景下对px的使用进行替换。或者是监听页面的高度/宽度等，对当前浏览器/端，进行一个动态的适配。

 // 例如chat-gpt针对vue2给出的一些适配建议

<template>
  <div>
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default {
  mounted() {
    window.addEventListener('resize', this.handleResize);
    this.handleResize(); // 初始加载时执行一次适配
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      // 获取浏览器窗口的宽度和高度
      const windowWidth = window.innerWidth;
      const windowHeight = window.innerHeight;
      
      // 执行适配逻辑
      // 这里可以根据实际需求进行相应的动态适配操作
      // 例如修改样式、更新组件数据等
      
      // 示例：将窗口宽度和高度保存到组件数据中
      this.windowWidth = windowWidth
      this.windowHeight = windowHeight
    }
  }
}
</script>

除此之外，对于数据的校验（如非负，去空格，浮点数等），对用户怪异行为的预处理等，都是需要考虑到的问题。

要在需求准时上线的同时，兼顾到种种问题，也是前端人需要做出的考虑。