User experience analysis of top-level object names in Javascript class libraries_javascript skills

Since the top-level object is the entrance to almost all functions of the class library, these characters will be entered frequently during coding. Therefore, when designing the class library, the simplicity of entering the top-level object name is also very important.

Here we will focus on comparing the three class libraries from two aspects: the length of the object name and the key sequence for inputting the object name. At the same time, we will try to take into account some special points, so as to draw a more comprehensive comparison. Evaluation results.

Name length
jQuery consists of a total of 6 characters, which is the longest of the three libraries in terms of length. It also contains a capital letter Q, which is entered when entering A SHIFT key needs to be added during the process, so the length value is given as 7.

Ext consists of 3 characters, which is the most advantageous in terms of length. Since the first letter is the capital letter E, a SHIFT is required during the input process, so the length value is given as 4.

KISSY consists of 5 characters, all in uppercase letters. The length is close to jQuery. It also requires a long press of the SHIFT key, so the length value is 6.

In the comparison of name length, the most popular jQuery lost at a slight disadvantage, but jQuery used other methods to improve in this regard, which will be mentioned later.

Key sequence
The analysis of key sequence is more complicated. The main principles involved here are the following points.

Use your left and right hands as much as possible to input each character.
Avoid using the same finger continuously if possible.
Minimize the time you press and hold a key as much as possible.
The index and middle fingers are more flexible, so avoid using the little finger and ring finger as much as possible.
Two fingers that are relatively close to each other are prone to linkage. That is, when the little finger moves, the ring finger will reflexively move slightly, which may affect the next key press. Therefore, avoid linkage of parallel fingers as much as possible.
During the evaluation, number both hands from 0-9 from the little finger of the left hand to the little finger of the right hand. You will find some interesting phenomena when observing the numbers.

The key sequence of jQuery is 606236. During the input process,

once used the less flexible little finger of the left hand.
Based on the previous article, in fact, when pressing Q, you need to hold down the SHIFT key with the little finger of your left hand, so Q is actually given to the left ring finger that is not originally responsible for the Q key.
When typing the capital Q, the little finger and ring finger of the left hand move together, and they do not move sequentially, but tap at the same time.
e and r are tapped continuously by the middle finger and index finger of the left hand, which may cause the effect of parallel finger movement. However, during the actual input process, the author found that the linked movement of the index finger and the middle finger not only had no effect on efficiency, but actually promoted the speed. Reflecting on the process, I found that continuously tapping the table with the middle finger and index finger was an action I often did when thinking. , thus forming an extremely efficient and skillful reflex movement...
The key sequence of Ext is 213. During the input process, the following problems were found

All keys come from the left hand, and the right hand is completely free, unable to achieve the theory the maximum input speed. However, since the right hand can locate the . key at the same time during the input of Ext, it does not have a great impact on the input of the entire line of statements.
When inputting a capital E, the little finger of the left hand needs to hold down the SHIFT key. When inputting x, the little finger of the left hand is required to release the SHIFT key immediately before pressing it with the ring finger of the left hand. Because these two fingers are prone to linkage reactions, Therefore, it has a greater impact on the positioning accuracy of pressing the x key with the left hand.
KISSY’s key sequence is 77116, which is probably the worst key sequence among several libraries.

There is a phenomenon of continuous key pressing with the middle finger of the right hand and the ring finger of the left hand. The middle finger of the right hand even needs to press 2 keys. Moving during the key positioning process seriously affects the input speed.
During the speed input process, the little finger of the left hand needs to press and hold the SHIFT key. The little finger is the weakest of all fingers. Pressing and holding non-letter remote keys will cause great pressure on the little finger. Long-term input of the little finger joint will cause Becoming stiff, this has reached a healthy level for developers...
During the process of long pressing SHIFT with the little finger, there are two consecutive inputs from the left ring finger. Originally, the ring finger and little finger are prone to linkage reactions, so in When the ring finger continuously applies force to and releases force on the same point (S key), the strength of the little finger will increase and decrease along with the ring finger. In the worst case, the SHIFT key will be released. This sudden increase and decrease in strength also causes considerable damage to the finger joints. Therefore, in the process of inputting the characters KISSY, the little finger of our left hand is great. It withstood thousands of pressures. , and finally completed the task gloriously!
Others
jQuery uses the alias $ to turn the originally complex object name into a simple character. At the same time, it does not forget to provide the noConflict function to release the $ variable. This is very thoughtful. .

Ext Due to object organization, calling a function usually requires entering more paths. For example, jQuery(selector) will become Ext.Element.query(selector) in Ext. At this point, Ext has pushed some commonly used functions under the Ext object, such as Ext.Element.fly becomes Ext.fly, Ext.DomQuery.select becomes Ext.query, etc., but in terms of the overall code amount, compared to jQuery There are disadvantages.

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는 이 시점에서 끔찍한 이름을 선택했습니다.