Wijmo 5是一組JavaScript控件，但是不要與Widgets混淆。在此前開發Wijmo的時候，我們能夠用像jQuery UI和jQuery Mobile Widget框架來構建它，同時也為我們構建Web框架--Wijmo節省了時間。

創新互聯專注于長清企業網站建設,響應式網站開發,購物商城網站建設。長清網站建設公司,為長清等地區提供建站服務。全流程定制網站，專業設計，全程項目跟蹤，創新互聯專業和態度為您提供的服務

但是，當我們希望構建一個更現代的Wijmo 5，我們認為現在是時候重新審視JavaScript UI組件，尤其是語法和API接口。在做了大量的研究和討論后，我們使用了“真正的JavaScript控件（true JavaScript Controls）”，如你在.NET中使用類似的屬性，方法和事件等API，同樣的在JavaScript UI組件的使用方法幾乎完全相同。

同時，我們選擇IE9作為Wijmo 5瀏覽器支持的基準版本，因為IE9支持ECMAScript 5語法，而這點對我們的Wijmo 5架構非常關鍵，由此創造了新的Wijmo 5架構。

ECMAScript 5Controls

我們的Wijmo 5框架直接采用了ECMAScript 5。我們的源碼使用TypeScript，這使得開發非常容易。如，使用它創建了控件基類(Base Control Class),所有的控件均派生自該基類。

JS的控件如同類對象一樣，大小寫敏感，且提供了構造函數用于初始化，同時也提供了屬性、方法、事件。

如，FlexGrid控件可通過如下方法進行初始化：

//初始化FlexGrid實例對象為一個DOM element

 var myFlexGrid =newwijmo.grid.FlexGrid('#FlexGrid1');

 

屬性

在我們的ES 5控件中，我們采用了Object.defineProperty()。這種方法使得我們可以在JS下像使用.NET控件一樣便捷。因為，這種方法允許我們定義屬性的getters和setters接口，因此，我們可以按照寫.NET代碼的邏輯思路直接調用屬性，非常方便。

設置控件的屬性非常方便，直接賦值即可，完全不用通過函數調用來實現。

//設置FlexGrid可編輯

myFlexGrid.isReadOnly=false;

還可通過類似的方法對事件進行賦值、檢查屬性是否有值。如果IDE支持只能感知(如VS 2013),則可通過智能感知的自動完成功能來對控件屬性賦值。智能感知對于使用控件來說，非常便捷，可以很好的提高工作效率。

為了方便，同樣提供了枚舉(Enums)

//設置FlexGrid的selectionmode

myFlexGrid.selectionMode= wijmo.grid.SelectionMode.CellRange;

屬性還可通過標準的JS對象方式獲得，如，您可以通過如下方法獲得控件的get屬性接口：

//檢查FlexGrid是否可編輯

var readOnly = myFlexGrid.isReadOnly;

如果你熟練的使用.NET語法編程，那么你會非常熟悉這些屬性方法。如果你熟練的使用JS編程，那么對這種優美的API接口也會喜歡。

可以對比看如下的對Wijmo Grid Widget賦值語法：

//Wijmo的 Grid Widget允許可編輯

$('#WijmoGrid1').wijgrid('option','allowEditing',true);

這種語法可稱為“字符串類型編程”，依賴于字符串的大小寫來設置屬性值，如設置錯誤，則不會報錯，這個對開發調試將會非常麻煩。

方法

Wijmo 5中的方法使用起來非常方便，可直接通過控件調用控件對應的方法，且調試比較方便。

//刷新FlexGrid控件，以引起relayout和redraw

myFlexGrid.refresh();

對比JS Widget調用刷新的方法

//刷新Wijmo Grid Widget

$('#WijmoGrid1').wijgrid('doRefresh');

如同上面的屬性一樣，依賴字符串大小寫調用方法，調試錯誤則非常麻煩。

事件

Wijmo 5控件中的事件使用，如同.NET控件中的一樣，可通過addHandler、removeHandler訂閱、取消訂閱事件。

//FlexGrid cell編輯完成事件

myFlexGrid.cellEditEnded.addHandler(function (sender, args) {

//Do something

 

});

對應的JS Widget訂閱事件的語法：

//訂閱Wijmo cell 編輯完成事件

$('#WijmoGrid1').bind('wijgridaftercelledit',function (e, args) {

//Do something

 

});

 

Controls vs.Widgets

綜上所述，下面用表對Wijmo 5 Control和JS Widget進行對比

Wijmo 5 Controls	JS Widgets
使用TypeScript類，提供類JavaScript構造函數	Functions接口，通過設置JavaScript對象屬性
EcmaScript5：屬性有getters和 setters接口	使用“options”的屬性，通過設置子參數
直接設置屬性值	通過調用函數實現屬性賦值
通過控件的實例調用方法	以傳遞函數名字符串方式進行方法調用
通過在事件調用addHandler訂閱	通過使用bind()，并以字符串方式傳遞widget name + even name訂閱事件
IDEs提供智能感知（依賴IDE）	非強類型，無智能感知
設計時語法檢測	無語法檢測
運行時錯誤提示	運行時很少錯誤提示

歡迎各位朋友一起探討學習！

相關資料鏈接：

http://www.evget.com/product/3506

當前標題：細說新一代HTML5/JavaScript的UI控件wijm
文章地址：http://vcdvsql.cn/article12/pphegc.html

成都網站建設公司_創新互聯，為您提供網站導航、網站設計公司、手機網站建設、微信小程序、營銷型網站建設、服務器托管

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯