|
針對jQuery、Ext、KISSY三者類庫的對比及分析已經很多了,但多數是從功能和設計的角度切入,因此本篇文章決定換一個特殊的角度,從各類庫的頂層對象名的鍵盤輸入的體驗上來對這三個類庫進行比較。
由于頂級對象是使用類庫幾乎所有功能的入口,在編碼中會頻繁地輸入這幾個字符,因此在設計類庫時,頂級對象名輸入的簡便性也是相當重要的。
在此將從對象名稱的長度、輸入對象名稱的按鍵順序這兩個方面對三個類庫進行重點比較,同時力求照顧到一些特別的點,從而得出一個較為全面的評測結果。
名稱長度
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確實選擇了一個糟糕的名字。
it知識庫:Javascript類庫的頂層對象名用戶體驗分析,轉載需保留來源!
鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。