您的位置:首页 > Web前端

前端编码规范

2016-07-05 21:57 246 查看
##规范有什么用?
能让每一个人出乎意料的轻松的阅读任意一段代码,并轻易的看懂它们

风格高度统一

提高可读性,促进团队协作

降低维护成本 (减少马良的粗口)

有助于写出质量更高、错误更少、更易于维护的程序

##原则
无论团队人数多少,代码应该同出一门。

##约定

Tab缩进==四个空格

每行代码字符数不超过120个

文件使用UTF-8编码

尽可能不写注释,除非很有必要

文件不能留有多余的空格、换行、不必要的注释

代码一定要格式化

##命名

项目命名:全部采用小写方式, 以下划线分隔
例:my_project_name

目录命名:参考项目命名,有复数结构时,要采用复数命名法。

例:scripts, styles, images, templates


文件命名:全小写,以下划线分隔

例:image_preview.js
如过项目是MVC结构,文件命名可以带上当前模块,便于搜索和理解
app/scripts/controllers/login.controller.js
app/scripts/services/login.service.js


HTML、CSS文件命名参考如上

语义化,准确的表达意图

JS编写规范

变量命名:驼峰命名法,小写字母开头。必须声明

函数命名:驼峰命名法,小写字母开头。规则:动词或动词+名词组合

let removeSession = function() {}

let getUser = function() {}

let isAdmin = function() {}

let findMessagesByIdentifier = function() {}


类命名:驼峰命名法,首字母大写

每行代码结束必须有分号;

常量用全大写字母,下划线分割,如const HTTP_SUCCESS = 200;

空格,该有的空格的地方按代码格式化的标准

花括号

例:if (xx) {
// do something
}
标准写法,其他都不规范,不允许if缩写


使用单引号

let name = '张三';


使用三目等,用===, !==代替==, !=;

严格模式,在js文件头部声明

'use strict';


一个function超过100行就必须要重构,10行内是比较理想的

一个文件只干一件事,文件行数不超过200行,否则说明模块化程度不够

去除else

例 if (xxx) {
return;
}
// do something

例 if (xxx) {
// do something
return;
}
if (xxx) {
// do something
return;
}
// do something


函数参数不能超过3个,可使用对象代替

一个值在代码上出现2次以上就需要提取为常量,防止散弹式编程

HTML编写规范

属性值必修双引号,禁止使用单引号

样式尽可能写到style文件

参考:https://github.com/fex-team/styleguide/blob/master/html.md

CSS编写规范

参考:https://github.com/fex-team/styleguide/blob/master/css.md

我们需要正规军,没有做到,那就是彻底的土匪军
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  编码规范 workplus