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,这使得开发非常容易。如,使用它创建了控件基类(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) |
非强类型,无智能感知 |
设计时语法检测 |
无语法检测 |
运行时错误提示 |
运行时很少错误提示 |
架构师访谈:《Wijmo 5 CTO:从Web到移动,我的25年编程生涯》
Mobile First! Wijmo 5 之 架构相关推荐
- Mobile first! Wijmo 5 + Ionic Framework之:Hello World!
Ionic是什么? Ionic是一个HTML5框架.免费.开源,用于帮助生成hybird mobile Apps (混合移动应用). Ionic包含3部分: CSS 样式:用于渲染Web页面,使得页面 ...
- Windows Mobile与OPhone开发对比
转载自IT168 [ http://www.it168.com/ ] Windows Mobile在经历过最初的Wince系列,pockect pc和smartphone两种版本,到微软最 ...
- 欢迎Fork我们的开源云手机项目--OPENVMI(Virtual Mobile Infrastructure)(VMI)
OPENVMI Github地址:https://github.com/DockDroid/openvmi 联合开发单位: 鹏城实验室(PCL) 江苏北弓智能科技有限公司(Begoit) 概述 基于A ...
- Linux智能手机安全策略研究
Linux智能手机安全策略研究 http://www.zdnet.com.cn 本文是继从"窃听门"事件解读手机Rootkit***(http://chenguang.blog. ...
- CVPR 2020文本图像检测与识别论文/代码
向AI转型的程序员都关注了这个号???????????? 机器学习AI算法工程 公众号:datayx CVPR 2020 共收录 1470篇文章,算法主要领域:图像与视频处理,图像分类&检 ...
- 关于安卓手机的一些专业名称解释
1.hboot(SPL) 这里指的是手机上的启动模块,通俗的说,就是负责手机启动引导的一段程序,类似于电脑主板上的BIOS,都是负责底层操作的.和在电脑上刷新BIOS一样,刷错了,电脑就会开不了机,对 ...
- 【论文翻译】X3D: Expanding Architectures for Efficient Video Recognition
参考 X3D: Expanding Architectures for Efficient Video Recognition个人论文笔记 X3D: Expanding Architectures f ...
- 移动业务安全厂商指掌易完成2亿元B轮融资
雷锋网(公众号:雷锋网)10月15日消息,移动业务安全厂商指掌易科技宣布完成2亿元B轮融资,由高成资本领投,长安私人资本和苹果资本跟投,指数资本担任独家财务顾问.本轮融资将主要用于产品研发与市场拓展等 ...
- Android Qcom lcd display 学习(3)
Android Display整体架构 Android 图形组件 Android Graphic analyze display:高通display overview MDP(mobile displ ...
- 细说新一代HTML5/JavaScript的UI控件wijmo5 的新架构
Wijmo 5是一组JavaScript控件,但是不要与Widgets混淆.在此前开发Wijmo的时候,我们能够用像jQuery UI和jQuery Mobile Widget 框架来构建它,同时也为 ...
最新文章
- [JS] 事件冒泡,阻止事件冒泡,事件的三个阶段(捕获,目标,冒泡)
- 使用MakeCAB.exe命令创建CAB文件
- 我是一名黑客我也是一名程序员
- linux nat span端口镜像,SPAN端口镜像
- 前6个最常用的Redis库
- shell 字符串分割
- C#将Json字符串反序列化成List对象类集合
- PHP面向对象相关特性
- 程序员创业的两难困境
- MySQL在Windows和Linux减少数据库
- python语言源程序文件类型_浅谈Python的文件类型
- str.trim()去除空格
- 简单Beautiful Soup教程
- windows 7可用软件搜索贴~(转)(申请置顶)
- 《软件工程导论》考研复试整理
- 【EasyX图形库】c语言贪吃蛇-音乐-图片-界面比较美观
- latex 参考文献没有显示_LaTeX 参考文献的处理
- 我是如何通过系统架构设计师考试的(2017年软考)-转载
- 闭关修炼——one——struts2
- 联想台式计算机配置单,联想台式电脑报价 联想电脑配置参数
热门文章
- [公告]新增项目交流区
- 开放源码软件的安装(tar包安装方法)
- linux 6.7 ifcfg eth0,centos 的ifcfg-eth0只有只读权限,怎么修改其内容呢?
- mysql外键约束_mysql 外键约束
- 线程?进程?-----该停下来思考一下了
- Uboot下SPI FLASH的添加(SPI 控制器采用软件模拟的方式)
- Linux网络编程之connect创建
- apache-xmlrpc-3.1.3-bin.tar.bz2
- linux内核中等待队列(wait_event,wake_up...)
- 多核时代不宜再用 x86 的 RDTSC 指令测试指令周期和时间