“AppCan的前端開發其實非常簡單，只要掌握兩方面的技術即可。一方面是會使用柵格佈局完成UI的介面排版，另外一方面就是使用AppCan MVVM模型來完成整個頁面構造和使用者操作邏輯。”在2016AppCan移動開發者大會的技術脫口秀環節， AppCan技術副總監陳雪分享了自己從事AppCan技術開發的經驗，幫助開發者深入瞭解AppCan技術思路。

以下為完整精彩內容：

柵格佈局

AppCan採用彈性盒子模型作為標準化的的柵格佈局參考方案,幫助開發者更快速的完成介面的排版工作。為什麼是彈性盒子模型呢？彈性盒子模型是目前針對於移動端的最方便、最便捷、最高效的佈局方案，它可以解決目前市場上日漸紛雜的移動裝置的螢幕差異性問題。

彈性盒子模型

下面通過一個直觀的搜尋框的例子來為大家講解彈性盒子模型。

這個搜尋框可以看作一個整體，在這個整體中又分為搜尋按鈕和輸入框兩部分。通常實現這個搜尋框時，也許為了適配各種解析度而採用百分比的方式，這種方式會很難確定具體的百分比。如果使用彈性盒子則會更加簡單。

首先搜尋框整體是一個box，左側搜尋圖示通過固定寬度的方式確定，剩下的右側輸入框可以通過box中的box-flex:1屬性將其自動撐開，從而實現輸入框無論在怎樣的解析度下都會佔滿螢幕剩餘的寬度。

想像一下，將螢幕看成一個大豆腐塊，然後將這塊大豆腐塊分割成各種大小不一的豆腐塊，在每個豆腐塊中我們可以根據需要再對其進行分割，這就是柵格。它可以更好的適配不同的解析度，不同的移動裝置。

柵格佈局例項

左側這個條目就是使用的AppCan的柵格佈局方式實現的。

這個條目是列表中的一條，我們將這一條看作一個box，在這個box中又分為了3部分，其中頭像、姓名區域採取固定寬度佔位，剩餘的頭銜區域使用box-flex屬性將螢幕剩餘寬度撐滿。

這個例子只是使用了彈性盒子模型中的兩個簡單屬性就實現了佈局。彈性盒子模型同時還提供如對齊方式、縱向排列、反向排列等屬性，這些屬性可以滿足各種的UI佈局要求。

佈局只是開發最基本的，通過彈性盒子模型，我們可以很快開發出適應所有分辨和裝置的介面，但佈局並不能完成所有的功能，如我們還需完成互動、功能、邏輯等操作，這部分還需要程式碼進行開發。

傳統前端開發模式

硬程式碼開發

在傳統開發模式中硬程式碼開發，資料、展現、邏輯等混合在一起。彼此相互參雜，你中有我，我中有你，整體看起來就會非常混亂。

劣勢：

1. 由於展現、資料和邏輯都混合到一起，從而程式碼的可讀性就會很差，很難完成知識的轉移和交付。

2. 介面變更修改複雜，無法快速除錯。問題出來了，無法快速定位問題所在。

3.維護複雜，容易在修復中出現新bug。

4. 資料處理功能單一，若出現排序、篩選等工作，需要重新編寫程式碼。

UI展示控制元件化

相對於傳統前端開發模式硬程式碼開發，將UI展示進行控制元件化，封裝按鈕、treeview、列表等控制元件，此種方式的優勢是對UI和互動部分進行控制元件化封裝，提高了複用性。 

劣勢：

1. 當需要對資料進行排序、篩選等標準處理時，需要對控制元件進行重構。

2. 需要專人維護，無法由一線團隊進行快速調整

3. 可變更性差，無法滿足使用者快速多樣化UI需求

怎麼辦？業界經過實踐，採取MVVM開發模式進行解決。

MVVM開發模式

MVVM開發模式分離檢視view和資料model，通過自動化指令碼實現自動化關聯，viewModel搭起了檢視與資料的橋樑，同時在viewmodel裡進行互動及邏輯處理。view其實就是html，dom，資料model就是要處理的json資料。

優勢：

1. 低耦合，將view和model進行分離，兩者其中一方變更時，另一方不會受到影響。

2. 重用性，無論是view、viewmodel還是model，三者都可以進行重用，提高了開發效率。

3. HTML 模板化，修改模板不影響邏輯和資料，模板可直接除錯。

4. 資料自動處理，Model實現了標準的資料處理封裝，例如排序、篩選等。

5. 雙向繫結，通過DOM和MODEL雙向繫結使資料更新自動化，縮減了開發時間。

鑑於MVVM模式的優勢，AppCan 結合MVVM，誕生AppCanMVVM開發模式，這個就是AppCanMVVM前端開發模型。

在這個模型中，view-dom就是用來展示的html頁面，資料模型model就是要處理的json資料，viewmodel將view-dom及model自動關聯起來，在viewmodel中處理程式碼邏輯，使用者互動程式碼等。model中的資料通過service呼叫各種api，如我們的mas開發的介面，實現增刪改查等操作。

AppCan MVVM例項

以下為登入頁面的html程式碼：

在標亮的部分，value代表我需要input標籤中的value值與資料模型中的username欄位進行雙向變更，validname是過濾方法，它來對username這個屬性進行校驗，下面的value，password也是這樣的處理方式。當我們在input標籤中輸入使用者或密碼的時候，資料模型中的username和password欄位會自動變更，當我在model中變更username和password中的資料，網頁中的輸入框中也會自動顯示其資料。

在這段程式碼中我們要實現自動化關聯，首先第一件事是構建它的資料模型model，同時它要構建一個dom元素el，form是所關聯的區域，將網頁中的form標籤所在的dom指向到這個viewmodel中。bindingFilters是自定義過濾器，完成username的一個校驗，這裡面只是簡單寫了一個value，其實可以寫一個正則表示式來進行username的校驗。submitLogin就是資料的提交，在提交時只要呼叫model的save就可以。

這是資料模型的程式碼：

我們會發現頁面中使用者名稱的位置自動出現admin，這個是model中初始化username欄位導致的。

model.save會觸發sync方法，在sync方法我們編寫service所對應的函式，就會把我們的model中的資料提交到伺服器。

service中最終實現伺服器對接，完成伺服器的對映。

這樣view-dom處理html介面，model處理資料，view-model處理關聯，service對接伺服器，讓開發人員把合適的程式碼放在合適的位置。從而保證程式碼的穩定性。

AppCan是目前國內唯一具有大型專案實踐經驗的開放性平臺，從以上AppCan MVVM技術支撐架構可看出，通過這個開發標準的採用，AppCan已經統一了移動混合應用開發、移動網站開發和PC網站開發的開發框架，這種模式讓開發人員基於同一套開發規範語言上完成應用的構建，減少專案的知識的轉移性和交融性，同時保證開發程式碼的穩定性。