プロジェクト概要

このプロジェクトは私にとって初めての完成したプロジェクトとも言えますが、私はある程度の経験を積み、多くの落とし穴に遭遇しました。

コードの重複

実際のプロジェクト制作では、プロジェクトに多くのページが含まれているため、多くのページのほとんどの領域は、プロジェクトの計画を立てずに、プロジェクトの最初にコードを書くことに没頭すると、最終的には他のページと重複します。 、プロジェクト コードには間違いなく重複コードが大量に含まれることになり、時間がかかり不快です。重複したコードを見つけて効率を上げるためにコピー＆ペーストを開始した場合でも、これらの重複したコードは依然として各ファイルに表示され、同時に、これらの重複したコードを変更する必要がある場合は、ブラウザーでのプロジェクトの読み込み速度に影響します。プロジェクトの後半では、それも非常に面倒になりました。

上記の問題を抱えた上で、プロジェクトの早期計画が特に重要になります。計画では、プロジェクト全体のレイアウトを完了するだけでなく、再利用可能なコードをプロジェクト内で一元管理して統一的に使用および管理する必要があります。 、便利な使用と変更。フロントエンドには「コンポーネント化」という言葉があります。これは、プロジェクト内でさまざまな機能を持つコードや繰り返し使用されるコードを 1 つずつコンポーネントに書き込むことを意味します。最も一般的なコンポーネントには、カルーセル、ポップアップ ウィンドウ、など、インターネット上には JQuery をベースにしたさまざまな便利ですぐに使えるコンポーネントも存在します。コンポーネントとは、コンポーネント開発者が JS コードを通じて特定の関数をコンポーネント コンストラクターにカプセル化するもので、コンポーネントのユーザーはコンポーネントをインスタンス化するだけで済みます。コンポーネントを使用することによる効果。私たちに必要なのは、コンポーネントベースの考え方、つまり繰り返しコードを集中管理して使用することです。

コンポーネントベースの思考をプロジェクトに具現化すると、以下の点が実現できます。

プロジェクトのほとんどのページに表示される基本構造を HTML ファイルに記述します。この HTML ファイルをプロジェクトの HTML コードの基本テンプレートとして使用します。後続の開発では、すべての HTML ファイルがこのテンプレート コードを通じて展開されます。
• HTMLテンプレートファイルに対応するCSSコードをCSSファイルに記述し、「base.css」という名前を付けます。Base.cssは、HTMLテンプレートファイルに対応するCSSコードを配置するだけでなく、一定数のCSSを配置することもできます。コードは、base.css に書き込むことができます。base.css 内のコードには、適切な命名規則と、フレンドリーで読みやすいコメントが必要です。
• 適切な命名規則とフレンドリーで読みやすいコメントは、base.css のコードだけでなく、プロジェクト内の他のすべてのコードにも必要です。これはプログラマーとしての非常に基本的で重要な習慣です。
• 適切な命名規則とフレンドリーで読みやすいコメントを実現するには、一連の実現可能な仕様が必要です。 チーム開発では、一連の実現可能な仕様が非常に重要です。仕様がない場合、チームのメンバー全員が自分の習慣に従ってコードを書くことになり、プロジェクトのコードが混沌として保守が困難になるだけです。チームの規範を定義するには、チームのメンバー全員がブレインストーミングを行って、チームのメンバーが規範に適していて受け入れられるルールを追加する必要があります。仕様準拠を前提にチーム開発を行えば、チームの効率が大幅に向上し、無駄な時間やコミュニケーションコストを削減できます。
インタラクション
一般的なプロジェクト開発では、HTMLとCSSの主な役割は静的ページ、いわゆるカット画像を生成することであり、インタラクティブな効果のほとんどはJSによって実装されますが、このプロジェクト開発では、他のものを共有することで、学生の皆さん、CSS3 の威力を改めて知りました。カルーセル、ポップアップ ウィンドウ、クリックして画像を切り替えるなどのインタラクティブな効果をシミュレートできます。これは単なるシミュレーションであり、その効果は JS によって実現されるものほど完璧ではありませんが、それでも望ましい効果は得られます。そして多くの JS よりも実装が簡単です。以前は、これらの効果を実現するには JS が必要でしたが、現在では CSS3 と JS を組み合わせることで、ますます興味深い効果を生み出すことができます。

リーリー

上記はCSSでシミュレートしたカルーセル効果です。