Javascript クラス ライブラリのトップレベル オブジェクト名のユーザー エクスペリエンス分析_JavaScript スキル

トップレベル オブジェクトはクラス ライブラリのほぼすべての機能への入り口となるため、これらの文字はコーディング中に頻繁に入力されるため、クラス ライブラリを設計する際には、トップレベル オブジェクト名の入力のしやすさも非常に重要です。

ここでは、オブジェクト名の長さとオブジェクト名を入力するためのキー シーケンスという 2 つの側面から 3 つのクラス ライブラリを比較することに焦点を当てます。同時に、いくつかの特別な点も考慮してみます。より包括的な評価結果を導き出すために。

名前の長さ
jQuery は合計 6 文字で構成されており、長さの点で 3 つのライブラリの中で最も長く、大文字の Q も含まれています。入力時 処理中に SHIFT キーを追加する必要があるため、長さの値は 7 として指定されます。

Ext は 3 文字で構成されており、長さの点で最も有利です。最初の文字が大文字の E であるため、入力プロセス中に SHIFT が必要となるため、長さの値は 4 として与えられます。

KISSY は 5 文字で構成され、すべて大文字です。長さは jQuery に近いため、長さの値は 6 です。

名前の長さの比較では、最も人気のある jQuery がわずかに不利で負けましたが、jQuery はこの点を他の方法で改善しました (これについては後述します)。

キー シーケンス
キー シーケンスの分析はより複雑です。ここで関係する主な原則は次の点です。

左手と右手を同じように使用します。できるだけ各文字を入力してください。
可能な限り同じ指を連続して使用しないでください。
キーを押し続ける時間をできるだけ短くしてください。
人差し指と中指は柔軟性が高いので、小指と薬指はできるだけ使わないようにしましょう。
比較的近い2本の指は連動しやすいため、小指を動かすと反射的に薬指がわずかに動き、次のキーの押下に影響を与える可能性がありますので、平行な指の連動は避けてください。できるだけ。
評価中、左手の小指から右手の小指まで、両手に0から9までの番号を付けます。数字を観察すると、いくつかの興味深い現象が見つかります。

jQuery のキー シーケンスは 606236 です。入力プロセス中に、

はかつて、柔軟性の低い左手の小指を使用していました。
前回の記事を踏まえると、実はQを押すときは左手の小指でSHIFTキーを押し続ける必要があるため、本来はQを担当しない左手薬指にQが与えられています。 Qキー。
大文字の Q を入力するとき、左手の小指と薬指は一緒に動き、順番に動かすのではなく、同時にタップします。
eとrは左手の中指と人差し指で連続的にタップするため、指の平行移動の効果が生じる可能性があります。しかし、実際に入力してみると、人差し指と中指の連動動作は効率に影響を与えないばかりか、表をタップし続けた方が速度が向上することがわかりました。中指と人差し指は考えるときによく行う動作で、非常に効率的で巧みな反射動作を形成していました...
Ext のキー配列は 213 です。入力プロセス中に次の問題が見つかりました。

すべてのキーは左手から入力され、右手は完全に自由になり、理論上の最大入力速度を達成できません。ただし、右手は Ext の入力中に . キーを同時に見つけることができるため、ステートメント行全体の入力には大きな影響を与えません。
大文字の E を入力するときは、左手の小指で SHIFT キーを押し続ける必要があります。x を入力するときは、左手の小指で SHIFT キーを薬指で押す直前に離す必要があります。この 2 本の指は連動反応が起こりやすいため、左手で x キーを押すことの方が位置精度に大きく影響します。
KISSY のキーシーケンスは 77116 で、おそらくいくつかのライブラリの中で最も悪いキーシーケンスです。

右手の中指と左手の薬指でキーを押し続ける現象があります。右手の中指は 2 つのキーを押す必要がありますが、キーの位置を決めるときにも入力速度に大きな影響を与えます。
速度入力プロセス中、左手の小指は SHIFT キーを押し続ける必要があり、文字以外のリモート キーを押し続けると小指に大きな圧力がかかります。小指の関節を長時間入力すると硬くなりますが、これは開発者にとって健全なレベルに達しています...
小指で SHIFT を長押しする過程で、左から 2 つの連続した入力があります。薬指と小指はもともと連動反応が起こりやすいため、薬指が同じ箇所（Sキー）に力を加えたり、力を放したりし続けると、それに伴って小指の力が増減します。最悪の場合、SHIFTキーが離れてしまいます。この急激な力の増減は指の関節にも大きなダメージを与えるため、KISSYという文字を入力する過程で、私たちの左手の小指は何千回もの圧力に耐え、ついにその作業を見事に完了しました。 ！
その他
jQuery は、エイリアス $ を使用して、元の複雑なオブジェクト名を単純な文字に変換します。同時に、$ 変数を解放するための noConflict 関数を提供することも忘れません。

Ext オブジェクトの編成のため、通常、関数を呼び出すにはさらに多くのパスを入力する必要があります。たとえば、Ext では jQuery(selector) が Ext.Element.query(selector) になります。この時点で、Ext はいくつかの共通のパスをプッシュしています。 Ext.Element.flyがExt.flyになる、Ext.DomQuery.selectがExt.queryになるなど、Extオブジェクト配下の関数を使用しますが、全体のコード量という点でjQueryと比べるとデメリットがあります。

KISSY combines the modular structure organization of Ext, and also introduces the problem of Ext's function access path being too long. Due to the problems with the with statement in Javascript, using aliases instead of deeper hierarchies Objects will also have problems of this kind, so such problems are not easy to avoid.

Why not analyze YUI? Because I was used to Ext, I used a lot of jQuery in the later period. KISSY emerged after the author entered the front-end field and attracted more attention. It is a big regret for the author that I have not been exposed to YUI from beginning to end, and it also made me lose the opportunity to evaluate in this article. The frame right.

Summary
We will score each class library in the following way

The length score is 10-length value.
The key sequence is scored out of 10, 1 point will be deducted for each problem, and 2 points will be deducted for particularly serious problems.
The final results are shown in the table below

Remarks on name length and key sequence
jQuery 3 6
Ext 6 7 1 point will be deducted for accessing function paths that are too long
KISSY 4 3 Several problems are serious 4 extra points

Final statement: The author has absolutely no intention of discrediting KISSY. On the contrary, I have a deep interest in KISSY’s design, module separation, implementation, etc. However, this article is only based on the input experience of top-level object names. Comment, KISSY did choose a terrible name at this point.