2023 年 Web フロントエンド面接厳選質疑応答完全集（コレクション）-jsチュートリアル-php.cn

2023 年 Web フロントエンド面接厳選質疑応答完全集（コレクション）

青灯夜游

リリース： 2022-12-15 20:07:02

転載

7713 人が閲覧しました

この記事では、Web フロントエンドの面接で収集する価値のある厳選された質問をいくつかまとめています (回答付き)。一定の参考値があるので、困っている友達が参考になれば幸いです。

2023 年 Web フロントエンド面接厳選質疑応答完全集（コレクション）

HTML、CSS 関連

1. インターネット上で最も一般的に使用されている画像形式は何ですか

JPEG、GIF、PNG、最も人気のあるのは jpeg 形式で、ファイルを最小限に圧縮できます jpeg 形式で保存する場合、##11 圧縮レベル#を提供します 2. CSS ボックスモデルについて簡単に説明してください

##a

css 2023 年 Web フロントエンド面接厳選質疑応答完全集（コレクション）

ボックスは 4 つの部分に分けることができます外側から内側へ:

margin (マージン)、border (境界線)、padding (パディング)、content (コンテンツ)。デフォルトでは、ボックスの width プロパティと height プロパティは単に content# に設定されます。 ##(コンテンツ) の幅と高さ、ボックスの実際の幅は次のようになります: コンテンツの幅左右のパディング

左右のマージン左右の境界線ボックスの実際の高さは次のようになります。 : コンテンツの高さ上下のパディング

上下のマージン上下border##3. ビデオ / オーディオタグの使用Video:

#特徴	##Cookie	ローカルストレージ
	Cookie がブラウザ側で生成された場合、ブラウザを閉じた後はデフォルトで無効になります。	## は現在のセッションでのみ有効であり、ページまたはブラウザを閉じるとクリアされます
##4K 左右	#通常 5MB	##サーバーと通信
は、毎回 HTTP	## 保存しすぎるとパフォーマンスの問題が発生します。 ##データはクライアント (ブラウザなど) にのみ保存され、データには関与しません。サーバーとの通信使いやすさ	##プログラマー自身がオリジナルのインターフェイスをカプセル化する必要があります
	Object および Array に再カプセル化することもできます。サポートが強化されています	## 10.ES6 の新機能 const と let、テンプレート文字列、アロー関数、関数パラメータのデフォルト値、オブジェクトと配列の構造化、for...of And for ...ES6 のクラス ##11. Let、var、const の違い #Var宣言されたもの変数は #window にマウントされますが、#let と const宣言された変数Var にはなりません。宣言された変数には、変数プロモーション、let およびが含まれます。 const変数プロモーションはありません同じスコープの下で varを宣言できます同じ名前の変数 let と const は、Let## できません。 # および const 宣言はブロックレベルのスコープを形成しますLet 一時的なデッドゾーン ##Const 宣言したら、値を割り当てる必要があり、 #null をプレースホルダーとして使用することはできません。宣言後に変更されます。宣言が複合型データの場合、属性を変更できます。12. 配列メソッドについて簡単に説明してください push () 後ろの要素から追加します。戻り値は追加された配列の長さです arr.pop() から要素を削除します後ろの要素は 1 つだけ削除され、戻り値は削除されます。 Element arr.shift() 前の要素を削除し、1 つだけ削除できます戻り値を削除する要素 arr.unshift() 要素を前から追加、戻り値は追加した配列の長さ arr.splice(i,n) i(インデックス値)から始まる要素を削除します。戻り値は削除された要素です arr.concat() 2 つの配列を接続すると、戻り値は接続後の新しい配列になります str.split() 文字列を配列に変換 arr.sort() 配列をソートして返す値ソートされた配列です。デフォルトでは、数値のサイズではなく、左端の数値でソートされます arr.reverse() 配列を反転します。戻り値は反転された配列です。 arr.slice(start,end) 配列のインデックス値の開始からインデックス値の終了まで、終了インデックスを除いて切り取ります。 value、戻り値は切り出した配列です arr.forEach(callback) 配列を走査します、リターンはありませんリターンがあっても値は返されませんそして、それは元の配列に影響します arr.map(callback) 配列をマップし(配列を走査し)、新しい配列を返します。 arr.filter(callback) 配列をフィルタリングし、要件を満たす配列を返します 13.方法Json を更新するキーと値のペアを追加/削除する 14. オブジェクト指向とは何かを簡単に説明してくださいオブジェクト指向とは、プロセス指向をベースにした考え方の一種で、オブジェクトによって機能を実現し、機能をオブジェクトにカプセル化して、具体的な内容をオブジェクトに実現させることです。 ; データを最優先に考え、データを最適化し、操作をより便利にし、プロセスを簡素化するという考え方です。 #Js 自体には class 型がありませんが、各関数には prototypeAttribute, prototype はオブジェクトを指します。関数がコンストラクターとして使用される場合、prototype が再生されます。の役割 class オブジェクト指向には 3 つの特徴があります。カプセル化 (プロパティと実装の詳細を隠す) )、継承 (コードの再利用性を向上させるため、継承はポリモーフィズムの前提条件です)、ポリモーフィズム (親クラスまたはインターフェイスによって定義された参照変数)サブクラスまたは特定の実装クラスを指すことができます (インスタンスオブジェクト) #15. 通常の関数とコンストラクターの違いコンストラクタも通常の関数であり、作成方法は通常の関数と同じですが、コンストラクタの最初の文字を大文字にするのが一般的です呼び出し方法が異なります。通常の関数は直接呼び出され、コンストラクタはキーワード new を使用して # を呼び出します。呼び出されると、コンストラクター内に新しいオブジェクト (インスタンス) が作成されます。通常の関数では作成されません。新しいオブジェクトが作成されます。 #コンストラクター内の #this はインスタンスを指し、通常の関数内の this は関数を呼び出すオブジェクトを指します (オブジェクトがない場合) ##コンストラクターのデフォルトの戻り値は、作成されたオブジェクト (通常の関数の戻り値は、return ステートメント # によって決定されます。コンストラクタの関数名はクラス名と同じです ##***16. プロトタイプ/プロトタイプチェーン / (プロトタイプ) 継承について簡単に説明してください* プロトタイプとは: すべてのオブジェクトインスタンスにはプロトタイプがあり、プロトタイプオブジェクトとも呼ばれます。属性 _proto_ は、そのコンストラクターのプロトタイプが指すオブジェクトを指します。つまり、オブジェクトはコンストラクターによって作成されますが、すべてのオブジェクトがプロトタイプを持つわけではなく、メソッドのみがプロトタイプを持ちます。プロトタイプチェーンとは何ですか? プロトタイプチェーンの基本的な考え方は、プロトタイプを使用して、ある参照型に別の参照型のプロパティとメソッドを継承させることです。各コンストラクターにはプロトタイプオブジェクトがあり、各プロトタイプオブジェクトにはコンストラクターへのポインターがあり、インスタンスにはプロトタイプオブジェクトへの内部ポインターが含まれていることがわかります。プロトタイプチェーンの中心は、依存オブジェクトの _proto_ のポインタであり、属性が存在しない場合、オブジェクトは次のレイヤーによって作成されます。コンストラクターは、 Object に到達するまで、指す _proto__ がありません。 _proto_ は本質的に prototype を探しているため、検索するだけで済みます。このチェーンの prototype をコンストラクター上で実行します。このうち、Object.prototype には _proto_ 属性がなく、 == null です。各コンストラクターにはプロトタイプオブジェクトがあります。プロトタイプオブジェクトにはコンストラクターへのポインターが含まれ、インスタンスにはプロトタイプオブジェクトの内部へのポインターが含まれます。プロトタイプオブジェクト (1) を別のプロトタイプオブジェクト (2) のインスタンスと等しくします。この時点で、プロトタイプオブジェクト (2) にはプロトタイプオブジェクト (1) へのポインターが含まれます。次に、プロトタイプオブジェクト (2) のインスタンスがプロトタイプオブジェクト (3) と等しいものとします。このレイヤーごとの進行により、インスタンスとプロトタイプのチェーンが形成されます。これがプロトタイプチェーンの概念です。各コンストラクターにはプロトタイプオブジェクトがあり、プロトタイプオブジェクトにはコンストラクター (コンストラクター) へのポインターが含まれ、インスタンスオブジェクトにはプロトタイプオブジェクト (__proto__) への内部ポインターが含まれます。プロトタイプオブジェクトが別のプロトタイプオブジェクトのインスタンスと等しい場合、そのプロトタイプオブジェクトには別のプロトタイプ (__proto__) へのポインターが含まれ、他のプロトタイプにも別のコンストラクター (コンストラクター) へのポインターが含まれます。別のプロトタイプが別のタイプのインスタンスである場合、これによりインスタンスとプロトタイプのチェーンが形成されます。プロトタイプチェーンとも呼ばれます。プロトタイプ継承は、js での継承の方法です。プロトタイプチェーンは、継承を実装するための主な方法です。, 基本的な考え方は、プロトタイプを使用して、ある参照型に別の参照型のプロパティとメソッドを継承させることです。 , プロトタイプの継承: プロトタイプ内のメンバーの使用この機能を共有する他の関連オブジェクトと組み合わせることができ、継承を実現できます。継承を実装するこの方法は、プロトタイプ継承と呼ばれます。 17. Promise の理解 1. 約束とは何ですか? Promise を使用して解決できる問題は何ですか? Promise が約束、つまり一定期間後に結果が得られるという約束を意味することは誰もが知っています。 Promise は非同期プログラミングのソリューションであり、callback function や event よりも合理的かつ強力です。構文的に言えば、 promise は非同期操作メッセージを取得できるオブジェクトです; 2. promise 3 つの状態があります : 保留中の初期状態は、待機状態、満たされた成功状態、拒否された失敗状態とも呼ばれます。状態が変わると、はもう変わりません。 promise インスタンスを作成すると、すぐに実行されます。 #3. Promise の 2 つの特徴1. Promise オブジェクトの状態は外界の影響を受けません 2. Promise の状態が一度変化すると、再び変化することはありません。この結果はいつでも取得できます。状態を元に戻すことはできません、4. Promise の 3 つのデメリット1) キャンセルできない Promise は作成後すぐに実行され、途中でキャンセルすることはできません 2 )コールバック関数が設定されていない場合、お約束内部でスローされたエラーは外部には反映されません 3)pending (待機中) 状態では、現在の進行状況がどの段階にあるのか、始まったばかりなのか、これから始まろうとしているのかを知ることはできません。 completed promise は 2 つの問題を解決するために使用されます: 1.コールバック地獄、コードは保守が難しく、多くの場合、最初の関数の出力が 2 番目の関数の入力になります。 2.promise は、複数の同時リクエストをサポートし、同時リクエストのデータ #この Promise は非同期の問題を解決できますが、Promise が非同期であるとは言えません 19. async** Async の使用法を簡単に説明してください。generation と promise, async の構文糖は、generator# のです## * を async に、yiled を await# に置き換えます。 ##関数の前に async を追加し、非同期操作メソッドの前に await キーワードを追加する必要があります注: await は async 関数内でのみ実行できます。それ以外の場合は、エラーが報告されます約束不正な結果が返され、例外処理が行われなかった場合、エラーが報告されるため、を使用してくださいtry..catch例外をキャッチするだけです 20.. URL を入力してからページの読み込みが完了し、ページに表示されるまでのプロセスでは何が起こるでしょうか? は 4 つのステップに分かれています: 1. URL リクエストを送信する場合、URL が Web ページの URL かどうかに関係なくまたは Web ページリソース URL ごとに、ブラウザはリクエストを処理するスレッドを開始し、リモート DNS サーバー上で DNS クエリを開始します。これにより、ブラウザはリクエストに対応する IP アドレスを取得できるようになります。 2. ブラウザとリモート Web サーバーは、TCP スリーウェイハンドシェイクを通じてネゴシエートし、 TCP/IP を確立します。繋がり＃＃＃。ハンドシェイクには同期メッセージ、同期応答メッセージ、および応答メッセージが含まれます。これら 3 つのメッセージはブラウザとサーバーの間で受け渡されます。このハンドシェイクでは、クライアントは最初に通信の確立を試み、次にサーバーが応答してクライアントのリクエストを受け入れ、最後にクライアントがリクエストが受け入れられたことを示すメッセージを送信します。 3. TCP/IP 接続が確立されると、ブラウザは接続を通じて HTTP GET リクエストをリモートサーバーに送信します。リモートサーバーはリソースを見つけ、HTTP 応答 4 を使用してそれを返します。この時点で、Web サーバーはリソースサービスを提供し、クライアントはリソースのダウンロードを開始します。。 jQuery 関連知識 Css 前処理 Sass Less とは何ですか?使用する理由 Sass と less は両方とも cssプリプロセッサは css の抽象化レイヤーであり、最終的に css にコンパイルされる特別な構文です。 less は、 css に変数、継承、ネストなどの動的言語の特性を与える動的スタイル言語です。 #Lessクライアントまたはサーバー上で実行可能 (node が必要)Js の .call() と .apply() の違い apply: オブジェクトのメソッドを呼び出し、現在のメソッドを別のオブジェクトに置き換えます。。 call: オブジェクトのメソッドを呼び出し、現在のオブジェクトを別のオブジェクトに置き換えます。定義からわかるように、call と apply は両方とも、オブジェクトを呼び出して、現在のオブジェクトを別のオブジェクトに置き換えるメソッドです。違いは、渡されるパラメータにあります。apply には、新しい this オブジェクトと配列 argArray の 2 つのパラメータのみを指定できます。arg が配列でない場合、エラーが報告されます同じです。ポイント:2 つの方法はまったく同じ効果があります。 call と apply の機能は、自分のメソッドを呼び出すのと同じように、他の人のメソッドを借用して呼び出すことです。別の方法で #クロスドメインが発生する理由/同一オリジンポリシーについて簡単に説明してくださいクロスドメインが発生する理由問題の発生: フロントエンドとバックエンドの分離モードでは、フロントエンドとバックエンドのドメイン名が一致せず、クロスドメインアクセスの問題が発生します。リクエストプロセス中にデータを取得したい場合、通常は post/get リクエストになるため...クロスドメインの問題が発生するクロスドメインの問題の原因は次のとおりです。 JavaScript の同一オリジンポリシー。つまり、プロトコルのホスト名とポート番号 (存在する場合) が同じ場合にのみ、相互アクセスが許可されます。つまり、JavaScript は自身のドメイン内のリソースにのみアクセスして操作できますが、他のドメインのリソースにアクセスして操作することはできません。同一オリジンポリシーは、NetScape によって提案されたよく知られたセキュリティポリシーです。いわゆる同一オリジンとは、同じプロトコル、ドメイン名、およびポートを指します。セキュリティ上の理由から、ブラウザはこのドメイン名でのインターフェイスの対話のみを許可します。異なるソースからのクライアントスクリプトは、明示的な承認なしに相手のリソースを読み書きすることはできません。ページの読み込み時間を短縮する 3 つの方法を出力してください 1. 画像の最適化 2. 画像形式の選択 (GIF: 提供される色が少なく、色の要件が高くない場所で使用できます) 3. CSS の最適化 (margin-top、margin-left などの CSS の圧縮とマージ) 4. の後にを追加します。 URL スラッシュ (www.campr.com/directory など、このディレクトリがどのようなファイルタイプまたはディレクトリであるかを決定します。) cdn hosting5. は、高さと幅 (ブラウザがこれら 2 つのパラメータを見つけられない場合、画像のダウンロード中にサイズを計算する必要があります。画像が多数ある場合、ブラウザは常にページを調整する必要があります。これは速度に影響するだけでなく、ブラウザが高さと幅のパラメータを認識している場合、画像が一時的に表示できない場合でも、ページ上に画像を表示するためのスペースが確保され、引き続き表示されます。次のコンテンツをロードします。その結果、ロード時間が短縮され、ブラウジングエクスペリエンスが向上します。わかりました) 6. http リクエストを削減します (ファイルのマージ、画像をマージする) これはを指します。JavaScript では通常、これは実行している関数、または、機能が属します。 #これをグローバル化 → ウィンドウ内でこれを指す ## → それ自体を指す ##Inイベント this → イベントオブジェクトを指します jsonp とは何ですか?また、どのように機能しますか?なぜ本物ではないのか ajax Jsonp は実際にはクロスドメインソリューションです。 Js データのクロスドメインリクエストは許可されていませんが、JS スクリプトのクロスドメインリクエストは可能です# ＃＃＃＃＃＃＃。したがって、リクエストされるデータを js ステートメントにカプセル化し、メソッド呼び出しを行うことができます。クロスドメインリクエスト js スクリプトは、このスクリプトを取得できます。 jsスクリプトは取得後すぐに実行されます。データをパラメータとしてメソッドに渡すことができます。データを取得できます。これにより、クロスドメインの問題が解決されます。 jsonp原則: (スクリプトタグの動的作成、コールバック関数) ブラウザでは、js リクエストの script タグを使用して src クロスドメインリクエストを許可します。リクエスト結果にコールバックメソッド名を追加し、リクエストページでメソッドを定義してそれを取得できます。 . ドメイン間でリクエストされたデータ。なぜ本物の ajax ではないのですか? 1、ajax と jsonp は呼び出しメソッドの 2 つのテクノロジーです。 " これらは非常によく似ており、URL をリクエストし、サーバーから返されたデータを処理するという同じ目的を持っています。そのため、jquery や ext などのフレームワークは、jsonp を ajax の形式としてカプセル化します; 2、しかし、ajax と jsonp は本質的には別のものです。 ajax の核心は、XmlHttpRequest を通じてこのページのコンテンツを取得することですが、jsonp の核心は、サーバーによって提供される js スクリプトを呼び出すために <script> タグを動的に追加することです。 </script> 3. したがって、実際には、ajax と jsonp の違いはクロスドメインかどうかではありません。Ajax はサーバーを通じてクロスドメインも実現できます。プロキシ、およびjsonp自体は、同じドメイン内のデータの取得を除外しません。 4.また、jsonp はメソッドまたは非必須プロトコルです。ajax と同様に、データの送信に必ずしも json 形式を必要とするわけではありません。、文字を変更することはできますが、これは jsonp が公共サービスを提供するのに役立ちません。配列から重複を削除する 2 つ以上の方法をマスターしてください indexof# を使用してください##() メソッド lastindexof() メソッドを使用し、 indexofメソッドは同じですindexof先頭からの一致lastindexof一致から尾部 ES6#set 構造 set重複データは受け入れません sort メソッドを使用して、最初に元の配列を並べ替えてから、隣接する配列と比較し、異なる場合は、それを新しい配列に保存します filter と indexof## を使用します# メソッド #ES6 の ##set# を使用する## とスプレッド演算子 #set と Array.from を使用します。 () メソッド array.from は、set 構造体を配列に変換できます。 splice と二重層ループを使用 # を使用##includes method 深いコピーと浅いコピーとは何ですか?また、それを実現する方法は何ですか? 深いコピー: ポインターの割り当てとコンテンツのコピー、浅いコピー: 単純なポインターの割り当て配列の浅いコピー: 配列の場合、配列のいくつかのメソッドを使用して実装できます。slice()、concat() は、実装する新しい配列の特性を返します。コピー。スプレッド演算子 Spread を使用して配列のディープコピーを実装します。 JSON.parse(JSON.stringify()) は、配列だけでなくオブジェクトにも適用されます。関数、未定義、シンボルはコピーできません。 js が弱い型指定言語である理由弱い型指定言語の実装は、強い型指定言語と比較されます。 int char float Boolean などの多くの型#var は、変数に値を代入する際に自動的に型を判断して変換してくれるため、弱い型指定の言語です。 #less を css に変換する方法 #node を ## に使用します #less ファイルは cssfileUse ウェブストーム自動生成最も一般的に使用される echarts チャートとチャートの組み合わせ For ループとマップループの違いは何ですか? For オブジェクト自身をトラバースして継承します。列挙可能なプロパティ、つまりプロトタイプチェーン上のどのプロパティが含まれるか Map メソッドは空の配列を検出しません。 map 新しい配列を返しますが、元の配列には影響しません ##単純なクラスと継承を作成してくださいクラスを作成するには 3 つの手順があります。タイプ: 関数と # を使用します。 ##this キーワードプロトタイプ方法使用プロトタイプおよび #this キーワード #object.create()## を使用します# 構築するメソッド継承には 6 つのタイプがあります: プロトタイプの継承 #コンストラクターの継承の借用結合継承 #プロトタイプの継承寄生の継承 #寄生の結合継承同期と非同期の違い/ブロッキングと非ブロッキングの違い同期(ブロッキング) 非同期 (非ブロッキング) 例: 同期、私たちは一緒に仕事をしています。食事の時間です。私は一緒に食事をするようお願いしました。あなたはとても忙しいので、私は座ってあなたの仕事が終わるのを待ってから一緒に食事に行きます。職場で、食事の時間です。一緒に食事するために電話します。あなたはとても忙しいので、私が先に一人で食べます。終わってから食べに行きます。同期 (ブロッキング) と非同期 (ノンブロッキング) のこれら 2 つは、呼び出し結果を待機するときのプログラムのステータスに焦点を当てています。再描画とリフローとはリフロー: いつレンダーツリー要素のサイズ、レイアウト、非表示などの変更により、一部または全体を再構築する必要があります。これをリフローといいます。 #各ページに少なくとも 1 回は必要です。リフローは、ページが初めて読み込まれるときです。レンダーツリーリフロー時のため、この時点でリフローが確実に発生します。を実行すると、ブラウザはレンダリングツリーの影響を受ける部分を無効化し、レンダリングツリーのこの部分を再構築します。リフローが完了すると、ブラウザは影響を受ける部分を画面に再描画します。これは再描画です ##レンダーツリーの一部の要素で属性を更新する必要があり、これらの属性が要素の外観にのみ影響する場合ではありません。レイアウトに影響し、再描画と呼ばれます#http とは何ですか?特徴は何ですか。http はハイパーテキスト転送プロトコルと呼ばれ、インターネット上で最も広く使用されているネットワークプロトコルです。機能: リクエストベース - 応答モードステートレス保存接続なし HTTP このプロトコルと HTTPShttp の違いは、ハイパーテキスト転送プロトコルであり、情報はクリアテキスト ## で送信されます。 #https は、安全な ssl 復号化トランスポートプロトコル http と https 接続方法が全く異なり、ポートも異なります。 http は 80、https は 443#http 接続は非常にシンプルでステートレスです。https プロトコルは、 ssl http ## から構築されたネットワークプロトコルです。 # 暗号化通信と本人認証が可能なプロトコル http プロトコルより安全プロトタイプとプロトタイプの違い継承、プロトタイプ、呼び出し、継承の適用 (最初のパラメーターは同じですが、2 番目の違いは何ですか) apply()2 つのパラメーターを受け取ります、1 つは関数が実行されるスコープ (this)、もう 1 つはパラメータ配列です。 call() メソッドの最初のパラメータは apply() メソッドと同じですが、関数に渡されるパラメータをリストする必要があります。アロー関数と通常の関数の違いアロー関数は匿名関数であるため、アロー関数として使用することはできません。コンストラクターまたは使用済み new アロー関数はバインドできません引数、# を使用してください ##restパラメータの解決策 #アロー関数にはプロトタイプ属性がありません #アロー関数の this は常にコンテキストの this 、を指します。アロー関数は this をバインドできず、アロー関数が含まれるコンテキストの this## をキャプチャします。 #Value、それ自体の thisvalue js メモリリークとは何ですか? #メモリリークとは、ブラウザのプロセスが終了するまで使用またはリサイクルできない、割り当てられたメモリの一部を指しますメモリを解放する方法: 割り当て値を null Web サイトのファイルとリソースをどのように最適化しますか? 1 、ファイルのマージ (目的は http リクエストを減らすことです) 2 、ファイルの圧縮 (目的は、ファイルのダウンロードサイズを直接削減することです)#3 、cdn ホスティングリソースを使用します4 、キャッシュを使用します5 、js および css ファイルを gizp 圧縮します #6 、メタタグの最適化 (タイトル、説明、キーワード)、見出しタグの最適化、alt の最適化 7. バックリンク、ウェブサイトの外部リンクの最適化 ajax について簡単に説明してください実行プロセスと一般的な HTTP ステータスコード 100 : このステータスコードは、クライアントにリクエストの送信を継続する必要があることを伝えます。この一時的な応答は、クライアントに通知するために使用されます。リクエストの一部はサーバーによって受け入れられましたが、クライアントはリクエストの残りの部分を送信し続ける必要があります。リクエストが完了した場合、応答は無視され、サーバーはその後最終結果をクライアントに送信します。リクエストは完了しました 200 : これは最も一般的な http ステータスコードで、サーバーがリクエストを正常に受け入れ、要求された最終結果を返すことを示します。クライアント 202 : サーバーはリクエストを受け入れましたが、まだ処理しておらず、リクエストが最終的に処理されるかどうかはまだ不明であることを示します 204 : サーバーはリクエストを正常に処理しましたが、エンティティコンテンツを返さなかったため、新しいヘッダーメタ情報を返す可能性があります 301 : クライアントによって要求された Web ページは、新しい場所に永久に移動されました。リンクが変更されると、クライアントにリンクの変更を伝えるために 301 コードが返されます。クライアントは新しいページを保存します。 404 : リクエストは失敗しました。クライアントがリクエストしたリソースが見つからなかったか、またはリクエストが失敗しました。 500 : サーバーで不明なエラーが発生したため、クライアントの現在のリクエストを完了できません。 503 : 一時的なサーバーの過負荷またはメンテナンスのため、サーバーは現在のリクエストを処理できませんプリロードとその違い遅延ロードとプリロードの適切な時期はいつですか? 遅延ロードは遅延ロードであり、特定の条件または要件が満たされるまで待機してから、対応するリソースをロードします。 2 つは、1 つは事前にロードされ、もう 1 つはゆっくりとロードされるか、まったくロードされないことです。遅延ロードはサーバーフロントエンドへの負荷をある程度軽減できますが、プリロードはサーバーフロントエンドへの負荷を増大させます。 #Jquery セレクターとは 1. 基本セレクター基本セレクターは、jQuery で最も一般的に使用され、最も単純なセレクターであり、要素の ID、クラス、タグ名を通じて DOM 要素を検索します。 1、ID セレクター #id 説明: 指定された ID に基づいて要素を照合し、単一の要素を返します (注) : Web ページでは ID 名を繰り返すことはできません) #例: $("#test") test の ID を持つ要素を選択します #2 、class selector.class説明: 指定されたクラス名に従って要素を照合し、要素のコレクションを返します例: $ (".test") クラス test 3 、要素セレクター element を持つすべての要素を選択します。説明: 以下に従って要素を照合します。指定された要素名、要素セットを返します例: $("p") はすべての要素を選択します #4 ,* 説明: すべての要素に一致し、要素セットを返します #例: $("") はすべての要素を選択します 5 , selector1, selector2,...,selectorN説明: 各セレクターに一致する要素をマージしてまとめて返し、マージされた要素セットを返します。例: $("p,span,p.myClass") は、クラスが myClass である、、およびタグのすべての要素を選択します 2. 階層セレクター階層セレクターは、階層関係に基づいて特定の要素を取得します。 1 、子孫セレクター例: $("p span") は内のすべての要素を選択します。 ;span> 要素 (注: 子孫セレクターは、子か孫かに関係なく、親要素の指定された選択されたすべての要素を選択します) 2 、子selector $("parent>child")例: $("p>span") は、要素の下にあるすべての要素を選択します (注: 子セレクター子のみを選択します)親要素に直接属する要素) 3 、兄弟セレクター$("prev next")説明: 直接の要素を選択します。 prev 要素に続く要素は、要素のセットを返します。例: $(".one p") は、クラス one を持つ次の兄弟要素セットを選択します 4 、兄弟セレクター$("prev~siblings")説明: prev 要素の後のすべての兄弟要素を選択し、要素セットを返します例: $("#two~p") は、ID two ##3 を持つ要素の後のすべてのピア要素のセットを選択します。フィルター選択デバイス 1>基本フィルターセレクター 1, :first 説明: 最初のフィルターセレクターを選択します。要素は、単一の要素を返します。例: $("p:first") は、すべての要素の中から最初の* 要素を選択します 2, :last 説明: 最後の要素を選択し、単一の要素を返します ##例: $("p:last") 選択最後のすべての要素の中の要素 3, :not(selector) 説明: Given を使用してすべての要素を削除しますセレクターによって一致した要素、要素コレクションを返します例: $("input:not(.myClass)") は、クラスが myClass ではない要素を選択します 4, :even 説明: インデックスが偶数であるすべての要素を選択します。インデックスは 0 から始まり、要素セットを返します。 5 , :odd 説明: インデックスが奇数であるすべての要素を選択します。インデックスは 0 から始まり、要素セットを返します。 6, :eq(index) 説明: インデックスが Index と等しい要素を選択します。インデックスは 0 から始まり、単一の要素を返します。 7 , :gt(index) 説明: インデックスがインデックスより大きい要素を選択します。インデックスは 0 から始まり、要素セット 8, : lt(index) 説明: インデックスがインデックスより小さい要素を選択します。インデックスは 0 から始まり、要素セットを返します 9, :focus 説明: 現在フォーカスされている要素を選択します ## 2> コンテンツフィルターセレクター 1 、:contains(text)説明: テキストを含む要素を選択し、要素のコレクションを返します。例: $(" p:contains('I')") テキスト「I」を含む要素を選択します。 2 , :empty説明: 子要素またはテキスト要素を含む空要素を選択せず、要素コレクションを返します例: $("p:empty")子要素やテキスト要素を含まない空の要素 ( ) 3 、:has(selector)# を選択します##説明: セレクター要素によって一致する要素を含む要素を選択し、要素コレクションを返します。例: $("p:has(p)") は、要素を含む要素 ( ) 4 , :parent説明: 子要素またはテキストを含む要素を選択し、要素のコレクションを返します ##例: $("p:parent") は、子要素を含む要素を選択しますまたはテキスト要素 ( または Text ) #3>可視性フィルターセレクター 1 , :hidden 説明: すべての非表示要素を選択し、要素セットを返します。 2 , :visible 説明: 表示されているすべての要素を選択し、要素コレクションを返します 4>属性フィルターセレクター (要素コレクションを返す) 1、[属性] #例: $("p[id]") は、id 属性 #2 、[attribute=value]## を持つ p 要素を選択します#例: $("input[name=text]") は、text 3 、[attribute!=value]## と等しい name 属性を持つ入力要素を選択します。 #例: $("input[name!=text]") は、text と等しくない name 属性を持つ入力要素を選択します。 4、 [attribute^= value] 例: $("input[name^=text]") name 属性が textで始まる入力要素を選択します 5, [attribute$=value] 例: $("input[name$=text]") は、name 属性が text で終わる入力要素を選択します 6、[attribute=value] 例: $("input[name=text]") テキストを含む name 属性を持つ input 要素を選択します 7、[attribute~=value] 例: $("input[class~=text]") クラス属性を選択しますスペースで区切られた値にテキストが含まれる入力要素 8, [attribute1][attribute2][attributeN] 説明: 複数の属性を結合して、フィルター選択デバイス 5> フォームオブジェクト属性フィルターセレクター (要素コレクションを返す) 1、 : 有効になっている説明: 使用可能な要素をすべて選択します 2、:無効説明: 使用できない要素をすべて選択しますelements 要素 #3 , :checked 説明: 選択されたすべての要素 (ラジオボックス、チェックボックス)# を選択します。 ##例: $("input:checked") は、選択されたすべての要素を選択します 4 、:selected 説明:選択されたオプション要素をすべて選択します (ドロップダウンリスト) #例: $("select option:selected") 選択されたオプション要素をすべて選択します Jquery メソッドノードの挿入の手順 append() 一致する各要素にコンテンツを追加 #appendTo() 一致するすべての要素を指定された要素に追加します。実際、このメソッドを使用すると、通常の $(A).append(B) 操作が逆になり、A を B に追加します。一致する各要素内のコンテンツを先頭に追加します prependTo() 一致するすべての要素を指定された要素の先頭に追加します。実際、このメソッドを使用すると、従来の $(A).prepend(B) 操作が逆になります。つまり、B を A の前に付ける代わりに、A を B after() 一致する各要素の後にコンテンツを挿入します。 insertAfter() #一致するすべての要素を指定された要素の後ろに挿入します。実際、このメソッドを使用すると、従来の $(A).after(B) 操作が逆になります。つまり、A の後に B を挿入する代わりに、B before() 一致する各要素の前にコンテンツを挿入します# insertBefore() 一致するすべての要素を指定された要素の前に挿入します。実際、このメソッドを使用すると、従来の $(A).before(B) 操作が逆になります。つまり、A の前に B を挿入する代わりに、B 関数スロットリングの違いJs 関数のアンチシェイク関数スロットルとは、js メソッドが一定期間内に 1 回だけ実行されることを意味します。関数のアンチシェイクとは、頻繁にトリガーされた場合に、十分なアイドル時間があればコードが 1 回だけ実行されることを意味します関数のスロットリングはステートメント現在のコードが実行中かどうかを記録するためのフラグとして変数が使用されます。実行中の場合は、メソッドの実行をキャンセルし、直接 return します。アイドル状態の場合は、メソッドをトリガーします。メソッドの通常の実行関数アンチシェイクは実装を支援する遅延器を必要とし、実行する必要があるコードの実行を遅らせます。メソッドが複数回トリガーされる場合は、最後に記録された遅延実行コード (cleartimeoutClear and start again.タイマーが終了し、トリガーにアクセスする方法がない場合、コードは実行されます #Get は post## とは異なります ##Get はサーバーからデータを取得することです、post クライアント上のサーバーにデータを送信します。 get url を通じてデータを送信します。、データは url、post メソッドで確認できます。データはに配置されます。 HTML ヘッダー送信先セキュリティ問題 Get 送信されたデータには、最大 1024 バイト、post 制限なしcsrf 攻撃とは Csrf (クロスサイトリクエストフォージェリ) ユーザーがターゲット Web サイトにログインした後、攻撃者はユーザーを攻撃サイトに誘導します。ページを攻撃し、ターゲット Web サイトのユーザーに対する信頼を利用し、ユーザーの ID を使用してページを攻撃し、攻撃の目的を達成するためにターゲット Web サイトに対する偽のユーザー操作のリクエストを開始します。 ##Jsディープコピーを手動で作成するディープコピーとシャローコピーをいつ使用するか方法は問いません深いです、それは必要です。深いコピーが発生した場合は、通常、集約関係があることを示します。浅いコピーが発生した場合、通常、知人関係があることを示します。 #例簡単な例: 複合パターンを実装する場合複合パターン、通常はディープコピーが実装されますオブザーバーパターンを実装する場合Observer Pattern、浅いコピー Vue関連##1を実装する必要があります。 Vue Vue のコアは、ユーザーを構築するための進歩的なボトムアップ増分開発のセットです。インターフェース #MVVM#フレームワーク#,#vue コアはビュー層のみに焦点を当てています。コアアイデア: データ駆動型 (ビューのコンテンツはデータに応じて変化します)変更) コンポーネント化 (コードの再利用性、保守性、テスト容易性を高め、開発効率を向上させ、再利用を促進し、高い凝集性と低い結合性を反映できます) 2. あなたのコードを簡単に説明してください。 vue についての理解 Vue は、ユーザーインターフェイスを構築するための一連の進歩的なメソッドです。フレームワークはボトムアップで段階的に開発されます。コアはビュー層に焦点を当てることです。 vue のコアはデータバインディングの問題を解決するため、大規模な単一ページアプリケーションとコンポーネント化を開発するため、つまり vue の核心このアイデアはデータ駆動型であり、コンポーネント化されています。ここでは、MVVM アイデアについても説明します。MVVM アイデアは、モデル View vm は、v と ## を接続するブリッジです。 #m 、モデルレイヤーデータが変更されると、VM レイヤーはそれを検出し、対応する変更を行うようにビューレイヤーに通知します。 3. Vue の一方向データフローについて簡単に説明してください親の更新prop は下方向に流れます。子コンポーネントに対して、親コンポーネントが更新されるたびに、子コンポーネントのすべての prop が最新の値に更新されます。データは親コンポーネントから子コンポーネントに渡され、一方向にのみバインドできます。親コンポーネントによって渡されたデータは、子コンポーネント内で直接変更できないと判断されます（を使用できます）。 data と computed を使用して解決します) 4. Vue で一般的に使用される修飾子は何ですか修飾子：.lazy 変更後にトリガーされ、値はカーソルが離れたときにのみ変更されますinput 入力ボックス## .number 出力文字列を number に変換します。 type .trim ユーザー入力を自動的にフィルタリングします先頭と末尾のスペースイベント修飾子: .stop クリックイベントのバブリングを防止します。 event.stopPropagation() # と同等です。ネイティブ js の ##.prevent プリセット動作の実行の防止は、event.preventDefault()## と同等です。 .capture # ネイティブ js ##イベントリスナー (イベントを持つ人) を追加するときは、イベントキャプチャモードを使用します。 modifier は最初にトリガーします。.self は、子要素を除き、独自のスコープ内のイベントのみをトリガーします。 1 回 1 回だけ実行キーボード修飾子: .enter Enterキー .tab Tabキー .escReturnキー .space スペースバー .up上キー .down .down 下キー .left左を構築 .right右キーシステム修飾子: ##.ctrl .alt .shift .meta #5.v-text および { {} }v-htmlの違い #{ {}} データをプレーンテキストに解析し、出力を表示できませんhtml v-html 出力をレンダリングできますhtml v-text データをプレーンテキストに解析し、実際の html を出力できません。中括弧との違いは、ページの読み込み時に二重中括弧が表示されないことです。 v-text コマンド: 機能: Web ページ要素内のプレーンテキストコンテンツを操作します。 {{}} は、 v-text と # を記述する別の方法です。 ##{{}}違い: v-text と {{ }} は同等です、{{}} はテンプレート補間と呼ばれます、v-textコマンドを呼び出します。 # 1 つの違いは、大量のデータをレンダリングするときに、一般に画面の点滅として知られる中かっこが表示される場合があることです。 6. v-on は複数のメソッドをバインドできますか? Yes 複数のイベントをバインドする場合は、キーと値のペアを使用できますイベントタイプ: イベントname バインディングが複数の同一のイベントである場合は、カンマで区切ってください 7.Vue ループキー関数 Key 値の存在により一意性が保証されます。VueWhen key 値がない場合は、vue ここに dom ノードがあることを確認します。存在する場合、コンテンツはクリアされ、新しい値が割り当てられます。 key 値が存在する場合、新しいノードと古いノードが比較され、2 つの key# # 同じかどうか、位置を交換するか削除します8. 計算属性とは計算されたプロパティは、値が他の値に依存することを宣言的に記述するために使用されます。依存する値が変更されると、更新されますDOM テンプレート内の計算プロパティにデータをバインドする場合、依存する値によって計算プロパティが変更されると、vue が更新されますDOM 各計算プロパティは、getter と setter、トリガーで構成されます。 getter 読み取り時に #setter をトリガーします9. Vue シングルページのメリットとデメリット単一ページスパ利点: フロントエンドとバックエンドの分離優れたユーザーエクスペリエンス一字クイックコンテンツの変更にページ全体をリロードする必要はありません欠点: seo , 初期読み込み時間が長い (ブラウザは最初に html css js を読み込む必要があり、すべてのページコンテンツがメインページに含まれます) 、ページが複雑になり、ナビゲーションが利用できなくなりました 10.Vuex とは何ですか?使い方？そのシナリオで使用する Vuex は、vue.js アプリケーションモード専用に開発された状態管理ツールです。一元化されたデータストレージを作成すると、プログラム内のすべてのコンポーネントからのアクセスが容易になります。簡単に言えば、 vuex は vue 状態管理ツール#です。 Vuex # には 5 つの属性があります状態ゲッター、ミューテーション、アクションモジュール#State はデータソースの保存場所であり、一般的な vue オブジェクトの data に対応します。state格納されているデータは応答性があります。stateデータが変更されると、データに対応するコンポーネントも変更されます this.$store.state.xxx##Getters で呼び出します。 store の計算された属性と同等。主に this.$ を使用して state のデータをフィルター処理します。 store.getters.xxxCallMutations #データロジックを処理するすべてのメソッドは # に配置されます。 # #mutations で、イベントがトリガーされ、#state データを変更する場合は、mutations## を使用します。 #、を使用します this.$store.commit を呼び出し、このメソッドにパラメータを追加します。これは、mutation## のペイロードです。 # ( ペイロード) アクションデータを非同期的に操作しますが、突然変異を介します使用 this.$store.dispatch をトリガー、actions はペイロードもサポート使用シナリオ: コンポーネント間のステータス、ログインステータス、ショッピングカートに追加、音楽再生 Vuex利用プロセス: ダウンロード vuex src ##index の下に store と# を作成します.js vue と vuex の紹介、使用vuex 、インスタンスオブジェクトを main.js## にエクスポートします ## で導入#.vue ファイルと使用された #11.Vue のルーティングジャンプメソッド (宣言的/プログラム的) Vue ルーティングジャンプには、宣言型とプログラム型の 2 種類があります。使用 js ジャンプ方法これはプログラムナビゲーションと呼ばれます this.$router.push（） router-link # を使用する## ジャンプすることは宣言的と呼ばれます router-view ルーティング出口、ルーティングテンプレートが表示される場所ルーティングにおける name 属性の役割は何ですか? router-link で name を使用して移動します。対応するルートに移動し、 name を使用してパラメータを渡しながら移動します。 12.Vue クロスドメインソリューション 1.バックグラウンドの変更ヘッダー 2. jq を使用して jsonp# を提供します#3.使用#http-proxy-middleware （プロキシサーバーのミドルウェアを設定#）13. Vue のライフサイクルについて簡単に説明してください。##vue のライフサイクルは ## です。 #vue インスタンスの作成からインスタンスの破棄までのプロセス。この間、 8 フック関数が呼び出されます。 beforeCreate（インスタンスの作成）created （作成完了）、 beforeMount (テンプレートの作成開始) マウント済み(作成完了)、 beforeUpdate(更新開始) updated(更新完了)、 beforeDestroy(破壊開始) destroy(破壊完了) 14. Vue ライフサイクルの役割により、ユーザーは自分自身を追加できるようになります。コードの機会 15. DOM レンダリングはライフサイクルステージ内で完了します DOMレンダリングmountedサイクルで完了しました 16. Vueルーティングの実装フロントエンドルーティングが更新されました。ページは表示されますが、要求はされません。アンカーポイントを使用して切り替えを完了すると、ページは更新されません公式 Web サイトでは、vue -router.jsルーティングモジュールを導入するには、 #定義を使用することを推奨しています。ルーティングコンポーネント ##ルートを定義し、 component を使用してルートコンポーネントをマッピングし、# を使用します。 ##name 対応するルートに移動します router インスタンスを作成して渡しますroutes 構成ルートインスタンスの作成とマウント Use router-linkSet routing Jump ##17. Vue ルーティングモードハッシュと歴史、簡単に話してください Hash モードアドレスバーに # とあります、 History ではありません。#history モードで更新すると、404 が表示されます。背景を設定する必要があります。 JavaScript を使用 loaction.hash に値を割り当てるには、 # ハッシュ URL の値ハッシュ変更を使用できます。ハッシュ値HTML5 の変更を監視するイベント # は # を提供します## History API を使用して URL の変更を実装します。このうち、最も重要な API は、history.pushState() と履歴の 2 つです。 repalceState( )。これら 2 つの API は、ブラウザの履歴を更新せずに操作できます。唯一の違いは、前者は新しい履歴レコードを追加するのに対し、後者は現在の履歴レコードを直接置き換えることです。 18. Vue ルーティングでパラメーターを渡す 2 つの方法、params メソッドとクエリメソッド、およびそれらの違い動的ルーティングは、ルートパラメーターの受け渡しとも呼ばれます。は、異なる選択に従って同じコンポーネント内で異なるコンテンツをレンダリングすることを意味します使用法: query は path で導入され、params はで導入されます。 name導入、receives パラメーターは類似しており、this.$route.query.name および this.$route.params.name url:params の表示は類似していますto post、query は get と同様であり、セキュリティ上の問題です。 , params 値を渡す方が比較的安全です。 #query url## を通じてパラメータを渡します。 # そしてページを更新します。まだ表示されます、paramsページを更新すると消えます 19. Vue データバインディングのいくつかの方法 1. 一方向バインディング二重中括弧 {{}} html内部文字列バインディング #2.v-bind binding html属性バインディング 3. 双方向バインディング v-model4. ワンタイムバインディング v-once v-model に依存##20.Vue はグローバルコンポーネントを登録します ##Vue.componnet("コンポーネント名" {オブジェクトテンプレート設立内容 })21.Vueのルーティングフック機能/ルーティングガードとはグローバルガード: beforeEach (to,from,next) および afterEach(to,from）ルート専用ガード: beforeEnter コンポーネントガード内: RouterEnterEnter/update/leave 22. Vue で動的ルーティングを設定するにはどうすればよいですか?どのような方法がありますか?渡されたデータを取得するにはどうすればよいですか? 動的ルーティングは、ルーティングパラメータとも呼ばれます。動的ルーティングには、query と prramsパラメータを渡す 2 つの方法 query は path で導入され、params は # で導入されます##name 概要、queryパラメータを受け取るには this.$route.query.name を使用します paramsパラメータを受け取るには this.$route.params.name を使用します ##23. Elementui の共通コンポーネントは何ですか?よく使用するものとその特性について簡単に説明してください。コンテナレイアウトコンテナ外部コンテナトップバーコンテナサイドサイドバーコンテナメインコンテンツコンテナボトムバーコンテナドロップダウンドロップダウンメニュードロップダウンボタンドロップダウンメニュー # ドロップダウン項目テーブルテーブル# #タブタグページフォームフォームページネーションページネーションメッセージメッセージプロンプト 24. Vue-cli で命令をカスタマイズする方法 #25 .Vue ##v-for ## の命令とは何ですか: 配列、オブジェクト、文字列、数値をループします #v -on : イベントリスニングをバインドします v-bind : 1 つ以上の属性を動的にバインドします v-model : フォームコントロールまたはコンポーネントに双方向バインディングを作成します##v-if v-else v-else-if 条件付きレンダリングv-show 次の条件に基づいて要素の display## を切り替えます。式は true または false #v-html Update elementinnerhtml v-text Update element textcontent v-pre この要素とサブ要素のコンパイルプロセスをスキップしますv-クロックこのディレクティブは、関連付けられたインスタンスがコンパイルを終了するまで要素上に残ります v-once 一度だけレンダリングされます 26.Vue によるフィルターの定義方法过滤器本质就是一个有参数有返回值的方法 new Vue({ 　　　　filters:{ 　　　　　　myCurrency:function(myInput){ 　　　　　　　　return 处理后的数据　　　　　　} 　　　　} }) ログイン後にコピー使用方法： {{表达式 \| 过滤器}} 过滤器高级用法：可以指定参数，告诉过滤器按照参数进行数据的过滤 27.对vue 中keep-alive的理解概念：keep-alive是vue的内置组件，当它动态包裹组件时，会缓存不活动的组件实例，它自身不会渲染成一个DOM元素也不会出现在父组件链中作用：在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间以及性能消耗，提高用户体验。生命周期函数：Activated在keep-alive组件激活时调用，deactivated在keep-alive组件停用时调用 28.如何让组件中的css在当前组件生效在styled中加上scoped 29.Vue生命周期一共几个阶段创建加载更新销毁 Beforecreate创建前 Created 创建后 Beforemount 加载前 Mounted 加载后 Beforeupdate 更新前 Updated 更新后 Beforedestroy 销毁前 Destroyed 销毁后页面第一次加载会触发 beforecreate created beforemount mounted DOM渲染在mounted周期中就已经完成 30.Mvvm与mvc的区别 Mvc模型视图控制器，视图是可以直接访问模型，所以，视图里面会包含模型信息，mvc关注的是模型不变，所以，在mvc中，模型不依赖视图，但是视图依赖模型 Mvvm 模型视图和vm vm是作为模型和视图的桥梁，当模型层数据改变，vm会检测到并通知视图层进行相应的修改 31. Vue コンポーネントのデータが関数なのはなぜですか? Data は関数です各コンポーネントのインスタンスには独自のスコープがあります。各インスタンスは互いに独立しており、相互に影響しません #参照型 (オブジェクト) の場合、複数のコンポーネントの場合1 つのデータを共有するソースの場合、1 つのデータが変更されると、すべてのコンポーネントデータが変更されるため、関数を使用して return (新しいデータを返す) を通じてオブジェクトのコピーを返します。各インスタンスには独自のスコープがあり、相互に影響を与えないこと。 32. Vue 双方向バインディングの原理 Vue双方向バインディングは次のとおりです: データ変更の更新ビュー、ビュー更新データの変更 Vue 双方向のデータバインディングは、データハイジャックとオブザーバーモード#によって実現されます。 ##、データハイジャック、object.defineproperty その目的は、プロパティに値を割り当てるときに、プログラムがそれを感知できることです。属性値の変更オブザーバーパターン属性が変わると、データが使用される場所も変わります 33. Vue でコンポーネントから値を渡す方法 Forward: 親から子へ親コンポーネントは、渡されるデータをバインドします。属性を取得して子コンポーネントに送信します。 Through PROPS 通过通过 ## この逆: Zi Chuanfu 子 Pass through これは、 $ Emit (カスタムイベント名、送信するデータ) で、親コンポーネントは受信するリスニングイベントを設定し、データ ## を取得します#ブラザー: eventbus 中央イベントバススルー Vuex #34.ブートストラップの原則グリッドシステムの実装原則は、コンテナのサイズを定義し、それを ##12 ## に均等に分割することです。 # パーツ ( 24 コピーまたは 32 コピー)、内側と外側のマージンを調整し、メディアクエリと組み合わせると、次のようになります。強力な応答性の高いグリッドシステム。例: 行col-xs-4 36. コンポーネントが複数のコンポーネントで使用されている場合の対処方法プロジェクト 37. スロットについて簡単に説明してください大きく分けて次のような点に分かれます。（スロット）？どこに置きますか？それは何をするためのものか？任意のコンテンツを配置して子コンポーネントで使用すると、子コンポーネントのテンプレートデータを親コンポーネントに通常どおり表示できます。名前付きスロットと匿名スロット、スコープスロットは、率直に言えば、コンポーネントの属性であり、コンポーネント要素内で使用できます。親コンポーネントで使用できます slot-scope 子コンポーネントからデータを取得します 38.Watch 簡単な説明を入力してください Watch 関数は、値の変化を監視し、その変化によって実行する必要があるメソッドを呼び出すことです 39.Vant Ui を簡単に説明してください軽量で信頼性の高いモバイル端末 Vue コンポーネントライブラリ ##40 .計算プロパティと watch の違い Computed watch 違いは、computed のキャッシュ機能で、無関係なデータが変更された場合、再計算されず、キャッシュ内の値が直接使用されます。計算属性は、値が他の値に依存することを宣言的に記述するために使用されます。依存する値または変数が変更されると、それに応じて計算属性も変更されます。 Watch は、data で定義された変数を監視しています。変数が変化すると、watch# がトリガーされます。のメソッド ##41.mvvmフレームワークとは何ですか?他のフレームワーク (jquery) との違いは何ですか?どのシナリオが適していますか? Mvvm と他のフレームワークの違いは、 vueデータドリブン Pass Data は、ノード操作の代わりにビューを表示するために使用されます大量のデータ操作を伴うシナリオに適しています 42。 Vue の最初の画面の読み込みが遅い、その解決方法、白い画面時間を検出する方法、白い画面の問題を解決する方法最初の画面の読み込みが遅い理由: 最初の読み込みページには、レンダリングする必要があるコンポーネントデータが大量にあります解決策: 1.ルーティング遅延読み込みコンポーネント：（）=>import("ルーティングアドレス ") # #2.ui オンデマンドでのフレームロード 3.gzip 圧縮白画面時間検出: ? ? ? ? 白い画面の問題を解決します: ① v-text を使用してデータをレンダリングします ② {{}} 構文を使用してデータをレンダリングしますが、v-cloak# も使用します## ディレクティブ (コンパイルのために関連するインスタンスが終了するまで要素上に残るために使用)、v-cloak を配置する場所、 v- cloak はすべてのタグに追加する必要はありません。el# によってマウントされたタグに追加するだけです。 # #43. Vue の二重データバインディングのプロセスで、データが変更されたときに、その変更を相手側にどのように通知しますか? #データハイジャックとオブザーバーモード Vue 双方向のデータバインディングは、データハイジャックとオブザーバーモード、# を通じて実現されます。 ##データハイジャック、object.defineproperty その目的は、プロパティに値を割り当てるときに、プログラムがそれを感知し、プロパティ値の有効範囲を制御し、プロパティの値を変更できることです。他のプロパティの値オブザーバーパターンの目的は、プロパティが変更されると、データが使用される場所も変更されることです ##44.Vuex プロセス vue コンポーネントでは、アクション# が dispatch を通じてトリガーされます。 ##データを変更する操作を送信し、アクション##の commit を通じて mutations## をトリガーします。 # #データを変更するには、mutations が commit からリクエストを受け取り、自動的にを渡します。 mutate を実行して state を変更し、最後に store がそれを呼び出す各コンポーネントの更新をトリガーします 45. Vuex はどのように非同期データをリクエストしますか #1. 最初に state## で変数を作成します#2.次に、 action# でカプセル化された axios を呼び出します。 ##リクエスト、データの非同期受信、コミット送信 mutations#Mutations state の状態を変更し、action から取得した値を state## に代入します。 #46. Vuex でミューテーションにアクションを送信する方法 Action 関数は # のストアを受け取ります ##同じメソッドとプロパティを持つ context オブジェクトのインスタンスは、context.commit を呼び出してを送信できます。 mutation、または context.state および context.getters による getstateandgetters47.ルーターとルーターの違い1。 Router は、 Vue.use(VueRouter) および ## を介した VueRouter のオブジェクトです。 #VueRouter コンストラクターは、router のインスタンスオブジェクトを取得します。このオブジェクトは、すべてのルートと多くのキーオブジェクトと属性を含むグローバルオブジェクトです。 2.route はジャンプルーティングオブジェクトです。各ルートには route オブジェクトがあります。対応する name、path、params、query などを取得できるローカルオブジェクト49. vuex の State 属性とは何ですか? State はデータソースが保存される場所です State のデータは応答性がありますはい、state のデータが変更されると、このデータに対応するコンポーネントも変更されます Stateグローバル state とを mapstate に配置します。 getters現在のコンポーネントの計算されたプロパティにマッピングされます 50.vuex の Getter プロパティとは何ですか? Getter は、state (store) に対して計算操作を実行できます。計算されたプロパティ Getter複数のコンポーネント間で再利用可能状態が次の場合にのみ再利用可能getters 51. vuex の Mutation 機能とは何ですか? #Changevuex ストアのステータスを変更する唯一の方法は、mutation# を送信することです。 ##, はいコールバック関数 52 の store のステータスを変更します。vuex のアクションの特徴は何ですか? Action は mutation に似ていますが、違いは action です。送信されるのは mutation であり、これは直接の状態変更ではありませんが、任意の非同期操作を含めることができます54。 vuex の利点利点: 親子コンポーネント以外の通信を解決し、 ajax リクエストの数を減らします。一部は直接リクエストできます。 stateGet からアクセス欠点: ブラウザを更新し、 ##state で##vuex 初期状態に戻ります。解決策は vuex-along で、計算されたプロパティとを使用して実装する必要があります。 sessionstorage55.Vue ルーティング遅延読み込み (ルートのオンデマンド読み込み) 56.v- for と v-if の優先順位まず第一に、v-if と v-for は使用しないでください。同じ要素の理由: v-for は v-if よりも優先されます。毎回配列全体を走査する必要があるため、特に小さなパーツをレンダリングする場合、速度に影響します。 v-for は v-if よりも優先されます。 Ele.me の 5 つのコンポーネントを書き留めてください。ポップアップウィンドウダイアログ el-dialog> カレンダー進行状況バー Switch React 関連 fetch VS ajax VS axios Traditional Ajax は XMLHttpRequest(XHR ) を指します、バックエンドリクエストを送信するための最も初期のテクノロジー。元の js に属し、コアは XMLHttpRequest## を使用します。 # オブジェクト、複数のリクエスト間に順序関係があるとコールバック地獄が発生します。 JQuery ajax は、ネイティブ XHR axios # のカプセル化です。 # # は、Promise に基づいており、## である点を除いて、本質的にはネイティブ XHR のカプセル化です。 #Promise の実装バージョンは、最新の ES 仕様、fetch に準拠しています。 ajax のさらなるカプセル化ではなく、 #XMLHttpRequest## を使用しないネイティブ #js です。＃物体。 #React イベント処理--- method 1# を指すようにこれを変更します。 ##: bind メソッドを使用して所定の場所にバインドして、this# を変更します。 ##方法を指す2 #: arrow function Way3 : constructorイベントを事前にバインドするメソッド4 : イベント呼び出しの記述方法をアロー関数の形式に変更します #react についての理解を簡単に説明してください # React は facebook から始まり、react はユーザーインターフェイスの構築に使用されるですjsライブラリ##機能:##宣言型デザイン： react パラダイム宣言を使用すると、開発者は表示内容を宣言するだけで、 react が自動的に完了します効率的な #: 反応 #ペアリングによる ## のシミュレーション#dom (つまり、仮想 dom)、dom## との対話を最小限に抑えます。 #柔軟な：react既知のライブラリと連携できる、またはフレームワークがうまく連携できるコンポーネント: react を介してコンポーネントをビルドします。コードは再利用しやすく、大規模なプロジェクト開発にうまく適用できます。ページ機能は小さなモジュールに分割されていますそれぞれの小さなモジュールはコンポーネントです ##一方向のデータフロー：react は一方向のデータフローであり、データは通過します。 props は親ノードから子ノードに渡されます。親の props の 1 つが変更されると、 reverse は再レンダリングされます。すべての子ノードがレンダリングされます。反応コンポーネント間のデータ転送値の転送を転送する props値を転送し、関数を使用して値を渡すイベントを通じて関数を呼び出して転送する同レベル値転送 pubsub-js を使用使用 pubsub.publish(event name, data) を使用してデータをスローします Use pubsub.subscribe(listening events, ()=){}) データの受信コンポーネント間での受け渡し使用 context を使用するには contextコンポーネント間で値を転送するには、createContext() を使用する必要があります。このメソッドには 2 つのオブジェクトがありますプロバイダプロデューサーコンシューマコンシューマ両者の違いVue と React #同じ点: #どちらもサーバーレンダリングをサポートしますすべての仮想 dom 、コンポーネント開発、親コンポーネントと子コンポーネントのデータを経由で渡します。 props パラメータ、すべて実装webcomponent仕様すべてデータ駆動型ビュー # #すべてに状態管理があり、 react has redux、vue には vuex があり、すべてネイティブをサポートするソリューションがあります' 反応有反応ネイティブ vue有weex 違い: ##react厳密にのみ mvc view レイヤー、vue は mvvm# ＃＃モード＃＃＃＃＃＃ Virtualdom は異なります。vue は各コンポーネントの依存関係を追跡します。 react とは異なり、dom コンポーネントツリー全体を再レンダリングする必要はありません。アプリケーションの状態が変更されると、すべてのコンポーネントがレンダリングされます。レンダリングが再レンダリングされるため、react は shouldcomponentupdate ライフサイクルフック関数を使用して ## を制御します #コンポーネントの書き方が異なります、react は jsx および inline style は、html と css をすべて ## に書き込むことです。 #js では、vue は html、css ,js同じファイル内 ##データバインディングが異なります, vue 双方向のデータバインディングを実現、reactデータフローは一方向です react では、state オブジェクトは setstate メソッドを使用して次のことを行う必要があります。 ##vue では、#state オブジェクトは必要ありません。データは ## に含まれています。 #data 属性 ##vueオブジェクトでの管理仮想 dom と diff について簡単に説明してくださいアルゴリズム Virtual DOM は仮想ノードと呼ばれることが多く、オブジェクト# ～ # です。 ##js ##オブジェクトは DOM 内のノードをシミュレートし、それらを実際の DOM## にレンダリングします。 # 特定のレンダリングメソッドノードを介して。頻繁な操作DOM、または大量のページの再描画とリフロー Diff アルゴリズム: ツリー構造を階層的に分解し、同じレベルの要素のみを比較し、比較を容易にするためにリスト構造の各ユニットに一意の key 値を追加します。 . コンポーネントの理解組み合わせ可能、再利用可能、保守可能、テスト可能何が起こるかsetStateを呼び出した後? React setstate を呼び出した後、 react はマージします受信したパラメータオブジェクトとコンポーネントの現在の状態。調整プロセスをトリガーします。調整プロセス中に、react は react 要素ツリーを構築し、## 全体を再レンダリングします。新しい状態 #UIInterface に基づいて、要素ツリーを取得した後、react は古いノードと新しいノードの違いを自動的に計算します。最小化して、違いに基づいてインターフェースを再レンダリングします。 ##componentWillMount コンポーネントがレンダリングされる前に componentDidMount を呼び出します最初のレンダリング後に呼び出します ComponentWillReceiveProps コンポーネントが呼び出し shouldComponentUpdate を受け取った後、新しい props がコンポーネントが更新されます htmlcomponentWillupdate コンポーネントが更新されようとしているときに呼び出されます html ##componentDidupdate コンポーネントの更新完了直後に呼び出します componentWillUnmount コンポーネントの前に呼び出しますは削除されました **** 仮想 dom パフォーマンスが向上する理由 ?(必須試験 ) 仮想 dom は js と実際の dom は中間にキャッシュを追加し、 dom diff ## を使用します。 # 不必要な dom 操作を回避するためのアルゴリズム。これによりパフォーマンスが向上します。(#コンポーネントの ##)State (state) と属性 (props) の違いは何ですか State と props の違い Props は、コンポーネントに外部から渡されるパラメーターです。関数は親コンポーネントから子コンポーネントにデータを渡すことですが、 #propsこれを使用するコンポーネントに対して読み取り専用です。一度割り当てられると変更できません。新しい props# は、サブコンポーネント # を再レンダリングするために、外部コンポーネントを通じてのみアクティブに渡すことができます。 State コンポーネントの表示形式は、データの状態と外部パラメータによって決定できます。外部パラメータは props であり、データの状態は state です。まず、コンポーネントを初期化するときに、this.state を使用して初期 # を設定します。コンポーネントの ##state#。##、このデータは、初めてレンダリングするときにコンポーネントをレンダリングするために使用されます。state# は # とは異なります##props ある時点で、state は this.setState() を通じて変更できます。 state ShouldComponentUpdate これを変更する方法do This react ライフサイクルフック関数は、この問題を解決するためのものです: データを更新するときは ## を使用します #setState データ全体を変更します。データが変更された後、すべてのコンテンツがトラバーサル中に再レンダリングされます。少量のデータは問題ありませんが、大量のデータは必要ありません。データ量がパフォーマンスに深刻な影響を与える解決策: 1. shouldcomponentupdate レンダリング前にコンポーネントが更新されるかどうかを確認するを更新し、更新後にレンダリングします。 2.purecomponent (Pure コンポーネント) により、仮想 dom## の生成と比較のプロセスが不要になります。 #クラスコンポーネント内 3.react.memo() で使用純粋なコンポーネントと同様ステートレスコンポーネントで使用されますreact diff 原則これは 3 つの戦略に基づいています。ツリー diff Web UI domクロスレベルのノードの移動はほとんどありません操作であり、無視できますコンポーネントの差分同じクラスを持つ 2 つのコンポーネントは同様のツリー構造を生成し、異なるクラスを持つ 2 つのコンポーネントは、異なるツリー構造を生成します要素の差分同じレベルの子ノードのグループの場合、一意の id識別制御コンポーネントとは Reactフォームのレンダリングを担当するコンポーネント。値は state によって制御されます。入力フォーム要素は制御コンポーネントと呼ばれます #コール super(props) 目的は何ですか Super() は親クラスのコンストラクターメソッドを super で呼び出します。コンポーネントにはグローバルな独自の this があります。コンポーネント内で super# を実行せずに constructor だけであれば、this を使用できます。 ## の場合、this はすべて間違っており、super は親コンポーネントの this を継承します。 #React でコンポーネントを構築する方法カスタムコンポーネント: 機能コンポーネントまたはステートレスコンポーネントコンポーネントの最初の文字は大文字です。クラスコンポーネント: クラスコンポーネントは、 #render メソッドを実装する必要があります。このメソッドは # を返す必要があります。 # #jsx要素、外部要素を使用してすべてのコンテンツをラップしますミニプログラム関連小規模プログラムの利点ダウンロードしてインストールする必要がなく、直接使用でき、すぐに実行でき、プロジェクトを迅速に構築でき、短く簡潔です app ソースコードは 2mbミニプログラムのページ構成 (4 ファイル) Index .jsindex.jsonindex.wxmlindex.wxss 小規模プログラムのライフサイクル Onload onready onshow onhide onunload Onpulldownrefresh onreachbottom onshareappmessage ミニプログラムがデータをリクエストする方法 Use request ミニプログラムの改善方法プログラムの最初の画面読み込み時間 ##事前リクエスト: 非同期データデータリクエストは、ページのレンダリングが完了するまで待つ必要はありませんキャッシュの利用: ストレージ API 非同期リクエストデータをキャッシュします。2 回目の起動では、まずキャッシュされたデータを使用してページをレンダリングします。 #白い画面を避けるには、まずページのスケルトンと基本的なコンテンツを表示します。タイムリーなフィードバック: タイムリーなフィードバックを提供します。ミニプログラムが応答していないとユーザーが考えることを避けるために、ユーザーに待機を要求する対話型操作 #パフォーマンスの最適化: setdata ## の不適切な使用を避ける# と onpagescroll 頻繁に使用する小さなファイルについて簡単に説明してくださいプログラムのコンポーネントアイコンのテキスト画像を表示スワイパーナビゲーターの入力ボタンマップ Wxss と css の違いを簡単に説明してください Wxss新しいサイズ単位を追加しました rpx グローバルスタイルとローカルスタイルを提供します Wxss一部のみをサポートします cssSelector id' クラス要素などミニプログラムで応答性を実装する方法 Rpx ミニプログラムを最適化する方法ページの読み込み速度を向上させるユーザー行動予測デフォルトデータのサイズを削減コンポーネント化されたソリューション独自のサーバーを独自に学習表示方法ミニプログラムのユーザーアバターユーザー名付き従来のインターフェイスwx.getuserinfo 現在利用可能であり、ユーザーの承認が必要です。使用時には公式のプロンプトが表示されますこの方法はアップグレードする必要があります最新の方法: open-data タグ、このタグを使用してアバターを直接取得し、ユーザー権限のないユーザー名、 #button## の属性として opendata を記述することができます#、クリックイベントを記述して直接取得します。ミニプログラムの双方向バインディングと vue の類似点と相違点について話してください。 ? Vue 双方向バインディングは、this.value を介したデータインターセプトとオブザーバーモードを介して行われます。値を取得するには、アプレットはフォーム要素のバインドをトリガーします。メソッドでは、this.setData({key:value}#) を使用します。 ##) 値を取得するにはアプレットにパラメータを渡す方法と vue 類推による紹介WeChat ミニプログラムの適応問題について話しましょう WeChat ミニプログラム間でデータを転送する方法は何ですか?ミニプログラムページ?方法? WeChat アプレットのデータ要求をどのようにカプセル化しますか WeChat アプレットの適応問題について教えてくださいミニプログラムからページにジャンプする方法 WeChat ミニプログラムから別のミニプログラムにジャンプする方法ミニプログラムの読み込みが遅い問題の解決策その他 Typescript とは何ですか? 簡単に説明してください。 Typescript と JavaScript の利点は何ですか? Webpack と gulp の違い Gulp は、フロントエンド開発プロセスを最適化できるツールです。 webpack はモジュール型ソリューションです（grunt）簡単に説明してくださいwebpack のローダーとプラグインの違い loaders、loaders とはファイルローダーは、リソースファイルをロードし、コンパイル、圧縮などのこれらのファイルを処理し、最終的に指定されたファイルにパッケージ化できます。 plugin とは何ですか。webpack## のライフサイクルには多くのイベントが発生します。 # 、プラグインこれらのイベントを監視できます違い: ローダーはファイルをロードするために使用されます。webpack 自体は jsfiles のみをロードできます。 (組み込みbabel-loader)、他のファイルをロードするには、他のloader#をインストールする必要があります。 ## 、例: css-loader file-loader Plugin は webpack## の拡張機能です。 # 関数はい、プラグインを通じて、webpack は loader が実行する複雑な関数を実現できます。を完了できませんページのパフォーマンスを向上させるにはどうすればよいですか?パフォーマンスの最適化とは何ですか? ノードの用途サーバー側で実行可能 JavaScript # #Webpack : 入口、出口、ローダー、プラグイン webpack のパッケージ化原則について話しましょう Webpack はプロジェクトを全体として扱います。メインファイルを指定すると、webpack が次から見つかります。このメインファイル。プロジェクト内のすべての依存ファイルは loaders クラスを使用して処理され、最終的に 1 つ以上のブラウザ認識可能な js# にパッケージ化されます。 ## ファイル Commonjs ES6 モジュールの違い? common モジュールはコピーです。値は変更できます。es6モジュールは参照であり、読み取り専用ステータスです。値は変更できません #commonjs モジュールは実行時にロードされます es6モジュールはコンパイル時の出力インターフェイスですGit の使用方法/一般的な手順についてバックエンドで使用しているテクノロジーは何ですか? あなたは、比較的小規模なプロジェクトにまだ Vue Family Bucket を使用しているのはなぜですか? プロジェクトで使用している UI フレームワークについて簡単に説明してくださいフロントエンドのパフォーマンスを最適化する方法が多ければ多いほど、より良い corsとは websocked についての理解を話してください。 Websocked は双方向通信プロトコルであり、接続を確立した後、サーバーとブラウザーが websocked websockedrequired tcp と同様に、クライアントとサーバーはハンドシェイクを通じて接続されます。接続が成功した後にのみ、相互に通信できます。バックグラウンドで渡されるデータは次のとおりです両者の違いについて話してください。 Ajax 、 fetch、axios プロジェクトプロセス企業 1.WEB フロントエンドプロジェクト開発プロセスプロジェクト要件分析このリンクはプロジェクトマネージャーが完成させるプロジェクトマネージャーは、まず顧客とコミュニケーションをとり、顧客のニーズを把握し、プロジェクトの実現可能性を分析し、プロジェクトが実現可能であれば、プロジェクトの要件を文書化して文書として引き渡すその後の開発を完了するために設計者に送信します。ページデザイン/ プロジェクトの選択このリンクには主に UI デザイナーが参加し、UI デザイナーは製品要件に基づいてドキュメントを分析し、製品全体のアートスタイル、インタラクションデザイン、インターフェイス構造、操作プロセスなどを設計します。プロジェクト内のさまざまなインタラクティブインターフェイス、アイコン、ロゴ、ボタン、その他の関連要素のデザインと制作を担当します。そして、テクノロジーを必ず使用してくださいコーディングこの部分はプログラマーによって実装されます。（プログラマーはWEBフロントエンド開発エンジニアとバックエンド開発エンジニアに分かれます。フロントエンド開発者は主にWebページ上で見えるページを担当し、バックエンド開発者は私たちが見ることのできない管理システムや機能実装などを担当します）プログラマは、設計に従って UI を操作します。デザイナーの設計は、コーディングを使用して、プロジェクト全体のさまざまな機能を完成させます。テストこの部分はプログラムテスターによって完了されます。プログラムテスターは主に、プログラムをテストして、プログラムにまだ存在するバグを発見します。一般的に、コーディングしたばかりのプログラムには問題があります。テスターはテストを繰り返し、問題のあるテスト結果をコーダーに渡してバグを修正する必要があります。ほぼすべてのバグ修正が完了すると、プロジェクトはほぼオンラインになる準備が整います。メンテナンスプログラムのメンテナンスはプロジェクト全体の最終段階ですが、最も時間とコストがかかります。プログラムのメンテナンスには、プログラムの起動後のバグ修正やプログラムバージョンの更新が含まれます。 2. インターフェイスドメイン名の変更開発中に呼び出されるバックグラウンドインターフェイスは、バックグラウンドテスト用のインターフェイスです。プロジェクトがオンラインになった後、要求されたインターフェイスはオンラインドメイン名に置き換える必要があります 3. よく使用されるツールコード管理プラットフォーム: github コードクラウド要件リリースプラットフォーム: DingTalk タスク、ZenTao Ui インタラクションプラットフォーム: Blue Lake 製品プロトタイプツール: axure 企業電子メール: Alibaba Tencent 企業電子メールバックエンド言語: java php python (西安にはあまりありません) 4 . 大企業と中小企業社内開発の違い大規模なアウトソーシング会社は、プロセス重視で人員が多く、コミュニケーションが少なく、納品後のプロジェクトを自社でメンテナンスする必要がなく、ウォーターフォール開発を採用しています。モデル (ドキュメントに基づく) 小規模企業: 人員が少なく、変更が頻繁で、コミュニケーションが便利で、アジャイル開発 (v1 バージョンをすぐに起動して反復) 5. テスト方法フロントエンドとバックエンドの分離? 奇妙な質問バックエンド開発には何を使用していますか? モバイルでページを更新するにはどうすればよいですか? プロジェクトの初期化と構築プロセスプロジェクトで誇りに思うことは何ですか? 自分の欠点について話すホットデプロイメントとは何ですか? ユーザーの数インターフェイスの呼び出し方法 (バックエンドとの通信方法) セルテストの方法開発中に開発環境、テスト環境、オンライン環境の環境変数をどのように処理しますか?** プログラミング関連の知識について詳しくは、こちらをご覧ください。アクセス: プログラミングビデオ ! ！