开发中千万不要轻视空格

深藏阁楼爱情的钟 2022-11-01 00:58 219阅读 0赞

> 积跬步 至千里

### 简单例子 ###

开发中由于自己的格式代码方式有问题，可能一不小心加了空格 ，有些加空格可能不受影响，但有些时候加空格就会出现失效，导致错误。

<template>
    <div>
     <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
    
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    </div>
       
    </template>
    <script>
    export default {
      data() {
        return {
          dialogVisible: false
        };
      },
      methods: {
        handleClose(done) {
          this.$confirm('确认关闭？')
            .then(_ => {
              done();
            })
            .catch(_ => { });
        }
      }
    };
    </script>

以下是一个最简单的dialog 弹框，效果图如下 ：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70][]

### 出现BUG了 ###

很久没有动的代码，竟然被报了bug，原因是 底部的按钮没了效果类似如下：

![20210223160523598.PNG][]

此时的代码

说实话第一眼我没注意出来，就自己受用注释写了一遍，发现就好了，左看右看，右看左看，是 ***空格*** 惹的祸，slot 名称 footer 加了空格，所以名称匹配不上，就显示不出footer。

### 空格真的会惹来大麻烦 ###

问题排查，是同事替代吗格式化问题，导致加了很多的空格，包括类名 监听的方法名 slot ref 等，测试了一下 class 方法名 后面加空格没受影响，但是 slot ,都受到了影响

所以没必要的空格 不管是哪都不要加了 ，特别是类似Id ref slot 需要精确匹配的更要注意。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70]: /images/20221024/2a806f52a8eb4f4d8eef470b20cf7424.png
[20210223160523598.PNG]: /images/20221024/4b0961c3e9224f48a2028640dcbfac46.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 1]: /images/20221024/1807be52996947ac867d54755b00fb8e.png