好的代码,往往不是又臭又长,而是小而精悍。用更少的代码,实现相同的功能。不管是自己还是同事日后阅读,都不会感到困惑。
在这里,记录前端开发中,优化代码的几种方式。
噩梦地狱嵌套
大概大家都看过怎么一张图
RkwiBh
在遇到这个写法的时候, 首先要想一想这样到底有没有用,有没有办法优化。像图中的根本就没有必要去嵌套。
再来看个例子。
1const payload: <Record, unknown> | undefined = {
2  page: '1',
3  size: 10
4} // payload from server via request
5if (payload) {
6  if (typeof payload.page === 'number' && typeof payload.size === 'number') {
7    // do anything..
8  }
9}
10// do anything..
Copy
这是很简单的数据验证,一般用于后端防止 noSQL 注入。
简单的写法如下
1if (!payload) {
2  // do anything..
3  // throw a bad request error
4}
5if (typeof payload.page !== 'number' || typeof payload.size !== 'number') {
6  // do anything..
7  // throw a 422 error
8}
9// do anything
Copy
这样就有效避免了嵌套。
糟糕的 if 判断
不知道这种写法,你们见的多不多。
1if (a === 1 || b === 1 || c === 1) {
2  // do anything...
3}
Copy
可以转换成
1if ([a, b, c].includes(1)) {
2}
Copy
表格选择法
你还是使用大量 if, 或者 switch,作为分支选择值吗,那就显得很没水平了,快来试试表格选择。
1// switch
2let week;
3
4switch (week) {
5  case 0:
6    week = '周日';
7    break;
8  case 1:
9    week = '周一';
10    // ...
11  default:
12    break;
13}
14
15// convert to 
16let week = 0
17week = ['日', '一', '二', '三', '四', '五', '六'][week]
Copy
更复杂一点? 当然可以,而且更加简洁。这里以判断文件类型为例。
1 const checkTypes = (ext: string) => {
2  const i18n = {
3    VIDEO: '视频',
4    TXT: '文本',
5    MUSIC: '音乐',
6    DOC: '文档',
7    EXL: '表格',
8    PPT: '幻灯片',
9    PDF: '图书',
10    CODE: '代码',
11    IMG: '图片',
12    FILE: '文件',
13  };
14  return i18n[
15    Object.entries(FileTypes).find(([key, val]) => {
16      if (val.includes(ext)) {
17        return key;
18      }
19      return false;
20    })?.[0] || 'FILE'
21  ];
22};
23
24const FileTypes = Object.freeze({
25  VIDEO: ['.mp4', '.avi', '.mov', '.mpg'],
26  TXT: ['.txt'],
27  MUSIC: ['.mp3'],
28  DOC: ['.doc', '.docx'],
29  EXL: ['.xls'],
30  PPT: ['.ppt', '.pptx'],
31  PDF: ['.pdf'],
32  CODE: [
33    '.js',
34    '.c',
35    '.cpp',
36    '.py',
37    '.html',
38    '.css',
39    '.scss',
40    '.xml',
41    '.swift',
42    '.ts',
43    '.java',
44    '.go',
45    '.asp',
46    '.aspx',
47    '.class',
48    '.clw',
49    '.cs',
50    '.dsp',
51    '.dsw',
52    '.frm',
53    '.frx',
54    '.h',
55    '.hpp',
56    '.jar',
57    '.lib',
58    '.ocx',
59    '.pyc',
60    '.vbp',
61    '.vbs',
62    '.xsl',
63  ],
64  IMG: ['.png', '.jpg', '.jpeg', '.gif', '.svg'],
65});
66
67export default FileTypes;
Copy
以上是我临时想到的,之后继续补充。

亲亲留个评论再走呗

0
0
0
0
正在加载评论区...