[Vanilla JS]Airbnbクローンコード後記

Airbnbクローンコード

ハブリンク
開発サイクル:02/08～02/20
第1週目:静的ホームクローン
第2週目:動的機能クローン

動的実装機能

右上隅ボタンをクリックしてnav-barを切り替え、デスクトップを押してnav-bar

を閉じます.

上階宿泊、クリック体験は必要に応じてそれぞれ変更可能

カレンダ機能の実装

実行画面

HTML、CSS、JSでairbnbをクローンするプロジェクトを行っています.Webページ全体のレイアウトとダイナミック機能には、簡単なラベルバーとカレンダーが含まれます.これは私自身が最初からクローンコードを行い、多くのことを学びました.
HTMLとCSSを同時に開発するのとは異なり、HTML=>css=>jsという簡単な実装体験を各ステップで作成しました.

静的ページ

htmlとcssを使用して静的ページを実装する場合、レイアウトが最も重視されます.レイアウトを調整する方法はfloat、flex、gridなど多くの方法があります.今回は、以前使っていたflexをメインラインに、gridを初めて勉強して使いました.

HTML

プロジェクト全体を進めていく中で、HTML構造をきちんと設計すべきだと思います.css、jsファイルを追加するたびに、小さな修正作業がたくさんあります.class nameからどのタイプのラベルを使って作られたのか考え始めます次の考えは,少なくともcssの構造記述を考慮することである.

CSS

cssはおなじみの属性の大部分を使用していますが、gridやpesudo elementを学習して使用すると同時に、使いやすくて驚きました.後でよく使うかもしれません.

グリッドの適用

これはgridを適用する部分です.floatを使用する予定ですが、使用したことがないグリッドを作成しました.grid-gap、grid-row、grid-columnの3つの属性がレイアウトを簡略化します.gridに慣れる瞬間を

pesudo element

::afterを使用するとhover、focusなどの効果を簡単に適用できます.今まで聞いていなかったので、本当に役に立つと思いましたが、後でよく使うかもしれません.
私はただ简単な学习で、今まで、私はずっと绝対的な位置付けと运用をして、私はまた他の方法があるかどうかを见なければなりません.

ダイナミックページ

JSで次々と機能を実現していくことに悩んでいるようです.どのような基準で等級を分け、どのような方法で実現するかなど.その中の事件についても長い間悩んでいた.

イベント処理

これは,コードにJSからHTMLを生成し,innerHTMLでDOMを入れる方式である.しかしこのようにするとDOMでtargetを選択する順序も注意しなければならないのでdocumentにclickイベントを掛けてtargetを比較してイベントコールバック関数を生成する.
今コードを見ると、各機能はclassに分かれ、各classはアクティビティを登録しています.すべてのクリックイベントがドキュメントに適用されているため、各機能のクラスがオブジェクトとして作成され、ドキュメントにクリックイベントを不要に繰り返し適用できます.
この問題を解決するために、いくつかの方法があるようだ.△私にも自分なりの考えがあるので、いい方法かどうか分かりません.

イベントのみを処理するオブジェクト(クラス)を作成し、すべてのオブジェクトのイベント

を処理します.

data-actionまたはdataset委任イベント用

上の1,2号はあまり差がないようです次のプロジェクトでは、さまざまな方法を試します.

関数型？pipe関数の必要性?

インポートコードの一部は、div関数の最初のパラメータにspanを追加し、実際には少し混同しているように見えます.(div、spanの2つのパラメータはvalueであり、後のパラメータはclassである.)

if (this.isStartReservation(day)) {
        dayHtml = div(span(day, CHEKCED, DAY_SPAN), DAY, ABLE, BETWEEN, START_RESERVE);
      } else if (this.isEndReservation(day)) {
        dayHtml = div(span(day, CHEKCED, DAY_SPAN), DAY, ABLE, BETWEEN, END_RESERVE);
      } else if (this.isBetweenReservation(day)) {
        dayHtml = div(span(day, DAY_SPAN), DAY, ABLE, BETWEEN);
      } 

上のコードをpipeのような関数に書くことができ、関数で関数を使うよりも良いと思います.今考えてみれば、それらのclassもそれぞれの状況に応じて事前にオブジェクトにバインドされるべき(?)という考えもあります.
この2つを除いて、機能を実現すると同時に、いろいろなことを考えました.実装コードには限界があると思います.だから次のプロジェクトから、同僚たちのコードを見ることで視野を広げるべきだと思います.

の最後の部分

最初から1つのサイトをクローンするのも難しく、実施後に見た結果も興味深い.本当に始まる前に、実現しやすいと思いますが、考えなければならないのは一つや二つではないと思います.特に前述したように、最初からHTML構造をしっかりと設計しておくと、時間を節約できます.
最初の週にHTMLやCSSをしているときは、思うようにできない気持ちが集中できません.CSSが苦手なせいか疲れました.しかし、私は以前使ったことのないものを一つ一つ書いて、再び興味を引こうとしたのを覚えています.△実は、cssは自分の意思で現れるだけでおもしろい.
でも2週目に入ってJSした時は1週目と違って面白かった(?)やったようだカレンダーの多くの条件文に戸惑っていたが、この時間は機能を実現する味がしたようだ.