前端编码规范

2019-12-13 本文已影响0人前端里程

Vue项目规范

项目工程化，工程化的项目结构拥有多方面的好处，下文链接有详细的说明。

image
说明：https://www.cnblogs.com/mouseleo/p/10829754.html

CSS代码规范

1、全局：global.css
全局样式为全站公用，为页面样式基础，页面中必须包含。

2、主题 themes.css
实现换肤功能时应用。

3、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

状态：status

按钮：btn

当前的: current

JS代码规范
1、命名规范
使用驼峰标记法首字母是小写的，接下来的字母都以大写字符开头。例如：var testValue = ‘100万’;

2、操作符（+，-，*，/，%）前后请加空格，如：return x + y;

3、 vuex中actions使用小写加下划线命名，mutations使用大写字母加下划线命名。

4、在vue组件中获取数据使用beforeRouteEnter导航守卫，这样能避免数据还未加载完成template已经渲染。

export default {
    data () {
        return {

        }
    },
    beforeRouteEnter (to, from, next) {
        this.axios({
            url: "xxx",
        }).then( res => {

        })
    }
}

6、字符串统一使用单引号(')，不使用双引号(")。这在创建 HTML 字符串非常有好处。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、删除重复代码（避免修改代码时，多次修改）

//不好
         if (item.JPRV != 0 && item.JCITY != 0 && item.JCNTY != 0) {//省市县计划水库不为0
            return Object.assign(item, {
              CITY: item.NAME,
              PRVJB: ((item.YPRV / item.JPRV) * 100).toFixed(2) + '%',
              CITYJB: ((item.YCITY / item.JCITY) * 100).toFixed(2) + '%',
              CNTYJB: ((item.YCNTY / item.COUNT) * 100).toFixed(2) + '%',
            }); 
          }else if(item.JPRV == 0){//省级为0
                if(item.JCITY != 0 && item.COUNT != 0){//市级不为0，县级不为0
                  return Object.assign(item, {
                    CITY: item.NAME,
                    PRVJB: '',
                    CITYJB: ((item.YCITY / item.JCITY) * 100).toFixed(2) + '%',
                    CNTYJB: ((item.YCNTY / item.COUNT) * 100).toFixed(2) + '%',
                  }); 
                }else if(item.JCITY == 0 && item.COUNT != 0){//省市级为0，县级不为0
                  return Object.assign(item, {
                    CITY: item.NAME,
                    PRVJB: '',
                    CITYJB: '',
                    CNTYJB: ((item.YCNTY / item.COUNT) * 100).toFixed(2) + '%',
                  }); 
                }else if(item.JCITY != 0 && item.COUNT == 0){//省县级为0，市级不为0
                  return Object.assign(item, {
                    CITY: item.NAME,
                    PRVJB: '',
                    CITYJB: ((item.YCITY / item.JCITY) * 100).toFixed(2) + '%',
                    CNTYJB: '',
                  }); 
                }else{
                  return Object.assign(item, {
                    CITY: item.NAME,
                    PRVJB: '',
                    CITYJB: '',
                    CNTYJB: '',
                  }); 
                }
          }
//好
     if (key === 'list_prv' && resData[key].length > 0) {
        resData[key] = resData[key].map(item => {
          return Object.assign(item, {
            CITY: item.NAME,
          }, this.addBFB(item));
        })
      } else if (key === 'list_city') {
        resData[key] = resData[key].map(item => {
          return Object.assign(item, {
            CITY: item.NAME,
            show: false,
          }, this.addBFB(item));
        })
      } 

addBFB(item) { //添加百分比
    let obj = {};
    if (item.JPRV && item.YPRV) { //省计划水库不为0或空
      obj = Object.assign(obj, {
        PRVJB: ((item.YPRV / item.JPRV) * 100).toFixed(2) + '%',
      });
    } 
    if (item.JCITY && item.YCITY) { //市计划水库不为0或空
      obj = Object.assign(obj, {
        CITYJB: ((item.YCITY / item.JCITY) * 100).toFixed(2) + '%',
      });
    }
    if (item.COUNT && item.YCNTY) { //县计划水库不为0或空
      obj = Object.assign(obj, {
        CNTYJB: ((item.YCNTY / item.COUNT) * 100).toFixed(2) + '%',
      });
    }
    return obj;
  }

15、保存对象属性到局部变量(一下是小程序代码举例)

//不好
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 离开

以上是根据网上资料结合自身开发过程中整理的编码规范，后续有更为友好的编码规范还会继续更新文章。

更详细的前端编码规范：https://www.w3cschool.cn/bdl2e3/

前端编码规范

猜你喜欢

热点阅读