怎么写出好看的代码？

是的,我觉得代码就应该写得跟诗一样优雅,代码不是给自己看的,是给别人看的.虽然我的日常是搬砖,但是我也希望能把砖码得整整齐齐的.

打造自己的代码风格

什么叫自己的代码风格?

在我刚刚开始学习前端的时候,我写出的代码可能是这样的

js 复制代码

  // 不注意等号前后缩进,单双引号随意使用
  const dog= {
    name: 'black',
    age: "9",
    gender: 0,
  };
  // 随意的函数命名
  const fn= ()=>{
    // if else 语句的大括号前后不加空格
    if (dog.age > 8){
      console.log("old");} //这里的大括号也不会换行
    dog.name="white"; // 等号前后不加空格

    function say() {
      // 使用很多的if else语句
      if (dog.name === "white") {
        console.log("white");
      } else if (dog.name === "black") {
        console.log("black");
      } else {
        console.log("other");
      }
    }
  };
  // 整个代码看上去会比较杂乱

通过长时间的搬砖,现在我的代码是这样的

js 复制代码

// 注意等号前后缩进，属性值全部使用双引号
  const dog = {
    name: "black",
    age: "9",
    gender: 0,
  };
  // 使用小驼峰和英文翻译命名变量名称
  const handlerDog = () => {
    // 注意if else 的空格及换行
    if (dog.age > 8) {
      console.log("old");
    }
    dog.name = "white";

    function say() {
      // 对if else进行提取优化
      const mapList = {
        white: () => {
          console.log("white");
        },
        black: () => {
          console.log("black");
        },
        other: () => {
          console.log("other");
        },
      };
      // 会考虑代码的扩展性及健壮性，以及常见的边界判断
      mapList[dog.name]() ?? mapList["other"](); 
    }
  };

掌握编程规范

单双引号的使用、等号前后缩进、大括号前后缩进都需要注意,哪怕是没有代码格式化工具,也能有自己的一套代码规范
项目、目录、文件等全部采用小写方式，以中划线("-")分隔，有复数时加"s"，缩写不用复数。

正例: src/shop-order-details/index.vue

反例: src/shopOrderDetails/index.vue
如果变量命名的好,我可能连注释都不需要,比如这样:

添加注释能增进同事间友谊
- 注释应该是能解释这段代码的作用,能让同事看得懂
- 但是也不用每一行都注释,这就有点冗余了

不要一大串函数直接撸下来,找个合适的地方换行

再往上走就要考虑代码的设计了

代码设计

好的代码应该有这么几种特性:可读性、扩展性、健壮性等

对代码进行优化时需要降低代码的耦合度和复杂度,对耦合的代码封装,达到复用的目的,在封装的时候需要考虑一些异常场景,提高代码的健壮性,同时最好不要将函数的功能直接写死.大部分场景只有成功或失败两种状态,但是搞不好还有个不成功也不失败,所以函数的扩展性也是需要保证的,简单来讲就是不能写死.

例如现在给你的需求是这个订单的状态只有成功或失败,所以你直接使用了一个三元表达式来进行处理,但是后面可能产品跟你说你搞错了,这个订单有成功失败还有退款中三种状态,那就完了,你懵逼了,要对代码进行重构了,我就这样干过.

遵循一些代码设计思路、掌握一些代码优化技巧,可以帮助我们更好的改进自己的代码

健壮性

为代码添加一系列的边界判断,异常处理等合理使用JavaScript运算符

?. 是一个条件式属性访问操作符，当你访问值为undefined变量的某个属性值时，如果使用.操作符会直接报错，如果使用条件式属性访问操作符来访问会返回undefined
- 例如: e?.stopPropagation()
??逻辑空赋值运算符（x ?? y）仅在 x 是空值（null 或 undefined）时对其赋值。
- 例如: opt?.searchInfo ?? {}
|| 逻辑或( x || y ) 仅在 x 是空值（null 或 undefined）时,返回右边的值(y)
- 例如: v-bind="data || {}"
使用try catch 对异常进行捕获处理

扩展性

使用策略模式对代码进行优化

js 复制代码

// 之前的代码
 if (dog.name === "white") {
    console.log("white");
  } else if (dog.name === "black") {
    console.log("black");
  } else {
    console.log("other");
  }
// 现在的代码
 const mapList = {
    white: () => {
      console.log("white");
    },
    black: () => {
      console.log("black");
    },
    other: () => {
      console.log("other");
    },
  };
  // 会考虑代码的扩展性及健壮性，以及常见的边界判断
  mapList[dog.name]() ?? mapList["other"]();

可读性

对函数进行封装,同时尽量减少代码量,降低代码的耦合度,添加注释,并尽量取一个好理解的函数名

参考

JavaScript设计模式与开发实践
代码整洁之道
重构2