首页 > 代码库 > Mobile First! Wijmo 5 之 架构

Mobile First! Wijmo 5 之 架构

??

CSDN移动开发频道领先报道的《Mobile First!

jQuery UI组件集Wijmo五年最大更新》引起开发人员极大关注。

本文就开发人员关心的话题之中的一个架构,展开叙述。

技术分享

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 5 Controls

我们的Wijmo 5框架直接採用了ECMAScript 5。我们的源代码使用TypeScript,这使得开发很easy。如,使用它创建了控件基类(Base Control Class), 全部的控件均派生自该基类。

JS的控件如同类对象一样。大写和小写敏感,且提供了构造函数用于初始化。同一时候也提供了属性、方法、事件。

如。FlexGrid控件可通过例如以下方法进行初始化:

//初始化FlexGrid实例对象为一个DOM element
 var myFlexGrid = new wijmo.grid.FlexGrid(‘#FlexGrid1‘);

 

属性

在我们的ES 5控件中,我们採用了Object.defineProperty()。

这样的方法使得我们能够在JS下像使用.NET控件一样便捷。由于,这样的方法同意我们定义属性的getters和setters接口,因此,我们能够依照写.NET代码的逻辑思路直接调用属性,很方便。

设置控件的属性很方便,直接赋值就可以,全然不用通过函数调用来实现。

//设置FlexGrid可编辑
myFlexGrid.isReadOnly = false;

还可通过相似的方法对事件进行赋值、检查属性是否有值。 假设IDE支持仅仅能感知(如VS 2013), 则可通过智能感知的自己主动完毕功能来对控件属性赋值。智能感知对于使用控件来说,很便捷,能够很好的提高工作效率。

为了方便。相同提供了枚举(Enums)

//设置FlexGrid的selection mode
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对象属性

EcmaScript 5:属性有getters 和 setters接口

使用“options”的属性。通过设置子參数

直接设置属性值

通过调用函数实现属性赋值

通过控件的实例调用方法

以传递函数名字符串方式进行方法调用

通过在事件调用addHandler订阅

通过使用bind(),并以字符串方式传递widget name + even name订阅事件

IDEs提供智能感知(依赖IDE)

非强类型,无智能感知

设计时语法检測

无语法检測

执行时错误提示

执行时很少错误提示

 

架构师訪谈:《Wijmo 5 CTO:从Web到移动,我的25年编程生涯》

Mobile First! Wijmo 5 之 架构