很实用的前端开发规范

Posted 前端迷

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了很实用的前端开发规范相关的知识，希望对你有一定的参考价值。

注释规范  

   规范的注释很重要 

代码是写给人看的，顺便给机器运行，多谢注释可以增加代码的可读性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 

/** 
**************
 * @func 教师端请假功能 ;
 * @param {String} token 教师端头部的token;
 * @param {string} a - 参数a;
 * @param {number} b=1 - 参数b默认值为1;
 * @param {string} c=1 - 参数c有两种支持的取值</br>1—表示x</br>2—表示xx;
 * @param {object} d - 参数d为一个对象;
 * @param {string} d.e - 参数d的e属性;
 * @param {string} d.f - 参数d的f属性;
 * @param {object[]} g - 参数g为一个对象数组;
 * @param {string} g.h - 参数g数组中一项的h属性;
 * @param {string} g.i - 参数g数组中一项的i属性;
 * @param {string} [j] - 参数j是一个可选参数;
 * @description  2018年4月19日被frank开发于dev_sprint65分支，
 *   XX年XX月被XX在xx分支修改（原因或者修改的功能）;
 ****************/

   变量命名规范

1.标准变量命名使用驼峰式命名 eg. let thisIsMyName;
2.常量全部大写，并使用下划线连接 eg. const MAX_COUNT = 10; 

   项目规范

变量声明尽量提在函数首部，用一个var声明，不允许出现连着的两个var声明(也包括let，const)

1
2
3
4
5
6
7
8
9
10
11
 
function doSomethingWithItems(items) {
    // use one var
    let value = 10,
        result = value + 10,
        i,
        len;

    for (i = 0, len = items.length; i < len; i++) {
        result += 10;
    }
}

undefind使用规范（永远不要直接使用undefined进行变量判断，使用typeof和字符串’undefined’对变量进行判断。）

1
2
3
4
5
6
7
8
9
 
// not good
if (person === undefined) {
    ...
}

// good
if (typeof person === 'undefined') {
    ...
}

用’===’和’!==’代替’==’, ‘!=’


使用对象的属性简写

1
2
3
4
5
6
7
8
9
 
const job = 'FrontEnd'
// bad
const item = {
  job: job
}
// good
const item = {
  job
}

使用拓展运算符 … 复制数组

1
2
3
4
5
6
7
8
9
10
11
 
// bad
const items = []
const itemsCopy = []
const len = items.length
let i
// bad
for (i = 0; i < len; i++) {
  itemsCopy[i] = items[i]
}
// good
itemsCopy = [...items]

render使用

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
render: (h, params) => {
    return h('div', [
        h('span', {
            attrs: {
                class: "table_details"
            },
            on: {
                click: () => {
                    this.edit(params.index)
                }
            }
        },),
        h('span', {
            attrs: {
                class: "table_continue"
            },
            on: {
                click: () => {
                    this.show(params.index)
                }
            }
        },),
        h('span', {
            attrs: {
                class: "table_more no_border_right"
            },
            on: {
                click: () => {
                    this.remove(params.row.id)
                }
            }
        },),
        h('Poptip', {
            props: {
                title:"项目变更",
                content:"项目迁出",
                placement:"bottom-end"
            },
            on: {
                'on-ok': () => {
                }
            }
        }, [
            h('span', {
                attrs: {
                    class: "table_more no_border_right"
                }
            })
        ])
    ])
}

以上是关于很实用的前端开发规范的主要内容，如果未能解决你的问题，请参考以下文章

web前端开发规范项目流程总结

前端小团队建设（实用前端开发规范，推荐收藏）

超实用的php代码片段

译文：18个实用的JavaScript代码片段，助你快速处理日常编程任务

实用VS Code 插件汇总

很实用的JQuery代码片段（转）