细说新一代HTML5/JavaScript的UI控件wijmo5 的新架构

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 = new wijmo.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 进行对比

欢迎各位朋友一起探讨学习！

相关资料链接：

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

本文出自 “学海无涯” 博客，请务必保留此出处http://9929657.blog.51cto.com/9919657/1613981

原文：http://9929657.blog.51cto.com/9919657/1613981