Javascript類庫(kù)的頂層對(duì)象名用戶體驗(yàn)分析
更新時(shí)間:2010年10月24日 19:56:08 作者:
針對(duì)jQuery、Ext、KISSY三者類庫(kù)的對(duì)比及分析已經(jīng)很多了,但多數(shù)是從功能和設(shè)計(jì)的角度切入,因此本篇文章決定換一個(gè)特殊的角度,從各類庫(kù)的頂層對(duì)象名的鍵盤輸入的體驗(yàn)上來(lái)對(duì)這三個(gè)類庫(kù)進(jìn)行比較。
由于頂級(jí)對(duì)象是使用類庫(kù)幾乎所有功能的入口,在編碼中會(huì)頻繁地輸入這幾個(gè)字符,因此在設(shè)計(jì)類庫(kù)時(shí),頂級(jí)對(duì)象名輸入的簡(jiǎn)便性也是相當(dāng)重要的。
在此將從對(duì)象名稱的長(zhǎng)度、輸入對(duì)象名稱的按鍵順序這兩個(gè)方面對(duì)三個(gè)類庫(kù)進(jìn)行重點(diǎn)比較,同時(shí)力求照顧到一些特別的點(diǎn),從而得出一個(gè)較為全面的評(píng)測(cè)結(jié)果。
名稱長(zhǎng)度
jQuery共有6個(gè)字符組成,從長(zhǎng)度上而言是三個(gè)類庫(kù)中最長(zhǎng)的一個(gè),同時(shí)包含了一個(gè)大寫字母Q,在輸入過(guò)程中需要加入一次SHIFT鍵,因此長(zhǎng)度值給定為7。
Ext共有3個(gè)字符組成,在長(zhǎng)度上是最有優(yōu)勢(shì)的,由于首字母為大寫字母E,輸入過(guò)程中需要有一次SHIFT,因此長(zhǎng)度值給定為4。
KISSY由5個(gè)字符組成,均為大寫字母,長(zhǎng)度上而言接近jQuery,同時(shí)需要一次SHIFT鍵的長(zhǎng)按,因此給定長(zhǎng)度值6。
在名稱長(zhǎng)度的對(duì)比上,最受歡迎的jQuery以微弱的劣勢(shì)惜敗,但jQuery使用了其他的方式在這方面給予了改進(jìn),將在后文中提及。
按鍵順序
按鍵順序的分析比較復(fù)雜,這里涉及的原則主要有以下幾點(diǎn)
盡可能地交叉使用左右手輸入每一個(gè)字符。
盡可能避免同一手指連續(xù)使用。
盡可能地減少長(zhǎng)按某個(gè)按鍵的時(shí)間。
食指和中指較為靈活,因此盡可能避免使用小指和無(wú)名指。
較為接近的兩個(gè)手指容易出現(xiàn)聯(lián)動(dòng)的現(xiàn)象,即當(dāng)小指移動(dòng)時(shí),無(wú)名指也會(huì)反射性進(jìn)行微幅度的移動(dòng),這可能影響到下一次按鍵,因此盡可能避免并列的手指連動(dòng)。
在評(píng)測(cè)中,將雙手從左手小指至右手小指,依次編號(hào)為0-9,從數(shù)字上觀察將會(huì)發(fā)現(xiàn)一些有趣的現(xiàn)象。
jQuery的按鍵順序依次是606236,在輸入的過(guò)程中
有一次使用了較不靈活的左手小指。
在上一條的基礎(chǔ)上補(bǔ)充,事實(shí)上在按Q的時(shí)候需要用左手小指按住SHIFT鍵,因此Q其實(shí)是交給原本不負(fù)責(zé)Q鍵的左手無(wú)名指。
在輸入大寫Q時(shí)左手小指和無(wú)名指有連動(dòng)的現(xiàn)象,而且不是順序連動(dòng),而是同時(shí)敲擊。
e和r由左手中指和食指連續(xù)敲擊,可能出現(xiàn)并列的手指連動(dòng)的影響。但是在實(shí)際輸入過(guò)程中,筆者發(fā)現(xiàn)食指和中指的連動(dòng)不但沒(méi)有效率上的影響,反而對(duì)速度有促進(jìn)作用,反思該過(guò)程,發(fā)現(xiàn)中指和食指連續(xù)敲擊桌面是筆者在思考時(shí)經(jīng)常做的動(dòng)作,因此形成了一種極為高效熟練的反射運(yùn)動(dòng)……
Ext的按鍵順序依次是213,輸入過(guò)程中發(fā)現(xiàn)有以下問(wèn)題
所有按鍵來(lái)自左手,右手完全空閑,無(wú)法達(dá)到理論的最高輸入速度。但是由于在輸入Ext的過(guò)程中,右手可以同時(shí)去定位.這個(gè)按鍵,因此對(duì)于整行語(yǔ)句的輸入影響并不是很大。
輸入大寫的E時(shí),左手小指需要按住SHIFT鍵,而緊接著輸入x時(shí),左手無(wú)名指按下的前瞬間要求小指放開SHIFT鍵,由于這兩個(gè)手指很容易出現(xiàn)聯(lián)動(dòng)的反映,因此對(duì)左手按x鍵的定位精準(zhǔn)性有著較大的影響。
KISSY的按鍵順序依次是77116,這大概是幾個(gè)類庫(kù)中最糟糕的鍵位順序了
出現(xiàn)右手中指、左手無(wú)名指連續(xù)按鍵現(xiàn)象,右手中指甚至需要在按2個(gè)鍵位的過(guò)程中進(jìn)行移動(dòng),嚴(yán)重影響輸入速度。
在速個(gè)輸入過(guò)程中,左手小指需要長(zhǎng)按SHIFT鍵,小指是所有手指中最沒(méi)有力量的,長(zhǎng)按非字母的遠(yuǎn)位鍵會(huì)對(duì)小指造成極大的壓力,長(zhǎng)期輸入小指關(guān)節(jié)會(huì)變得僵硬,這已經(jīng)可以上升到開發(fā)人員健康的高度了……
在小指長(zhǎng)按SHIFT的過(guò)程中,有連續(xù)2次左手無(wú)名指的輸入,原本無(wú)名指和小指就容易出現(xiàn)聯(lián)動(dòng)反映,因此在無(wú)名指不斷對(duì)同一個(gè)點(diǎn)(S鍵)加力、卸力的過(guò)程中,小指會(huì)跟著無(wú)名指出現(xiàn)力量增強(qiáng)、減弱的現(xiàn)象,最壞情況將導(dǎo)致SHIFT鍵被松開。這種力量的突發(fā)性增強(qiáng)和減弱對(duì)手指關(guān)節(jié)也有著不可忽視的傷害,因此在輸入KISSY這幾個(gè)字符的過(guò)程中,我們左手的小指是偉大的,他頂住了千千萬(wàn)萬(wàn)的壓力,最終光榮地完成了任務(wù)!
其他
jQuery通過(guò)使用別名$,將原本較為復(fù)雜的對(duì)象名變成了一個(gè)簡(jiǎn)單的字符,同時(shí)也不忘本地提供了noConflict函數(shù)用于釋放$變量,這一點(diǎn)上想得非常周全。
Ext由于對(duì)象組織的原因,調(diào)用一個(gè)函數(shù)通常需要輸入更多的路徑,例好jQuery(selector)在Ext中將變成Ext.Element.query(selector),在這一點(diǎn)上,Ext已經(jīng)將部分常用的函數(shù)推到了Ext對(duì)象之下,如Ext.Element.fly變?yōu)镋xt.fly,Ext.DomQuery.select變?yōu)镋xt.query等,但就總體的代碼量而言,相比jQuery是有劣勢(shì)的。
KISSY兼具了Ext的模塊化結(jié)構(gòu)組織,同時(shí)也引入了Ext的函數(shù)訪問(wèn)路徑過(guò)長(zhǎng)的問(wèn)題,由于Javascript中的with語(yǔ)句存在這樣那樣的問(wèn)題,而使用別名代替層級(jí)較深的對(duì)象也會(huì)有這樣那樣的問(wèn)題,因此此類問(wèn)題并不容易規(guī)避。
為什么不分析YUI?因?yàn)樵?jīng)習(xí)慣Ext,后期jQuery用得多,KISSY是在筆者進(jìn)入前端這個(gè)領(lǐng)域之后興起的關(guān)注也較多,YUI從頭到尾沒(méi)有接觸是筆者的一大遺憾,同時(shí)也讓筆者失去了在本文中評(píng)測(cè)該框架的權(quán)利。
總結(jié)
我們將通過(guò)以下的方式給各個(gè)類庫(kù)打個(gè)分
長(zhǎng)度得分為10-長(zhǎng)度值。
按鍵順序滿分為10,每出現(xiàn)一個(gè)問(wèn)題扣去1分,出現(xiàn)特別嚴(yán)重的問(wèn)題扣去2分。
最終結(jié)果見(jiàn)下表
名稱長(zhǎng)度 按鍵順序 備注
jQuery 3 6
Ext 6 7 訪問(wèn)函數(shù)路徑過(guò)長(zhǎng)扣1分
KISSY 4 3 幾個(gè)問(wèn)題比較嚴(yán)重多扣4分
最后聲明:筆者絕對(duì)沒(méi)有黑KISSY的意思,反之對(duì)KISSY的設(shè)計(jì)、模塊分隔、實(shí)現(xiàn)等有著深厚的興趣,只是此文僅從頂層對(duì)象名稱的輸入體驗(yàn)上進(jìn)行評(píng)測(cè),在這一點(diǎn)上KISSY確實(shí)選擇了一個(gè)糟糕的名字。
在此將從對(duì)象名稱的長(zhǎng)度、輸入對(duì)象名稱的按鍵順序這兩個(gè)方面對(duì)三個(gè)類庫(kù)進(jìn)行重點(diǎn)比較,同時(shí)力求照顧到一些特別的點(diǎn),從而得出一個(gè)較為全面的評(píng)測(cè)結(jié)果。
名稱長(zhǎng)度
jQuery共有6個(gè)字符組成,從長(zhǎng)度上而言是三個(gè)類庫(kù)中最長(zhǎng)的一個(gè),同時(shí)包含了一個(gè)大寫字母Q,在輸入過(guò)程中需要加入一次SHIFT鍵,因此長(zhǎng)度值給定為7。
Ext共有3個(gè)字符組成,在長(zhǎng)度上是最有優(yōu)勢(shì)的,由于首字母為大寫字母E,輸入過(guò)程中需要有一次SHIFT,因此長(zhǎng)度值給定為4。
KISSY由5個(gè)字符組成,均為大寫字母,長(zhǎng)度上而言接近jQuery,同時(shí)需要一次SHIFT鍵的長(zhǎng)按,因此給定長(zhǎng)度值6。
在名稱長(zhǎng)度的對(duì)比上,最受歡迎的jQuery以微弱的劣勢(shì)惜敗,但jQuery使用了其他的方式在這方面給予了改進(jìn),將在后文中提及。
按鍵順序
按鍵順序的分析比較復(fù)雜,這里涉及的原則主要有以下幾點(diǎn)
盡可能地交叉使用左右手輸入每一個(gè)字符。
盡可能避免同一手指連續(xù)使用。
盡可能地減少長(zhǎng)按某個(gè)按鍵的時(shí)間。
食指和中指較為靈活,因此盡可能避免使用小指和無(wú)名指。
較為接近的兩個(gè)手指容易出現(xiàn)聯(lián)動(dòng)的現(xiàn)象,即當(dāng)小指移動(dòng)時(shí),無(wú)名指也會(huì)反射性進(jìn)行微幅度的移動(dòng),這可能影響到下一次按鍵,因此盡可能避免并列的手指連動(dòng)。
在評(píng)測(cè)中,將雙手從左手小指至右手小指,依次編號(hào)為0-9,從數(shù)字上觀察將會(huì)發(fā)現(xiàn)一些有趣的現(xiàn)象。
jQuery的按鍵順序依次是606236,在輸入的過(guò)程中
有一次使用了較不靈活的左手小指。
在上一條的基礎(chǔ)上補(bǔ)充,事實(shí)上在按Q的時(shí)候需要用左手小指按住SHIFT鍵,因此Q其實(shí)是交給原本不負(fù)責(zé)Q鍵的左手無(wú)名指。
在輸入大寫Q時(shí)左手小指和無(wú)名指有連動(dòng)的現(xiàn)象,而且不是順序連動(dòng),而是同時(shí)敲擊。
e和r由左手中指和食指連續(xù)敲擊,可能出現(xiàn)并列的手指連動(dòng)的影響。但是在實(shí)際輸入過(guò)程中,筆者發(fā)現(xiàn)食指和中指的連動(dòng)不但沒(méi)有效率上的影響,反而對(duì)速度有促進(jìn)作用,反思該過(guò)程,發(fā)現(xiàn)中指和食指連續(xù)敲擊桌面是筆者在思考時(shí)經(jīng)常做的動(dòng)作,因此形成了一種極為高效熟練的反射運(yùn)動(dòng)……
Ext的按鍵順序依次是213,輸入過(guò)程中發(fā)現(xiàn)有以下問(wèn)題
所有按鍵來(lái)自左手,右手完全空閑,無(wú)法達(dá)到理論的最高輸入速度。但是由于在輸入Ext的過(guò)程中,右手可以同時(shí)去定位.這個(gè)按鍵,因此對(duì)于整行語(yǔ)句的輸入影響并不是很大。
輸入大寫的E時(shí),左手小指需要按住SHIFT鍵,而緊接著輸入x時(shí),左手無(wú)名指按下的前瞬間要求小指放開SHIFT鍵,由于這兩個(gè)手指很容易出現(xiàn)聯(lián)動(dòng)的反映,因此對(duì)左手按x鍵的定位精準(zhǔn)性有著較大的影響。
KISSY的按鍵順序依次是77116,這大概是幾個(gè)類庫(kù)中最糟糕的鍵位順序了
出現(xiàn)右手中指、左手無(wú)名指連續(xù)按鍵現(xiàn)象,右手中指甚至需要在按2個(gè)鍵位的過(guò)程中進(jìn)行移動(dòng),嚴(yán)重影響輸入速度。
在速個(gè)輸入過(guò)程中,左手小指需要長(zhǎng)按SHIFT鍵,小指是所有手指中最沒(méi)有力量的,長(zhǎng)按非字母的遠(yuǎn)位鍵會(huì)對(duì)小指造成極大的壓力,長(zhǎng)期輸入小指關(guān)節(jié)會(huì)變得僵硬,這已經(jīng)可以上升到開發(fā)人員健康的高度了……
在小指長(zhǎng)按SHIFT的過(guò)程中,有連續(xù)2次左手無(wú)名指的輸入,原本無(wú)名指和小指就容易出現(xiàn)聯(lián)動(dòng)反映,因此在無(wú)名指不斷對(duì)同一個(gè)點(diǎn)(S鍵)加力、卸力的過(guò)程中,小指會(huì)跟著無(wú)名指出現(xiàn)力量增強(qiáng)、減弱的現(xiàn)象,最壞情況將導(dǎo)致SHIFT鍵被松開。這種力量的突發(fā)性增強(qiáng)和減弱對(duì)手指關(guān)節(jié)也有著不可忽視的傷害,因此在輸入KISSY這幾個(gè)字符的過(guò)程中,我們左手的小指是偉大的,他頂住了千千萬(wàn)萬(wàn)的壓力,最終光榮地完成了任務(wù)!
其他
jQuery通過(guò)使用別名$,將原本較為復(fù)雜的對(duì)象名變成了一個(gè)簡(jiǎn)單的字符,同時(shí)也不忘本地提供了noConflict函數(shù)用于釋放$變量,這一點(diǎn)上想得非常周全。
Ext由于對(duì)象組織的原因,調(diào)用一個(gè)函數(shù)通常需要輸入更多的路徑,例好jQuery(selector)在Ext中將變成Ext.Element.query(selector),在這一點(diǎn)上,Ext已經(jīng)將部分常用的函數(shù)推到了Ext對(duì)象之下,如Ext.Element.fly變?yōu)镋xt.fly,Ext.DomQuery.select變?yōu)镋xt.query等,但就總體的代碼量而言,相比jQuery是有劣勢(shì)的。
KISSY兼具了Ext的模塊化結(jié)構(gòu)組織,同時(shí)也引入了Ext的函數(shù)訪問(wèn)路徑過(guò)長(zhǎng)的問(wèn)題,由于Javascript中的with語(yǔ)句存在這樣那樣的問(wèn)題,而使用別名代替層級(jí)較深的對(duì)象也會(huì)有這樣那樣的問(wèn)題,因此此類問(wèn)題并不容易規(guī)避。
為什么不分析YUI?因?yàn)樵?jīng)習(xí)慣Ext,后期jQuery用得多,KISSY是在筆者進(jìn)入前端這個(gè)領(lǐng)域之后興起的關(guān)注也較多,YUI從頭到尾沒(méi)有接觸是筆者的一大遺憾,同時(shí)也讓筆者失去了在本文中評(píng)測(cè)該框架的權(quán)利。
總結(jié)
我們將通過(guò)以下的方式給各個(gè)類庫(kù)打個(gè)分
長(zhǎng)度得分為10-長(zhǎng)度值。
按鍵順序滿分為10,每出現(xiàn)一個(gè)問(wèn)題扣去1分,出現(xiàn)特別嚴(yán)重的問(wèn)題扣去2分。
最終結(jié)果見(jiàn)下表
名稱長(zhǎng)度 按鍵順序 備注
jQuery 3 6
Ext 6 7 訪問(wèn)函數(shù)路徑過(guò)長(zhǎng)扣1分
KISSY 4 3 幾個(gè)問(wèn)題比較嚴(yán)重多扣4分
最后聲明:筆者絕對(duì)沒(méi)有黑KISSY的意思,反之對(duì)KISSY的設(shè)計(jì)、模塊分隔、實(shí)現(xiàn)等有著深厚的興趣,只是此文僅從頂層對(duì)象名稱的輸入體驗(yàn)上進(jìn)行評(píng)測(cè),在這一點(diǎn)上KISSY確實(shí)選擇了一個(gè)糟糕的名字。
您可能感興趣的文章:
- JavaScript體驗(yàn)異步更好的解決辦法
- vue.js 初體驗(yàn)之Chrome 插件開發(fā)實(shí)錄
- 幾個(gè)優(yōu)化WordPress中JavaScript加載體驗(yàn)的插件介紹
- nodejs初步體驗(yàn)篇
- JavaScript實(shí)現(xiàn)統(tǒng)計(jì)文本框Textarea字?jǐn)?shù)增強(qiáng)用戶體驗(yàn)
- JS+CSS實(shí)現(xiàn)的一種交互體驗(yàn) 表單頁(yè)面
- js驗(yàn)證符合用戶體驗(yàn)的網(wǎng)頁(yè)表單特效
- 用javascript實(shí)現(xiàn)改善用戶體驗(yàn)之a(chǎn)lert提示效果
- JS如何讓你的移動(dòng)端交互體驗(yàn)更加優(yōu)秀
相關(guān)文章
LayUi使用switch開關(guān),動(dòng)態(tài)的去控制它是否被啟用的方法
今天小編就為大家分享一篇LayUi使用switch開關(guān),動(dòng)態(tài)的去控制它是否被啟用的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09OpenLayer學(xué)習(xí)之自定義測(cè)量控件
這篇文章主要為大家詳細(xì) 介紹了OpenLayer學(xué)習(xí)之自定義測(cè)量控件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09ECharts實(shí)現(xiàn)數(shù)據(jù)超出Y軸最大值max但不隱藏
這篇文章主要為大家介紹了ECharts實(shí)現(xiàn)數(shù)據(jù)超出Y軸最大值max但不隱藏實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10僅IE6/7/8中innerHTML返回值忽略英文空格的問(wèn)題
僅IE6/7/8中innerHTML返回值忽略英文空格的問(wèn)題,需要此問(wèn)題的朋友可以參考下。2011-04-04JavaScript實(shí)現(xiàn)生成GUID(全局統(tǒng)一標(biāo)識(shí)符)
這篇文章主要介紹了JavaScript實(shí)現(xiàn)生成GUID(全局統(tǒng)一標(biāo)識(shí)符),本文寫成了一個(gè)GUID生成類,使用也非常方便,需要的朋友可以參考下2014-09-09js 原生判斷內(nèi)容區(qū)域是否滾動(dòng)到底部的實(shí)例代碼
下面筆者就為大家分享一篇js 原生判斷內(nèi)容區(qū)域是否滾動(dòng)到底部的實(shí)例代碼,具有很好的參考價(jià)值,希望對(duì)大家有所幫助2017-11-11詳解JavaScript中關(guān)于this指向的4種情況
這篇文章主要介紹了JavaScript中關(guān)于this指向的4種情況,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04