前端开发规范

Web端开发规范文档

规范文档优点

1 .提高团队协作能力。
2 .方便后期维护。
3 .提高代码复用利用率。
4 .减少服务器负载，保证最快解析速度。

一.开发流程

1 .分析所要实现的需求有哪些。
2 .根据所要实现的需求搭功能页面。
3 .与后台交互数据,将数据动态渲染在页面。
4 .测试程序 ,上线

命名规范

1.项目命名

全部采用小写方式， 以中划线分隔。
正例：mall-management-system
反例：mall_management-system / mallManagementSystem

2 目录命名

全部采用小写方式， 以中划线分隔，有复数结构时，要采用复数命名法， 缩写不用复数
正例：
scripts / styles / components / images / utils / layouts / demo-styles / demo-scripts / img / doc
反例：script / style / demo_scripts / demoStyles / imgs / docs

3 常用页面结构命名

容器: container
 
页头：header
 
内容：content/container
 
页面主体：main
 
页尾：footer
 
导航：nav
 
侧栏：sidebar
 
栏目：column
 
页面外围控制整体布局宽度：wrapper
 
左右中：left right center

二.CSS 规范

1.尽量使用缩写属性

推荐：

border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

不推荐：

border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;

2.每个选择器及属性独占一行

推荐：

button{
  width:100px;
  height:50px;
  color:#fff;
  background:#00a0e9;
}

不推荐：

button{
  width:100px;height:50px;color:#fff;background:#00a0e9;
}

3.省略0后面的单位

推荐：

div{
  padding-bottom: 0;
  margin: 0;
}

不推荐：

div{
  padding-bottom: 0px;
  margin: 0em;
}

3.避免使用ID选择器及全局标签选择器防止污染全局样式

推荐：

.header{
  padding-bottom: 0px;
  margin: 0em;
}

不推荐：

#header{
  padding-bottom: 0px;
  margin: 0em;
}

三.Javascript 规范

1.命名

采用小写驼峰命名 lowerCamelCase，代码中的命名均不能以下划线，也不能以下划线或美元符号结束

反例：
_name / name_ / name$

方法名、参数名、成员变量、局部变量都统一使用 lowerCamelCase 风格，必须遵从驼峰形式。

正例：
localValue / getHttpMessage() / inputUserId

其中 method 方法命名必须是 动词 或者 动词+名词 形式

正例：
saveShopCarData /openShopCarInfoDialog

反例：
save / open / show / go

特此说明，增删查改，详情统一使用如下 5 个单词，不得使用其他（目的是为了统一各个端）

add / update / delete / detail / get

附： 函数方法常用的动词:

get 获取/set 设置,
add 增加/remove 删除
create 创建/destory 移除
start 启动/stop 停止
open 打开/close 关闭,
read 读取/write 写入
load 载入/save 保存,
create 创建/destroy 销毁
begin 开始/end 结束,
backup 备份/restore 恢复
import 导入/export 导出,
split 分割/merge 合并
inject 注入/extract 提取,
attach 附着/detach 脱离
bind 绑定/separate 分离,
view 查看/browse 浏览
edit 编辑/modify 修改,
select 选取/mark 标记
copy 复制/paste 粘贴,
undo 撤销/redo 重做
insert 插入/delete 移除,
add 加入/append 添加
clean 清理/clear 清除,
index 索引/sort 排序
find 查找/search 搜索,
increase 增加/decrease 减少
play 播放/pause 暂停,
launch 启动/run 运行
compile 编译/execute 执行,
debug 调试/trace 跟踪
observe 观察/listen 监听,
build 构建/publish 发布
input 输入/output 输出,
encode 编码/decode 解码
encrypt 加密/decrypt 解密,
compress 压缩/decompress 解压缩
pack 打包/unpack 解包,
parse 解析/emit 生成
connect 连接/disconnect 断开,
send 发送/receive 接收
download 下载/upload 上传,
refresh 刷新/synchronize 同步
update 更新/revert 复原,
lock 锁定/unlock 解锁
check out 签出/check in 签入,
submit 提交/commit 交付
push 推/pull 拉,
expand 展开/collapse 折叠
begin 起始/end 结束,
start 开始/finish 完成
enter 进入/exit 退出,
abort 放弃/quit 离开
obsolete 废弃/depreciate 废旧,
collect 收集/aggregate 聚集

2.常量命名全部大写，单词间用下划线隔开，力求语义表达完整清楚，不要嫌名字长。

正例：MAX_STOCK_COUNT
反例：MAX_COUNT

3.代码格式

使用 2 个空格进行缩进
正例：

if (x < y) {
  x += 10;
} else {
  x += 1;
}

不同逻辑、不同语义、不同业务的代码之间插入一个空行分隔开来以提升可读性。

4.字符串

统一使用单引号(‘)，不使用双引号(“)。这在创建 HTML 字符串非常有好处
正例：

let str = 'foo';
let testDiv = '<div id="test"></div>';

反例：

let str = 'foo';
let testDiv = "<div id='test'></div>";

5.对象声明

使用字面值创建对象

正例：

var user = {
  age: 0,
  name: 1,
  city: 3
};

反例：

var user = new Object();
user.age = 0;
user.name = 0;
user.city = 0;

6.undefined 判断

正例：

永远不要直接使用 undefined 进行变量判断；使用 typeof 和字符串’undefined’对变量进行判断。

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

反例：

if (person === undefined) {
    ...
}

7.条件判断和循环最多三层

条件判断能使用三目运算符和逻辑运算符解决的，就不要使用条件判断，但是谨记不要写太长的三目运算符。如果超过 3 层请抽成函数，并写清楚注释。

四.其他

删除无用代码

因使用了 git/svn 等代码版本工具，对于无用代码必须及时删除，例如：一些调试的 console 语句、无用的弃用功能代码。