vue html2canvas資料圖片空白_學習參考：Vue版的團隊程式碼規範
技術標籤：vue html2canvas資料圖片空白vue 下拉框vue 後臺獲取資料 下拉框vue 彈框 select 獲取不到值vue下拉框vue下拉框選中一個值時觸發事件
規範與每個團隊和個人都是息息相關的，因為其影響的不只是只是程式碼的維護和理解成本，嚴重的時候是會影響成員開發的心情
一個團隊的編碼規範、git規範等，並沒有絕對的最優解，心裡要清楚明白沒有銀彈，規範是為了讓團隊統一，提高程式碼閱讀性、降低程式碼維護成本等，本文是記錄一些在專案code review中常見的規範，僅供參考
JS部分
和渲染無關的資料
vue中data的資料預設便會進行雙向資料繫結，若是將大量的和渲染無關的資料直接放置在data
Object.freeze進行處理
table中columns資料可以單獨提取一個外部js檔案作為配置檔案，也可以在當前.vue檔案中定義一個常量定義columns資料，因為無論如何都是固定且不會修改的資料，應該使用Object.freeze進行包裹，既可以提高效能還可以將固定的資料抽離，一些下拉框前端固定的資料也建議此操作
constcolumnList=Object.freeze([
{title:'姓名',key:'name',align:'center'},
{title:'性別',key:'gender',align:'center'}
需要注意的是 Object.freeze() 凍結的是值，這時仍然可以將變數的引用替換掉，還有確保資料不會變才可以使用這個語法，如果要對資料進行修改和互動，就不適合使用凍結了。
Modal框的控制
一個頁面種通常會存在很多個不同功能的彈框，若是每一個彈框都設定一個對應的變數來控制其顯示，則會導致變數數量比較冗餘和命名困難，可以使用一個變數來控制同一頁面中的所有Modal彈框的展示
比如某個頁面中存在三個Modal彈框
//bad
//每一個數據控制對應的Modal展示與隱藏
newVue({
data(){
return{
modal1:false,
modal2:false,
modal3:false,
}
})
//good
//當modalType為對應的值時展示其對應的彈框
newVue({
data(){
return{
modalType:''//modalType值為modal1，modal2，modal3
}
}
})
debounce使用
例如遠端搜尋時需要通過介面動態的獲取資料，若是每次使用者輸入都介面請求，是浪費頻寬和效能的
當一個按鈕多次點選時會導致多次觸發事件，可以結合場景是否立即執行immediate
<Select:remote-method="remoteMethod">
<Optionv-for="itemintemoteList":value="item.value":key="item.id">{{item.label}}Option>
Select>
import{debounce}from'lodash'
methods：{
remoteMethod：debounce(function(query){
//todo...
//this的指向沒有問題
},200),
}
圖片
功能的開發過程中，圖片的處理往往是比較容易被忽略的環節，也會在一定程度影響開發的效率和頁面的效能
圖片壓縮問題，除非特別要求圖片必須高質量的顯示，否則都應該進行對應的壓縮處理
不同業務場景進行圖片格式的選型
- JPG 適用於呈現色彩豐富的圖片，JPG 圖片經常作為大的背景圖、輪播圖或 Banner 圖出現等
- Logo、顏色簡單且對比強烈的圖片或背景、需要透明度等
- 將常用且變動頻率很低的小圖片進行合併成雪碧圖，對於變動比較頻繁和小於
6KB的圖片進行base64處理 - 根據專案圖片數量和專案的使用者機型分佈等，考慮採取
webp進行圖片的處理
路由元件傳參
在元件中使用
$route會使之與其對應路由形成高度耦合，從而使元件只能在某些特定的 URL 上使用，限制了其靈活性。
使用props將元件和路由解耦：
取代與$route的耦合
constUser={
template:'User{{$route.params.id}}
'
}
constrouter=newVueRouter({
routes:[
{path:'/user/:id',component:User}
]
})
通過props解耦
這樣你便可以在任何地方使用該元件，使得該元件更易於重用和測試。
constUser={
props:['id'],
template:'User{{id}}
'
}
constrouter=newVueRouter({
routes:[
{path:'/user/:id',component:User,props:true},
//對於包含命名檢視的路由，你必須分別為每個命名檢視新增`props`選項：
{
path:'/user/:id',
components:{default:User,sidebar:Sidebar},
props:{default:true,sidebar:false}
}
]
})
參考：路由元件傳參
Vue生命週期
在父子元件中，掌握父子元件對應的生命週期鉤子載入順序可以讓開發者在更合適的時候做適合的事情父元件
home
子元件
list
載入時父子元件的載入順序
home beforeCreate --> home created --> home beforeMount --> list created --> list beforeMount --> list mounted
銷燬時父子元件的銷燬順序
home beforeDestroy --> list beforeDestroy --> list destroyed --> home destroyed
實際開發過程中會遇到當子元件某個生命週期完成之後通知父元件，然後在父元件做對應的處理
emit up
// 子元件在對應的鉤子中釋出事件
created(){
this.$emit('done')
}
// 父元件訂閱其方發
hook
通過@hook監聽子元件的生命週期
Select優化
下拉框遍歷時，需要注意options標籤保持同一行，若是存在換行，會導致選中時的值存在多餘的空白
<Select:remote-method="remoteMethod">
<Optionv-for="itemintemoteList":value="item.value":key="item.id">
{{item.label}}
Option>
Select>
需要將Options和下拉框的值保持在同一行
<Select:remote-method="remoteMethod">
<Optionv-for="itemintemoteList":value="item.value":key="item.id">{{item.label}}Option>
Select>
data資料層級
data資料具有資料層級結構，切勿過度扁平化或者巢狀層級過深，若是過度扁平化會導致資料名稱空間衝突，引數傳遞和處理，若是層級巢狀過深也會導致vue資料劫持的時候遞迴層級過深，若是巢狀層級喪心病狂那種的，小心遞迴爆棧的問題。而且層級過深會導致資料操作和處理不便，獲取資料做容錯處理也比較繁瑣。一般層級保持2-3層最好。
若是隻有一層資料，過於扁平
{
name:'',
age:'',
gender:''
}
導致處理不方便
//作為介面引數傳遞
ajax({
this.name,this.age,this.gender
})
//介面獲取資料，批量處理
ajax().then(res=>{
const{name,age,gender}=res.data
this.name=name
this.age=age
this.gender=gender
})
適當的層級結構不僅增加程式碼的維護和閱讀性，還可以增加操作和處理的便捷性
{
person:{//個人資訊
name:'',
age:'',
gender:''
}
}
可以針對person進行操作
//作為介面引數傳遞
ajax(this.person)
//介面獲取資料，批量處理
ajax().then(res=>{
const{name,age,gender}=res.data
this.$set(this,'person',{name,age,gender})
})
策略模式
策略模式的使用，避免過多的if else判斷，也可以替代簡單邏輯的switch
constformatDemandItemType=(value)=>{
switch(value){
case1:
return'基礎'
case2:
return'高階'
case3:
return'VIP'
}
}
//策略模式
constformatDemandItemType2=(value)=>{
constobj={
1:'基礎',
2:'高階',
3:'VIP',
}
returnobj[value]
}
解構
解構賦值以及預設值，當解構的數量小於多少時適合直接解構並賦值預設值，資料是否進行相關的聚合處理
const{
naem='',
age=10,
gender='man'
}=res.data
//bad
this.name=name
this.age=age
this.gender=gender
//good
this.person={
naem,
age,
gender
}
職責單一
任何時候儘量是的一個函式就做一件事情，而不是將各種邏輯全部耦合在一起，提高單個函式的複用性和可讀性
每個頁面都會在載入完成時進行資料的請求並展示到頁面
created(){
this.init();
},
methods:{
//將全部的請求行為聚合在init函式中
//將每個請求單獨拆分
init(){
this.getList1()
this.getList2()
},
getList1(){
//todo...
},
getList2(){
//todo...
}
}
v-bind
HTML部分
html書寫
編寫template模板時，屬性過多時，是否換行
icon-left="keyboard_arrow_up"
v-tooltip="$t('org.vue.components.folder-explorer.toolbar.tooltips.parent-folder')"
@click="openParentFolder"
/>
實體使用
html中展示一些如<，>,&等字元時，使用字元實體代替
<div>
>1&12
div>
<div>
12
div>
CSS部分
樣式穿透
在開發中修改第三方元件樣式是很常見，但由於scoped屬性的樣式隔離，可能需要去除scoped或是另起一個style。這些做法都會帶來副作用(元件樣式汙染、不夠優雅)，樣式穿透在css前處理器中使用才生效。
- less使用 /deep/
- scss使用::v-deep
- stylus使用>>>
空格
適當的空格可以提升程式碼的閱讀體驗，顯得更為優雅和美觀
選擇器後、屬性值
.custom-style { // 選擇器和{ 之間空格
margin: 0; // 屬性值前
transform: scale(1.5, 2.2); // 逗號之後增加空格
}
換行
和html型別，當某行的屬性很多，適當的換行可以提高閱讀和美觀
.custom-style{
// 可以在一次宣告中定義一個或多個屬性
background: background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size;
}
當一個規則包含多個選擇器時，每個選擇器宣告必須獨佔一行，過長導致需要橫向滾動閱讀剩餘的內容，應該儘量使得閱讀順序縱向化
.custom .header .title，
.other .header .title {
color: #f0f;
}
巢狀層級
瀏覽器在解析css時，是按照從右到左遞迴匹配的，過深的層級巢狀不僅影響效能，而且還會導致樣式閱讀性和程式碼維護性降低，一般層架控制在5層之內
雙引號
屬性選擇器中的值必須用雙引號包圍，不允許使用單引號，也不允許不使用引號，html的屬性值也是推薦使用雙引號，js中使用單引號
.custom-style{
font-family: "PingFang SC", "STHeitiSC-Light";
}
屬性順序
同一 規則下的屬性在書寫時，應按功能進行分組。並以 Formatting Model(佈局方式、位置) > Box Model(尺寸) > Typographic(文字相關) > Visual(視覺效果) 的順序書寫，以提高程式碼的可讀性。
解釋：
- Formatting Model 相關屬性包括：position / top / right / bottom / left / float / display / overflow 等
- Box Model 相關屬性包括：border / margin / padding / width / height 等
- Typographic 相關屬性包括：font / line-height / text-align / word-wrap 等
- Visual 相關屬性包括：background / color / transition / list-style 等
另外，為增加可讀性，如果包含 content 屬性，應放在屬性的最前面。
素材來源：轉自Vue中文社群
