web-dev-qa-db-ja.com

目障りなJavaScriptと目立たないJavaScriptの違い

目立たないJavaScriptと目立たないJavaScriptの違いは何ですか？簡潔に感謝します。短い例も歓迎します。

javascriptunobtrusive-javascript
49
well actually

2011年には有効でしたが、2018年以降は有効ではない可能性があるため、これはもう推奨しません

懸念の分離。 HTMLとCSSはJSコードに結び付けられていません。 JSコードは、一部のHTML要素に対してインラインではありません。あなたのコードは、すべてに対して1つの大きな機能（または非機能）を持っているわけではありません。短く簡潔な機能があります。

モジュラー。これは、懸念事項を正しく分離した場合に発生します。たとえば、すばらしいキャンバスアニメーションは、ボックスを描画するためにベクターがどのように機能するかを知る必要はありません。

エクスペリエンスを強制終了しないでください JavaScriptがインストールされていない場合、または最新のブラウザーを実行していない場合-エクスペリエンスを適切に低下させるためにできることを行います。

役に立たないコードの山を構築しないでください何か小さなことだけを行う必要がある場合。人々は、DOM要素を再選択し、セマンティックHTMLを台無しにし、そこに番号付きIDを放り込むなど、ドキュメントモデルやその他のテクノロジを理解していないために発生するその他の奇妙なことによって、コードを際限なく複雑にします。 「魔法の」抽象化レイヤーは、すべてをガベージスピードに落とし、オーバーヘッドの山をもたらします。

36
Incognito

マークアップ内のJavaScriptは目立たないものではありません。

<div id="informationHeader">Information</div>

目立つ

<div onclick="alert('obstrusive')">Information</div>
33
Joe
  1. HTMLとJavaScriptの分離（外部JavaScriptファイルでJavaScriptを定義）
  2. グレースフルデグラデーション（importantJavaScriptを無効にしてもページの一部は引き続き機能します）。

詳細な説明については、件名の Wikipediaページ をご覧ください。

10
Matt

Mikeの答えを拡張するために、UJSの動作を使用することは「後で」追加されます。

<div id="info">Information</div>

... etc ...

// In an included JS file etc, jQueryish.
$(function() {
    $("#info").click(function() { alert("unobtrusive!"); }
});

UJSはまた、穏やかな劣化（私のお気に入りの種類）、たとえば#info同等のリンクを提供するなどして、機能をクリックします。つまり、JavaScriptがない場合、またはスクリーンリーダーを使用している場合などにどうなりますか。

3
Dave Newton

nobtrusive-「目立たず、目立たない、主張のない、または控えめな」

目立たない-「自分自身または他人に自分の意見を押し付けることによるように、邪魔をする気質を持っているか示している。」

obtrude-「特に令状や招待なしで、（何か）を前方または人に押し付ける」

したがって、意見を課すことについて言えば、私の意見では、控えめなJavaScriptの最も重要な部分は、ユーザーの観点から邪魔にならないということです。つまり、ブラウザの設定によってJavaScriptがオフになっていても、サイトは引き続き機能します。 JavaScriptを有効または無効にした場合でも、スクリーンリーダー、キーボードを使用し、マウスを使用しない、その他のアクセシビリティツールを使用しているユーザーは、サイトにアクセスできます。おそらく（おそらく）サイトはそのようなユーザーにとって「派手」ではないでしょうが、それでも動作します。

用語で「段階的な強化」を考えると、サイトのコア機能は、どのようにアクセスしても、すべての人にとって機能します。次に、JavaScriptとCSSが有効になっているユーザー（ほとんどのユーザー）に対して、よりインタラクティブな要素で機能を強化します。

もう1つの重要な「邪魔にならない」要素は「懸念の分離」です。ユーザーではなくプログラマーが気にするものですが、JavaScript側がユーザーの体験を邪魔しないようにするのに役立ちます。プログラマーの観点からは、インラインスクリプトを避けることは、マークアップをよりきれいにし、保守しやすくする傾向があります。一般に、一連のインラインイベントハンドラーに散らばっていないスクリプトをデバッグする方がはるかに簡単です。

2
nnnnnn