検索

ホームページ  >  記事  >  ウェブフロントエンド  >  github 上の最も包括的なリソース チュートリアル - フロントエンドに関係するすべてのナレッジ システム

github 上の最も包括的なリソース チュートリアル - フロントエンドに関係するすべてのナレッジ システム

WBOY
WBOYオリジナル
2016-09-20 03:30:002885ブラウズ

フロントエンドは間違いなく、2016 年に最もホットなテクノロジーです。

Angular js、vue、react など、さまざまなフロントエンド MVC フレームワークが次々と登場し、フロントエンドコンポーネント開発の概念は人々の心に深く根付いています。フロントエンドの給与はすでにモバイル開発よりも高くなっています。

個人のウェブマスターとして、フロントエンドデザインを学ぶことも必要です。まず、いくつかの小さなデザインの問題を自分で解決し、同時に自分の美しさを改善し、ウェブサイトのUIデザインレベルを向上させることができます。 。

必須の基本スキル

フロントエンドスキルの概要 このプロジェクトでは、フロントエンドエンジニアに関わるあらゆる知識を
詳細に記録します。基礎的なスキルを身につけたら、学習の方向性を見つけてスキルや知識を向上させることができます。

frontend-dev-bookmarks は外国人がまとめたフロントエンド開発リソースです。対象範囲は非常に広いです。さまざまな知識、ツール、テクニックが含まれており、非常に包括的です。

以下は、私が個人的に初心者レベルで習得する必要があると考える基本的なスキルです:

    HTML4、HTML5 構文、タグ、セマンティクス
    • CSS2.1、CSS3仕様、HTMLと組み合わせて様々なレイアウトや効果を実現
    • Ecma-262で定義されたJavaScriptの言語コア、ネイティブクライアントJavaScript、DOM操作、HTML5の新機能
    • 成熟したクライアントサイド JavaScript ライブラリ、jquery を推奨します
    • サーバー側の言語: サーバー側の開発経験がある場合は、すでに知っている言語を使用できます。Java に精通している場合は、サーブレットを選択できます。慣れていない場合は、単純なログインおよび登録機能を実装するだけで十分です。ただし、最も基本的な要件は、将来的に学習を続ける必要がある場合があります。 、
    • HTTP
上記の基本スキルを習得すれば、仕事で必要な技術をすぐに学ぶことができます。

基本的な開発ツール

適切なツールは、学習効率を効果的に向上させ、知識自体に集中し、問題が発生したときに迅速に特定して

解決することができます。私が個人的に必要だと思うフロントエンド開発ツールは次のとおりです。

    テキストエディタ
  • : Sublime Text が推奨され、さまざまなプラグイン、テーマ、設定をサポートしており、使いやすいです
    • ブラウザ
  • : Google Chrome が推奨されます。更新が速く、さまざまなフロントエンド標準を非常に適切にサポートします
    • デバッグツール
  • : Chrome に付属の Chrome 開発ツールを使用することをお勧めします。DOM 構造とスタイルの表示、コンソールからのデバッグ情報の出力、JavaScript のデバッグ、ネットワークの表示などが簡単に行えます。 補助ツール
    • : 写真の編集、色の選択、Fireworks でのサイズの測定、AlloyDesigner でのサイズの比較を行う PhotoShop、および上記の Chrome 開発ツール
  • FQ ツール
    • : ランタン、Gecko Walk
  • 学習方法と学習目標
方法:

エントリー段階で繰り返し読んでください

古典本の中国語版
    、本の中のすべての例を実装し、ブラウザで効果を確認してください
  1. ある程度の基礎ができたら、オンラインでさまざまなチュートリアルやデモを検索して、さまざまな機能の実際の使用方法や一般的な機能の実装方法を学ぶことができます
    2. HTML、CSS、JavaScript標準を読んで知識ポイントを包括的に向上させます
    3. フロントエンド専門家のブログや記事を読んで、知識の理解を深める
    4. 検索エンジンを上手に活用しましょう
  5. 目標:

これまでの知識ポイントの重要な概念を暗記し、学習経験に基づいて独自の理解を深めます

    一般的なCSSレイアウト、タブコントロールなどの一般的な機能の実装方法に精通している。
  2. 入社までの道のり
以下は入門段階に適した書籍と教材です

  1. HTML については、まず「HTML & CSS: Design and Build Websites」の第 1 章から第 9 章を読み、次に「HTML5: The Missing Manual」の第 1 章から第 4 章を読みます。
  2. CSS: まず「CSS: The Missing Manual」を読んでから、「CSS Definitive Guide」を読んでください
  3. JavaScript については、まず「JavaScript アドバンスト プログラミング」を読んでから、「JavaScript 決定版ガイド」を読んでください
  4. HTTPHTTP の決定版ガイドを参照してください
  5. HTML、CSS、JavaScript は学習プロセス全体で相互に組み合わせる必要がある箇所が多くあり、これは実際の作業でも同様であり、単純な機能モジュールを実装する必要があります。
  6. 実践は学習の重要な部分です。書籍では知識ポイントの説明に重点が置かれているため、サンプルだけでは不十分な場合があります。そのため、検索エンジンを使用して簡単なチュートリアルを見つけ、そのチュートリアルに従って機能を実装する必要があります。ここにいくつかのより良いチュートリアルの URL があります
    • 大手企業のフロントエンドキャンパス採用筆記試験の面接質問を練習問題や他人がまとめたフロントエンド面接の質問、個人がまとめた面接質問（参考回答付き）を検索できます
    • http://code.tutsplus.comにはさまざまなチュートリアルがあります
    • MDN には多くのチュートリアルもあり、さらに重要なことに、特定の機能を見つける必要がある場合は、Google で検索してください: xxx site:https://developer.mozilla.org
      • 。
    • http://www.html5rocks.com/zh/ にも高品質のチュートリアルが多数あります
    • http://www.sitepoint.com/
    • http://alistapart.com/
  7. ネイティブ JavaScript は習得する必要があるスキルです。ネイティブ JavaScript を習得するためには、実際の仕事で非常に役立つ jQuery に習熟することをお勧めします。この分野の書籍には、「Learning jQuery」が含まれます。 jQuery公式サイト
  8. https://github.com/ アカウントを作成して、普段勉強しているさまざまなコードやプロジェクトを保存します。
  9. ある程度の基礎ができたら、個人ブログを開設して、学習プロセス中に発生した問題と解決策を記録することができます。これは、自分自身が確認するのに便利であり、他の人にも役立ちます。 http://www.cnblogs.com/ または http://www.csdn.net/ にアクセスしてアカウントを登録することもできます。これは便利で実用的です
  10. 英語の情報を検索するために Google をよく使用する場合は、http://stackoverflow.com/ から質の高い回答を見つけることができます。元気があれば、ここで直接検索してください。他の人の質問に答えることで、私生活の能力も大幅に向上します。
  11. 古典的な本に慣れたら、前の重要な基本スキルのセクションへのリンクを開くことができます。対応する規格をよく読み、知識を完全にマスターしてください

改善を続けます

前の基礎ができたら、基本的にフロントエンドを開始します。この時点では、誰もが学習の方向性を念頭に置いているかもしれません。
前の必須スキルのセクションで説明した 2 つのプロジェクトを参照し、開発と学習のためにその中からいくつかを選択できます。ここにいくつかの良い点があります:

  • Grunt: 作業効率を向上させるフロントエンド自動化ツール
  • CSS なし: 優れた CSS プリプロセッサ
  • ブートストラップ: 優れた CSS フレームワーク、デザイナーのいないチームに非常に適しており、少ないものと組み合わせると完璧です
  • requirejs: AMD 標準モジュールローダー、フロントエンドのモジュール化トレンドに不可欠なツール
  • Node.js: JavaScript はバックエンドとしても使用でき、フロントエンド エンジニアをより高いレベルに引き上げます
  • AngularJS: シングルページアプリケーションに適したツール
  • モバイル Web 開発: スマートフォンの普及により、モバイル トラフィックが PC トラフィックに徐々に追いつきつつあります
  • JavaScript メモリ管理: SPA の長期運用ではメモリ リークに注意する必要があります
  • 高性能JavaScript(より高速なWebアプリケーションインターフェイスの構築)
  • Web サイトを高速化するためのベスト プラクティス: 重要なスキル

個人的な経験

LingyuCoder の学習体験

上記のマスターがかなり要約しているので、ここではいくつかのナンセンスを述べます

####ツール

  • Chrome 開発ツール: フロントエンドの開発とデバッグのための強力なツールで、いくつかの機能に重点を置いています。
    • コンソール(ナンセンス)
    • 要素: 要素のスタイル調整、非常によく使用されます
    • ソース: コードにブレークポイントを追加し、シングルステップ デバッグし、シングルステップ デバッグ中にメモリ内のオブジェクトを表示します。
      • 式を監視: 式を通じて現在のメモリ内の値を表示します
      • 呼び出しスタック: 呼び出しスタックを表示し、非同期をオンにすると、非同期呼び出しスタックを確認できます (これは、特に ajax をデバッグするときに非常に便利です)
      • スコープ変数: スコープチェーン上の変数、非常に便利です
    • ネットワーク: 各リクエストを表示するためにパケットをキャプチャします。非常に重要で、フロントエンドとバックエンドの共同デバッグに必要です
    • タイムライン: レンダリング、JS 実行、その他のステージを分析し、パフォーマンスを最適化するための強力なツールです
    • エミュレーション: モバイルページ開発に不可欠なモバイル環境をシミュレートします
    • いくつかのプラグイン:
      • liveload: ページの変更後に自動的に更新され、F5 を押す必要はありません
      • 寸法: ページ上で直接測定できる強力なツール
      • ライブスタイル: CSS スタイルは変更後に自動的に有効になり、更新する必要がなく、要素の変更もコードと同期できます
      • 画像ツール: 測定、色選択
      • UC QRコード:モバイル端末でのデバッグとスキャンに必須
      • pagespeed、YSlow: ページパフォーマンス分析および最適化プラグイン
      • Mark Feixiang: 優れたオンライン マークダウン エディター、週次レポートをすばやく作成し、メモを取る
  • sublime text2: 便利なコーディング、多くのプラグイン、高速、優れたパフォーマンス
    • emmet: HTML エンコード速度を向上させるために不可欠
    • sublimelinter + lint とさまざまな言語のヒント: コードエラー修正
    • 一部のスニペット: 開発効率を向上させるための自動補完
  • Intellij IDEA と WebStorm: さまざまな機能を統合した統合開発環境、開発は Sublime よりも便利ですが、パフォーマンスは高くなります
  • Mark Men: 測定、色選択、マーキングのための強力なツール。ビジュアル ドラフトを取得した後に最初に開くソフトウェアです
  • GFW ファッカー: 私は可能であれば、Hongxing を使用して、はしごとして使用する仮想サーバーを購入します。
    • iHosts: 非常に優れたホスト管理ソフトウェアで、ホストの変更が簡単で、開発とデバッグに不可欠です
    • Charles: Mac プラットフォームで最高のパケット キャプチャおよび分析ツール
    • Rythem: AlloyTeam が作成したプロキシ パケット キャプチャ ソフトウェアは非常に軽量で、インストールが簡単で、モバイル端末 (実機) の開発とデバッグに使いやすいです
    • Wunderlist: 非常に優れたTodoリストで、タスクやニーズが多い場合に管理するのに非常に便利です
####スキル

実際、JavaScript (NodeJS を含む)、HTML、CSS 以外にもフロントエンド スキルはたくさんあります。実際、フロントエンドのスキル ツリーは非常に大きく、ここでは私が開発中に見たものの一部のみをリストします
#####言語の基本
JavaScript:

    スコープチェーン、クロージャ、ランタイムコンテキスト、これ
    • プロトタイプチェーン、継承
    • NodeJS の基本と共通 API
CSS:

    セレクター
    • ブラウザの互換性と一般的なハック
    • CSS レイアウトの方法と原則 (ボックス モデル、BFC、IFC など)
    • CSS 3、アニメーション、グラデーションなど
HTML:

    セマンティックタグ
#####上級

JavaScript:

    非同期制御(Promise、ES6ジェネレーター、Async)
    • モジュール型開発手法（AMD、CMD、KMDなど）
    • JavaScript インタープリターに関する知識
    • 非同期IOの実装
      • ガベージコレクション
      • イベントキュー
    • 一般的に使用されるフレームワークとその原則
    • jQuery: セレクターに基づいたフレームワークですが、個人的にはフレームワークとは言えないと思いますが、モジュールのロード機構がなく、ソースコードは読書や学習に非常に適しているため、ツールライブラリと考えるべきです
      • AngularJS/Avalon およびその他の MVVM フレームワーク: MVVM パターン自体の概念と双方向バインディングの実装、およびそれを分離する方法の理解に焦点を当てます
      • アンダースコア: 優れたツール ライブラリ、一般的なツール コード スニペットの実装を理解しやすい
      • ポリマー/React: コンポーネント開発、未来に直面し、コンポーネント開発の原則を理解する
CSS と HTML: 主に CSS3 と HTML5 の機能、およびブラウザーの処理プロセスと描画原理について説明します

    DOMツリー、CSSOMツリー、レンダリングツリー構築プロセスとページレンダリングプロセス
    • HTML、CSS、JavaScriptの解析時に発生するブロック
    • HTML5関連
    • SVG とベクター グラフィックスの原則
      • キャンバスの開発とアニメーションの原則（フレームアニメーション）
      • ビデオとオーディオ
    • フレックスボックスのレイアウト方法
    • アイコンフォントの使用
一般的に使用される NodeJs パッケージ:

    コア
    • 急行
    • アンダースコア
    • 非同期
    • ゴクゴク
    • うなり声
    • 接続
    • リクエスト
いくつかのアイデア:

      レスポンシブウェブ
      • エレガントな劣化、漸進的な強化
      • ドン
    • t make me think
    Webページの使いやすさ、アクセシビリティ、意味
    • SEO 検索エンジンの最適化、検索エンジンの原理を理解する
    • SPAの利点と問題点
パフォーマンスの最適化:

  • リクエスト数を減らす(スプライト、コンボ)
  • キャッシュを上手に活用しましょう（アプリケーションキャッシュ、httpキャッシュ、CDN、ローカルストレージ、セッションストレージ、メモモード）
  • セレクターの消費を削減（右から左）、DOM 操作を削減（DOM と JavaScript インタープリターの分離）
  • CSSのリフローと再描画

#####プロジェクト

  • バージョン管理: Git を使用したことがあれば、SVN を再度使用する必要はありません。
    • Git: ローカルバージョン管理のメカニズム
    • SVN: リモートセンターのバージョン管理メカニズム
  • 自動構築: 主にless、テンプレート、コーヒーなどの前処理と、コードの圧縮とマージ
    • Gulp: フローに基づいて構築され、高速で優れたモジュール品質
    • グラント: 独立したタスクの構築、遅い速度、面倒な構成、高い柔軟性
  • 前処理とテンプレートエンジン
    • less: 構文はシンプルですが、機能は制限されています
    • jade、ejs、Velocity、その他のテンプレート エンジンには、それぞれ独自の強みがあります
    • コーヒー: Pythonエンジニアのお気に入りですが、私は使ったことはありません
  • 環境構築: 主にオンラインコードをローカルにマッピングし、ローカルでデモサーバーを起動します。 シミュレートされたデータのモックについては、人によって意見が異なります。
    • ローカルプロキシ: ihosts
  • 自動テスト: ビジネスが比較的安定している場合は、自動テストを使用してテスト インシデントを減らすことができますが、需要が高い場合はテスト ケースの維持コストが高くなり、自動テストは逆効果になる可能性があります。
    • ジャスミン
    • モカ
  • 生態系
    • npm
    • 弓
    • spm
  • 自分のブログを構築する
    • git ページ
    • ヘクソ
    • ジキル

#####未来

  • Web コンポーネント: 未来志向のコンポーネント開発アプローチ
    • HTMLテンプレート
    • シャドウ DOM
    • カスタム要素
    • HTMLインポート
  • モバイル端末のネイティブ開発: これも理解する必要があります。今後、フロントエンドエンジニアは WebView を扱うことが多くなり、ネイティブ開発についても理解する必要があります。
#####その他

インターンシップに参加して感じた、コードを入力するだけでは解決できないこともありました

  • ビジネスについて考える: 私は個人的にこの側面が非常に欠けているので、それを一番上に置き、コードを入力する前にビジネスについてもっと考えます
    • コミュニケーションとコミュニケーションスキル: これは非常に重要です。フロントエンドはプロジェクトマネージャー、プロダクト、インタラクション、バックエンドに同時に対処する必要があります。コミュニケーションが不十分だと、多くの無駄な労力が発生し、プロジェクトが遅れてしまいます。
  • 知識管理、時間管理: インプットとアウトプットのバランス、アウトプットが最良のインプットです。上手に共有し、コミュニティに参加し、上手にコミュニケーションし、記録を残す方法
  • 新しい技術への欲求と挑戦する勇気
    • ####はじめに
本を読むことから始めることもできますが、本を読みながら、テクノロジーの新しい発展にも注意を払い続ける必要があります。私が良いと思う本をいくつかご紹介します


「Advanced JavaScript Programming」: 入門書としても使えますが、基礎をすぐに吸収でき、上達したらもう一度読むこともできます
    。
  • 「JavaScript の決定版ガイド」: 入門には適していませんが、必要です。わからないことがあれば、読んでみてください。非常に役立ちます。
    • 「保守可能な JavaScript の作成」および:
    • 「Node.js 開発ガイド」: Nodejs の優れた入門書です
    • 「Node.js徹底解説」：Nodejs上級者必携の本
    • 「JavaScript 非同期プログラミング」: JS 非同期プログラミングの概念を理解する
    • 「JavaScript パターン」と「JavaScript デザイン パターン」: JavaScript コード パターンとデザイン パターン、開発思考を JavaScript に変える、非常に良い本です
    • 「JavaScript フレームワークの設計」: ホイールを使用しながら、フレームワークの各部分の実装をソース コード レベルから詳しく説明しています。 、たくさんのことを学ぶことができます
考えさせられない》: Web デザインのコンセプトとユーザーの行動の理解はとても良いです
  • Webデザインの考え方やデザイン上の注意点も伝える不朽の作品『CSS Zen Garden』《Don
    • 「ハイパフォーマンス JavaScript」と「ハイパフォーマンス HTML5」: パフォーマンスを重視した書籍。パフォーマンスの最適化だけでなく、原理レベルでも学ぶべき内容が多く含まれています
    • 「HTML5 Canvas Core Technology」: 私が読んでいる本は、Canvas の使用、アニメーションの実装、アニメーション フレームワークの開発に非常に役立ちます
    • 「HTTP 権威ガイド」: フロントエンドの開発やデバッグに関わることの多い、HTTP プロトコルに関する必須知識
    • 「レスポンシブWebデザイン」：技術自体は難しいものではなく、重要なのはレスポンシブWebページのデザインコンセプトとモバイルファーストの考え方です
    • 「JavaScript 言語の本質」: JavaScript 開発の考え方を広めるのに最適な本です。
    • ####いくつかの良いウェブサイト
    • github: 言うことはありません。他の人のソース コードをもっと読み、自分のソース コードをもっとアップロードし、世界中の専門家から学んでください
    • codepen: フロントエンドの美しさを体験するには必須の場所です。クールなエフェクトや優れたプラグインがたくさんあります
    • echojs: 新しいjs情報がすぐにわかるサイト
    • スタックオーバーフローとセグメントフォールト: 基本的にあらゆる種類の質問に答えることができます
    • Google ウェブの基礎: どの記事も注意深く読むのに適しています
    • 静的ファイル: オープン CDN、使いやすい
    • iconfont: Alibaba のベクター アイコン ライブラリ、非常に優れており、CDN をサポートし、プロジェクトをサポートします
    • html5 ロック: 多くの新しいブラウザー機能や最先端の​​テクノロジーに関する記事を見つけることができる優れた Web サイト
    • css のコツ: CSS を最大限に活用する方法と CSS の新機能について学ぶ方法、ここであなたを満足させることができます
    • JavaScript Secret Garden JavaScript 初心者必読、非常に良い本です
    • w3cplus: フロントエンド学習 Web サイト、その記事の品質は非常に優れています
    • node school: 優れたノード学習 Web サイト
    • Learn git Branch: 優れたインタラクションを備えた Git 学習 Web サイト
    • Front-end Stew: フロントエンド記事を共有するためのコミュニティであり、優れた記事が多数あります
    • 正規表現: 正規表現に関する入門チュートリアル。非常に見る価値があります
    • Ruan Yifeng のブログと Zhang Xinxu のブログ: 特定の知識をすぐに理解するための近道ですが、より深く掘り下げる必要がある場合は、他のリソースが必要です
    • さまざまな専門家によるブログ: 多すぎるため、Zhihu には完全なリストがあります
      • 。
    • 様々な規定がある公式サイト、規定の読み方が分からない

    ####プロセス
    私は Java SSH をやっていて、途中からフロントエンド開発者になったので、スキルが比較的弱く、問題が増えました。基本的には、W3C School の書籍やチュートリアル、さらには Uncle Tom のブログなどのフロントエンド ブログを読むことから始めることができます。以前は jQuery ばかり使っていて、ネイティブ js についてはあまり勉強していませんでしたが、その後、経験者による言語の本質など、動物の本を少しずつ読むようになりました。私はこれらの本から言語レベルの知識をたくさん学びました。しかし、これでは明らかに十分ではないので、私はよくコミュニティに行ってみんなが何を話しているのかを確認し、興味があればさらに情報を調べたり、デモを書いたりします。これが CSS を学ぶ主な方法です。その後、さまざまな専門家のブログや比較的深い書籍、新しい知識やフレームワークに注目するようになり、github にコードを投稿する練習を続けたので、知識も多く学びました。インターンシップでは実際のプロジェクト開発に自ら参加し、学校では学べない多くの概念や考え方を学ぶことができ、それもとても役に立ちました。もう話すのはやめて、レンガを動かしてオファーを求めるつもりです...

    MrRaindrop の学習体験

    Qiu God の招待に応えて、フロントエンドの知識システムのアーキテクチャについてはここでは要約しませんが、マスターの要約はすでに整っています。皆さんが勉強して勉強するのに役立つと思うリンクがいくつかあります。それでは、これから始めようとしている FE 初心者に役立つのであれば、主にフロントエンドの学習プロセス中に遭遇した問題と学んだ教訓を共有します。これがこの記事の読者層であると仮定します)。回り道を避け、一歩ごとに次の方向性を知ることが最善です。マスターの概要と共有については、Qiu God が主催する FE-learning を参照してください。

    まず言っておきますが、フロントエンドについては人それぞれの方法で学ぶことができます。この記事は参考用ですので、読んでいただければ大丈夫です。

    起源

    私は偶然、ゲームを作る方向に進み、Unity や Unreal などのゲーム エンジンを試し、いくつかのゲーム プロトタイプをいじってきました。 , 研究員として研究室に入ってすぐに、チューターから直接jsを書くように指示されましたが、チューターからはBaidu Map APIをベースにしたデータ表示ページを書く時間を半月与えられました。これまでjsを書いたことはあまりなかったのですが、地図APIの使い方が分からなかったので、研究室の先人たちが残した「コード」を参考にしながら「JavaScript権威ガイド」（Rhinoceros Book）を読みました。 、最後にすべての関数を書き出しました。そのページは私の js 入門とみなされ、私のフロントエンド学習ルートの始まりでもあります。

    今考えてみると、フロントエンドを任されたものの、自分の興味を頼りにやり続けるしかないのは当然ですが、フロントエンドは面白い技術分野ですし、コミュニティもとても充実しています。毎日「忙しい」。

    プロジェクト、次のプロジェクト

    フロントエンド学習の初期段階では、書籍から完全に脱却してプロジェクト駆動になることができると個人的に思います。私は個人的には『Rhinoceros』から読み始めましたが、時間がなかったり、分厚い本を読むのが退屈だと感じている人は、私のようにならないでください。もちろん、本を読むことにした場合は、その本のすべての例に従うのが最善です。大学院に進学するまでjsに触れたことはなかったのですが、学校が始まる前の4月にチューターからBaidu Map APIのプロジェクトについて直接教えてもらい、その後、いろいろなERPや地図データの表示について、いろいろな意味で違いはありましたが。同じではありませんでしたが、基本的にはすべてフロントエンドの仕事をしており、研究室全体で私だけがフロントエンドを書いていると信じられますか?リッチクライアントSPAの時代のバックエンドはRestfulなインターフェースで、コード量は基本的にフロントエンドにあるのですが、どうしたらそんなにうまく書けるでしょうか... この間、メンターに従って起業を経験し、毎日午後7時から10時まで働いていたため、急速な成長期を迎えたと考えられます。

    テクノロジーをマスターするには、まずその大枠をマスターし、実現可能なアイデアを考え、実行可能なデモを作成し、その後、そのデモを完成させて読むと、テクノロジーを感覚的に理解できるようになります。もう一度本を読むと、さらに多くのことを得ることができます。最初はnative jsからjquery、そしてextjs、そしてangularjsと、講師指定の技術から自分で選んだ技術まで、まるでモンスターと戦ってアップグレードするかのように、次々とプロジェクトを練習していきました。もちろん、プロジェクトがなくても、自分でプロジェクトを作り、自分のアイデアを実現することは楽しくてやりがいがあります。

    依存症の収集と知識管理

    フロントエンドの学習は断片的・分散的なものが多く、自分で整理・要約・要約する必要があるという特徴があります。 Weibo や Zhihu で多くの偉大な達人をフォローすることは、単なるゴシップを聞くためではありません。時には、偉大な達人たちの言葉がいつまでも後味を残すことがあります。うっかり言及した言葉が次の学習目標になる可能性が非常に高いです。 これらの情報を収集し、Googleを活用し、質問し、考えてください。 ゲーム内の収集要素と同様に、フロントエンド学習も収集要素が満載の「ゲーム」ですが、在庫や倉庫として機能するナレッジ管理ツールが必要です。私が知っている大手企業は全員、ナレッジ管理ツールを使用しています。 。 ヘビーユーザー。以前はoneNoteを使っていましたが、その時はクラウドストレージに縛られず、今は基本的にevernoteを使っており、ノートが1,200枚以上溜まっています。タグで管理しているのでブックマークにはdeliciousを使おうとずっと思っていたのですが、一度も使ったことはありません。もちろん、これらのツールに焦点を当てているわけではありませんが、便利なツールは学習効率を向上させることができます。もちろん、最も重要なことは、常に学習したいという強い意欲を維持することです。あなたの目標は、フロントエンドに関するすべてを理解することです (もちろん、すべてをマスターする必要があるわけではありません。結局のところ、現実的に言えば、あなたのエネルギーは限られているからです)。 、これは考えられません）。 神に従いなさい

    これはあまり制御できないようです...これについては上司にはあまり言いませんが、ある程度は運に左右されます。そうは言っても、周囲の専門家ともっとコミュニケーションをとることが重要です。この専門家はそれほど高いレベルである必要はありませんが、テクノロジーに対して情熱を持っている必要があります。大学院1年生の時、毎日7時に研究室のドアに入ろうと意気込んでいたら、自分より早く着いている奴がいた。後で分かったのですが、この人は午前中に出発して午後に戻ってきましたが、インストラクターは慣れていたようで、徹夜でコードを書き、朝になるとまた寝ていたことが分かりました。その後、この神様とよく相談しましたが、その度に自分の経験値がどんどん上がっていくのを感じました。そして、研究室にはもう一人の神がいて、目の前の徹夜神からは「ほんの少し離れていて、いつも追いかけていて、決して追いつかない」と評されていた。 C/C++ から vc/mfc、UNIX ネットワーク プログラミングまで、しばらくの間読書計画を立てました。最終的には、Java コア テクノロジと C# プログラミング ガイドを読みました。 MSDN で神と会話することができました。

    つまり、この 2 人の神は私を穴に引き込んだか、ある穴から別の穴に飛び移ったのです。2 人の神はどちらもフロントエンドに携わっていませんが、テクノロジーの間には常に類似点があります。

    読書

    読んで、もっと読んで、良い本を読んでください。 Liu Weipeng さんのブログで公式を見ました、

    あなたの最初の月の給料は、あなたが以前に購入した（読んだ）専門書の価格の合計に等しい

    （ここで言及されている技術書は、古典的で優れた書籍と認められているものを指します）。この公式の正しさを議論するのは無意味に思えますが、その合理性には疑いの余地がありません。つまり、古典的な専門書をもっと読んでください。最も極端な例では、Google の Xu You が私の大学で、図書館の TP312 本棚全体を掃除したと言いました...フロントエンドの古典的な本については、私が収集したフロントエンドの本のリストがあります (不足しているものがあれば)フロントエンドの古典、それでいいです）本を教えてください）可能であれば、これらの本を読み終わるまでの時間を探しています。前に述べたように、フロントエンドの知識ポイントは緩く、分散した知識ポイントを収集したり、ブログからすばやく学習したりするなど、フロントエンド学習の 1 つの側面にすぎません。知識システムを深く理解したい場合は、その知識システムを徹底的に理解する必要があります。 、そしてそれを体系的に理解するためには、古典的な本を読むことが依然として不可欠です。

    Rhinoceros の本を最初から読み終えて、その後、フロントエンドとはあまり関係のない他の古典的な技術書を読み始めました。その後、研究室プロジェクトやいくつかの小さなプロジェクトを通じて、徐々に詳しくなっていきました。フロントエンド分野については、「JavaScript パターン」、「JavaScript デザイン パターン」、および「保守可能な JavaScript の作成」を読み、その後、ノードについて学び、それを使用していくつかのガジェットを作成するようになりました。また、「NodeJS を起動して実行する」も読みました。 " と "Mongodb Authoritative Guide". " があるのですが、前者はちょっと罠な気がします。当時、プー・リンさんの著書『詳説・平易解説』がまだ出版されていなかったので、図書館に借りに行って読んでみたところ、なかなかいい本だと感じました。しかし、私はあまりにも読んだことが少なすぎると感じたので、まだ続ける必要があります（上記の書籍リストを参照）。

    フロントエンドの位置付け

    フロントエンドの位置付けは、どのような種類の知識やスキルを吸収する必要があるかに関係しており、技術の世界で特に何に敏感である必要があるかを決定します。フロントエンドがページを切り取ってインタラクションと視覚的な要件を実現することだけを目的としていると考えている場合、フロントエンドの理解はまだ初期段階にあります。アリババとの最終面接で、私は試験官に次の質問をしました。フロントエンド技術は日を追うごとに変化し、範囲はますます広がり、標準はますます豊かになってきています。どんな触手でも遠くまで届くようです。 。フロントエンドに適切な位置を与えるにはどうすればよいでしょうか?試験官は私のためにそれを長い間分析し、それを一文で要約しました。それはユーザーとウェブサイトの間のコネクタであり、ユーザーエクスペリエンスの創造者です（これは元の言葉ではありませんが、一般的な意味です）。つまり、フロントエンドの最終的な目標は、実際には、ユーザーエクスペリエンスを中心に、ユーザーエクスペリエンスを創造し、ユーザーエクスペリエンスを向上させることです。インタラクションデザインから始めても、パフォーマンスの最適化から始めても、ワークフローの効率を向上させるためのワークフローの改善から始めても、最終的にはユーザーエクスペリエンスの創造と改善がすべてであり、最終的にはユーザーエクスペリエンスに反映される必要があります。このまとめは非常に合理的だと思います（もちろん、「ユーザーエクスペリエンス」という用語は広すぎるので、フロントエンドエンジニアだけの範疇ではありません。たとえば、バックエンドを開発する場合、データ処理プロセスを最適化すると全体のパフォーマンスが向上します）これはユーザーにとっても良いことです)。

    現在、フロントエンドエンジニアは、特定の段階で、ページのカット、ビジュアル要件の実装、インタラクションの実装などよりも、フロントエンドの自動化、画像プログラミング、パフォーマンスの最適化、など、もう少し後ろに進むと、PHP /JSP/ASP/nodeJs になります。以前は、バックエンド テンプレートは一般的にバックエンド カテゴリに属していましたが、フロントエンド アーキテクチャの進化により、次のような疑問が生じるかもしれません。バックエンド言語 (PHP/Java/C# など) の使用を必要とするバックエンド テンプレート コードを記述する)、これはいわゆる ビッグ フロントエンド (ただし、これは矛盾するものではありません)フロントエンドの位置付けについては、依然としてユーザーと接触する部分を扱い、ユーザーエクスペリエンスの最適化を行っています。)おそらく最も一般的または話題になっているのはノードです。実際、BAT 企業 3 社の中で、Baidu はより多くの PHP を使用しており、Alibaba はより多くのノードを使用していると言われています。

    ユウおじさんはブログで、いわゆるフルエンドは水平で、フルスタックは垂直であると述べました。 フルエンド つまり、すべての端末はユーザーエクスペリエンスに関係しており、ユーザーと直接接触しているため、すべての端末はフロントエンドです。マルチターミナル開発に適応するには、Web フロントエンドに基づいて Android 開発と iOS 開発の知識を広げる必要があります。幸いなことに、ハイブリッド開発手法の人気により、ネイティブ言語開発を使用するスキルはそれほど高くありません。 -深さ。 。

    フルスタックは、大きく言えばフロントエンドからバックエンド、開発から運用保守までを指すと考えられます。この種のことについては、おそらく、この方向で開発したい、その意味でフルスタックの開発者になりたいのであれば、私の記事を読む必要はないかもしれません。狭義のスタックとは、特に、フロントエンドからノード J 上の構築までを JS 言語を使用して記述することを指します。フロントエンドとバックエンドは、統一された言語、統一されたプログラミング モデルを持ち、さらには同じコード セットを共有します。 。フルスタック開発について詳しくは、フルスタック エンジニアに関する Yu Bo の記事をご覧ください。

    上記はフロントエンドとそこから派生する技術的ルートについての私の表面的な理解です。 分野を学び、その全体的な方向性と傾向を把握することは非常に重要です。さらに、フロントエンドの学習方向とキャリア成長の道筋を全体的に理解したい場合は、Ba Chi がまとめたこのフロントエンド開発の講演を読むことをお勧めします。

    ついに

    フロントエンドの学習とインタビューに役立ついくつかのリンクを提供します:

    • フロントエンド開発者インタビューの質問集
    • フロントエンドスキルまとめ(JacksonTian)
    • 別のフロントエンドスキルの概要画像
    • フロントエンドに関すること（書籍リスト）

    byr フォーラムの yiyizym からの提案

    Gruntと比較して、gulpの学習は簡単になります

    SPAを作りたいならbackbone.jsとbackbone.marionette.jsがおすすめです

    FQ 気にしないで、10 元出して 1 か月分の紅杏を買ってください。

    しっかりとした基礎を築いた後でこれらのことを学ぶのは問題ありません。

    html あまり言うことはありません。時間があるときに HTML5 を学習してください。

    Css 中国の資料は異なる意見が多く、読みすぎると混乱するため、できるだけドキュメントを読んでください。

    各種ブラウザでのhtml/cssタグや属性の対応状況を確認できるサイトがあってとても便利です。

    javascript JavaScript の高度なプログラミングを見てください。でも、あんな分厚い本を読んだら忘れてしまいます。これは、JavaScript の中心となる概念 (オブジェクト/プロトタイプ チェーン/コンストラクター/実行コンテキスト/スコープ チェーン/クロージャ/this) を説明する優れた記事です。

    時間があれば、来年 6 月にリリースされる予定の ecmascript 6 をご覧ください。 Ruan Yifeng の Web サイトに紹介情報があります。

    jquery には多くの API があり、この Web サイトで簡単に見つけることができます。 jquery deferred の使用法を理解する時間をとってください。

    コードエラーのチェック、新しいディレクトリファイルの作成、コードの整理など、Sublimetext 用のプラグインをさらにインストールします。

    総合カテゴリー

    総合カテゴリ 住所
    フロントエンドナレッジシステム http://www.cnblogs.com/sb19871023/p/3894452.html
    フロントエンドの知識構造 https://github.com/JacksonTian/fks
    Webフロントエンド開発部門の概要 https://github.com/unruledboy/WebFrontEndStack
    Webフロントエンド開発部概要 - 中国語版 http://www.cnblogs.com/unruledboy/p/WebFrontEndStack.html
    Web フロントエンド スタック v2.2 Web フロントエンド スタック v2.2
    無料プログラミング中国語書籍インデックス https://github.com/justjavac/free-programming-books-zh_CN
    フロントエンドブック https://github.com/dypsilon/frontend-dev-bookmarks
    フロントエンドの無料書籍の包括的なコレクション https://github.com/vhf/free-programming-books
    フロントエンドナレッジシステム http://www.cnblogs.com/sb19871023/p/3894452.html
    無料プログラミング中国語書籍インデックス https://github.com/justjavac/free-programming-books-zh_CN
    インテリジェント社会 - JavaScript開発に精通しています http://study.163.com/course/introduction/224014.htm
    JavaScriptの再紹介(JSチュートリアル) https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/A_re-introduction_to_JavaScript
    MIT オープンコース: コンピューターサイエンスとプログラミング入門 http://v.163.com/special/opencourse/bianchengdaolun.html
    JavaScript でのこのトラップの最も完全なコレクション - 最高のコレクションの 1 つ http://segmentfault.com/a/1190000002640298
    JS関数プログラミングガイド https://llh911001.gitbooks.io/mostly-adequate-guide-chinese/content/ch1.html
    JavaScriptのお約束ミニブック（中国語版） http://liubin.github.io/promises-book
    Tencent モバイル Web フロントエンド ナレッジベース https://github.com/AlloyTeam/Mars
    フロントエンド開発ガイドフロントエンド開発ガイド https://github.com/Front-End-Developers-Hunan/Front-End-Develop-Guide
    フロントエンド開発ノート https://li-xinyang.gitbooks.io/frontend-notebook/content
    大きなフロントエンドツールセット - Nie Weidong https://github.com/nieweidong/fetool
    フロントエンド開発者マニュアル https://dwqs.gitbooks.io/frontenddevhandbook/content

    エントリークラス

    エントリークラス アドレス
    フロントエンド入門チュートリアル http://www.cnblogs.com/jikey/p/3613082.html
    Xuefeng の Javascript チュートリアル http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000
    jQueryの基本チュートリアル http://www.imooc.com/view/11
    フロントエンドエンジニアに必須の PS スキル - 画像のカッティング http://www.imooc.com/view/506
    個人的な経験に基づいたフロントエンドエントリー方法のまとめ https://github.com/qiu-deqing/FE-learning

    ツール

    ツール アドレス
    フロントエンド人々のクラブ http://f2er.club/ あなたのお気に入りを本当に解放できます
    Sublime Text をエレガントに使用する方法 http://www.jeffjade.com/2015/12/15/2015-04-17-toss-sublime-text/#
    新しいコーディングアーティファクト Atom の使用時間数 http://www.jeffjade.com/2016/03/03/2016-03-02-how-to-use-atom/
    CSSスプライト作成 http://www.imooc.com/learn/93
    バージョン管理を始める - Github への移行 http://www.imooc.com/learn/390
    Grunt 初心者向けフロントエンド自動化ツール http://www.imooc.com/learn/30
    IntelliJ IDEA 簡体字中国語特別チュートリアル https://github.com/judasn/IntelliJ-IDEA-チュートリアル
    ウェブストーム、InterllIdea、Phpstorm http://t.cn/8kZZ1Uy
    崇高なテキスト https://github.com/jikeytang/sublime-text
    アトム https://atom.io
    ビジュアルスタジオコード https://code.visualstudio.com

    総合的なエフェクト検索プラットフォーム

    総合効果検索プラットフォーム アドレス
    JavaScriptリソースコレクション中国語版 https://github.com/jobbole/awesome-javascript-cn
    100 以上の非常に包括的な Web 開発ツールとリソース https://xituqu.com/170.html
    zoommyapp.com http://zoommyapp.com/ 高画質画像ギャラリー
    unsplash.com https://unsplash.com/ 高画質画像ギャラリー
    www.pinterest.com https://www.pinterest.com/ ギャラリー
    新古品 http://nos.twnsnd.co レトロスタイルギャラリー
    エフェクトネットワーク http://www.jq22.com
    Petals.com http://huaban.com/
    美しい写真 http://www.topit.me/
    コードペン http://codepen.io/
    フォトネットワーク http://699pic.com/
    一般的に使用される JavaScript コードスニペット http://microjs.com

    チームブログ|週次レポート

    週刊ニュースレター アドレス
    秋烏ウィークリー http://old.75team.com/weekly/
    コーダーウィークリー http://weekly.manong.io
    WEBフロントエンド開発 http://www.css88.com
    1日あたりJSチップ! http://www.jstips.co
    テンセント合金チーム http://www.alloyteam.com/webdevelop/
    平安科技モバイル開発チーム 2 技術週報 https://github.com/PaicHyperionDev/MobileDev Weekly

    開発センター

    )
    開発センター 住所
    mozilla js リファレンス https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
    Chrome Development Center (ChromeのコアがBlinkに切り替わりました) https://developer.chrome.com/extensions/api_index.html
    サファリ開発センター https://developer.apple.com/library/safari/navigation
    Microsoft JS リファレンス https://msdn.microsoft.com/zh-cn/library/d1et7k7c(v=vs.94.aspx
    js秘密の花園 http://sanshi.me/articles/JavaScript-Garden-CN/html/index.html
    js秘密の花園 http://bonsaiden.github.io/JavaScript-Garden/zh
    w3ヘルプ http://www.w3help.org 総合バグ収集 Web サイト

    Nodejs

    Nodejs アドレス
    nodejs はかなり大きいです http://liuqing.pw
    Node.js には教育は含まれますが、スキルは含まれません https://github.com/alotang/node-lessons
    長さは比較的小さいです http://www.rainweb.cn/article/category/Nodejs
    node Express 入門チュートリアル http://www.w3cfuns.com/article-5598538-1-1.html
    nodejsのスケジュールされたタスク http://my.oschina.net/u/568264/blog/193773
    nodejs ブログ http://60sky.com
    【NodeJS学習記04】ニュースリリースシステム http://www.cnblogs.com/yexiaochai/p/3536547.html
    旧正月の 7 日間おめでとうございます。nodejs を学ぶのも楽しいです http://www.cnblogs.com/qqloving/p/3541099.html
    7 日間で NodeJS を学ぶ https://github.com/nqdeng/7-days-nodejs
    Nodejs学習記(2)---イベントモジュール http://www.cnblogs.com/zhongweiv/p/nodejs_events.html
    nodejs を始めましょう http://www.cnblogs.com/liusuqi/p/3735491.html
    angularjs ノードjs https://github.com/zensh/jsgen
    nodejsをゼロから始めるためのシリーズ記事 http://blog.fens.me/series-nodejs
    nodejsを理解する http://debuggable.com/posts/ Understanding-node-js:4bd98440-45e4-4a9a-8ef7-0f7ecbdd56cb
    nodejs イベントポーリング http://blog.mixu.net/2011/02/01/ Understanding-the-node-js-event-loop
    ノードを始める http://www.nodebeginner.org/index-zh-cn.html
    nodejs cms http://ourjs.com/detail/53e1f281c5910a9806000001
    包括的な NodeJS チュートリアルである Node の入門 http://ourjs.com/detail/529ca5950cb6498814000005
    NodeJS のコードのデバッグとパフォーマンスのチューニング http://www.barretlee.com/blog/2015/10/07/debug-nodejs-in-command-line

    包括的なAPI

    総合API アドレス
    JavaScript http://www.javascripting.com
    さまざまな人気の図書館検索 http://microjs.com
    runoob.com - さまざまな API コレクションが含まれています http://www.runoob.com
    オープンソース中国オンラインAPIドキュメントコレクション http://tool.oschina.net/apidocs
    開発ドキュメント http://devdocs.io 英語総合APIサイト

    Ecmascript

    Ecmascript アドレス
    ECMAScript 6 を理解する - Nicholas C. Zakas https://leanpub.com/ Understandinges6/read
    ES6 の探索 https://leanpub.com/exploring-es6/read
    ES6 翻訳の探索 https://github.com/es6-org/exploring-es6
    exploring-es6 翻訳プレビュー http://es6-org.github.io/exploring-es6
    阮一峰es6 http://es6.ruanyifeng.com
    Ruan Yifeng Javascript http://javascript.ruanyifeng.com
    ECMA-262、第5版 http://yanhaijing.com/es5
    es5 http://es5.github.io

    Jsテンプレート

    Jsテンプレート アドレス
    テンプレート選択 http://garann.github.io/template-chooser
    アートテンプレート https://github.com/aui/artTemplate
    tomdjs https://github.com/aui/tmodjs/blob/master/README.md
    淘宝網テンプレートジューサーテンプレート http://juicer.name/docs/docs_zh_cn.html
    Fxtpl v1.0 Starry フロントエンド テンプレート エンジン http://koen301.github.io/fxtpl
    laytpl http://laytpl.layui.com
    mozilla - ヌンジャク https://github.com/mozilla/nunjucks
    ジューサー https://github.com/PaulGuo/Juicer
    ダストjs http://akdubya.github.io/dustjs
    etpl http://ecomfe.github.io/etpl

    HTML5(HTML)

    HTML(HTML5) アドレス
    HTML5タグについての深い理解 https://segmentfault.com/a/1190000002695791
    効率的な​​HTMLの書き方 https://segmentfault.com/a/1190000002680822
    HTMLメタタグの概要と属性の使い方の紹介 https://segmentfault.com/a/1190000004279791
    HTML5についての冗談 http://www.cnblogs.com/dojo-lzz/p/5059316.html

    CSS3(CSS)

    http://www.alloyteam.com/2015/10/8536ブラウザハックhttp://browserhacks.com

    Angularjs

    CSS アドレス
    CSS構文リファレンス http://tympanus.net/codrops/css_reference
    メンテナンス可能なCSSの書き方 https://github.com/chadluo/CSS-guideline/blob/master/README.md
    CSS3アニメーションマニュアル http://isux.tencent.com/css3/index.html
    Tencent CSS3アニメーション制作ツール http://isux.tencent.com/css3/tools.html
    Zhiye CSS ガジェットコレクション http://linxz.github.io/tianyizone
    css3 js モバイルのごった煮 http://www.note12.com/category/blog/2014-6-5/538fe0a9f786f1b7019a4dfb
    bouncejsタッチライブラリ http://bouncejs.com
    css3ボタンアニメーション http://fian.my.id/Waves
    animate.css http://daneden.github.io/animate.css
    グローバルCSSの終わり
    Angularjs アドレス
    Angular.js の学習リソース https://github.com/dolymood/AngularLearning
    angularjs 中国語コミュニティ http://angularjs.cn
    Angularjsソースコード学習 http://www.cnblogs.com/xuwenmin888/p/3739096.html
    Angularjsソースコード学習 http://www.ifeenan.com/?c=AngularJS
    ブートストラップのangularカプセル化 http://angular-ui.github.io/bootstrap
    angularjs + nodejs https://cnodejs.org/topic/51404e0f069911196d2e3923
    Lv Dabao Angularjs http://www.cnblogs.com/lvdabao/tag/AngularJs
    AngularJS のベストプラクティス http://www.infoq.com/cn/news/2013/02/angular-web-app
    Angular のいくつかの拡張ディレクティブ http://www.lovelucy.info/angularjs-best-practices.html
    Angular データ バインディングの原則 https://github.com/Pasvaz/bindonce
    いくつかの拡張 Angular UI コンポーネント https://github.com/angular-ui
    EmberとAngularJSのパフォーマンステスト http://voidcanvas.com/emberjs-vs-angularjs-performance-testing
    AngularJS にもっと近づく - 基本機能の紹介 http://www.cnblogs.com/powertoolsteam/p/angularjs-introdection.html
    Angularjs 開発ガイド http://angular.duapp.com/docs/guide
    Angularjsの学習 http://www.cnblogs.com/amosli/p/3710648.html
    jQuery を念頭に置いて AngularJS を学習しないでください http://www.rainweb.cn/article/angularjs-jquery.html
    angularjsの勉強メモ http://wangjiatao.diandian.com/?tag=angularjs
    angularjs 開発ガイド http://www.angularjs.cn/T008
    angularjs英語情報 https://github.com/jmcunningham/AngularJS-Learning
    角度ブートストラップ http://angular-ui.github.io/bootstrap
    angular jqモバイル https://github.com/opitzconsulting/jquery-mobile-angular-adapter
    角張ったUI http://mgcrea.github.io/angular-strap
    jQuery Mobile + AngularJS の統合経験 http://www.tuicool.com/articles/7ZZVr2
    jQuery の背景を踏まえた、AngularJS プログラミングのアイデアの使用方法 http://blog.jobbole.com/46589/
    AngularJS オンライン チュートリアル http://each.sinaapp.com/angular
    角度の勉強ノート http://www.zouyesheng.com/angular.html

    反応する

    反応 アドレス
    react.js 中国語フォーラム http://www.react-china.org
    react.js 公式ウェブサイト https://facebook.github.io/react/index.html
    react.js 公式ドキュメント https://facebook.github.io/react/docs/getting-started.html
    react.js マテリアル UI http://material-ui.com/#
    react.js TouchstoneJS UI http://touchstonejs.io
    react.js アメウイ UI http://amazeui.org/react
    React 入門サンプルチュートリアル - Ruan Yifeng http://www.ruanyifeng.com/blog/2015/03/react.html
    React Native 中国語バージョン http://wiki.jikexueyuan.com/project/react-native
    Webpack と React Little Book - フロントエンド シチュー http://www.html-js.com/article/Fakefish%203053
    Webpack と React Little Book - gitbook https://fakefish.github.io/react-webpack-cookbook
    ウェブパック https://github.com/webpack/webpack
    Webpack、101エントリー体験 http://html-js.com/article/3009
    Webpack 入門チュートリアル http://html-js.com/article/3113
    Webpack に基づくフロントエンド エンジニアリング ソリューションの探索 http://segmentfault.com/a/1190000003499526
    Reactオリジナルの実践的なビデオチュートリアル http://www.piliyu.com

    ビュー

    vue アドレス
    ビュー http://cn.vuejs.org
    Vue フォーラム http://forum.vuejs.org
    Vue スタートガイド http://www.cnblogs.com/aaronjs/p/3660102.html
    Vueのいくつかのリソースインデックス http://segmentfault.com/a/1190000000411057
    素晴らしいビュー https://github.com/vuejs/awesome-vue

    モバイルAPI

    モバイルAPI アドレス
    99モバイル知識コレクション https://github.com/jtyjty99999/mobileTech
    モバイル フロントエンド開発ナレッジ ベース https://github.com/AlloyTeam/Mars
    モバイルフロントエンドのいくつかの落とし穴と解決策（外観とパフォーマンス） http://caibaojian.com/mobile-web-bug.html
    【オリジナル】モバイルウェブリソース編成 http://www.cnblogs.com/PeunZhang/p/3407453.html
    zepto 1.0 中国語マニュアル http://mweb.baidu.com/zeptoapi
    zepto 1.0 中国語マニュアル http://www.html-5.cn/Manual/Zepto
    ゼプト 1.1.2 http://www.css88.com/doc/zeptojs_api
    ゼプト中国語注釈 http://www.cnblogs.com/sky000/archive/2013/03/29/2988952.html
    jqmobileマニュアル http://app-framework-software.intel.com/api.php
    モバイルブラウザ開発コレクション https://github.com/maxzhang/maxzhang.github.com/issues
    モバイル開発のごった煮 https://github.com/hoosin/mobile-web-favorites

    jQuery

    jQuery アドレス
    jQuery API 中国語ドキュメント http://www.jquery123.com
    ヘミンオンライン版 http://hemin.cn/jq
    css88 jq API http://www.css88.com/jqapi-1.9/on
    css88 jqui API http://www.css88.com/jquery-ui-api
    jQueryを学ぶ http://learn.jquery.com
    jqueryソースコード検索 http://james.padolsey.com/jquery
    Webフロントエンドリソースの概要(jQuery、Js、Css3など) http://www.cnblogs.com/jihua/p/webfront.html

    D3

    D3 住所
    d3 チュートリアル https://github.com/mbostock/d3/wiki/Tutorials
    ギャラリー https://github.com/mbostock/d3/wiki/Gallery
    ロフター http://datavisual.lofter.com/post/40cf3a_188e535
    イトアイ http://alanland.iteye.com/blog/1878595
    ルアニフォン http://javascript.ruanyifeng.com/library/d3.html

    リクエスト

    リクエスト アドレス
    JavaScriptモジュラープログラミング(1):モジュールの書き方 http://www.ruanyifeng.com/blog/2012/10/javascript_module.html
    JavaScript モジュラー プログラミング (2): AMD 仕様 http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_writing.html
    JavaScriptモジュラープログラミング(3):require.jsの使い方 http://www.ruanyifeng.com/blog/2012/11/require_js.html
    RequireJS を始める (1) http://www.cnblogs.com/snandy/archive/2012/05/22/2513652.html
    RequireJS を始める (2) http://www.cnblogs.com/snandy/archive/2012/05/23/2513712.html
    RequireJS Advanced (3) http://www.cnblogs.com/snandy/archive/2012/06/08/2538001.html
    ソースコードの学習が必要 http://www.cnblogs.com/yexiaochai/p/3632580.html
    スタートガイドが必要 http://www.oschina.net/translate/getting-started-with-the-requirejs-library
    requrieJSの勉強メモ http://www.cnblogs.com/yexiaochai/p/3214926.html
    1つ必要です http://cyj.me/why-seajs/requirejs/
    バックボーンの組み合わせが必要です http://www.cnblogs.com/yexiaochai/p/3221081.html

    シージス

    Seajs 住所
    シージス http://seajs.org
    seajs中国語マニュアル http://cyj.me/why-seajs/zh

    もっと少なく、生意気な

    レス、サス アドレス
    ササ http://www.w3cplus.com/sassguide
    sass チュートリアル-sass 中国 http://www.sass.hk
    Sass 中国語ドキュメント http://sass.bootcss.com
    少ない http://less.bootcss.com

    マークダウン

    ）
    値下げ アドレス
    Markdown構文の説明（簡体字中国語版http://wowubuntu.com/markdown
    Markdown 入門リファレンス https://github.com/LearnShare/Learning-Markdown/blob/master/README.md
    ギットブック https://www.gitbook.com 海外のオンラインマークダウンを書籍に編集できます
    m編集者 https://www.zybuluo.com/mdeditor 国内オンラインマークダウンエディタ
    スタック編集 https://stackedit.io 強力な機能とクラウドディスク同期を備えた海外のオンラインマークダウンエディタ
    mditor http://bh-lay.github.io/mditor 軽量のマークダウンエディタ
    lepture編集者 https://github.com/lepture/editor
    マークダウンエディタ https://github.com/jbt/markdown-editor
    宿題ブログ https://www.zybuluo.com には、強力な機能、スムーズな速度、すべてのプラットフォーム間での同期があります

    互換性

    互換性 アドレス
    エスマ互換性リスト http://kangax.github.io/compat-table/es6
    W3C CSS 検証サービス http://jigsaw.w3.org/css-validator/validator.html.zh-cn
    カニウス http://caniuse.com/#index
    CSクリエイター http://csscreator.com/properties
    マイクロソフト

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：フレックス レイアウトの簡単な説明と例次の記事：フレックス レイアウトの簡単な説明と例

関連記事

続きを見る