前端代码规范

第一部分

1.命名通用规则

1）使用英文命名

let dizhi='' // bad

let address=''  // good

2)使用有意义的单词组合

function getData(){}  // bad

function getUserInfo(){}  // good

3）避免使用数字名称

let icon1='' 
let icon2='' // bad

let phoneIcon=''
let mailIcon=='' // good

3)避免使用‘广告’、‘推广’等字样 如‘guanggao’、 ‘advertisement’、‘ad’等，因为有的浏览器会拦截，造成文件加载失败

2.文件夹/目录命名规则

1）使用小驼峰

HelpCenter // bad
help_center // bad 
help-center // bad

helpCenter // good

3.项目名称命名规则

1）使用下划线链接

test_project // good

4.js文件命名规则

1)普通js文件使用小驼峰

2)如果js文件导出的是一个对象，使用小驼峰

3)如果js文件导出的是一个类，使用大驼峰，文件名与类名一致

5.css文件命名规则

1）使用小驼峰

6.html文件命名规则

1）使用小驼峰

7.js中变量名命名规则

1）一般使用小驼峰

2）‘ID’在变量名中全大写

let userId='' // bad

let userID='' // good

3)‘URL’在变量名中全大写

let baseUrl='' // bad

let baseURL='' // good

4)‘IOS’在变量名中全大写

let isIos=true // bad

let isIOS=true // good

5)常量全大写，使用下划线链接

const baseUrl='' // bad

const BASE_URL='' // good

8.js文件中function的命名规则

1）使用小驼峰

2)回调函数以‘on’开头

function clickHandler(){} // bad

function onSubmit(){} // good
function onCustomEvent(){} // good

3)表示动作的函数以动词开头

如‘getUserData()’、‘calculateDistance()’

4）返回值为Boolean类型的函数以‘is’或者‘has’开头

如‘isDone()’、‘hasChild()’

9.css文件中class命名规则

1）使用中短杠链接‘-’

.userInfo{} // bad

.user-info{} // good

2)最好使用后缀表示元素的性质

后缀如 ‘-btn’、‘-list’、‘-item’、‘-header’，让人一目了然
容器级别的后缀依次为‘wrapper’ 、‘container’、‘box’、‘content’

.comfirm-btn // good
.brand-list // good
.brand-item // good
.index-header // good

10.图片文件命名规则

1）使用下划线链接‘_’

arrowLeft.png // bad
arrow-left.png // bad

arrow_left.png // good

2)最好使用后缀表示性质

后缀如 ‘_icon’、‘_bg’、“_logo”

3）不同分辨率的图片使用‘@2x’的形式结尾，x为小写

第二部分

1.统一使用vs code编写代码，使用prettier格式化代码

2.使用2空格进行缩进

3.暂定使用eslint strandrad作为规范，个别规则可自行忽略

eslint-standard

4.建议吧项目中用到的图片放到一个文件夹里，便于查找和替换

第三部分 VUE项目规范

1.VUE项目中禁止引入jquery

2.合理划分组件，如果单个VUE文件代码超过500行，需要主动要求组长review代码

3.VUE文件使用小驼峰命名

4.VUE对象属性按照顺序写

export default{
  mixins: [],
  components: {},
  props:{},
  data(),
  computed:{},
  watch:{},
  lefttimes(), // 生命周期回调函数啊，按照生命周期的顺序写
  methods: {} // 按照执行顺序和对业务影响程度来排序
  filters：{}
}

5.表示元素是否显示的变量使用show开头

如‘showVoteModal’、‘showUserName’

6.禁止使用index.vue命名文件

7.在自定义组件中的prop必须指定类型和默认值

props: {
    color: {
      type: String,
      default: '#fff',
    },
}

第四部分 jquery开发规范

1.避免使用全局变量，代码都放在ready回调函数中或者使用立即执行函数

ready回调中

$(function(){
  // 你的代码
})

立即执行函数中

(function(){
   // 你的代码 
})()

2.提取公用方法，避免重复代码

如获取URL中参数的方法，格式化时间的方法

3.尽量使用ID选择器

4.html文件中id字段命名为小驼峰格式

5.缓存对象

$('#content').addClass('red')
$('#content').empty()  // bad

var content=$('#content')
content.addClass('red')
content.empty() // good

6.在循环中，尽量减少dom操作

var brandData=[] // 有一个数组
var brandList=$('#bandList') // 获取到容器的jQuery对象
for(var i=0;i'+brandData[i]+'')
} //  bad

var brandStr='' //  用一个字符串存储html片段
for(var i=0;i'
}
brandList.html(brandStr) // good 使用数组 join()来拼接字符串速度更快

第五部分 杂项

1.尽量使用背景图，减少使用img标签，避免图片拉伸

2.git

1）每天下班前往git上推代码

2）区分使用master分支和dev分支

3）项目上线后往master上合并代码

4）写有意义的commit message

3.图片如果没有透明部分，使用jpg格式