第一部分
1.命名通用規(guī)則
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.文件夾/目錄命名規(guī)則
1）使用小駝峰
HelpCenter // bad
help_center // bad
help-center // bad
helpCenter // good
3.項目名稱命名規(guī)則
1）使用下劃線鏈接
test_project // good
4.js文件命名規(guī)則
1)普通js文件使用小駝峰
2)如果js文件導出的是一個對象，使用小駝峰
3)如果js文件導出的是一個類，使用大駝峰，文件名與類名一致
5.css文件命名規(guī)則
1）使用小駝峰
6.html文件命名規(guī)則
1）使用小駝峰
7.js中變量名命名規(guī)則
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的命名規(guī)則
1）使用小駝峰
2)回調函數以‘on’開頭
function clickHandler(){} // bad
function onSubmit(){} // good
function onCustomEvent(){} // good
3)表示動作的函數以動詞開頭
如‘getUserData()’、‘calculateDistance()’
4）返回值為Boolean類型的函數以‘is’或者‘has’開頭
如‘isDone()’、‘hasChild()’
9.css文件中class命名規(guī)則
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.圖片文件命名規(guī)則
1）使用下劃線鏈接‘_’
arrowLeft.png // bad
arrow-left.png // bad
arrow_left.png // good
2)最好使用后綴表示性質
后綴如 ‘_icon’、‘_bg’、“_logo”
3）不同分辨率的圖片使用‘@2x’的形式結尾，x為小寫
第二部分
1.統(tǒng)一使用vs code編寫代碼，使用prettier格式化代碼
2.使用2空格進行縮進，使用單引號，不寫結尾分號
"prettier.singleQuote": true,
"prettier.semi": false,
"prettier.tabWidth": 2,
3.建議把項目中用到的圖片放到一個文件夾里，便于查找和替換
第三部分 VUE項目規(guī)范
1.VUE項目中禁止引入jquery
2.合理劃分組件
3.VUE文件使用小駝峰命名
4.VUE對象屬性按照順序寫
export default{
mixins: [],
components: {},
props:{},
data(),
computed:{},
watch:{},
lefttimes(), // 生命周期回調函數啊，按照生命周期的順序寫
methods: {} // 按照執(zhí)行順序和對業(yè)務影響程度來排序
filters：{}
}
5.表示元素是否顯示的變量使用show開頭
如‘showVoteModal’、‘showUserName’
6.禁止使用index.vue命名文件
7.在自定義組件中的prop必須指定類型和默認值
props: {
color: {
type: String,
default: '#fff',
},
}
第四部分 jquery開發(fā)規(guī)范
1.避免使用全局變量，代碼都放在ready回調函數中或者使用立即執(zhí)行函數
ready回調中
$(function(){
// 你的代碼
})
立即執(zhí)行函數中
(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.在循環(huán)中，盡量減少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()來拼接字符串速度更快
