很实用的前端开发规范

注释规范

规范的注释很重要

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

/** 
**************
 * @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)

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’对变量进行判断。)

// not good
if (person === undefined) {
    ...
}

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

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

使用对象的属性简写

const job = 'FrontEnd'
// bad
const item = {
  job: job
}
// good
const item = {
  job
}

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

// 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使用

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"
                }
            })
        ])
    ])
}

原文发布于微信公众号 - 前端迷(love_frontend)

原文发表时间:2018-10-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Pythonista

python中的函数

初中数学函数定义:一般的,在一个变化过程中,如果有两个变量x和y,并且对于x的每一个确定的值,y都有唯一确定的值与其对应,那么我们就把x称为自变量,把y称为因变...

1534
来自专栏PHP在线

PHP中正则表达式学习及应用

正则表达式元字符 * 匹配前一个内容的0次1次或多次 . 匹配内容的0次1次或多次,但不包含回车换行 + 匹配前一个内容的1次或多次 ?匹配前一个内容...

3358
来自专栏尾尾部落

[LeetCode]1-bit and 2-bit Characters 1位和2位字符

链接:https://leetcode.com/problems/1-bit-and-2-bit-characters/description/ 难度:Eas...

1401
来自专栏阮一峰的网络日志

awk 入门教程

它依次处理文件的每一行,并读取里面的每一个字段。对于日志、CSV 那样的每行格式相同的文本文件,awk可能是最方便的工具。

1012
来自专栏Java 源码分析

并查集

​ 在我们需要判断某一些事物之间是否存在一定的关系的时候,我们最好的办法不是使用图而是使用并查集。因为我们关心的是他们之间是否有关系,而不是关心的他们到底...

3607
来自专栏HTML5学堂

2015.12.29 HTML5真题练习

HTML5学堂:每天一道题,强壮程序员!今日主要涉及12.24日题目的解答,以及一道涉及函数作用域的题目。 HTML5真题【2015.12.24】答案解析 12...

2926
来自专栏HTML5学堂

while和do while循环语句

HTML5学堂:在JS的循环语句当中,for、for-in的确是使用管比较频繁的,但是额外还有两种循环语句,一种是while语句,一种是do-while语句,今...

2987
来自专栏专注数据中心高性能网络技术研发

HERD--GCC宏

减少跳转语句失效时CPU等待取指令时间,提高CPU效率 使用__builtin_expect(EXP,N) 意思是EXP==N的概率很大 一般封装为LIKELY...

2985
来自专栏猿人谷

总结---3

Email relay 和Email access分别用了什么协议? 答:SMTP,POP3 1:多态是如何实现绑定的? 多态的绑定可以分为运行是多态和编译时多...

2007
来自专栏ShaoYL

Objective-C中的@property和@synthesize用法

40111

扫码关注云+社区

领取腾讯云代金券