當前位置:吉日网官网 - 油畫收藏 - 前端必須搜索組代碼規範的Vue版本。

前端必須搜索組代碼規範的Vue版本。

Nordon規範與每個團隊和個人息息相關,因為它不僅影響代碼維護和理解的成本,還影響成員開發的心情。壹個團隊的編碼規範和git規範沒有絕對的最優解,所以要清楚的明白沒有銀彈,規範是為了統壹團隊,提高代碼可讀性,降低代碼維護成本。本文記錄了項目代碼評審中的壹些常見規範,僅供參考。

默認情況下,vue中的數據將被綁定為雙向數據。如果將大量與渲染無關的數據直接放在數據中,那麽在雙向數據綁定中消耗的性能就會被浪費掉。提取這些與渲染無關的數據,並用Object.freeze處理它們。可以提取壹個外部js文件作為表中列數據的配置文件,也可以在當前。vue文件來定義列數據。因為數據是固定的,無論如何都不會被修改,所以妳應該用Object.freeze來包裝它,這樣既能提高性能又能提取固定的數據。對於壹些下拉框前面的固定數據,也建議這樣操作。

壹個頁面中通常有許多功能不同的項目符號框。如果每個項目符號框都設置了相應的變量來控制其顯示,那麽變量的數量將是多余的,命名也將是困難的。您可以使用變量來控制同壹頁面中所有模式項目符號框的顯示。例如,壹個頁面中有三個模態項目符號框。

比如遠程搜索需要通過接口動態獲取數據。如果用戶每次都輸入接口請求,會浪費帶寬和性能。當壹個按鈕被多次點擊時,會導致多個觸發事件。我們可以結合場景立即執行immediate。

在功能開發過程中,圖片處理往往是壹個容易被忽略的環節,也會在壹定程度上影響開發效率和頁面性能。

用props去耦合組件和路由:而不是用$route去耦合

通過props進行解耦允許您在任何地方使用組件,從而更容易重用和測試。

參考:工藝路線組件傳遞參數

在父子組件中,掌握父子組件對應的生命周期鉤子的加載順序,可以讓開發者在更合適的時間做正確的事情。

組件

加載時父子組件的加載順序。

銷毀父子組件時的銷毀順序。

在實際的開發過程中,當子組件的某個生命周期完成時會通知父組件,然後在父組件中進行相應的處理。

Hook通過@hook監聽子組件的生命周期。

在遍歷下拉框時,需要註意保持選項標簽在同壹行。如果有換行符,所選值中會有多余的空格。

您需要將選項和下拉框的值保持在同壹行。

數據數據是有層次結構的,不要太扁平化,也不要嵌入太深。如果扁平化太多,會導致數據命名空間沖突,參數傳遞和處理。如果嵌套太深,也會導致vue數據被劫持時遞歸層次太深。如果嵌套層次很瘋狂,要小心遞歸棧爆炸的問題。而且層次太深會導致數據操作處理不方便,獲取數據進行容錯處理也很繁瑣。壹般最好保持2-3層。如果只有壹層數據,那就太平了。

導致操作不便。

合適的層次結構不僅可以增加代碼的可維護性和可讀性,還可以增加操作和處理的便利性。

妳可以給人做手術。

使用策略模式可以避免過多的if else判斷,也可以代替簡單的邏輯切換。

解構賦值和默認值。當解構次數少於多少時,適合直接解構並賦默認值。數據是否與聚合處理相關?

嘗試在任何時候為壹個函數做壹件事,而不是把各種邏輯耦合在壹起,提高單個函數的可重用性和可讀性。每個頁面都會請求數據,並在加載時顯示給頁面。

寫模板模板的時候,如果屬性太多,要不要換行?

Html顯示類似這樣的內容

在開發中修改第三方組件的樣式是很常見的,但是由於作用域屬性的樣式隔離,可能有必要移除作用域或開始新的樣式。這些做法會帶來副作用(組件樣式汙染和缺乏優雅),樣式穿透只有在css預處理器中使用才會生效。

適當的空格可以提高代碼的閱讀體驗,使其更加優雅美觀。

而html類型,當壹行有很多屬性時,適當的換行符可以提高閱讀性和美觀性。

解析css時,瀏覽器從右到左遞歸匹配。過深的層次嵌套不僅影響性能,還會降低樣式可讀性和代碼可維護性。壹般貨架控制在5層以內。

屬性選擇器中的值必須用雙引號括起來,不允許使用單引號。html屬性值也建議使用雙引號,js中使用單引號。

同壹規則下的屬性,寫的時候要按功能分組。並使用格式模型(布局模式,位置) >:框模型(大小) >排版(文字相關) >視覺(視覺效果)順序書寫,提高代碼的可讀性。解釋:

另外,為了增加可讀性,如果包含內容屬性,應該放在屬性的前面。

  • 上一篇:涼席裏會有蟲子嗎?註意收納。
  • 下一篇:匠心獨運,琴藝傳承制琴師(丁越師傅)帶您聆聽琵琶最美聲音
  • copyright 2024吉日网官网