vue 項目其餘規範

列表

• vuex數據管理
  * 數據模塊化：vuex數據管理－數據模塊化
  • 數據適配：vuex數據管理－數據適配
  • 數據共享：vuex數據管理－數據共享
• 路由優化
  • keep-alive組件設置
  • 保留滾動位置
    連接：vue路由管理－保留滾動位置功能、按需加載模塊名自定義
• webpack配置
  • 按需加載包名稱自定義
    連接：vue路由管理－保留滾動位置功能、按需加載模塊名自定義
• z-index疊層規範
• 基礎佈局的惟一性
• 組件的相關規範

z-index疊層規範

• lever1：普通content：1-99；
• lever2：header、footer、廣告、頁面tips等在內容之上，但又與內容相關性較大的；層：100-199；
• lever3：返回頂部等頁面工具類：200-299；
• lever4：popup、picker等浮在頁面上的操做層：300-399；
• lever5：loading：400-499；
• lever6： toast等直接遮罩在頁面上的warning、error信息：500-599。

基礎佈局

結構

• .page
  • header
  • footer
  • content

規範

每一個頁面僅容許一組基礎佈局，這爲組件加載、交互、分層提供掛載、容器等基礎。

緣由

若是出現多套，將會影響公共組件引入的準確性和靈活性；也會影響功能的擴展等。

示例：totop組件

從引入組件的角度上看，做爲一個基礎浮動的工具組件，不該該關注實際業務及根插銷，直接動態加載到基礎佈局當中便可。若是有多個嵌套的基礎佈局，將須要更多的代碼，來辨別其插入點，也會失去靈活性，因此從組件的角度，惟一佈局很重要。

從功能角度上看，它須要監控頁面的滾動位置，在這種佈局下，其須要監控content的位置狀況，若是出現多個基礎佈局，將影響功能的使用。

組件的相關規範

加載方式

a、業務組件：可根據業務需求選擇相應加載方式；

b、基礎組件：儘可能使用動態加載的方式，如popup、pick、loading這些浮層組件。其優點以下：

• 能夠對使用者（開發人員）屏蔽加載點；
• 防止疊層錯亂（業務組件引入基礎浮層組件，若是非動態加載，浮層將於內容層交錯，致使樣式疊層錯亂，要作額外的hack等）；
• 有利於單頁跳轉時，組件的統一清除。

數據流

• a、基礎組件：使用props加載數據，不關注業務；
• b、業務組件：抽象業務組件的業務範圍，抽象數據結構，從vuex中進行取值，增強vuex數據的複用及組件的複用。

如何區分業務組件和基礎組件：以地址picker爲例。其首先是基礎的picker組件，可實現多列滾動，每次滾動都會產生一個惟一的結果數組，確認之後，返回該結果數組。該基礎picker組件能夠擴展成動態請求數據的地址picker，也能夠是固定值的多級picker，到底須要哪一種，就與業務相關。所以，地址picker，是對基礎組件picker的擴展，其包含數據流的存取過程，及數據流的交互，異步請求等。

組件升級

• 接口：對於公共組件，多人的調用的業務組件，須要作到舊接口的兼容。
• 兼容方式：提供一個新舊接口交替期，在該時期，新舊接口並存，開發者將組件往新的接口上遷移，遷移完成以後，組件設計者，再將舊接口移除。

疊層的定義 公共組件，能夠根據給出的z-index規範，給出組件的z-index疊層id；但其取值儘可能在該組件類型疊層規範數值範圍的中間值，便於同類型業務組件的向下向上疊層處理。