👨🏽‍🚒 🚣🏿 🧙🏼 遊園地を作り続けたので 😻 🙍🏾 🏇🏽

JavaScript学習の私のバージョンに関する最初の投稿の後、ビジネスと喜びを組み合わせて、私は重要な追加を行うと同時に学習のブレークスルーを行うことにしました。

スクリプトの最初のバージョンには、一見しただけではほとんど目立たないものがありましたが、重要な機能-コメントの作成者に個人的なメッセージを送信しました。すぐに修正することが決定されました。

function clickPm(event) { event.preventDefault(); var username = event.target.parentElement.parentElement.parentElement.querySelector('a.username').innerText; window.location.pathname = '/conversations/' + username; } var infobars = document.querySelectorAll('.to_chidren'); //        , so strange for (i = 0; i < infobars.length; i++) { var pmLink = createBtn('pmlink', '', ' reply_link', 'container', clickPm); infobars[i].appendChild(pmLink); }

各コメントのメッセージアイコンを使用してリンクが作成され、クリックハンドラーがページに送信して、コメントをクリックしたユーザーに個人メッセージを送信します。

こんな感じ

最後の日は明らかにさまざまな種類のユーザーバーの傾向があるため、カルマと評価の義務的な表示と、ユーザーブロックの馴染みのある構造を維持することを決定しました。また、アナウンスメント（フィード、投稿など）のページをナビゲートするのが難しくなりすぎないように、ユーザーバーを透明にする必要があります。 2番目のスタイルがスタイルによって決定された場合、1番目はもう少し複雑でした。リクエストを処理するためのルールについて読んだ後、重要なことを学びました-非同期リクエストのみです。私は短い発言をします-通常、私はそれぞれの新しく研究された資料を「患者」に、つまり私の仕事の文脈で適用しようとします。例は一方的なために記憶されていないため、初心者にも同じことを行うことをお勧めします。

まず、ユーザーバーを作成する必要があります。

  var userpanel = document.querySelectorAll('.userpanel')[0]; var userpanelTop = document.querySelectorAll('.userpanel > .top')[0]; var userpanelBottom = document.querySelectorAll('.userpanel > .bottom')[0]; var karmaDescription = document.querySelectorAll('.charge')[0]; if (userpanelBottom != null) { userpanelTop.innerHTML += userpanelBottom.innerHTML; userpanel.removeChild(userpanelBottom); userpanel.removeChild(karmaDescription); karmaCounter(); }; if (userpanelTop == null) { var top = document.createElement('div'); top.className = 'top'; top.innerHTML = userpanel.innerHTML; userpanel.innerHTML = null; userpanel.appendChild(top); };

さまざまなユーザー状態（ログインおよびログアウト）の変数と条件を定義します。 userpanel変数の内容を、作成された別のuserpanelTop変数（userbarコンテナ）に渡した後、userpanelTopがuserpanelに含まれる前に、userpanel.innerHTML = nullの小さなトリックを使用すると、DOMの周りの追加のウォークを回避できます。

これは、ユーザーデータを使用してxmlページを解析する機能がどのように見えるかです。

 function karmaCounter() { var xmlhttp=new XMLHttpRequest(); xmlhttp.overrideMimeType('text/xml'); var userBlock = document.querySelectorAll('.top > .username')[0].innerText; var userpanelTop = document.querySelectorAll('.userpanel > .top')[0]; var karmaCharge = document.createElement('a'); karmaCharge.className = 'count karma'; xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { var counter = xmlhttp.responseXML.querySelectorAll('karma')[0].firstChild; var rating = xmlhttp.responseXML.querySelectorAll('rating')[0].firstChild; karmaCharge.innerText = ' '; karmaCharge.appendChild(counter); karmaCharge.innerText += ',  '; karmaCharge.appendChild(rating); userpanelTop.insertBefore(karmaCharge, userpanelTop.firstChild.nextSibling.nextSibling); } } xmlhttp.open("GET", '/api/profile/' + userBlock ,true); xmlhttp.send(); }

重要なポイント-正しい解析のために、overrideMimeType（ 'text / xml'）を使用してMIMEタイプを再定義する必要がありました。

主なことを言及するのを忘れました-スクリプトの一部として、Habrの心地よいミニマリズムで有機的に見えるように、一般的なスタイルを守り、新しい機能を実行しようとします。たくさんのものを発明してスクリプトに実装しようとする目的はなく、必要なだけであり、すぐに使用できるわけではありません。

栄光に満ちたユーザーバー

GitHubでのスクリプト

Chromeマーケットの拡張

そして今回は、テキストに曖昧さがないわけではなかったので、謝罪します。控えめな経験のため、どこかで間違っている可能性があり、おそらくかなりの怒りを引き起こす可能性があります。コメントの形でのこのような理性的な怒りのために、この投稿が作成されました。なぜなら、私は有用な教訓を学ぶことができるからです。

私の遊園地を訪問する招待を受け入れたすべての人に感謝します。

遊園地を作り続けたので

More articles: