第一部分
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)常量全大写，使用下划线链接
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空格进行缩进，使用单引号，不写结尾分号
"prettier.singleQuote": true,
"prettier.semi": false,
"prettier.tabWidth": 2,
3.建议把项目中用到的图片放到一个文件夹里，便于查找和替换
第三部分 VUE项目规范
1.VUE项目中禁止引入jquery
2.合理划分组件
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.length;i++){
brandList.append('<li>'+brandData[i]+'</li>')
} // bad
var brandStr='' // 用一个字符串存储html片段
for(var i=0;i<brandData.length;i++){
brandStr+='<li>'+brandData[i]+'</li>'
}
brandList.html(brandStr) // good 使用数组 join()来拼接字符串速度更快
网友评论