CSDN移動開發(fā)頻道率先報道的《Mobile First！jQuery UI組件集Wijmo五年大更新》引起開發(fā)者極大關(guān)注。
本文就開發(fā)者關(guān)心的話題之一架構(gòu)，展開敘述。
Wijmo 5是一組JavaScript控件，但是不要與Widgets混淆。在此前開發(fā)Wijmo的時候，我們能夠用像jQuery UI和jQuery Mobile Widget 框架來構(gòu)建它，同時也為我們構(gòu)建Web框架--Wijmo節(jié)省了時間。
但是，當(dāng)我們希望構(gòu)建一個更現(xiàn)代的Wijmo 5，我們認(rèn)為現(xiàn)在是時候重新審視JavaScript UI組件，尤其是語法和API接口。在做了大量的研究和討論后，我們使用了“真正的JavaScript控件（true JavaScript Controls）”，如你在.NET中使用類似的屬性，方法和事件等API，同樣的在JavaScript UI組件的使用方法幾乎完全相同。
同時，我們選擇IE9作為Wijmo 5瀏覽器支持的基準(zhǔn)版本，因為IE9支持ECMAScript 5語法，而這點對我們的Wijmo 5架構(gòu)非常關(guān)鍵，由此創(chuàng)造了新的Wijmo 5架構(gòu)。
ECMAScript 5 Controls
我們的Wijmo 5框架直接采用了ECMAScript 5。我們的源碼使用TypeScript，這使得開發(fā)非常容易。如，使用它創(chuàng)建了控件基類(Base Control Class), 所有的控件均派生自該基類。
JS的控件如同類對象一樣，大小寫敏感，且提供了構(gòu)造函數(shù)用于初始化，同時也提供了屬性、方法、事件。
如，F(xiàn)lexGrid控件可通過如下方法進(jìn)行初始化：
重慶分公司
重慶分公司
//初始化FlexGrid實例對象為一個DOM element var myFlexGrid = new wijmo.grid.FlexGrid('#FlexGrid1');屬性
在我們的ES 5控件中，我們采用了Object.defineProperty()。這種方法使得我們可以在JS下像使用.NET控件一樣便捷。因為，這種方法允許我們定義屬性的getters和setters接口，因此，我們可以按照寫.NET代碼的邏輯思路直接調(diào)用屬性，非常方便。
設(shè)置控件的屬性非常方便，直接賦值即可，完全不用通過函數(shù)調(diào)用來實現(xiàn)。
//設(shè)置FlexGrid可編輯myFlexGrid.isReadOnly = false;
還可通過類似的方法對事件進(jìn)行賦值、檢查屬性是否有值。 如果IDE支持只能感知(如VS 2013), 則可通過智能感知的自動完成功能來對控件屬性賦值。智能感知對于使用控件來說，非常便捷，可以很好的提高工作效率。
為了方便，同樣提供了枚舉(Enums)
//設(shè)置FlexGrid的selection modemyFlexGrid.selectionMode = wijmo.grid.SelectionMode.CellRange;
屬性還可通過標(biāo)準(zhǔn)的JS對象方式獲得，如，您可以通過如下方法獲得控件的get屬性接口：
//檢查FlexGrid是否可編輯var readOnly = myFlexGrid.isReadOnly;
如果你熟練的使用.NET語法編程，那么你會非常熟悉這些屬性方法。如果你熟練的使用JS編程，那么對這種優(yōu)美的API接口也會喜歡。
可以對比看如下的對Wijmo Grid Widget賦值語法：
//Wijmo的 Grid Widget允許可編輯$('#WijmoGrid1').wijgrid('option', 'allowEditing', true);這種語法可稱為“字符串類型編程”，依賴于字符串的大小寫來設(shè)置屬性值，如設(shè)置錯誤，則不會報錯，這個對開發(fā)調(diào)試將會非常麻煩。
方法
Wijmo 5中的方法使用起來非常方便，可直接通過控件調(diào)用控件對應(yīng)的方法，且調(diào)試比較方便。
//刷新FlexGrid控件，以引起relayout和redrawmyFlexGrid.refresh();
對比JS Widget 調(diào)用刷新的方法
//刷新Wijmo Grid Widget$('#WijmoGrid1').wijgrid('doRefresh');如同上面的屬性一樣，依賴字符串大小寫調(diào)用方法，調(diào)試錯誤則非常麻煩。
事件
Wijmo 5控件中的事件使用，如同.NET控件中的一樣，可通過addHandler、removeHandler訂閱、取消訂閱事件。
//FlexGrid cell編輯完成事件myFlexGrid.cellEditEnded.addHandler(function (sender, args) {//Do something});對應(yīng)的JS Widget 訂閱事件的語法：
//訂閱Wijmo cell 編輯完成事件$('#WijmoGrid1').bind('wijgridaftercelledit', function (e, args) {//Do something});Controls vs. Widgets
綜上所述，下面用表對Wijmo 5 Control和JS Widget進(jìn)行對比
Wijmo 5 Controls | JS Widgets |
使用TypeScript類，提供類JavaScript構(gòu)造函數(shù) | Functions接口，通過設(shè)置JavaScript對象屬性 |
EcmaScript 5：屬性有g(shù)etters 和 setters接口 | 使用“options”的屬性，通過設(shè)置子參數(shù) |
直接設(shè)置屬性值 | 通過調(diào)用函數(shù)實現(xiàn)屬性賦值 |
通過控件的實例調(diào)用方法 | 以傳遞函數(shù)名字符串方式進(jìn)行方法調(diào)用 |
通過在事件調(diào)用addHandler訂閱 | 通過使用bind()，并以字符串方式傳遞widget name + even name訂閱事件 |
IDEs提供智能感知（依賴IDE） | 非強(qiáng)類型，無智能感知 |
設(shè)計時語法檢測 | 無語法檢測 |
運行時錯誤提示 | 運行時很少錯誤提示 |
架構(gòu)師訪談：《Wijmo 5 CTO：從Web到移動，我的25年編程生涯》
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
