1. まえがき

数か月ほど前、『Insider of WebKit Technology』という本を読み終えたとき、突然思いつきました。 Web フロントエンド開発に必要なすべての知識を 1 つのビューにまとめて、完全な Web フロントエンド知識システムを形成したいと考えています。その目的は、フロントエンドには 3 つのブロック (html、css、css) しかないという人々の理解を覆すことです。 js) - —Web フロントエンドであるためには、これら 3 つのブロックよりもはるかに多くのブロックが必要です。

数ヶ月先延ばしにしていたのですが、近々参加するイベントのため、この二日間で整理しなければなりません。やるだけ。朝からオフィスでスケッチを始め、混乱したアイデアを整理しました。

実際、以下の知識フレームワークはスケッチのものよりもはるかに優れています。

わかった、これ以上ナンセンスはやめてください。 htm、css、js に加えて、Web フロントエンド開発で段階的に習得する必要があるものについては、以下の私のブログの内容に従ってください。

内容を見る前に、このナレッジフレームワークのプレビューを見てみましょう。画像は大きすぎて表示できないため、明確に見ることができません

: http://pan.baidu.com/s/1hqIUvUc (ナレッジシステム全体の画像と xmind ファイルが含まれています)

。

2. 分類

すべての知識フレームワークは構造的な表示、つまりツリーでなければなりません。 Web フロントエンドには多くのナレッジポイントがあり、それらは非常に散在しています。システムを整理するには、いくつかの層の構造が必要です。そうしないと、非常に乱雑に見えてしまいます。では、それをどのように整理し、誰と誰を配置するのでしょうか？これは本当に考える価値があり、あなた自身もこの問題について考えることができます。

私がまとめた知識フレームワークでは、まず第一層を

理論知識、クラスライブラリフレームワーク、コーディング開発、動作環境に分けました。下の写真に示すように:

説明しましょう:

この写真は下から上に見る必要があります。なぜでしょうか。 ——以下が上記の基礎となるからです

まず、一定の理論的知識が必要です他の人の講義を聞く場合でも、自分で本を読む場合でも、ネットで情報を検索する場合でも、一定の理論的な知識が必要です。あらゆる種類のプログラム開発には、すべてが避けられません。

第二に、この理論的知識があればコーディングは可能ですが、jquery などのサードパーティのフレームワークやライブラリの誘惑には誰も抵抗できません。
3 番目に、この理論的な知識とそれを支援するクラスライブラリフレームワークを使用して、実際にコードを作成できます。コーディング開発は単にコードを書くことだけではないと思うかもしれませんが、他には何があるのでしょうか? ——ここにはたくさんのことがあります
最後に、プログラムを開発する目的は、対応する環境で効率的かつ安定して実行することです。楽しみにしていてください

3. 理論知識には「ソフト知識」と「ハード知識」があります

「ソフト知識」と「ハード知識」は聞きなれないかもしれませんが、実は一度理解すれば誰でも理解できます。それを言ってください。

いわゆる「ソフト」とは、データ構造、アルゴリズム、デザインパターン、オブジェクト指向など、さまざまなプログラム開発に使用できる基本的なスキルと内部スキルを指します
。
いわゆる「ハード」」は、このプログラムの開発に直接使用できます。 C 言語を使用するには、C 言語の構文を学習する必要があります。現時点では Java を学習しても役に立ちません。 Web フロントエンド開発に必要な具体的な知識は、実際には 3 つの標準に含まれています: http 標準、W3C 標準、ECMAScript 標準

4. Web フロントエンド開発の「難しい知識」について話しましょう。

「ソフト知識」には多くの内容が含まれており、大学での学びの焦点でもあります（しっかり学べなかったとしても、それはまた別のことであり、卒業後に補うことができます）。今回は主にWebフロントエンドの方向性について議論しますが、この知識もナレッジシステムにおいて重要な役割を果たしているということを皆さんに知っていただくためにこの辺にさせていただきます。

ハード知識には 3 つの標準があると述べました:

http 標準、W3C 標準、ECMAScript 標準

。では、これら 3 つの標準について 1 つずつ説明します。 4.1 http standard

なぜWebフロントエンドを行う際にhttp標準を理解する必要があるのでしょうか？ ——ブラウザはサーバーから Web ページを取得する必要があるため、Web ページは http 接続を持つサーバーに情報を送信することもあります。 Web システムは http リンクに関連しているため、それを理解する必要があります。

私の意見は、http の詳細をあまり知る必要はありませんが、Web フロントエンド開発における http の一般的な知識、つまり上の図にリストしたものを理解する必要があるということです。もちろん、私は私の知識の概要を作成しました。詳細は自分で調べる必要があります (この記事では知識のフレームワークについて説明し、知識ポイントの詳細については説明しません)

この分野の知識については、「図解」を見るのがオススメ http』この本には、これらの内容が分かりやすく書かれており、以前読んだことがあります。

4.2 W3C 標準

Web フロントエンドの標準を 1 つしか知らない場合、それは W3C 標準でなければなりません (私の知る限り、ほとんどの人は実際にはこの 1 つの標準しか知らないようです)。多くのコンテンツが含まれています。www.w3.org/TR/ をご覧ください。

これを書いていて、次の文章を思い出しました: 2/8 原則 - 20% の機能が 80% のニーズを満たす。この文はここでは非常に適切だと思います。私たちは日常の開発プロセスであまり多くのものを使用しません。代わりに、普段よく使うものを理解する必要があります。

下の図の知識は説明する必要はないと思いますが、これらは私が記事開発で話す「3つの大きなブロック」（html、css、js）です。ここで、これらは W3C 標準の一部にすぎず、W3C 標準は Web フロントエンド開発ナレッジシステムの一部にすぎないことを理解しておく必要があります。

（下の画像は完全に展開されていません。拡大した画像を見たい場合は、この記事の冒頭にある添付ファイルをダウンロードしてください）

CSSの基礎知識については、前回のブログシリーズの一つ：「CSSについてどれくらい知っていますか？」》

4.3 ECMAScript

ESはフルネームで書くのが面倒です。

JavaScript だけを知っていて ES を知らない人もいるかもしれません。実際、js は ES に基づいており、Web ブラウザーのカプセル化 (DOM 操作、BOM 操作などの追加) を実行します。

上の図にあるように、これらの概念はJavaScriptでよく見かけるかもしれませんが、実際にはESの内容です。ただ、JavaScript は ES のこれらの特性を継承しており、JavaScript は広く使用されているため、js で議論されることが多くなります。

やはり「2/8原則」です。実際、ES には多くのコンテンツがあり、非常に速く更新され、現在は ES6 に達しています。しかし、上に挙げたものは最も重要な概念です。プロトタイプ、クロージャ、スコープを理解していないということは、ES を完全に理解していない、つまり JavaScript の使用方法を完全に理解していないことを意味します。

以前のブログシリーズを参照してください: 「JavaScript プロトタイプとクロージャシリーズの詳細」

5. フレームワークとクラスライブラリ

Web フロントエンド開発に必要な理論的知識は次のとおりです。上で説明しました。どのように実践すればよいでしょうか？ ——無謀な行動はできません——どの有名人が私たちに多大な貢献をしてくれているかを知るには、世界中を回らなければなりません。

次のライブラリまたはフレームワークを使用すると、開発効率が大幅に向上します。

まず第一に、jquery はほとんどの Web フロントエンド開発者にとって不可欠なツールである必要があります。 jquery を使用するときは、その API とプラグインを使用するだけではなく、jquery のソースコードを読み、jquery の設計思想も理解します。それができれば、信じてください、素晴らしい結果が得られるでしょう。質問がある場合: JavaScript イベントシステムを最も完全に理解するにはどうすればよいですか?ベストアンサーの1つ：何回か読んでください（1回では理解できないかもしれません） jqueryのイベント処理のソースコードです！
Bootstrapについては、あまり説明する必要はありませんが、githubのランキングを見れば分かります。弊社のUIデザイナーもbootstrapのスクリーンショットを素材として撮影しています。
fontAwesome は世界で最も強力なアイコンシステムです。 CSS でアイコンを作成する場合と比較すると、開発、効率、メンテナンスの点で何倍も優れています。 icomoon.io を使用すると、独自のアイコンファイルをカスタマイズして選択できます。
requirejs や seajs などのモジュール定義システムもシステムに不可欠です。私はかつてチュートリアルを見たことがありますが、インストラクターはこう言いました。requirejs は jquery に次ぐ 2 番目のフロントエンドテクノロジの変化をもたらしました。
その他、バックボーン、角度、反応などは、エネルギーが限られているため、ここでは詳しく説明しませんが、それらは非常に重要なので、少なくとも理解するように努める必要があります。