提高weex佈局開發效率的一點點總結
加入weex開發小組已有幾個月的時間，經歷了從一開始的磕磕碰碰到現在能夠獨立負責一個專案的開發。期間整理了一份開發入門文件，也一直在總結效率更高的開發方式。
在開發專案的過程中，我們往往會開啟以下幾個視窗：
- 產品文件
- 互動文件
- UI圖
- HTML檔案
- 樣式檔案
- vue檔案
比如，開發一個這樣的頁面： 
僅僅在頁面佈局的開發階段，我們就需要頻繁的來回切換HTML檔案和樣式檔案，以及很多冗餘的樣式程式碼。像這樣：
<div class="box"> <div class="month"> <text class="month-text">2018年7月</text> </div> <div class="cell"> <div class="cell-header"> <div class="row"> <image></image> <text class="cell-time">2018-07-30 18:36:44</text> </div> <text class="cell-status">超時未申訴</text> </div> <text class="cell-name">普通交通違法（佔用機動車道、未佩戴安全頭盔等）一行顯示不下換行</text> <text class="cell-punish">扣罰 ¥ 115.0，賬號永久禁用，一行顯示不下就換行顯示</text> </div> </div>
.box{
padding-left: 30px;
padding-right: 30px;
}
.month{
height: 80px;
justify-content: center;
}
.month-text{
font-size: 32px;
color: #666;
}
.cell{
background-color: #fff;
border-radius: 6px;
padding-left: 30px;
padding-right: 30px;
}
.cell-header{
flex-direction: row;
justify-content: space-between;
}
.cell-time{
font-size: 28px;
color: #929292;
}
...
可以看到，很多時候，我們都是在寫重複的樣式，特別是字型、顏色、邊距等等。
其實，UI部門對於APP頁面的設計，在這幾年的傳承下，會遵循一定的設計標準，我們只需總結規律，提取一套通用的樣式檔案，便可以使我們在開發過程中專注於頁面結構的開發，而不至於頻繁的切換檔案、頻繁的寫重複樣式、頻繁的為class取名……
那麼，即是作為一套公用樣式，它便需要有以下幾個特點：
- 全面性
- 靈活性
- 易用性
全面性 顧名思義是要求這套樣式是可以滿足開發過程中的大部分場景的。我在編寫過程中大致分為了幾塊內容：佈局（包括flex相關、寬高、邊距等）、字型、顏色、邊框等。
靈活性 即將class拆分到最小單位，一個class代表一個樣式，各個class之間可以任意組合，以達到最終需要的頁面效果。
易用性 所見即所得，從UI圖上看到設計稿以後，不需要經過額外的思考，很自然的就將需要的class組合成需要的樣式。關於這一點，我在設計通用樣式的class名稱時，儘量使用最簡單的字母+數字的命名方式，比如，設計稿上要求字型顏色 #666 字號16號，那麼只需在html檔案寫
<text class="f16 c6">xxx</text>
在通用樣式裡， f 代表字號， c 代表字型顏色，因為我們在寫 font-size 時，一定會先敲 f ，所以這種命名非常容易記憶。
.f16{
font-size: 32px;
/*在weex開發時，需要將設計稿的尺寸放大2倍開發，之所以命名是f16，而不是f32，是為了在看到設計稿的一瞬間就反應到f16上，而非再多一層放大2倍計算的思考*/
}
.c6{
color: #666;
}
再比如，在使用通用樣式前，已經用到了兩次的內邊距佈局：
<div class="pl15 pr15">xxx</div>
.pl15{
padding-left: 30px;
}
.pr15{
padding-right: 30px;
}
從截圖中可以看到，我在開發違規記錄列表頁時，遇到特殊情況需要新寫樣式的情況只有2次。只需引入公用樣式，整個開發過程順暢無比，愉悅度up，up，up！ 
有同學會覺得將公用檔案打包進來會增加檔案大小，我看了下，引入公用檔案後的打包檔案大小是230K，未引入則是228K，這點差距完全可以忽略不計。更何況，不引入的情況下，還需要自己寫另外的樣式，實際情況會比2K的差距更小。
當然，目前公用樣式檔案還不夠強大，需要weex組同學一起完善它。
以上一些我自己的小想法，本人才疏學淺，若有不足，望各位指正。