この記事では、Web フロントエンドの面接で収集する価値のある厳選された質問をいくつかまとめています (回答付き)。一定の参考値があるので、困っている友達が参考になれば幸いです。 HTML、CSS 関連 1. インターネット上で最も一般的に使用されている画像形式は何ですか JPEG、GIF、PNG、最も人気のあるのは jpeg 形式で、ファイルを最小限に圧縮できます jpeg 形式で保存する場合、##11 圧縮レベル#を提供します 2. CSS ボックス モデルについて簡単に説明してください ##a cssボックスは 4 つの部分に分けることができます外側から内側へ: margin (マージン)、border (境界線)、padding (パディング)、content (コンテンツ)。デフォルトでは、ボックスの width プロパティと height プロパティは単に content# に設定されます。 ##(コンテンツ) の幅と高さ、ボックスの実際の幅は次のようになります: コンテンツの幅 左右のパディング 左右のマージン 左右の境界線ボックスの実際の高さは次のようになります。 : コンテンツの高さ 上下のパディング 上下のマージン 上下border##3. ビデオ / オーディオ タグの使用Video: Video タグ属性: src 再生する必要があるビデオのアドレス 幅/高さ 再生するビデオの幅と高さを設定します。これは、img# の幅と高さの属性と同じです。 ## タグ #autoplay 自動再生するかどうかコントロール 再生するかどうかコントロールバーを表示しますポスター 以前に表示されていたブースの画像は再生されませんループ ループ再生 perload ビデオ (キャッシュ) のプリロードと autoplay が競合するかどうか。 ##autoplay 属性が設定されている場合、perload 属性は無効になります。 ミュート サイレント モード Audio: オーディオ属性はビデオ属性と似ていますが、幅、高さ、および poster 属性が異なります。使用できません 4.HTML5 の新しい内容 新しいセマンティック タグ 新しいフォーム タイプ フォーム要素 フォーム属性 フォーム イベント マルチメディア タグ 5.HTML5 の新しいセマンティック タグ セマンティック タグの利点は何ですか: 1.アクセシビリティの向上 2.seo 3. 明確な構造、保守が簡単 ヘッダーページヘッダー mainページのメインコンテンツ フッターページの下部 ナビゲーションナビゲーション バー サイドサイドバー 記事 #ページに独立したコンテンツをロードする ##セクション は p と同等ですFigure独立したコンテンツ (上の図の下の単語) をロードします figcaption Figure のタイトル Hgroup タイトル組み合わせタグ マークハイライト ダイアログ ロード ダイアログ ラベル (open と一致する必要があります) 属性) Embedプラグインのタグを読み込みます videoビデオを読み込みます audioオーディオの読み込み (サポートされている形式 ogg、mp3、 wav) 6. Css3 Border の新機能: #border -radios 丸い境界線を追加する border-shadow: 影を追加するボックスへ (水平方向の変位、垂直方向の変位、ぼかし半径、影のサイズ、影の色、insetr(inner/ outershadow))border-image:境界線の画像を設定しますborder-image -source 境界線画像のパスborder-image-slice 画像境界線は内側にオフセットされます border-image-width 画像境界線の幅 border-image-outset 境界を越える境界画像領域の量 border-image-repeat 画像の境界線がタイル状に表示されるかどうか (repeattiledラウンドカバー付き ストレッチ ストレッチ) 背景: #Background-size Background image size ##Background-origin規定background-positionプロパティは、どの位置を基準にして配置されます Background-clip 背景の描画領域を指定します(padding-box, border-box, content-ボックス) #グラデーション: 線形グラデーション ()線形グラデーション放射状グラデーション ()放射状グラデーション ##テキスト効果: #単語区切り: 改行方法を定義 Word-wrap: 長いコンテンツを自動的に折り返せるようにします ##Text-overflow: テキストがそれを含む要素からはみ出した場合の処理を指定します。 Text-shadow: テキストのシャドウ (水平)変位、垂直変位、ぼかし半径、影の色) Transform: Transform 2D3D 変換に適用すると、要素を回転、拡大縮小、移動、傾斜させることができます ##Transform-origin 要素の変換の位置を変更できます (xyz 軸を変更します) ##Transform スタイル ネストされた要素が 3 次元空間でどのようにレンダリングされるかを指定します 2D変換方法: rotaterotatetranslate ( x , y) は、2 次元空間での要素の変位を指定します スケール(#) ##n ) スケーリング変換の定義 ##3D変換方法: 視点 #(n) から 3D翻訳 変換回転スケール Transition:Transition-property 遷移プロパティ名 Transition-duration トランジション効果が完了するまでにかかる時間 Transition-タイミング関数 エフェクトの切り替え速度を指定します Transition-lay エフェクトの切り替えを開始するタイミングを指定します アニメーション: animation ##アニメーション名 は @keyframesアニメーション名 animation-duration アニメーションの時間です。アニメーションの所要時間 #animation-timing-function アニメーションがサイクルを完了する方法 アニメーション遅延 アニメーション開始までの遅延間隔 animation-iteration-count アニメーションの数再生数 animation-direction アニメーションを順番に逆再生するかどうか #7.フロートをクリアする方法は何ですか? 高さの折りたたみ: すべての子要素がフロート状態で、親要素が高さを設定していない場合、親要素が表示されます。高い崩壊。 #クリアフローティングメソッド1: 親要素の高さを個別に定義します 利点: 高速かつシンプル、コードが少ない 欠点: レスポンシブ レイアウトを実行できない クリアフローティングメソッド 2: 親定義オーバーフロー:hidden ;zoom:1(ie6 と互換性があります) 利点: シンプルで高速、少ないコード、高い互換性 欠点: 余分な部分が隠される、レイアウトするときに注意してください フローティング メソッドをクリアします 3: フローティング要素の後に空のラベルを追加します。 クリア:両方;高さ:0;オーバーフロー:hidden利点: シンプルで速い、コード 少ない、高い互換性 欠点: 空のタグの追加はページの最適化に役立ちません フローティングメソッドのクリア##4#: 親定義##オーバーフロー##:#auto#利点: シンプル、コードが少なく、互換性が良い欠点: 内部の幅と高さが親を超えます p、スクロールバーが表示されます クリアフローティングメソッド5: ユニバーサルクリアメソッド: 折りたたまれた要素に擬似オブジェクトを追加 ##.father:after{ Content:“随便写”; Clear:both; display:block; Height:0; Overflow:hidden; Visibility:hidden } 利点: 書き込み方法が修正されました。高い互換性 欠点: 多くのコード 8. 配置された属性値違いは何ですか? Position には 4 つの属性値があります: relativeAbsolutefixedstatic ##相対相対配置 ドキュメント フローから逸脱せず、それ自体を基準にして配置します 絶対 ドキュメント フロー外の絶対配置 親配置を基準とした ##固定 固定位置、ドキュメント フロー外 ドキュメント フロー、ブラウザ ウィンドウを基準に位置 静的 デフォルト値、要素通常のフローに表示されます 9. 子要素を親要素の中央に配置する方法水平方向の中央揃え: #1 . 子要素と親要素の幅は固定されており、子要素は margin## に設定されます#:auto であり、子要素を float に設定することはできません。そうしないと、中央揃えが失敗します。2.子要素と親要素の幅は固定されており、親要素は settext-align:center、子要素は display: inline-block を設定し、子要素はフローティングを設定できません。そうしないと、センタリングが失敗します 水平方向と垂直方向のセンタリング: 子要素は親要素に対して絶対的に配置され、子要素は親要素に対して絶対的に相対的に配置されます。親要素。要素 top、left set 50%、子要素margin-top と margin-left からそれぞれの幅と高さの半分を引いた値 子要素は親要素を基準として絶対的に配置されます。子要素の上下左右はすべて 0 として設定されます。子要素 ##margin:auto親要素の設定 display:table-cellvertical-align:middle、子要素の設定margin:auto子要素は相対的に配置され、子要素は top、left 値は 50%、transform です。 : 翻訳(-50%,-50%) #子要素は、親要素、子要素 top、left## を基準にして絶対的に配置されます。 # 値 50% の場合、transform:translate( -50%、-50%) 親要素は、フレキシブル ボックスを設定します。 display:flex; justfy-content:center ;align-item:center ; justfy-content:center##10.border-box と border-box の違いcontent-box コンテンツ ボックス 標準ボックス モデル 幅 #パディングを除く と borderボーダーボックス 奇妙なボックス モデル widthincludes paddingandborder11.要素を垂直方向に中央揃え 1.子要素の行の高さを親要素と同じに設定します #2.子要素をインラインブロックを追加し、vertical-align :middle##3. 既知の親要素の高さを追加します。 transform :translateY(-50%## による)子要素の相対的な配置#)4.親要素の高さがわかりません。子には親要素がなく、子要素 トップ:50%,transform:translateY (-50%)5.隠しノードを作成して、 height は残りの高さの半分です6.親要素 display : table、子要素 display:table-cell, vertical-align:middle##7.親要素に疑似要素を追加します 8.フレックス ボックス、親要素display:flex、子要素align-self:center 12. Chrome ブラウザの表示テキストを 12px より小さくする方法 最初に追加された Google プライベート属性 # -webkit-text-size-adjust:none、現在は-webkit-transform:scale() 13. Css とはセレクター?、どの属性を継承できるか、優先度はどのように計算するか? Css3 Css2 セレクター: 要素セレクター、idセレクター、グループ セレクター、クラス セレクター、*ワイルドカード セレクター、子孫セレクター Css2 疑似クラス セレクター: a:link/visited/hover/active Css3選択セレクター: ##Space > 隣接する兄弟セレクター ~ユニバーサル セレクター (以下をすべて検索) 構造擬似クラス セレクター: どの番号を見つけるか #nth-child(n)#同じタイプの番号を検索 nth-of-type一意の検索type タイプのみ #属性セレクター: タグ属性に基づいて検索 [attr=value]: ルート ルート要素の検索htmlタグ: 空の Zhao の空のタグを確認してくださいターゲット疑似クラス セレクター: (フォーム) ##: 有効化使用できるタグを探す:無効化 禁止されているタグを探す :チェック済み 選択したタグを検索疑似要素セレクター :: selection選択したテキスト コンテンツのハイライトを設定します (背景色とテキストの色にのみ使用できます)否定擬似クラス セレクター not ()言語擬似クラス セレクター lang (値)##優先度 (重み): #要素セレクター 1 #疑似要素セレクター1 ##クラスセレクター 10 疑似クラスセレクター10 属性セレクター10 Idセレクター100インライン スタイルの重み 1000含まれるセレクターの重みは重みの合計です #継承されたスタイルの重みは 0これらのプロパティは継承できます: Css 継承されたプロパティは主にテキストの側面ですすべての要素は次のものを継承します: visibility および cursor ブロック Level 要素は次のものを継承できます。 text-indent および text-align リスト要素 継承可能: リストスタイル, リストスタイルタイプ, リストスタイル位置, list-style-image#インライン要素は継承可能です: letter-spacing,単語間隔##,#行の高さ##,色 #, #font、font-family、font-size Font-style,font-variant,font-weight ,テキスト装飾,テキスト変換#,方向 #文字間隔 段落間隔 行高さ フォント色 フォントタイプ フォントサイズ フォントスタイル フォントの太さ 小文字テキスト テキストの変更 別の要素のテキストを変換 テキストの方向14. Web ページには読み込みが非常に遅い画像が多数あります。どうすれば最適化できますか? 1.画像は遅延してロードされ、スクロール バー イベントが画像の非表示領域に追加され、画像の位置間の距離が決定されます。前者の Xiaoyu が最初に読み込まれ、後者が最初に読み込まれる場合は、 2.画像プリロード技術を使用して、前と次をダウンロードします。現在の表示の写真を最初に表示します 3.csssprite または svgsprite## を使用してください# 15. インライン要素/ブロックレベル要素とは何ですか? インライン要素: 隣接するインライン要素は同じ行に配置され、排他的な行を占有しません 幅と高さの設定は無効ですスパン ブロックレベルの要素: 1行を占めます 幅や高さなどの属性を設定できますp 可変要素:コンテキスト警告に基づいて要素がブロック要素であるかインライン要素であるかを判断します ブロックレベルの要素:p h1 -h6 hr p ul ol table address blockquote dir from menu #インライン要素: a br I em img input select scan sub sup u textarea 可変要素: button del iframe ins 16. ブラウザの標準モードと奇妙なモードの違いは何ですか? 標準モード: ブラウザは W3C 標準に従ってコードを解析して実行します 奇妙なモード: ブラウザーは独自の方法でコードを解析して実行します。ブラウザーが異なると、コードの解析と実行方法が異なるため、奇妙なモードと呼ばれます 相違点: ストレンジ モードでは、ボックス モデルはストレンジ ボックス モデルです。 、標準モードでは、標準ボックス モデルです。 画像要素の垂直方向の配置 インライン要素および table-cell 要素の場合、標準モードvertical - align プロパティのデフォルト値は baseline で、奇妙なモードでは table##セル内の画像の #vertical-alignプロパティのデフォルト値は bottom であるため、画像の下部にある数ピクセルのスペース 要素内のフォント css中font の属性はすべて継承可能です。奇妙なモードでは、table 要素について、いくつかのフォントの要素は、他のカプセル化された要素、特に font-sizeAttribute のサイズから継承することはできません。インライン要素標準モードでは、非置換インライン要素は大文字にすることはできません。奇妙なモードでは、幅と高さを定義します。要素は要素のサイズに影響します 要素の高さのパーセント要素が高さのパーセントを使用する場合、標準モードでは内容に応じて高さが変わりますが、Weird Lostではパーセンテージが正確に表示されます。 ##標準モードでは、オーバーフロー 値のデフォルト値は visible です。奇妙なモードでは、このオーバーフローは要素の拡張子 box として扱われます。サイズはコンテンツによって決まります。オーバーフローは切り取られません。要素フレームは、オーバーフロー コンテンツを含むように自動的に調整されます。 17. マージンとパディングはいつ使用されますか?マージン外側マージン ある境界線と別の境界線の間の距離 Padding Padding 独自のマージンと独自のコンテンツ間の距離 border の外側にスペースを追加する必要がある場合、## の外側にスペースを追加する必要がある場合は、margin を使用します。 # 境界線の内側にスペースを追加する場合は、、padding 18 を使用します。フレキシブル ボックスのレイアウト属性は何ですか? 簡単に説明してください。 Flex 方向 #:フレキシブル コンテナ内のサブ要素の配置 (主軸の配置) Flex-wrap:フレックス ボックスの子要素が親コンテナを超えたときにラップするかどうかを設定します Flex-flow : はいflex-direction および flex-wrap の省略形 Align-item: 交差軸の配置でフレックス ボックス要素を設定します。 Align-content: 行の配置を設定します Justify-content: 主軸上のフレキシブル ボックス要素の配置を設定します 19. ラベルを無効にする方法#追加disabled属性20.フレックス レイアウトの原則 は、親ボックスの flex 属性に を追加して、サブボックスの位置と配置を制御します21 Px、rem、emPx、絶対長単位、ピクセル px の差は、相対的なものです。モニター画面の解像度em 現在のオブジェクト内のテキストのフォント サイズに対する相対的な長さの単位 em の値は固定されていません em は親要素のフォント サイズを継承します (参照は です)親要素の font-size) em 内のすべてのフォントは、親要素のサイズに相対して決定されます #rem #htmlルート要素のフォント サイズ # に相対##1em=1rem=16px at font-size を body に追加します: 62.5% これは元の px 値を 10 で割って、 add em to get22. Web ページの 3 層構造は何ですか? 構造 (html または xhtmマークアップ言語) パフォーマンス (cssスタイルシート) 動作 (js)23. メディアからの問い合わせについて簡単に説明してください メディア クエリは、media 属性 を拡張します。 は、さまざまなメディア タイプに応じて異なる # を設定します。 ##css 適応的な目的を達成するためのスタイル。 24. Rem の欠点 例: 新しい Web サイトでは、モバイル デバイスの画面が小さいほど、テキストも小さくなります。 rem を使用した場合は次のようになります。記事を読むのが非常に困難になります。 25.最初の段階でいくつかの一般的な互換性に関する内容を覚えておいてください 26. 垂直方向と水平方向に中央揃えの方法 #27. 両側に固定中央アダプティブを備えた 3 列のレイアウト方法 #1. margin負の値の方法: 左と右の列は両方とも左にフロートされ、左と右の列は負の margin 値を採用します。中央の列は、幅 100% 2 の浮動要素で囲まれています。方法: 左列を左にフロート、右列をフロート、中央の列を最後に配置 3. 絶対配置方法: 左列と右列は絶対配置を採用しており、はページの左側と右側にそれぞれ固定されており、側面では、左側と右側の margin の値を使用して、中央の本文列間の距離を広げます。 。 4.flex 左右の幅を固定 Middleflex: 15. グリッド レイアウト6. テーブル Layout28.Doctype function ドキュメントタイプの宣言 Javascript関連 1.Js の基本的なデータ型とは何ですか ##StringString ValueNumber Booleanブール値 null 未定義 Object Array2. Ajax の使用方法 ##完全な AJAX リクエストには 5 つのステップが含まれます: ##作成#XMLHTTPRequest オブジェクト使用 open#http リクエストを作成し、リクエストアドレスを設定するメソッド xhr.open (get/post, url,async 、true (非同期)、false (同期)) は、最初の 3 つのパラメーター をよく使用します。 送信するデータを設定し、send を使用してリクエストを送信します イベントを登録する (ajaxイベントを設定する) 応答を取得してページを更新する 3. データが NaN かどうかを判断する方法 NaN 数値ではありません ただし、typeof を使用すると、検出は number になりますType NaN#の定義を使用します#を使用します#typeof それが number 型であるかどうか、およびそれが isnan を満たすかどうかを判断します。 ##Utilization NaN は、独自の n! のいずれとも等しくない唯一の機能です。 #==n#ES6# で提供される を活用してください。 ## Object.is()メソッド (2つの値が等しいかどうかを判定) n==nan ##4. Js における null と unknown の違いは同じで、 if を使用して判定する場合は両方とも変換されます。から false違い: number変換された値が異なります 数値 (null) は 0 数値 (未定義) ) は NaNNull値が定義されているが、この値が null 値であることを示します 未定義 変数は宣言されていますが、割り当てられていません 5. クロージャとは何ですか?特徴は何ですか?ページにどのような影響がありますか? クロージャは、関数内で定義された関数として単純に理解できます。クロージャは、内部関数の 1 つが、それを含む外部関数の外側で呼び出されるときに形成されます。 機能: 関数の入れ子関数。 # 外部パラメータと変数は関数内で参照できます。 #パラメータと変数はガベージ コレクション メカニズムによってリサイクルされません。 #使用: #関数内の変数を読み取ります; これらの変数の値は常にメモリ内に保持され、外部関数が呼び出された後に自動的にクリアされることはありません。 #利点: ##変数はメモリ内に長期間存在します; グローバル変数の汚染を避ける; プライベート メンバーの存在 ; 欠点: メモリ リークが発生します #6. Js でよくあるメモリ リーク:##予期しないグローバル変数 タイマーまたはコールバック関数を忘れました DOM からの参照 7. イベント委任とは何ですか?イベント ソースを決定する方法 (Event.target 呼び出す人がイベント ソースになります) JS大まかに言うと、イベントの委任はイベント バブリングとイベント ソースを使用します。時間のみを設定する ハンドラーは、特定の種類のすべてのイベントを管理できます。 イベント プロキシと呼ばれるイベント委任は、js でイベントをバインドするための非常に一般的な手法です。イベント委任は、元々は子要素に設定された応答イベントは親要素に委任され、親要素がイベントをリッスンする役割を担うことができます。イベント委任の原則は ##DOM# です##要素のイベントバブリング 8. イベントバブリングとは何ですか? イベントがトリガーされると、子要素と親要素の間で伝播されます。この伝播は 3 つの段階に分かれています。Capture Stage (window オブジェクトからターゲット ノード (外側から内側) に送信されます。このステージはイベントに応答しません)、ターゲット ステージ、(ターゲット上でトリガーされます)ノード)、バブリング ステージ (ターゲット ノードから window オブジェクトへ (内部から外部へ) 戻される)、イベント委任 / イベント プロキシはイベント リスクを使用します。 バブル メカニズムは、内側の層が応答する必要があるイベントを外側の層にバインドします。9. ローカル ストレージと Cookie の違いCookie は Cookie を意味します。名前が示すように、cookie は実際には非常に小さく、そのサイズは約 4KB に制限されています。その主な目的は、ログイン情報を保存することです。たとえば、特定の Web サイト マーケットにログインすると、"パスワードを忘れないでください" と表示されます。 、これは通常、ユーザーの身元を識別するデータを Cookie に保存することによって実現されます。 localStoragelocalStorage は HTML5 規格に新たに追加された技術は、画期的な新しいものではありません。 IE 6 の時代には、ローカル ストレージに使用される userData と呼ばれるものがあり、当時はブラウザの互換性が考慮されていました。 、より一般的な解決策は、 Flash を使用することです。現在、localStorage はほとんどのブラウザでサポートされています。Web サイトで IE6 をサポートする必要がある場合は、 userData は、ソリューションとして適切な選択です。 sessionStoragesessionStorage および localStorage インターフェースは似ていますが、データ保存のライフサイクルは localStorage とは異なります。バックエンド開発を行った学生は、 セッション という言葉の意味を知っているはずです。直訳すると、 " セッション" になります。 " 。 sessionStorage はフロントエンドの概念であり、現在のセッションのデータの一部のみを保存でき、ページが更新されたときにデータはまだ存在します。ただし、ページを閉じると、sessionStorage のデータはクリアされます。 3 つの類似点と相違点 # #特徴 ##Cookie ローカルストレージ ##セッションストレージ データの存続期間 一般にサーバーによって生成されるため、有効期限を設定できます。 Cookie がブラウザ側で生成された場合、ブラウザを閉じた後はデフォルトで無効になります。永久に保存されました ## は現在のセッションでのみ有効であり、ページまたはブラウザを閉じるとクリアされます #ストレージデータサイズ ##4K左右 #通常 5MB ##サーバーと通信 は、毎回 HTTP ヘッダーに含まれます。 ## 保存しすぎるとパフォーマンスの問題が発生します。##データはクライアント (ブラウザなど) にのみ保存され、データには関与しません。サーバーとの通信使いやすさ ##プログラマー自身がオリジナルのインターフェイスをカプセル化する必要がありますCookie インターフェイスはフレンドリーではありません#オリジナルのインターフェイスは許容されます。また、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. promise3 つの状態があります : 保留中の初期状態は、待機状態、満たされた成功状態、拒否された失敗状態とも呼ばれます。状態が変わると、 はもう変わりません。 promise インスタンスを作成すると、すぐに実行されます。 #3. Promise の 2 つの特徴1. Promiseオブジェクトの状態は外界の影響を受けません 2. Promise の状態が一度変化すると、再び変化することはありません。この結果はいつでも取得できます。状態を元に戻すことはできません、4. Promise の 3 つのデメリット1)キャンセルできないPromise は作成後すぐに実行され、途中でキャンセルすることはできません2 )コールバック関数が設定されていない場合、お約束内部でスローされたエラーは外部には反映されません 3)pending(待機中) 状態では、現在の進行状況がどの段階にあるのか、始まったばかりなのか、これから始まろうとしているのかを知ることはできません。 completedpromise は 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 スクリプトを呼び出すために タグを動的に追加することです。 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 メモリ リークとは何ですか? #メモリ リークとは、ブラウザのプロセスが終了するまで使用またはリサイクルできない、割り当てられたメモリの一部を指しますメモリを解放する方法: 割り当て値を nullWeb サイトのファイルとリソースをどのように最適化しますか? 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") クラス test3、要素セレクター 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]") は、text3、[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 出力をレンダリングできますhtmlv-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 elementinnerhtmlv-text Update element textcontentv-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> カレンダー 進行状況バー SwitchReact 関連 fetch VS ajax VS axios Traditional Ajax は XMLHttpRequest(XHR ) を指します、 バックエンド リクエストを送信するための最も初期のテクノロジー。元の js に属し、コアは XMLHttpRequest## を使用します。 # オブジェクト、複数のリクエスト間に順序関係があるとコールバック地獄が発生します。 JQuery ajax は、ネイティブ XHR axios # のカプセル化です。 # # は、Promise に基づいており、## である点を除いて、本質的にはネイティブ XHR のカプセル化です。 #Promise の実装バージョンは、最新の ES 仕様、fetch に準拠しています。 ajax のさらなるカプセル化ではなく、 #XMLHttpRequest## を使用しないネイティブ #js です。 # 物体。 #React イベント処理---method1# を指すようにこれを変更します。 ##: bind メソッドを使用して所定の場所にバインドして、this# を変更します。 ##方法を指す2#: arrow functionWay3: 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 hasredux、vue には vuex があり、すべて ネイティブをサポートするソリューションがあります' 反応有反応ネイティブ vue有weex 違い: ##react厳密に のみmvcview レイヤー、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を呼び出した後? Reactsetstate を呼び出した後、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() を通じて変更できます。 stateShouldComponentUpdate これを変更する方法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. テスト方法フロントエンドとバックエンドの分離? 奇妙な質問 バックエンド開発には何を使用していますか? モバイルでページを更新するにはどうすればよいですか? プロジェクトの初期化と構築プロセス プロジェクトで誇りに思うことは何ですか? 自分の欠点について話す ホット デプロイメントとは何ですか? ユーザーの数 インターフェイスの呼び出し方法 (バックエンドとの通信方法) セル テストの方法 開発中に開発環境、テスト環境、オンライン環境の環境変数をどのように処理しますか? プログラミング関連の知識について詳しくは、こちらをご覧ください。アクセス: プログラミング ビデオ ! !