Javascript类库的顶层对象名用户体验分析


Posted in Javascript onOctober 24, 2010

由于顶级对象是使用类库几乎所有功能的入口,在编码中会频繁地输入这几个字符,因此在设计类库时,顶级对象名输入的简便性也是相当重要的。

在此将从对象名称的长度、输入对象名称的按键顺序这两个方面对三个类库进行重点比较,同时力求照顾到一些特别的点,从而得出一个较为全面的评测结果。

名称长度
jQuery共有6个字符组成,从长度上而言是三个类库中最长的一个,同时包含了一个大写字母Q,在输入过程中需要加入一次SHIFT键,因此长度值给定为7。

Ext共有3个字符组成,在长度上是最有优势的,由于首字母为大写字母E,输入过程中需要有一次SHIFT,因此长度值给定为4。

KISSY由5个字符组成,均为大写字母,长度上而言接近jQuery,同时需要一次SHIFT键的长按,因此给定长度值6。

在名称长度的对比上,最受欢迎的jQuery以微弱的劣势惜败,但jQuery使用了其他的方式在这方面给予了改进,将在后文中提及。

按键顺序
按键顺序的分析比较复杂,这里涉及的原则主要有以下几点

尽可能地交叉使用左右手输入每一个字符。
尽可能避免同一手指连续使用。
尽可能地减少长按某个按键的时间。
食指和中指较为灵活,因此尽可能避免使用小指和无名指。
较为接近的两个手指容易出现联动的现象,即当小指移动时,无名指也会反射性进行微幅度的移动,这可能影响到下一次按键,因此尽可能避免并列的手指连动。
在评测中,将双手从左手小指至右手小指,依次编号为0-9,从数字上观察将会发现一些有趣的现象。

jQuery的按键顺序依次是606236,在输入的过程中

有一次使用了较不灵活的左手小指。
在上一条的基础上补充,事实上在按Q的时候需要用左手小指按住SHIFT键,因此Q其实是交给原本不负责Q键的左手无名指。
在输入大写Q时左手小指和无名指有连动的现象,而且不是顺序连动,而是同时敲击。
e和r由左手中指和食指连续敲击,可能出现并列的手指连动的影响。但是在实际输入过程中,笔者发现食指和中指的连动不但没有效率上的影响,反而对速度有促进作用,反思该过程,发现中指和食指连续敲击桌面是笔者在思考时经常做的动作,因此形成了一种极为高效熟练的反射运动……
Ext的按键顺序依次是213,输入过程中发现有以下问题

所有按键来自左手,右手完全空闲,无法达到理论的最高输入速度。但是由于在输入Ext的过程中,右手可以同时去定位.这个按键,因此对于整行语句的输入影响并不是很大。
输入大写的E时,左手小指需要按住SHIFT键,而紧接着输入x时,左手无名指按下的前瞬间要求小指放开SHIFT键,由于这两个手指很容易出现联动的反映,因此对左手按x键的定位精准性有着较大的影响。
KISSY的按键顺序依次是77116,这大概是几个类库中最糟糕的键位顺序了

出现右手中指、左手无名指连续按键现象,右手中指甚至需要在按2个键位的过程中进行移动,严重影响输入速度。
在速个输入过程中,左手小指需要长按SHIFT键,小指是所有手指中最没有力量的,长按非字母的远位键会对小指造成极大的压力,长期输入小指关节会变得僵硬,这已经可以上升到开发人员健康的高度了……
在小指长按SHIFT的过程中,有连续2次左手无名指的输入,原本无名指和小指就容易出现联动反映,因此在无名指不断对同一个点(S键)加力、卸力的过程中,小指会跟着无名指出现力量增强、减弱的现象,最坏情况将导致SHIFT键被松开。这种力量的突发性增强和减弱对手指关节也有着不可忽视的伤害,因此在输入KISSY这几个字符的过程中,我们左手的小指是伟大的,他顶住了千千万万的压力,最终光荣地完成了任务!
其他
jQuery通过使用别名$,将原本较为复杂的对象名变成了一个简单的字符,同时也不忘本地提供了noConflict函数用于释放$变量,这一点上想得非常周全。

Ext由于对象组织的原因,调用一个函数通常需要输入更多的路径,例好jQuery(selector)在Ext中将变成Ext.Element.query(selector),在这一点上,Ext已经将部分常用的函数推到了Ext对象之下,如Ext.Element.fly变为Ext.fly,Ext.DomQuery.select变为Ext.query等,但就总体的代码量而言,相比jQuery是有劣势的。

KISSY兼具了Ext的模块化结构组织,同时也引入了Ext的函数访问路径过长的问题,由于Javascript中的with语句存在这样那样的问题,而使用别名代替层级较深的对象也会有这样那样的问题,因此此类问题并不容易规避。

为什么不分析YUI?因为曾经习惯Ext,后期jQuery用得多,KISSY是在笔者进入前端这个领域之后兴起的关注也较多,YUI从头到尾没有接触是笔者的一大遗憾,同时也让笔者失去了在本文中评测该框架的权利。

总结
我们将通过以下的方式给各个类库打个分

长度得分为10-长度值。
按键顺序满分为10,每出现一个问题扣去1分,出现特别严重的问题扣去2分。
最终结果见下表

名称长度 按键顺序 备注
jQuery 3 6
Ext 6 7 访问函数路径过长扣1分
KISSY 4 3 几个问题比较严重多扣4分

最后声明:笔者绝对没有黑KISSY的意思,反之对KISSY的设计、模块分隔、实现等有着深厚的兴趣,只是此文仅从顶层对象名称的输入体验上进行评测,在这一点上KISSY确实选择了一个糟糕的名字。

Javascript 相关文章推荐
再说AutoComplete自动补全之实现原理
Nov 05 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
Jan 24 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
Apr 01 Javascript
详谈commonjs模块与es6模块的区别
Oct 18 Javascript
实例分析js事件循环机制
Dec 13 Javascript
vue组件挂载到全局方法的示例代码
Aug 02 Javascript
ES6 系列之 WeakMap的使用示例
Aug 06 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
Oct 10 Javascript
小程序绑定用户方案优化小结
May 15 Javascript
JS阻止事件冒泡的方法详解
Aug 26 Javascript
JS动态显示倒计时效果
Dec 12 Javascript
Javascript模块化机制实现原理详解
Apr 02 Javascript
让ie运行js时提示允许阻止内容运行的解决方法
Oct 24 #Javascript
javascript 隔行换色函数代码
Oct 24 #Javascript
JavaScript类库D
Oct 24 #Javascript
一个简单的JavaScript数据缓存系统实现代码
Oct 24 #Javascript
Javascript 类型转换方法
Oct 24 #Javascript
js创建对象的几种常用方式小结(推荐)
Oct 24 #Javascript
JavaScript arguments 多参传值函数
Oct 24 #Javascript
You might like
Terran兵种对照表
2020/03/14 星际争霸
国内php原创论坛
2006/10/09 PHP
Thinkphp5框架实现图片、音频和视频文件的上传功能详解
2019/08/27 PHP
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
2009/07/06 Javascript
JavaScript让IE浏览器event对象符合W3C DOM标准
2009/11/24 Javascript
JS删除数组元素的函数介绍
2013/03/27 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
2013/04/08 Javascript
javascript常用对话框小集
2013/09/13 Javascript
JQuery判断HTML元素是否存在的两种解决方法
2013/12/26 Javascript
js控制容器隐藏出现防止样式变化的两种方法
2014/04/25 Javascript
Nodejs进程管理模块forever详解
2014/06/01 NodeJs
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
2015/01/22 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
AngularJS中run方法的巧妙运用
2017/01/04 Javascript
three.js快速入门【推荐】
2017/01/21 Javascript
nodejs中sleep功能实现暂停几秒的方法
2017/07/12 NodeJs
Vue.js用法详解
2017/11/13 Javascript
JavaScript指定断点操作实例教程
2018/09/18 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
2018/09/18 Javascript
Node.js API详解之 zlib模块用法分析
2020/05/19 Javascript
Vue基于localStorage存储信息代码实例
2020/11/16 Javascript
[02:51]2014DOTA2 TI小组赛总结中国军团全部进军钥匙球馆
2014/07/15 DOTA
[02:49]DAC2018决赛日TOP5 LGD开启黑暗之门绝杀VP
2018/04/08 DOTA
python进阶教程之动态类型详解
2014/08/30 Python
python 实现创建文件夹和创建日志文件的方法
2019/07/07 Python
postman和python mock测试过程图解
2020/02/22 Python
基于pycharm实现批量修改变量名
2020/06/02 Python
Python根据字符串调用函数过程解析
2020/11/05 Python
HTML5新增加的功能详解
2016/09/05 HTML / CSS
迪士尼英国官方商店:shopDisney UK
2019/09/21 全球购物
职业生涯规划书基本格式
2014/01/06 职场文书
学校运动会霸气口号
2014/06/07 职场文书
python中的None与NULL用法说明
2021/05/25 Python
继承Win10缺点!教你关闭Win11烦人的网络搜索
2021/11/23 数码科技
大脑的记忆过程在做数据压缩,不同图形也有共同的记忆格式
2022/04/29 数码科技
使用HBuilder制作一个简单的HTML5网页
2022/07/07 HTML / CSS