前端vue+js 优化代码分支

116 阅读 0 评论 77 点赞

我是靠谱客的博主心灵美方盒，这篇文章主要介绍前端vue+js 优化代码分支，现在分享给大家，希望可以做个参考。

优化代码，让代码更优雅

写项目的时候你会发现一些函数中的分支会特别多，该如何优化呢？如何让代码更加优雅？

初级难度

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function test(val) {
  if (val == "小明") {
      console.log("小明去吃饭");
   } else if (val == "小王") {
      console.log("小王去玩");
   } else if (val == "小白") {
      console.log("小白去写作业");
   } else if (val == "小张") {
      console.log("小张去做饭");
   } else {
      console.log("没有这个人");
   }
}
test("小王")

例如上面的例子，这样写test函数，既没有高级感，代码也很臃肿，假如其中有一百种情况呢？甚至更多呢？

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function test(val) {
    let map = {
      小明: "小明去吃饭",
      小王: "小王去玩",
      小白: "小白去写作业",
      小张: "小张去做饭",
    };
    if (map[val]) {
      console.log(map[val]);
    } else {
      console.log("没有这个人");
    }
}
test("小王")

将代码如此处理之后，便可以更好的管理，也更加的高级。假如情况更加复杂一些呢？

中级难度

假如每个人对应的都是一段复杂的代码，一个函数。又该如何处理？

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function test(val) {
  let map = {
     小明: () => {
       console.log("小明去吃饭");
     },
     小王: () => {
       alert("小王去玩");
     },
     小白: () => {
   	   console.warn("小白去写作业");
     },
     小张: () => {
       console.error("小张去做饭");
     },
   };
   if (map[val]) {
      map[val]();
   } else {
      console.log("没有这个人");
   }
}
test("小王")

可以如上，将map的value值封装为一个函数即可

高级难度

假如其中要求一些判断条件如何写呢？比如，名字中含王的运行一个函数，姓张的人运行一个函数，以帅结尾的运行一个函数

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function test(val) {
    // includes()方法用来判断当前字符串是否包含另外一个给定的子字符，并根据判断结果返回 true 或 false。
    // startsWith()方法用来判断当前字符串是否以另外一个给定的子字符串开头，并根据判断结果返回 true 或 false。
    // endsWith()方法用来判断当前字符串是否以另外一个给定的子字符串结尾，并根据判断结果返回 true 或 false。
    if (val.includes("王")) {
       () => {
            console.log(val + "出去玩");
        };
    } else if (val.startsWith("张")) {
    	() => {
       		console.error(val + "写作业");
        };
    } else if (val.endsWith("帅")) {
    	() => {
       		console.warn(val + "做饭");
        };
    } else {
		console.log("没有这个人")
	}
}
test("小王")

上面的写法和我们之前的写法一样，不具有高复用性，我们修改一下，让他更具有高级感和复用性

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
function test(val) {
    // find() 方法为数组中的每个元素都调用一次函数执行：
    // 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
    // 如果没有符合条件的元素返回 undefined
    let arr = [
      [
         val.includes("王"),
         () => {
            console.log(val + "出去玩");
         },
      ],
      [
         val.startsWith("张"),
         () => {
            console.error(val + "写作业");
         },
      ],
      [
          val.endsWith("帅"),
            () => {
              console.warn(val + "做饭");
            },
       ],
    ];
    let target = arr.find((item) => {
        item[0]();
    });
    if (target) {
       target[1]();
    } else {
      console.log("没有这个人");
    }
}
test("小王")