著者はフロントエンドの初心者で、フロントエンド ページの再構築を目指して学習し、成長しています。
ここでは、再構築に関する基本的な概念と成長に関する提案をいくつか紹介します。ページのリファクタリングを理解して学びたい学生にとっては役立つでしょう
記事内で言及されている関連記事はすべてリンク アドレスを示しており、これは記事のソースを説明するのに役立ち、読者が探索しやすくなりますもっと詳しく
学ぶ姿勢でこれらの記事を読んでください。また、私自身の学習アイデアを記事に追加したいと思っています
/*=========== =============== テキスト分割線 =========================*/
フロントエンドを学ぶ初心者がページ再構築と聞いて初めて尋ねるのが、フロントエンド エンジニアとリファクタリングエンジニアの違いは何ですか？
それでは、Zhihu で次の質問をすると、ある程度の理解が得られるでしょう
フロントエンドエンジニアと Web ページ再構築エンジニアの違いとつながりは何ですか?
[フロントエンド開発エンジニア] の仕事は、JavaScript、ActionScript、その他の言語を使用してクライアント側のスクリプトを作成することです。ダイナミックな効果を実現します。例: AJAX は記事のコメントを送信し、ユーザー履歴の閲覧記録をローカル ストレージに保存します。部分的に開発されています。
[Web ページ再構築エンジニア] の仕事は、CSS を記述してページ構造を合理化することで、ページ効果を実現し、パフォーマンスを向上させることです。例：ページのミクロデータ処理やSEOを行う、ページスタイルを統一するなど。 部分的にデザインされています。
前者は JavaScript、ActionScript、さらには iOS や Android クライアント プログラムに重点を置いており、後者は HTML、CSS、SEO などに重点を置いています。
2 つのテクノロジーは高度に重複しています。アリババ、タオバオ、アリペイにはそのような分業はありません。彼らはすべて [フロントエンド開発エンジニア] と呼ばれており、上記のスキルを理解している必要があります。 Tencent や WOYO などの企業では明確な分業が行われていますが、私の知る限り、彼らも上記のスキルをすべて知っています。
2 つの違いについて特別に調べたわけではありません。友人の話を聞いて私自身が理解したものなので、お役に立てれば幸いです。
著者: Wu Zhao
リンク: https://www.zhihu.com/question/19858246/answer/13172448
出典: Zhihu
これら 2 つの比較について記事を書きました
1 . ページの再構築には十分な忍耐と繰り返しが必要です。JS エンジニアは同じことを繰り返してはいけません。
2. ページの再構築にはデザイナーのアイデアを理解する必要があります。JS エンジニアはバックエンド エンジニアのアイデアを理解する必要があります。
3. ページの再構築は芸術に近く、想像力が必要です。JS エンジニアはプログラムに近く、論理的思考が必要です。
4. ページの再構築では、css3 に注意を払い、コードを使用してさまざまな効果を実現する必要があります。JS エンジニアは、HTML5 に注意を払い、新しい JS API を理解する必要があります。
著者: Zhou Wenbin
リンク: https://www.zhihu.com/question/19858246/answer/14726052
出典: Zhihu
/*========== ============区切り線========================*/
これを読んだ後上記の答えは少し抽象的だと思うかもしれませんが、リファクタリングとは具体的に何をするのでしょうか?
ページリファクタラー
ページリファクタラーの仕事内容は、単純に「デザインの下書きをWebページに変換する」というもので、PSDを直接Webページにエクスポートするという単純なものでも構いません。非常に複雑なので、ページ上のすべてのタグの使用を考慮し、「ページのパフォーマンス」を考慮する必要があります。
単純なページ再構築に関わる作業は、一般的に「デザイン案の解析→画像の切り抜き→HTMLとCSSの作成」ですが、この作業を上手くやるのは絶対に不可能です。 。理由は非常に単純で、仕事内容が単発で、デザイナーとの作業時間は3対1、つまりデザイナーが3日、制作が1日ということが多いためです。このような仕事の激しさのもとでは、多くの人が仕事への熱意を失うと、その仕事を維持することが容易に困難になってしまいます（おそらくすべての復興従事者）。仕事に参加する人）人）は能力を持っている必要があります。
リファクタリングは、単にページを作成することではなく、良いページを作成することです:
1. 構造が完成しており、標準の検証に合格することができます
2. タグがセマンティックであり、構造が合理的である
3.サイト内のページの位置を考慮する デザインドラフトの役割と重要性を考慮し、ターゲットを絞った最適化を実行する
1. デザインドラフトの分析 - デザインドラフトを分析する能力
1.デザイン案パートのpublicとprivateの間を決める
2. 1.に基づいて、各パートの実装の事前計画を立てる(絵の切り取り方、構造の書き方、スタイルの書き方など)3. 1の基礎を
正確に与える 各パートの実装計画を立てる（絵の切り方、構造の書き方、スタイルの書き方も含む） 4. 3.に基づいて、ソリューションのスケーラビリティ、再利用性、ページパフォーマンスを同時に考慮できるようにする(画像の切り取り方、構造の書き方、スタイルの書き方を含む) 5 . 4 をベースに、サイト全体の構造的な分散（ファイルの分散、ディレクトリ構造を含む）を検討します 上記はすべて、制作を開始する前に行う必要があることです。 2. カッティング カッティングとは、デザインの下書きをページに作りやすい写真に切り出すことを指します。写真をカットするということは、写真を切り出すことを意味するという誤解がありますが、実際には、カットした写真を結合することも含まれます。 パフォーマンスを最大化することもできます。 「カッティングは芸術」と言っても過言ではありません。 写真のカットもいくつかの段階に分けることができます: 1. 必要な写真にカットする (必要な部分を切り出す方法) 2. 1. に基づいて、カットされた写真にいくつかの最適化を実行します ( 圧縮ファイルサイズ 画像タイプの選択) 3. 2に基づいて、カット画像を計画します(ファイル配布を含む) 全体的なパフォーマンスを検討します 三、 HTMLとCSSの作成 HTMLとCSSの作成とは、デザイン案をWEBページに変換する上で最も重要な部分です。 HTML の記述方法は CSS の記述方法に影響を与えるため、それらをまとめるのにも注目する必要があります。 2. 1 に基づいて、複数のブラウザーとの互換性を実現します ( HTML ) 2. 2 に基づいて、 3.タグ セマンティック (HTML) 4. 3 に基づいて、より良い実装方法を選択します (モジュール構造、プログラム スクリプト、HTML および CSS の便利な使用を含む) 5. 4 に基づいて、 を検討しますスケーラビリティ、再利用性、保守性 (HTML と CSS) 6. 5.をベースに、サイト全体のスタイルの分散を検討する(実装方法も含む) 7. 6.をベースに、スタイルの最適化を行う。ライティング (テクニックの応用を含む) もう 1 つのポイントは であり、これはさまざまな段階で遭遇する可能性があるため、上記には何も書かれていません。 3、4、または 5 に達したか、それを超えた場合、おめでとうございます。あなたはすでにプロの「ページ再構築作業者」です。独自の開発では、新しいテクノロジー、技術革新、ユーザー エクスペリエンス、美観、プログラム スクリプトの実装の向上にも注意を払う必要があります。一緒に進歩しましょう。 から ページ再構築の作業内容はすでに理解されていますが、もう 1 つ非常に重要なことがあります。注意すべき重要な点は、Web デザイナーとのコミュニケーションと協力です 必須情報! Web デザインと再構築に関すること もう 1 つのトピック: 再構築に関連して、デザイナーがページのデザインについて不平を言い続けることもあります。ページは、ページほど美しくありません。デザイン ドラフトの間隔が大きすぎるか小さすぎる、フォントが小さいか大きい、画像が圧縮されすぎている、または画像が単純に切り取られているか、またはアニメーションが希望どおりの効果ではありません。 。 。 。これについて彼らを完全に責めることはできません。結局のところ、彼らはデザイナーではないので、私たちにも責任があります。しかし、私の個人的な見解は、再構築にはある程度の PS スキルまたはデザイン理論が必要であり、デザイナーが再構築するときに比較的高い品質を出力できるようにするためです。ページを確認する時間がありません。 テーブルが Web ページに組み込まれていた時代には、ほとんどすべての画像とアイコンは 1 つの http リクエストであり、サーバーは頻繁にそれを読み取る必要があり、多数のユーザーが常にアクセスしていました。サーバーに負荷をかける余裕がないため、電話を切る可能性があります。したがって、http リクエストをできるだけ減らす必要があり、背景画像の結合は非常に有効な方法です。 通常、背景画像の出力品質の割合は60〜80%に調整でき、より重要なアイコンや写真については100%に調整して高品質の画像を出力できます。 Web ページの読み込みプロセス中、またはネットワーク速度が原因で画像が一時的に読み込まれず、短期間の空白スペースが生じる場合は、ユーザーに次のことを思い出させるために、この領域の背景色を事前に定義することをお勧めします。このエリアにはコンテンツがあります。 画像の上にマウスを置いたときに、タイトルまたは alt を適切に追加して、画像の読み込みに失敗したときにユーザーが画像が何に使用されているかを理解できるようにします。 オンデマンド読み込み、非同期読み込み。Apple の公式 Web サイトの多くの場所で使用されている非同期読み込みに似ています。利点は、メイン ページの読み込み速度が向上し、ユーザーが必要な場合にのみ他の添付ページを読み込むことです。 CSS フィルターの使用を減らします。現在、それらを使用している人はほとんどいません。基本的に、グレースフル ダウングレードを使用したり、ユーザーにブラウザーのアップグレードを促したりします。 Web サイトを起動する前に CSS および JS ファイルを圧縮し、必ずバックアップしてください。 私はコードのエレガンスを達成していませんが、コードのエレガンスを達成するには、専門家がプロフェッショナルとしての資質を持っているかどうかを判断するのに十分な継続的な努力が必要です。ここで写真を見てみましょう~ 著者: @Lerroyli Tencent MIG ワイヤレス研究開発部 Web アート デザイナー /*=================== ==== 分割線 ==================*/ Zhang Xinxu は非常に長いブログ投稿で「宗派」の概念を紹介しました。 学習の過程で、Zhang Xinxu の関連ブログ記事をよく見つけます フロントエンド初心者として、深く感謝いたします ここを読むことを強くお勧めします。読者は Zhang Xinxu のオリジナルのブログ投稿を参照してください。読者は復興についてより深く理解できると思います。 これは、記事の最後に著者が書いた本来の意図と希望。 CSS ページ再構築の「学校」 5. CSS ページ再構築の「学校」の意識と寛容 なぜ「学校」という概念が提案されているのか、皆さんに見ていただければと思います。包括的な態度で他のピアの CSS コードとページの再構築方法をサポートします。 上記の QQ 同窓会ボタンとアダプティブ ボタンの例を見てみましょう。同僚の中には、特定のボタンを使用するときにボタンの仮想フレームが非対称であることに気づき、この Web サイトまたはこのページの制作者が非対称であると密かに思うかもしれません。私と細部へのこだわりの間にはまだギャップがあります。QQ Alumni や他の多くの Web サイトのアダプティブ ボタンを好む同僚は、密かにそのフロントエンド テクノロジだと思うかもしれません。これらのウェブサイトは本当に良くないし、ボタンには再利用性がまったくありません。 最終的な結果は、相互の軽蔑と軽蔑になるかもしれません。 実際には、それは必要ではありませんが、インクルーシブな精神は自分自身の成長にとって非常に重要であることに気づきました。 他人のコードを判断したり判断するために、決して自分自身の基準を使用しないでください。 あなたは直線上の点Aに立っていて、点Bに含まれる考えをどうすれば簡単に理解できますか。 私たちがすべきことは、あなたが軽蔑しているように見える他の人のコードやページの再構築方法を広い心で見て、そこから新しいことを学ぶことです。 この精神が私たちの成長の高さを決定します。私たちは常に飢え渇きを持ち、自分の決めたことに固執せず、柔軟に吸収し、変化していかなければなりません。 したがって、IE6 で特定のページのどこかが 3 ピクセルずれていることに気付いた場合でも、これがバグであり、このページのエンジニアの情熱が足りないなどと簡単に結論付けないでください。 おそらく、このエンジニアはページのスケーラビリティと CSS コードの数を重視しているため、一般のユーザーは気にしないでしょうが、それを解決するためのハックを作成する必要はありません。ページ上にボタンが表示されます。テキストも画像に切り込まれています。エンジニアのスキルが不十分でボタンが再利用できないとは考えないでください。おそらく、人々はより多くの画像を作成し、視覚的なエクスペリエンスを重視しているのでしょう。ボタンはより優れた視覚体験を提供します。 「スクール」という明確な概念はありませんが、実際には、CSS の世界には暗黙の「スクール」が存在します。 これを知ることには、一定の実用的な意味もあります。たとえば、（個人的な意見です。参考までに）テンセントに入社したい場合は、ページを書くときにテンセントが何を重視しているかを知る必要があります。 -scale company 大手インターネット企業のプロセス仕様は比較的成熟しています。先人から継承したものは、コード スタイルとそれに合わせてページを再設計することによって制御できるものではありません。 たとえば、拡張性と再利用性を第一に考え、エクスペリエンス、特に互換性 (ブラウザ間での一貫性) を第二に置くなど、自分のやり方に固執すると、最終的には間違いなく不幸になるでしょう。必要なのは、CSS コード (名前、スタイル) と製品ページの HTML 再構築のアイデアについて調査することだけです。 大企業の場合、通常の方法で CSS コードを記述することが適切ではない可能性がありますが、それが最善であることがよくあります。 将来、私がもっと成熟して、幸運にも他の人にインタビューできるようになったら、私がもっと注目するのは、相手の CSS と HTML コードの再利用性と拡張性が十分に高いかどうかです。 CSS コードが十分に簡潔であるかどうか、いわゆる互換性のためにパフォーマンスが十分に高いかどうか (これも重要です) は、最も必要な条件ではありません。 現時点で、あなたのコードとページがレンガの家のように四角くて規則的であれば、私は間違いなくあなたを切り倒します。流れるようなページレイアウトが必要です。 From /*= = ====================区切り線===================*/ 以下の抜粋は Bai の言葉を引用しますフロントエンド朝読教室の公開アカウントに載っているShuzaiさんの記事が、これからフロントエンドを始める学生さんの参考になれば幸いです Baishu - Blog Garden: グループの誰かが私に、「今からフロントエンドを学び始めるべきか？」と尋ねたのを覚えています。木を植えるのに最適な時期は 10 年前で、次にやりたいことをすぐに実行し、それに固執します。 。 フロントエンドに入ったばかりの学生にとって、最も重要なことは、CSS と JavaScript の基本的な原則を何度読んでも古くならないことを学ぶことです。体系的に学ぶための本を読むか、オンライン チュートリアルを探してから、プロジェクトを見つけるか、前述したようにデモを実行して、知識を経験に変え、それを続けるのが最もシンプルで最も簡単な学習方法です。明らか。 仕事が忙しくて勉強する時間があまりないという学生もいますが、例えば私は毎日仕事の前後に1時間ほど時間を費やしています。バスや地下鉄の中で、特に朝の通勤中に携帯電話で読書や勉強をすると、学習効率が非常に高くなります。 現在、フロントエンド業界は非常に奥深く、さまざまなビジネス上の問題を解決し、生産効率を向上させるために、技術革新が非常に速いため、迅速に学習する能力が重要な競争力の 1 つではありません。つまり、あらゆるテクノロジーを学ぶ必要があり、他のことを理解したら、必要なときに学ぶのに遅すぎるということはありません。新しいフレームワークを使用するための学習の敷居はそれほど高くなく、簡単に始めることができます。この観点から、フロントエンドに入ったばかりの初心者は、その奥深い原則を習得するのに特に有利です。この段階で学ぶ努力をすれば、上級エンジニアのレベルに到達できるかもしれません。 誰にとっても有益な学習方法であっても、他の人にとっては適さないものもあります。自分自身の生活習慣や考え方に基づいて、実践を通して自分の方法を見つけなければなりません。 グループの中に 3D 回転アニメーションについて尋ねてきた大学院生の女の子がいました。簡単な原理を説明した後、参考のためにサンプルを送りたいと思ったのですが、彼女はそれをどうやって行うか考えなければならないと言いました。彼女自身も笑顔で親指を立てます。 問題に遭遇したときに「自分で考える」ことを学ぶことは、最も基本的な能力の1つであり、どの業界で働いていても、それを習慣化することができます。 。残念なことに、フロントエンド分野に入ったばかりの多くの学生が、問題に遭遇するとすぐに質問したり、既製のデモを要求したりするのを目にしました。 考えても解けない場合はBaiduやGoogle（stackoverflowなど）で検索できますが、ある程度の英語力は必要です。グループに参加したり他の方法で「質問する」という問題がどうしても解決できない場合は、Zhang Xinxu 著「フロントエンドマスターへ進むための質問の仕方」 http:// www.zhangxinxu.com/wordpress/2015/05/how-to-ask-web -front-question// /*===================== ===区切り線================ ===*/ 優れたフロントエンド再構築エンジニアになる方法 From 著者: smallni 出典: Tencent TGideas 公開時間: 2013-01-05 16:58 専門的な観点から: 明確なセルフポジショニング 現時点では、国内のフロントエンドはリファクタリングとJS開発に分かれているわけではありません。PSはリファクタリングに必須のソフトウェアですが、リファクタリングは「絵を切り取る」作業ではないことを知っておく必要があります。 。リファクタリングをするからといって他のテクノロジーを学ばない理由はありません。リファクタリングは一生行わないことを知っているからです。JS を失うことはできませんし、新しいフロントエンド テクノロジーにも精通していなければなりません。ページを再構築するときは、ページ モジュールの分離、パフォーマンスの最適化、メンテナンスの容易さ、使いやすさにほとんどの時間を費やし、コードの実装には最小限の時間を費やす必要があります。おそらく、あなたが作成したページは何百万ものユーザーによって使用され、障害のあるユーザーもいる可能性があるため、コードの完成だけではなく、さまざまなユーザーの感情や経験を考慮する必要があります。 フロントエンドの基礎スキルに集中 フロントエンドの基礎知識は家の基礎のようなもので、基礎がしっかりと築かれていないと、地震が起こったときに倒壊する可能性があります。同時に、それは城のドアのようなもので、ドアがしっかりと構築されていないと、敵の砲撃ですぐに突破されてしまう可能性があるため、フロントエンドがより多くの知識を学ぶには、適切な基礎を築くことが重要です。 CSS 属性の特性、HTML タグのセマンティクス、JS の基本知識、および W3C 仕様 (ブロック フォーマット コンテキスト、カスケード コンテキスト、ボックス モデルなど) については、より多くの時間をかけてこれらを学習して統合することができます。正しく合理的である可能性がある 特定のフロントエンド テクノロジ ソリューションを使用します。 最先端のテクノロジーを正しく扱いましょう より良いコミュニケーションスキル 技術フォーラムに選択的に参加する 10年前、IEは世界のほとんどを独占していましたが、現在、他の主要なブラウザメーカーが世界シェア争いに参入しています。フロントエンドと最も切り離せないのはブラウザです。ブラウザメーカーのパターンは、将来を見据えた視点を与えてくれます。一部のブラウザ メーカーの開発者ライブラリ: Microsoft の MSDN、Firefox の MDN、Google の開発者ライブラリ、Opera の開発者ライブラリ。また、Firefox 中国では新バージョンがリリースされるたびにプロモーション活動が行われており、Microsoft の最新の IE10 の機能についても知ることができます。これらの新しいバージョンのブラウザと css3html5 のサポートについては、どの程度サポートされていますか? より多くの責任と共有 平時は、チームのコラボレーション標準やコーディング標準を再構築するための合理的な提案を出したり、他の同僚がより速く、より効率的に作業できるようにするための提案を出したりするなど、より多くの追加作業を引き受けます。ドキュメントも改善されました。自分の仕事の中で優れた作業方法や新しいテクノロジーの研究に出会ったら、それをみんなと共有することができます。リファクタリングのチームの雰囲気は非常に重要です。一日中コードを書くだけのチームに留まりたい人はいません。これは個人にとってもチームにとっても有害です。 その他の考えと要約 思考とは「意識の流れ」、特に再構築プロセス中の私たちの思考や概念を指します。 リファクタリングとして、多くの人はデザインドラフトを取得した後、さまざまなニーズを実現するためにさまざまな「奇妙なトリック」を使用して写真を切り取ることに没頭し始めます。デザインドラフトを取得した後、綿密な分析さえ行いません。合理的なアーキテクチャ、適切なモジュールを抽出する方法、よりエレガントな方法と軽量コードでページ上の要件を実装する方法。 おそらく、私たちが前進し続けることを促しているのは、現在の環境です。さまざまなフロントエンド フォーラムのほとんどは、特定のテクノロジーについて話しており、特定の技術的な詳細の実装に絡み、パフォーマンスの最適化が不十分であることについて話しています。フロントエンド ソリューションを合理的に選択する方法、リファクタリング中にさまざまなシナリオで遭遇する一連の問題を解決する方法、そして最も重要なことに、私たち自身のキャリアに関する考え方、つまり一生コードを書く準備ができているかどうかについて語る人はほとんどいません。 概要は「レビュー」とも呼ばれ、レビューとレビューを意味します。定期的なプロジェクトレビューは、プロジェクト内の問題を発見し、将来の再発を防ぐことができます。 もちろん、プロジェクトのレビューは 1 つの側面であり、さらに重要なのは、コードレベルのレビューを不定期に行うことで、コードの品質を向上させるだけでなく、より洗練されたコードの管理を行うこともできます。チームの協力精神を強化し、チームの全体的な技術能力を向上させます。明らかに、これは非常に意味のあることです。チームメンバーは全員のコードを一緒にレビューして、各人の欠点やハイライトを見つけることができます。そうでなければ、私たちは自分のコードに埋没しているだけの勤勉なプログラマーになってしまいます。 人生の観点から: 読書への情熱を持ち続けましょう インターネット上の情報は断片化されており、断片を整理する能力が十分にない場合、物理的な本は特に重要です。私たちの魂を慰めてください。時々、人生や仕事に圧倒されてしまうことがあります。そのようなとき、私たちはストレスを解消する方法を見つける必要があります。読書は良い方法です。 スポーツ趣味を貫きなさい 自分の仕事方法を決め、必要なものの優先順位を整理し、自分自身をリラックスさせるための一定の時間を確保し、このリラックスによって筋肉や骨が動き、おそらく遊びができるようにする必要があります。バドミントンしたり、ランニングしたり、ジムに行ったり。体を強くすることによってのみ、モンスターを倒したりアップグレードしたりするためのより多くのエネルギーを得ることができます。 人生に対して楽観的な態度を維持しましょう 人生の小さな幸せの粒子を捉えるのが上手になれば、私たちは幸せに生きることが多くなります。前回、私は騰訊健康ガソリンスタンドでの生活についての話を聞きました。その中で、「人生は鶏のスープを煮込むようなもので、時には調味料やディップソースを加える必要があります。まさに、これらのディップソースは、小さな幸せを発見するためのものです。」とありました。人生を楽観的で、オープンマインドで陽気なフロントエンドの人になりましょう。疲れすぎないように、仕事と生活のバランスを調整しましょう。 そうですね、プロの観点から見ても、人生の観点から見ても、優れたリファクタラーになるのは簡単ではありません。楽観的で熱心で前向きな心を維持し、学び続け、シンプルに生きることが不可欠です。そして幸せな人生、これで十分です。 実際、コードをリファクタリングしているだけでなく、自分の生活もリファクタリングしているのです。 フロントエンドの学び方
学習の過程で、遭遇した問題をどのように解決しましたか?
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
