実際、「良い」と「悪い」は常に相対的なものです。なぜなら、人それぞれに「良い」と「悪い」の基準が異なるからです。自分の視点から考える方がよいでしょう。どうすれば良い再構築ができるでしょうか?
まず、最もよく見かける 2 列レイアウトを見てみましょう。
基本的な HTML コード:
具体的な CSS コードの実装を見てみましょう (マージンは無視します)。
明らかに、同じ HTML 構造を維持しながら 2 列レイアウト (左列の幅は固定) を実現する CSS ソリューションは多数あります。主な指示は、フロートを使用するかどうか、右列の幅を固定するか可変にするかです。
Qzone、Pengyou.com、Facebook はすべて左の列がフローティングになっています。唯一の違いは右の列の書き方です。Qzone は右の列の幅が固定されていてフローティングになっていますが、Pengyou.com と Facebook は右の列の幅が固定されておらずフローティングになっていません。代わりに、BFC を作成し、IE の下位バージョンで hasLayout をトリガーして右の列をその幅に合わせるという原則を採用しています。
Yahoo と Google の列はどちらもフローティングを使用していません。唯一の違いは、Yahoo が絶対位置指定を使用するのに対し、Google はインライン ブロックを使用することです。Google は、一部の製品で IE8 のサポートを中止すると発表しているため、Google は他の下位バージョンのブラウザー用に多くのハックを記述することなく、大胆にインライン ブロックを使用してレイアウトを実装できます。
これらの中で最善の解決策はあるでしょうか?上記の各ソリューションにはそれぞれ長所と短所があり、特定のプロジェクトの背景に適している場合があります。同様に、選択されたソリューションはユーザー グループに関連している場合もあります。どちらのソリューションを選択しても、ユーザーの観点からは知覚できないものの、このため気軽にソリューションを使用することはできません。
後々のプロジェクトの保守性や使いやすさを考えると、最適なソリューションを選択しなければなりませんが、BFCやhasLayoutなどの基礎知識さえ理解していなければ、それは不可能です。同時に、私たちは自分たちの立場を明確にする必要があります。私たちは単なる「画像カッター」や「アーティスト」ではなく、障害を持つ一部のユーザー グループを無視することはできず、プロジェクト コードをよりエレガントで使いやすいものにする必要があります。再構築の基本的な仕事内容は、PSD を html + css + js に変換することですが、これだけでは良い再構築とは言えません。コミュニケーション スキルの向上、共有、思考、要約、フロントエンドのダイナミクスへの適切な注意の払い方など、すべてが必要です。もちろん、最も重要なのは、楽観的な姿勢と幸せな精神を持つことです。以下では、良い再構築を行う方法について詳しく説明します。もちろん、これはあくまでも私の個人的な意見であり、皆さんのコメントをお待ちしています。
専門家の観点から：
明確な自己ポジショニング
現在、中国ではフロントエンドを再構築とJS開発に分ける人はあまりいません。再構築にはPSが必須のソフトウェアですが、再構築は「画像カット」ではなく、画像カットは再構築作業内容の一部にすぎないことを知っておく必要があります。リファクタリングをしているからといって、他の技術を学ばない理由はありません。一生リファクタリングをするわけではないからです。JS を捨てることはできませんし、新しいフロントエンド技術にも精通している必要があります。ページをリファクタリングする場合、ほとんどの時間をページ モジュールの抽出、パフォーマンスの最適化、保守性と使いやすさの検討に費やし、コードの実装に費やす時間は最小限に抑える必要があります。おそらくあなたが書いたページは何百万人ものユーザーによって使用され、障害を持つユーザーもいるかもしれません。そのため、コードの完全性だけにとどまらず、さまざまなユーザーの気持ちや経験を考慮する必要があります。
フロントエンドの基本スキルに重点を置く
フロントエンドの基礎知識は、家の基礎のようなものです。基礎がしっかりしていないと、ちょっとした地震で倒壊してしまう可能性があります。同時に、城の扉のようなもので、扉がしっかり作られていなければ、敵の砲火ですぐに破壊されてしまう可能性があります。そのため、しっかりとした基礎を築くことが、前線でより多くの知識を学ぶための基礎となります。フロントエンド テクノロジ ソリューションを正しく合理的に使用できるように、CSS 属性の特性、HTML タグのセマンティクス、JS の基礎知識、W3C 仕様 (ブロック フォーマット コンテキスト、スタッキング コンテキスト、ボックス モデルなど) の学習と定着に多くの時間を費やすことができます。
最先端の技術を正しく扱う
インターネットは急速に発展しており、フロントエンド技術も急速に更新されています。私たちが CSS2 を学んでいたころには、CSS3 はすでに世界中で普及していました。私たちが CSS3 を学んでいたころには、CSS4 はすでに議題に上がっていました。フロントエンドの道では常に学びが尽きないので、新しい技術が生まれたら、それを正しく検証する必要があります。
仕事をうまくこなしながらも、学ぶ意欲を持ち続けてください。新しいテクノロジーを使ってみるのもいいですが、まずはなぜこの新しいテクノロジーを使いたいのかを理解してください。この技術を使用することでどのような改善が得られますか?フロントエンド技術では、最良の技術的ソリューションは存在せず、最も適切な技術的ソリューションのみが存在します。最新のものが必ずしも最良であるとは限りませんし、古いものが必ずしも最悪であるとは限りません。新しい技術を学ぶ際に、盲目的にトレンドに従わないでください。学んでいることが応用できるかどうかを知る必要があります。 （著者注：実際、ほとんどの場合、それは新しい技術ではなく、その技術は長い間存在しており、実際には2003年に誕生したCSS3のように、推進されてきた新しいフロントエンドソリューションまたは標準にすぎません）
コミュニケーションスキルの向上
私たちは毎日、開発、製品、設計、インタラクション、テストなどのさまざまな人々とやり取りしなければならないため、より優れたコミュニケーションと調整能力を持ち、より優れたコミュニケーションスキルに重点を置き、コミュニケーションコストを削減する必要があります。 「すべてはユーザーの価値に基づいています。」これはまさにインターネット業界で必要な概念です。同僚とコミュニケーションをとるときに誠実であることに加えて、ユーザーのことをもっと考慮する必要があります。本当にこれを行う必要がありますか？
技術フォーラムに選択的に参加する
小さな会社にいて、フロントエンドの人材が少なく、雰囲気が良くない場合は、インターネットとフォーラムという 2 つの方法でしかネットワークを拡大できません。 QQ グループ、Blue Ideal などのインターネットや対面フォーラムは、間違いなくネットワークを拡大する最も本格的な方法です。実際、現在の国内環境には、フロントエンド技術フォーラムが数え切れないほどあります。この時期にフォーラムを選択的に参加することは特に重要であり、理解できるかどうか、無料か有料かに関係なく、どのフォーラムにも参加すべきではありません。実際、最も重要なのは、自分に合ったものを選択することです。
ブラウザベンダーに注目
10年前、IEは世界のほとんどを支配していました。今日、他の主要なブラウザメーカーが世界市場シェアをめぐる戦いに参入しています。ブラウザは最も欠かせないフロントエンドです。ブラウザメーカーの行動とパターンに注目すると、将来を見据えた見通しが得られます。一部のブラウザ製造元の開発者ライブラリ: Microsoft の MSDN、Firefox の MDN、Google の開発者ライブラリ、Opera の開発者ライブラリ。さらに、さまざまなブラウザメーカーのプロモーション活動にも注目してください。Firefox China は、新しいバージョンがリリースされるたびに体験活動を行います。Microsoft の最新の IE10 も、発売時に中国でプロモーション活動が行われました。これらの新しいバージョンのブラウザの機能と、css3\html5 のサポートについて知ることができます。
さらなる責任と共有
平常時には、チームのコラボレーション標準やコーディング標準の再構築に関する合理的な提案をしたり、他の同僚がより迅速かつ効率的に改善するのに役立つドキュメントを出力したりするなど、より多くの追加作業を引き受けます。仕事の中で、優れた作業方法や新しいテクノロジーの研究に出会ったら、皆さんと共有することができます。再構築のチームの雰囲気は非常に重要です。一日中コードを書くだけのチームに留まりたいと思う人はいません。それは個人にとってもチームにとっても良くありません。
さらなる考察と結論
思考とは「意識の流れ」、具体的には再構築プロセス中の思考やアイデアを指します。思考の仕方によって行動が決まります。
リファクタリングに関しては、多くの人が設計案を入手した後、画像を切り取り、さまざまな要件を満たすためにあらゆる種類の「トリック」を使用します。設計案を入手した後、合理的なアーキテクチャを作成する方法、適切なモジュールを抽出する方法、よりエレガントな方法と軽量コードを使用してページの要件を満たす方法など、慎重な分析さえ行いません。
おそらく、現在の環境こそが、私たちに前進し続けるよう促しているのでしょう。フロントエンド フォーラムのほとんどは、特定のテクノロジーについて話し、特定の技術的詳細の実装にこだわり、パフォーマンスの最適化について話していますが、フロントエンド ソリューションを合理的に選択する方法、リファクタリング中にさまざまなシナリオで発生する問題を解決する方法、そして最も重要な、私たち自身のキャリアについて考える人はほとんどいません。私たちは、残りの人生でコードを書く準備ができているでしょうか?
サマリーは「レビュー」とも呼ばれ、検討を意味します。レビューはリファクタリングにおいて特に重要です。定期的なプロジェクトレビューにより、プロジェクト内の問題を発見し、将来的に再発を防ぐことができます。
もちろん、プロジェクトのレビューは 1 つの側面ですが、より重要なのはコード レベルのレビューです。不定期のレビューにより、一部のコードの詳細をよりエレガントに制御できるようになります。レビューは、コードの品質を向上させるだけでなく、チームのコラボレーション精神を強化し、チーム全体の技術力を向上させることもできます。明らかにこれは非常に意味のあることです。チームメンバーは、お互いのコードを一緒にレビューして、全員の短所と長所を見つけることができます。そうでなければ、私たちは自分のコードだけに集中する惨めなプログラマーになってしまいます。
人生の観点から：
読み続ける
インターネット上の情報は断片化されています。断片を整理する能力が十分でないとき、物理的な本は私たちの心を慰めるために特に重要です。人生や仕事で疲れ果ててしまうこともあります。そんなときは、ストレスを解消する方法を見つける必要があります。読書は良い方法です。
スポーツを続ける
仕事が忙しすぎるときは、仕事のやり方を変え、自分のニーズの優先順位を整理し、リラックスする時間を確保することを忘れないでください。このリラックスは、バドミントンをしたり、ジョギングをしたり、ジムに行ったりするなど、筋肉や骨を動かすことができるものでなければなりません。体を強くすることによってのみ、モンスターを倒してレベルアップするためのエネルギーを増やすことができます。
人生に対して楽観的な姿勢を保つ
人生における小さな幸せをうまく捉えることができれば、私たちは常に幸せに生きることができます。前回、テンセントヘルスガソリンスタンドで人生についての共有を聞いたのですが、その中で「人生は煮込んだチキンスープのようなもので、時には調味料やディップソースを加える必要がある」と述べられていました。確かに、これらのディップソースは、人生の小さな幸せを発見し、楽観的でオープンマインドで明るいフロントエンドの人になるためのものです。あまり疲れを感じないように、仕事と生活のバランスを調整してください。
まあ、専門的な観点からも、人生の観点からも、良い再建をするのは本当に簡単ではありません。楽観的で熱心で前向きな姿勢を維持し、学び続け、シンプルで幸せな生活を送ることが不可欠です。これで十分です。
実際、コードをリファクタリングしているだけでなく、自分の人生もリファクタリングしているのです。
