🤸🏽 🙆🏾 🕉️ 控えめなJavaScript 📡 👔 📪

この記事の目的は、「邪魔にならないJavaScript」とは何か、その目的、および「侵入型」JavaScriptよりも優れている理由を示すことです。 RuNetでは、そのような記事を見たことはありません（おそらくそうですが、目と小さなGoogleに出会うことはなく、何も見つかりませんでした）。しかし、練習ショーとして、多くの人はそれが何であり、どのように使用するかを知りません。

控えめなJavaScriptとは

控えめなJavaScriptは、次の原則で構成されるJavaScriptプログラミング手法です。

構造（HTML）/レイアウト（CSS）と動作（JavaScript）の分離
JavaScriptを使用して、すでに動作しているアプリケーションの使いやすさを向上させる
グレースフルデグレードテクニックのアプリケーション-ブラウザがJavaScriptを使用してアプリケーションに追加する特定の機能をサポートしない場合、アプリケーションは引き続き動作します

なんで？

便利で、実用的で、簡単に実装できます。また、JavaScriptを無効にする古いブラウザを使用するユーザー、モバイルデバイスからインターネットを使用するユーザーを犠牲にして、サイトの視聴者を増やすことができます。

どうやって？

これを示す最も簡単な方法は、例を使用することです。あなたはそれのために遠くに行く必要はありません-みんなの愛するハブラハブルを持ってください

  <div class = "text_comments"> 

   <div class = "comment_item" style = "margin-left：0px;">

     <div class = "service_text_comments_holder">
       <a href="http://fxposter.habrahabr.ru/" class="comments_nickname"> fxposter </a>
       ...
     </ div>

     <div class = "comment_text"> ... </ div>

     <div class = "comments_reply">
       <div class = "reply_word_holder" id = "reply_link866650">（<a href="javascript:saw(866650);">返信</a>）</ div>

         <div style = "display：none" id = "reply866650">
         <！-コメント送信フォーム->
       </ div>

     </ div>
   </ div>
 </ div>

これは、投稿ページに表示されるコメントのコードです。明確にするために、不要なフラグメントは削除されました。

このコードの何が悪いのでしょうか？

JavaScriptとHTMLの混在（

）
JavaScriptが無効になっているユーザーは、原則としてコメントに返信できません

どのように改善できますか？

イベントを別のファイルに移動する
JavaScriptが無効になっている場合、ユーザーが別のページにリダイレクトされ、選択したコメントに応答できることを確認してください

すぐに言ってやった。 HTMLを次の形式に変換します。

  <div class = "text_comments"> 

   <div class = "comment_item" style = "margin-left：0px;">

     <div class = "service_text_comments_holder">
       <a href="http://fxposter.habrahabr.ru/" class="comments_nickname"> fxposter </a>
       ...
     </ div>

     <div class = "comment_text"> ... </ div>

     <div class = "comments_reply">
       <div class = "reply_word_holder" id = "reply_link866650">（<a href="reply.php?comment_id=866650" class="show_reply_form" id="show_reply_form_866650">返信</a>）</ div>

         <div style = "display：none" id = "reply866650">
         <！-コメント送信フォーム->
       </ div>

     </ div>
   </ div>
 </ div>

ご覧のとおり、タグを変更しました（「通常の」hrefを割り当て、IDとクラスを追加しました）。これで、「返信」リンクをクリックすると、ユーザーは選択した質問の回答ページにリダイレクトされます。このようにして、改善リストの2番目の項目を完了しました。最初のポイントを見てみましょう：リダイレクトの代わりにJavaScriptを有効にしているユーザーがコメント自体の下でフォームを開くには、クラス「 show_reply_form

」ですべての要素を選択し、それぞれが「開く」onclickイベントを割り当てる必要があります»適切なフォーム。

対応する関数を書きます：

 関数showForm（イベント）{
   var id = parseInt（this.id.replace（ 'show_reply_form_'、 ''））;
  のこぎり（id）;
   falseを返します。
 }

this.id

（つまり、現在のオブジェクトのID）を取得し、「phrase」「 show_reply_form_

」を削除することで、開く必要がある要素の数を取得し、元々HTMLコードに存在していたsaw関数を呼び出します。リンクをクリックした後のリダイレクトを防ぐために、関数はfalse

返しfalse

。

この関数をリンクに関連付けるだけです。

jQueryでは、これは次のように行われます。

  $（ '。show_reply_form'）。クリック（showForm）;

PrototypeJSでは、次のようになります。

  $$（ '。show_reply_form'）。invoke（ 'observe'、 'click'、showForm）;

関数を要素に割り当てた後、 this.id

はこの要素のidを参照します（はい、これは「JavaScriptマジック」です:)）。

すべてのJavaScriptコードを別のファイルに移動できるようになりました。

 関数showForm（イベント）{
   var id = parseInt（this.id.replace（ 'show_reply_form_'、 ''））;
  のこぎり（id）;
   falseを返します。
 }

 document.observe（ "load"、function（event）{
   $$（ '。show_reply_form'）。invoke（ 'observe'、 'click'、showForm）;
 }）;

ここでは、ドキュメントPrototypeJSオブジェクトを追加observe

関数を使用して、 window.onload

イベント中（ページの読み込み時）にフォーム表示関数へのリンクの「リンク」を呼び出します。 observe

は、 window.onload

イベントに既に関連付けられている可能性のあるイベントに、指定したイベントを追加します。 addEventListenerを使用し、（PrototypeJS）または$（window）.load関数を観察して、要素に既にハングしている関数が置き換えられないようにしてください。

したがって、改善のリストの最初の項目を完成させました。

結論

私の意見では、このJavaScriptの使用、つまりJS上のすべての関数を個別のファイルに削除し、これらの関数をさまざまなイベント（ここではwindow.onload

およびelement.onclick

を見た）を使用してページ要素にリンクします-これは現時点で唯一のものですJavaScriptの適切な使用。

さあ、紳士。 :)

PS window.onload

ではなくDOMContentLoaded

イベントを使用できることをよく知っています。しかし、たとえば、 window.onload

の使用はさらに明確になると思います。

PPS ここからクロスポスト。

控えめなJavaScript