很实用的前端开发规范

简介: 很实用的前端开发规范

注释规范


  规范的注释很重要


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

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

目录
相关文章
|
7月前
|
缓存 前端开发
前端代码整洁与规范之CSS篇
【4月更文挑战第2天】 前端代码整洁与规范之CSS篇
241 4
|
2月前
|
前端开发 测试技术
如何从零到一建立前端规范
【10月更文挑战第6天】
73 2
|
7月前
|
前端开发 JavaScript API
前端代码书写规范
前端代码规范提升项目可维护性和团队协作效率。关注项目命名清晰简洁、一致性,组件命名使用驼峰式且具描述性。JS遵循4空格缩进,分号结束语句,CSS按逻辑排序,HTML注重语义化。注释要功能性、文档化且简洁。遵循规范能减少错误,增强团队沟通。
303 3
|
4月前
|
前端开发 JavaScript 开发工具
前端规范
前端规范
|
3月前
|
监控 前端开发 开发者
前端代码规范 - 日志打印规范
前端代码规范 - 日志打印规范
|
4月前
|
缓存 JavaScript 前端开发
|
4月前
|
前端开发
前端代码书写规范
【8月更文挑战第15天】前端代码书写规范
88 0
|
缓存 JavaScript 前端开发
【开发规范系列】(四)前端开发规范(四)
【开发规范系列】(四)前端开发规范(四)
|
7月前
|
缓存 JavaScript 前端开发
前端 JS 经典:CommonJs 规范
前端 JS 经典:CommonJs 规范
67 0
|
7月前
|
前端开发 JavaScript 算法
比较流行的前端代码书写规范都有哪些
【4月更文挑战第13天】前端代码规范增进代码可读性和团队协作,包括缩进(用2空格)、命名(变量 camelCase,常量 MY_CONSTANT,类 PascalCase)、注释、语句与表达式、错误处理、代码复用。文件命名规范涉及扩展名、目录结构、简洁文件名、入口文件和配置文件命名。遵循这些规范能提高代码一致性,但需按项目需求调整。不断学习新规范以适应前端技术发展。
73 1
下一篇
DataWorks