论坛首页 Web前端技术论坛

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

浏览 3757 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2015-02-16  

Wijmo 5是一组JavaScript控件,但是不要与Widgets混淆。在此前开发Wijmo的时候,我们能够用像jQuery UIjQuery 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控件中的一样,可通过addHandlerremoveHandler订阅、取消订阅事件。

 

 

//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 ControlJS Widget进行对比

 

 

 

 

 

 

  

 

Wijmo 5  Controls

 

  
  

 

JS Widgets

 

  
  

 

使用TypeScript类,提供类JavaScript构造函数

 

  
  

 

Functions接口,通过设置JavaScript对象属性

 

  
  

 

EcmaScript 5:属性有getters setters接口

 

  
  

 

使用“options”的属性,通过设置子参数

 

  
  

 

直接设置属性值

 

  
  

 

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

 

  
  

 

通过控件的实例调用方法

 

  
  

 

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

 

  
  

 

通过在事件调用addHandler订阅

 

  
  

 

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

 

  
  

 

IDEs提供智能感知(依赖IDE

 

  
  

 

非强类型,无智能感知

 

  
  

 

设计时语法检测

 

  
  

 

无语法检测

 

  
  

 

运行时错误提示

 

  
  

 

运行时很少错误提示

 

  

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

 

 

 

 

 

相关资料链接:

 

 

 

 

 

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

论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics