开发者社区> 技术小阿哥> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Mobile First! Wijmo 5 之 架构

简介:
+关注继续查看

本文就开发者关心的话题之一架构,展开叙述。

wijmo_javascript[3]

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,这使得开发非常容易。如,使用它创建了控件基类(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 modemyFlexGrid.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和redrawmyFlexGrid.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)

非强类型,无智能感知

设计时语法检测

无语法检测

运行时错误提示

运行时很少错误提示

 


本文转自 powertoolsteam 51CTO博客,原文链接:http://blog.51cto.com/powertoolsteam/1566685,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Swift:FileManager+Extension
Swift:FileManager+Extension
75 0
精选 82 道 Linux 系统管理员笔试填空题(附答案)
本文内容来源于网络,是个不错的知识总结,内容涵盖磁盘、文件系统及网络管理常用命令。花十分钟浏览一下即可获取全方位Linux基础知识。说不定什么时候就用上了呢?
181 0
泛微Ecology9+Emobile7部署
泛微OA的平台化,相比之下,的确是很不错,为方便公司内部考勤,加班审批,报销等流程,这边采用泛微的E9
1635 0
lmbench内存延迟测试代码分析
lmbench有很多测试集, lat_mem_rd是用来测试内存延迟的 # 使用方法 ./bin/x86_64-linux-gnu/lat_mem_rd 1 16 #./bin/x86_64-linux-gnu/lat_mem_rd 1(范围, 单位M) 16(步长) "stride=16 0.00049 1.584(单位M, 512字节范围内, 步长16访问延迟, 为什么显示
6497 0
Ubuntu14.04+Nginx+PHP+MySQL+EduSoho[推荐-标准环境-文档]
版权声明:转载请注明出处:http://blog.csdn.net/dajitui2024 https://blog.csdn.net/dajitui2024/article/details/79396609 ...
1112 0
Ubuntu Nginx uwsgi django 初试
/************************************************************************************** * Ubuntu Nginx uwsgi django 初试 * 说明: * 最近打算通过Python搭建一个数据收集的网站,先做一个搭建测试。
913 0
歪理邪说解析架构设计师上午考试试题之四(分析2010下半年系统架构设计师上午试题16-20题)
歪理邪说解析架构设计师上午考试试题之四 分析2010下半年系统架构设计师上午试题16-20题 【引言】 1.一直期待专业的技术话题也能和《明朝哪些事》一样,有趣和好玩,能吸引大家的去阅读,并享受其乐趣; 2.培养对技术的兴趣,有时候比掌握技术本身更重要;一旦有了浓厚的兴趣,自己主动就会主动去探寻,去发现技术的秘密。
906 0
13688
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载