Vue项目规范
项目工程化，工程化的项目结构拥有多方面的好处，下文链接有详细的说明。
CSS代码规范
1、全局：global.css
全局样式为全站公用，为页面样式基础，页面中必须包含。
2、主题 themes.css 实现换肤功能时应用。
3、结构：layout.css
页面结构类型复杂，并且公用类型较多时使用。多用在首页级页面和产品类页面中。
4、模块 module.css
产品类页面应用，将可复用类模块进行剥离后，可与其它样式配合使用。
5、CSS命名规范
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
滚动：scroll
内容：content
标签页：tab
文章列表：list
提示信息：msg
栏目标题：title
指南：guide
服务：service
注册：regsiter
状态：status
按钮：btn
当前的: current
JS代码规范 1、 命名规范
使用驼峰标记法首字母是小写的，接下来的字母都以大写字符开头。例如：var testValue = ‘100万’;
2、不要使用 switch建议用 if else 来替换它。
3、 操作符（+，-，*，/，%）前后请加空格，如：return x + y;
4、 vuex中actions使用小写加_下划线命名，mutations使用大写字母加_下划线命名。
5、 在vue组件中获取数据使用beforeRouteEnter导航守卫，这样能避免数据还未加载完成template已经渲染。
export default {
data () {
return {
}
},
beforeRouteEnter (to, from, next) {
this.axios({
url: "xxx",
}).then( res => {
})
}
}
6、 字符串统一使用单引号(‘)，不使用双引号(“)。这在创建 HTML 字符串非常有好处。
7、 三元条件判断代替简单（if 的快捷方法）
//不好
let getGirlFriend = (standard) {
if(standard == "漂亮"){
return "校花";
}else{
return "恐龙";
}
}
//好
let getGirlFriend = (standard) {
return standard == "漂亮"?"校花":"恐龙";
}
8、 表达式尾部加分号“;”。(这个本人遇到很多次没写分号而产生的BUG)
9、 函数尽早return，函数内先判断引用参数是否错误，避免不必要运行的代码，从而提升程序性能。
10、常量使用全大写命名(基本是业内公认的方式)。
11、使用空格，增加代码的可读性。
12、使用可理解变量：
//不好
const getTableH = () => {//获取表格高度
let tableH = document.body.clientHeight - document.getElementsByClassName('headbar')[0].clientHeight - document.getElementById('footer').clientHeight;
return tableH;
}
// 好
const getTableH = () => {//获取表格高度
let headerH = document.getElementsByClassName('headbar')[0].clientHeight;
let footerH = document.getElementById('footer').clientHeight;
let bodyH = document.body.clientHeight;
let tableH = bodyH - headerH - footerH;
return tableH;
}
13、 避免变量简写：
//不好
let cityList = ["北京","上海","广州","深圳","杭州"];
cityList.map(e =>{
goCity(e);
...
...
...
setData(e);// (⊙o⊙)…“e”是什么鬼?
});
//好
let cityList = ["北京","上海","广州","深圳","杭州"];
cityList.map(city =>{
goCity(city);
...
...
...
setData(city);
});
14、 一个函数只做一件事，这对于后期的修改维护更为友好，不好的是增加了编写代码的难度。
//不好
function emailClients () {
clients.map(client => {
let clientRecord = database.lookup(client);
if(clientRecord.isActive()) {
email(client);
}
})
}
//好
function emailClients () {
clients.map(client => {
emailClientIfNeeded(client);
})
}
function emailClientIfNeeded (client) {
if(isClientActive(client)) {
email(client);
}
}
function isClientActive (client) {
let clientRecord = database.lookup(client);
return clientRecord.isActive;
}
15、 删除重复代码（避免修改代码时，多次修改）
16、保存对象属性到局部变量(一下是小程序代码举例)
//不好
if (this.data.damInfos[e.currentTarget.dataset.parindex].List[e.currentTarget.dataset.index].RESULT == value) {
this.data.damInfos[e.currentTarget.dataset.parindex].List[e.currentTarget.dataset.index].RESULT = "无";
this.data.damInfos[e.currentTarget.dataset.parindex].List[e.currentTarget.dataset.index].TYPE = null;
}
//好
let parindex = e.currentTarget.dataset.parindex;
let index = e.currentTarget.dataset.index;
let damInfos = this.data.damInfos;
if (damInfos[parindex].List[index].RESULT == value) {
damInfos[parindex].List[index].RESULT = "无";
damInfos[parindex].List[index].TYPE = null;
}
17、 函数常用名词：
a) get 获取/set 设置,
b) add 增加/remove 删除
c) create 创建/destory 移除
d) start 启动/stop 停止
e) open 打开/close 关闭,
f) read 读取/write 写入
g) load 载入/save 保存,
h) create 创建/destroy 销毁
i) begin 开始/end 结束,
j) import 导入/export 导出,
k) split 分割/merge 合并
l) bind 绑定/separate 分离,
m) view 查看/browse 浏览
n) edit 编辑/modify 修改,
o) select 选取/mark 标记
p) copy 复制/paste 粘贴,
q) undo 撤销/redo 重做
r) insert 插入/delete 移除,
s) add 加入/append 添加
t) clean 清理/clear 清除,
u) index 索引/sort 排序
v) find 查找/search 搜索,
w) increase 增加/decrease 减少
x) play 播放/pause 暂停,
y) launch 启动/run 运行
z) compile 编译/execute 执行,
aa) debug 调试/trace 跟踪
bb) observe 观察/listen 监听,
cc) build 构建/publish 发布
dd) input 输入/output 输出,
ee) encode 编码/decode 解码
ff) encrypt 加密/decrypt 解密,
gg) compress 压缩/decompress 解压缩
hh) parse 解析/emit 生成
ii) connect 连接/disconnect 断开,
jj) send 发送/receive 接收
kk) download 下载/upload 上传,
ll) refresh 刷新/synchronize 同步
mm) update 更新/revert 复原,
nn) submit 提交/commit 交付
oo) push 推/pull 拉,
pp) expand 展开/collapse 折叠
qq) start 开始/finish 完成
rr) enter 进入/exit 退出,
ss) abort 放弃/quit 离开
以上是根据网上资料结合自身开发过程中整理的编码规范，后续有更为友好的编码规范还会继续更新文章。
