Javascript 클래스 라이브러리_javascript 기술의 최상위 개체 이름에 대한 사용자 경험 분석

최상위 개체는 클래스 라이브러리의 거의 모든 기능에 대한 입구이므로 코딩 중에 이러한 문자가 자주 입력되므로 클래스 라이브러리를 설계할 때 최상위 개체 이름을 입력하는 단순성도 매우 중요합니다.

여기에서는 개체 이름의 길이와 개체 이름을 입력하는 키 시퀀스라는 두 가지 측면에서 세 가지 클래스 라이브러리를 비교하는 동시에 몇 가지 특별한 점을 고려하려고 합니다. 보다 종합적인 평가 결과를 도출하기 위해 포인트를 부여합니다.

이름 길이
jQuery는 총 6자로 구성되어 있는데, 3개의 라이브러리 중 길이가 가장 길다. 대문자 Q도 들어가 있다. 입력시 SHIFT 키를 추가해야 하므로 길이 값은 7로 지정됩니다.

Ext는 3자로 구성되어 길이 측면에서 가장 유리합니다. 첫 글자가 대문자 E이므로 입력 과정에서 SHIFT가 필요하므로 길이 값은 4로 지정됩니다.

KISSY는 5자로 구성되며 모두 대문자입니다. 길이도 jQuery에 가깝기 때문에 길이 값은 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를 길게 누르는 과정에서 왼쪽에서 두 번 연속 입력이 발생합니다. 원래 약지와 새끼손가락은 결합반응을 하기 쉽기 때문에 약지가 같은 지점(S키)에 지속적으로 힘을 가하고 힘을 놓으면 새끼손가락의 힘이 그에 따라 증가하거나 감소하게 됩니다. 최악의 경우 SHIFT 키를 놓게 됩니다. 이러한 급격한 힘의 증가와 감소는 손가락 관절에도 상당한 손상을 초래하므로 KISSY 문자를 입력하는 과정에서 우리 왼손의 새끼손가락은 수천 번의 압력을 견뎌내고 마침내 훌륭하게 작업을 완료했습니다. !
기타
jQuery는 $ 별칭을 사용하여 원래 복잡한 개체 이름을 간단한 문자로 바꾸는 동시에 $ 변수를 해제하는 noConflect 함수를 제공하는 것을 잊지 않습니다.

Ext 객체 구성으로 인해 함수를 호출하려면 일반적으로 더 많은 경로를 입력해야 합니다. 예를 들어 Ext에서는 jQuery(selector)가 Ext.Element.query(selector)가 됩니다. Ext.Element.fly가 Ext.fly가 되고, Ext.DomQuery.select가 Ext.query가 되는 등 Ext 객체 아래에서 사용되는 함수는 전체 코드량 측면에서 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는 이 시점에서 끔찍한 이름을 선택했습니다.