Instagramクローンの再パッケージ

refactoringとは?

外部動作を変更することなく内部構造を改善する方法により,ソフトウェアシステムのプロセスを変更する.前に書いたコードを一言で修正します.
つまり、個人が再包装を行う際には、以前のバージョン(一言で言えば襟の管理)を維持し、注釈処理をしなければならない.
実際、同期の一人がリメイク中に飛ばされた.まったく.

login.js

idは、pwの長さが1つを超える場合にのみ、ログインボタンを有効にします。

既存のログイン確認コードは次のとおりです.

if (inputIdValueLength && inputPwValueLength) {
    button.disabled = false;
    button.style.cursor = "pointer";
    button.style.opacity = "100%";
    button.addEventListener("click", () => {
    	document.location.href = "../html/main.html";
    });
   }
if (!inputIdValueLength || !inputPwValueLength) {
   button.disabled = true;
   button.style.cursor = "initial";
   button.style.opacity = "40%";
 }

はい.
3つの演算子を使用して再構築することをお勧めします.結果は次のとおりです.

inputIdValueLength && inputPwValueLength? (button.disabled = false) : (button.disabled = true);
if (button.disabled) {
	button.disabled = true;
	button.style.cursor = "initial";
	button.style.opacity = "40%";
}
if (!button.disabled) {
	button.style.cursor = "pointer";
	button.style.opacity = "100%";
	button.addEventListener("click", () => {
		document.location.href = "../html/main.html";
	});
}

になりました.
実は長さの面ではあまり違いはありませんが、
css要素を与える部分とボタン制御部分をそれぞれ確認できます!!

IDには「@」が含まれており、パスワードが5桁を超えるとログインボタンがアクティブになります

 inputIdValue.includes("@") && inputPwValue.length >= 5
      ? (button.disabled = false)
      : (button.disabled = true);

main.js

コメントに「いいね」を押したり、削除したりすることができます。

本当に大変なことを経験しました.ダウンジャケットの管理の重要性と.
反応の必要性を痛感するきっかけとなった.
△正直、今もやっています.

let likeBtns = document.querySelectorAll(".likeBtn");
likeBtns.forEach((likeBtn) => {
  likeBtn.addEventListener("click", (e) => {
    let iconClass = e.target;
    iconClass.className === "xi-heart-o"
      ? (iconClass.className = "xi-heart")
     : (iconClass.className = "xi-heart-o");
  });
});

これは最初に作成されたコードです.
いずれも良いですが、新しく追加した要素にイベントは追加されていません.うん.
そうですね.間違いない.だからもう一つ追加しました.

const likeIt = () => {
  let likeBtns = document.querySelectorAll(".likeBtn");
  likeBtns.forEach((likeBtn) => {
    likeBtn.addEventListener("click", (e) => {
      let iconClass = e.target;
      iconClass.className === "xi-heart-o"
        ? (iconClass.className = "xi-heart")
        : (iconClass.className = "xi-heart-o");
    });
  });
};

このような関数を作って、elを追加した最後に追加しました.
新たに増加したELは良好に動作する.うん.とてもいいです.
しかし増加すると既存ELの活動は開始されない
すべてのコードを書き直すかどうか本当に考えています.
そして起こった問題突然Heartが横に押すとまたHeartが

非常に微妙なのは、ボタンが押されるとボタンのレベルが変わり、ボタンにHeartが出てくるとめちゃくちゃになります.
最初は和弦を変えたいのですが...東賢と景敏は極力引き止めてくれたので、我慢しました:)
原因は夜10時に見つけたので、私の終電は11時です...結局先に帰りました
そして翌朝!!!間違いを解決するために、私は万全の準備をした.
1.ボタン領域ではなくiラベルのクラスを変更しようとした結果、=>ボタンのクラス変更時の数が発生しました.
インスタに行ってSVGコードをコピーしました.
以前、どのように解決するかを考えていたとき、Dong HyeonはinnerHTMLを変更できないことを直接教えてくれ、svgコードを変更するために使用しました.
色が変わり、中がいっぱいになるので、svgをコントロールして実行するよりも、この文章のほうがいいようです.
2.新しく追加したエンティティにイベントリスナーを追加
これは本当に長い間悩んでいました.
以前は、別名の追加フェーズでコードを再記述するダブルリストの作成時にも同様の問題が発生しました.
今度は他に方法がないの?DOMでは、追加や削除などの要素を検出できるJSがあるかどうかを尋ね続けた.
結論は反応を使う理由はこうであるべきだ.
一般的にdomにアクセスする方法ではなく、使い方も疎かです.
最終的には、元の方法で要素を追加する段階で、再びリスナーを追加する作業を行い、今回は関数を使ってみました.
既存のユニットにイベントリスナーを追加すべきか、新しく追加したユニットにイベントリスナーを追加すべきかと思いますので、関数でlistをロードし、各ユニットにイベントを追加すればいいと思います.

  let likeBtns = document.querySelectorAll(".likeBtn");
  likeBtns.forEach((likeBtn) => {
    likeBtn.addEventListener("click", (e) => {
      if (likeBtn.classList.contains("like")) {
        console.log("remove");
        likeBtn.classList.remove("like");
        likeBtn.innerHTML = `<svg fill="#262626" height="12" viewBox="0 0 48 48" width="12"><path d="M34.6 6.1c5.7 0 10.4 5.2 10.4 11.5 0 6.8-5.9 11-11.5 16S25 41.3 24 41.9c-1.1-.7-4.7-4-9.5-8.3-5.7-5-11.5-9.2-11.5-16C3 11.3 7.7 6.1 13.4 6.1c4.2 0 6.5 2 8.1 4.3 1.9 2.6 2.2 3.9 2.5 3.9.3 0 .6-1.3 2.5-3.9 1.6-2.3 3.9-4.3 8.1-4.3m0-3c-4.5 0-7.9 1.8-10.6 5.6-2.7-3.7-6.1-5.5-10.6-5.5C6 3.1 0 9.6 0 17.6c0 7.3 5.4 12 10.6 16.5.6.5 1.3 1.1 1.9 1.7l2.3 2c4.4 3.9 6.6 5.9 7.6 6.5.5.3 1.1.5 1.6.5.6 0 1.1-.2 1.6-.5 1-.6 2.8-2.2 7.8-6.8l2-1.8c.7-.6 1.3-1.2 2-1.7C42.7 29.6 48 25 48 17.6c0-8-6-14.5-13.4-14.5z"></path></svg>`;
        return;
      }
      if (!likeBtn.classList.contains("like")) {
        console.log("add");
        likeBtn.classList.add("like");
        likeBtn.innerHTML = `<svg fill="#ed4956" height="12" viewBox="0 0 48 48" width="12"><path d="M34.6 3.1c-4.5 0-7.9 1.8-10.6 5.6-2.7-3.7-6.1-5.5-10.6-5.5C6 3.1 0 9.6 0 17.6c0 7.3 5.4 12 10.6 16.5.6.5 1.3 1.1 1.9 1.7l2.3 2c4.4 3.9 6.6 5.9 7.6 6.5.5.3 1.1.5 1.6.5s1.1-.2 1.6-.5c1-.6 2.8-2.2 7.8-6.8l2-1.8c.7-.6 1.3-1.2 2-1.7C42.7 29.6 48 25 48 17.6c0-8-6-14.5-13.4-14.5z"></path></svg>`;
        return;
      }
    });
  });
};

長くなった和弦も...ぐるぐる回る
関数をグローバルに1回実行し、別名を追加する最後のステップで再実行します.
したがって、要素を追加した関数の真下にこの関数を再ロードします.
でもここで好奇心が起こった
コードは上から下へ読みますが、どうして下の関数を上から下へ読むことができますか...
私の推測ですが、上から下へ読んでも実際の要素を追加できるのは、スクリプトが読み終わってから可能なのでしょうか?
=>メンターに聞いて解決!!
JAvascriptは、まず参照するコンテンツを登録し、スクリプトを実行します.
だから私が関数を後ろに書いても、参照はすでに存在するので実行できます!!スコフの範囲はもっと広い!!!不思議だわ

きょうのでたらめ

新しい関数が作成されました.最初は新しく作ったのに急にだめになっただから指導者を探している間に聞いてみました理由を見つけた.関数の最後に関数を再読み込みします.これが….更に貴重な関数...?(そうじゃなくても)

ZaconでiKONを呼んできたので、iタグだけでいいと思っていたのですが….
微妙に、iラベルを重ねないボタンラベルをクリックすると、ボタンにアイコンが生成され、本当にめちゃくちゃなウィンドウと長いウィンドウ...和弦を开けて髪を包んでくれて悩んだ解决策13期东贤君を爱してる