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 相关文章推荐
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
Jan 13 Javascript
JavaScript实现简单的时钟实例代码
Nov 23 Javascript
javascript实现一个简单的弹出窗
Feb 22 Javascript
基于javascript制作经典传统的拼图游戏
Mar 22 Javascript
基于AngularJS实现iOS8自带的计算器
Sep 12 Javascript
深入理解Javascript中的观察者模式
Feb 20 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
Sep 18 Javascript
Vue SSR 组件加载问题
May 02 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
Mar 13 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
Feb 24 Javascript
在Vue 中获取下拉框的文本及选项值操作
Aug 13 Javascript
JavaScript最完整的深浅拷贝实现方式详解
Feb 28 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
PHP的开合式多级菜单程序
2006/10/09 PHP
PHP中利用substr_replace将指定两位置之间的字符替换为*号
2011/01/27 PHP
PHP删除数组中特定元素的两种方法
2013/07/02 PHP
Ubuntu中搭建Nginx、PHP环境最简单的方法
2015/03/05 PHP
php curl 模拟登录并获取数据实例详解
2016/12/22 PHP
一键生成各种尺寸Icon的php脚本(实例)
2017/02/08 PHP
javascript Object与Function使用
2010/01/11 Javascript
在Javascript里访问SharePoint列表数据的实现方法
2011/05/22 Javascript
ExtJS[Desktop]实现图标换行示例代码
2013/11/17 Javascript
初识SmartJS - AOP三剑客
2014/06/08 Javascript
tuzhu_req.js 实现仿百度图片首页效果
2015/08/11 Javascript
JavaScript function函数种类详解
2016/02/22 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
2016/09/05 Javascript
js实现表单提交后不重新刷新当前页面
2016/11/30 Javascript
node简单实现一个更改头像功能的示例
2017/12/29 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
2019/10/30 Javascript
django简单的前后端分离的数据传输实例 axios
2020/05/18 Javascript
Sublime Text3 配置 NodeJs 环境的方法
2020/05/20 NodeJs
[19:54]夜魇凡尔赛茶话会 第一期02:看图识人
2021/03/11 DOTA
python使用BeautifulSoup分析网页信息的方法
2015/04/04 Python
python-opencv 将连续图片写成视频格式的方法
2019/01/08 Python
一文了解Python并发编程的工程实现方法
2019/05/31 Python
Django用户认证系统 组与权限解析
2019/08/02 Python
python中删除某个元素的方法解析
2019/11/05 Python
在 Python 中接管键盘中断信号的实现方法
2020/02/04 Python
python 深度学习中的4种激活函数
2020/09/18 Python
Python全局变量与global关键字常见错误解决方案
2020/10/05 Python
使用HTML5的Notification API制作web通知的教程
2015/05/08 HTML / CSS
英国豪华装饰照明品牌的在线零售商:Inspyer Lighting
2019/12/10 全球购物
高中生职业生涯规划书
2014/02/24 职场文书
记账会计岗位职责
2014/06/16 职场文书
陈胜吴广起义口号
2014/06/20 职场文书
寒假安全保证书
2015/02/28 职场文书
建筑质检员岗位职责
2015/04/08 职场文书
如果用一句诗总结你的上半年,你会用哪句呢?
2019/07/16 职场文书
使用JS前端技术实现静态图片局部流动效果
2022/08/05 Javascript