ページ構築とJSフロントエンドについて私たちが言いたいこと

Weibo のページ構築エンジニアとしての私の主な責任は、HTML と CSS を使用して高品質の静的ページの制作を完了し、プロジェクトが期限どおりに完了するようにすることです。ページに必要な js 効果は、下流の js フロントエンド エンジニアに任されます。 Weiboでは、これら2つの位置は別々です。しかし、誰もが、この 2 つの役割は 1 人で完結すべきだと考えているかもしれません。結局のところ、ページ構築エンジニアが記述した HTML 構造は、JS エンジニアが望むものではないかもしれませんし、JS エンジニアにはより効率的な方法があるかもしれません。そのため、ページを構築する前に、JS エンジニアとコミュニケーションを取り、実装計画を決定するのが最適です。

しかし、実際のプロジェクトプロセスでは、ページ構築の段階になると、プロダクトマネージャーがまだ js リソースを手配していない可能性があります。この時点では、製品の要件と独自のアイデアに従って html 構造を記述することしかできません。設計案の復元度、ブラウザの互換性、将来追加される可能性のある新機能の予測可能な場所を考慮するだけでなく、js が最も便利な方法で製品のインタラクティブ効果を完成させることができるように、html 構造をどのように記述するかも考慮する必要があります。責任あるページ構築エンジニアとして、Alexanderです！ そのため、ページのソースコードをよく見ると、DOM構造の操作方法をjsエンジニアに伝えるためのこのようなコメントが見つかります。

時には、物事をできるだけシンプルに保つために、長い時間考えなければならないことがあります。たとえば、少し前のロンドンオリンピックのとき、Weibo ホームページの右側にオリンピックの金メダルリスト モジュールを追加し、さまざまなコンテンツを表示するための折りたたみと展開のボタンを追加したいと考えていました。

これは、Web サイトで非常に一般的なインタラクティブ効果です。具体的な HTML 実装では、展開されたコンテンツと折りたたまれたコンテンツをそれぞれ含む 2 つの div を作成することを考えた学生もいるかもしれません。展開ボタンをクリックすると、一方が表示され、もう一方は非表示になります。折りたたみボタンをクリックすると、その逆のことが起こります。効果が得られれば、このようなことには正しいとか間違っているとかはありません。ただし、Weiboホームページや最初の画面に表示されるモジュールであるため、パフォーマンスの最適化を徹底的に行う必要があります。できるだけ CSS で行うようにし、JS では決して行わないようにしてください。私のアプローチは、折りたたみと展開のスタイルを記述し、それらを組み合わせ、デフォルトで展開されているか、クリックして展開したときに js が turn_olym_on を表示し、クリックして折りたたむときに turn_olym_off に変更することです。このように、js はクラス名のコード量を変更するだけで済み、展開と折りたたみの 2 つのボタンについても、クラス名を変更して表示と非表示を切り替えます。

特定の HTML コード:

使用したコードはすべてここにまとめておき、特定の状態では表示する必要がないコードを非表示にします。例えば、展開状態では、class="show_less W_linecolor" の div と、展開ボタン class="W_moredown" は表示する必要がないので、一番外側の div に次のように記述します。

CSS は次の 2 つの要素を一時的に非表示にします。

折りたたまれると、最も外側の div は次のようになります。

CSS は、以前は非表示だった 2 つの要素を表示し、リーダーボードの 4 位と 5 位の tr タグ (class="no_45")、イベントのハイライト (class="show_more")、および折りたたみボタン (class="W_moreup") を非表示にします。

この方法では、クリックして折りたたむときに turn_olym_on を turn_olym_off に変更し、クリックして展開するときに turn_olym_off を turn_olym_on に変更するために js を使用するだけで済みます。残りの非表示と表示はすべて CSS で処理できます。

要約:

私たちの共通の目標は、上流と下流の作業に関するある程度の知識を理解し、上流と下流のコミュニケーションを円滑にし、作業効率を向上させることです。

ページ構築の作業には、HTML5 の新しいタグ、高度なブラウザでネイティブにサポートされているさまざまな API、CSS3 の新しく興味深い新しい属性など、多くの課題が伴います。 。 。これらすべてを学ぶ必要があります。完全な習得を求めるのではなく、理解し、慣れ、何が起こっているかを知ることを求めています。学んだ新しい知識を実際のプロジェクトに適用することは、会社、チーム、そしてあなた自身にとって有益です。

袁芳さん、どう思いますか？

(元のWeibo UDCブログ投稿、再投稿の際は出典を明記してください)

元のタイトル: ページ構築と js フロントエンドについて言わなければならないこと

キーワード: ページ、ビルド、フロントエンド、してはいけないこと、あれ、こと、Weibo、エンジニア、ウェブマスター、ウェブサイト、ウェブサイトのプロモーション、お金を稼ぐ