Web フロントエンドの面接での 50 の質問

(1) ネットワーク時間の短縮

① DNS キャッシュ技術を使用する ② 転送が必要なファイルのサイズを削減する ③ ファイル転送を高速化する

(2) 送信するリクエストの数を減らす

①ブラウザのキャッシュを利用する ②結合した画像ファイルを利用する

(3) ブラウザダウンロードの同時実行性の向上

①JSファイルをHTML文書の最後に配置する ②複数のドメイン名を使用する

(4) できるだけ早くページの表示を開始します。

① スタイルシートへの参照をHTML文書の先頭に配置し、JSへの参照をHTML文書の末尾に配置します。これは、JSファイルのダウンロードと実行によって、その後の他のページ要素の表示が妨げられないようにするためです。すべてのページがダウンロードされます。ユーザーの観点から見ると、JS ファイルのダウンロードと実行時間はまったく感じられません。

2. Cookie sessionStorage と localStorage の違い

違い：

Cookie データは常に同じオリジンの http リクエストで (必要でない場合でも) 送信されます。つまり、Cookie はブラウザとサーバーの間でやり取りされますが、sessionStorage と localStorage はデータを自動的にサーバーに送信しません。サーバーに保存され、ローカルにのみ保存されます。Cookie データにはパスの概念もあり、Cookie が特定のパスにのみ属するように制限できます。

ストレージサイズの制限も異なります。Cookie データは 4K を超えることはできません。同時に、各 http リクエストには Cookie が含まれるため、Cookie はセッション ID などの非常に小さなデータの保存にのみ適しています。sessionStorage と localStorage にもストレージサイズ制限がありますが、Cookie よりもはるかに大きく、5M 以上に達する可能性があります。

データの有効期限が異なります sessionStorage: 現在のブラウザウィンドウを閉じるまでのみ有効; localStorage: 常に有効でウィンドウやブラウザを閉じても保存されるため永続データとして使用されます; cookie: のみ有効ウィンドウを閉じたりブラウザを閉じたりした場合でも、設定された Cookie の有効期限が切れる前に

スコープが異なると、sessionStorage は、同じページであっても、異なるブラウザウィンドウで共有されません。localstorage は、同じオリジンのすべてのウィンドウで共有されます。Cookie も、すべての同じオリジンのウィンドウで共有されます。

3. Canvas と SvG の違いは何ですか?

両者の違いは次のとおりです。

Canvas が描画されると、ピクセルにアクセスしたり操作したりすることはできません。SVG を使用して描画された形状はすべて記憶して操作でき、ブラウザーで再度表示できます。

Canvas はアニメーションやゲームの描画に非常に役立ち、SVG はグラフィックス (CAD など) の作成に非常に役立ちます。

Canvas は将来のことを覚えておく必要がないため、実行が速くなりますが、SVG は後続の操作のために座標を記録する必要があるため、実行が遅くなります。

Canvas では、関連イベントを描画オブジェクトにバインドできませんが、SVG では、関連イベントを描画オブジェクトにバインドできます。

Canvas はビットマップを描画するため、解像度に関係しますが、SvG はベクター画像を描画するため、解像度とは関係ありません。

4. 浮きの解消方法

フローティング要素をクリアする最初の方法は、フローティング要素の同じレベルの最後に空の div を追加し、style clear 属性を追加することです。

2 番目の方法は、子要素がフローティングのときに overflow 属性を使用する方法です。これにより、フローティングコンテンツが強制的にラップされ、フローティングコンテンツをクリアする効果が得られます。

3 番目の方法: 疑似クラスを使用して浮動小数点をクリアします。後の疑似クラスは、2 番目のメソッドを使用して浮動小数点数をクリアできます。

5. 静的レイアウト、アダプティブレイアウト、レスポンシブレイアウト、フレキシブルレイアウトについての理解について話してください。

静的レイアウト

説明: 長さと幅を設定するだけで、サイズは変わりません、画面がどんなに大きくても同じサイズになります、解像度も変わりません。

アダプティブレイアウト

説明: 異なる画面解像度でも元の表示方法を維持します。要素のサイズは変更できますが、プレゼンテーションは変更できません。

レスポンシブレイアウト

説明: 画面解像度が異なると表示方法が異なります

フレキシブルレイアウト（フレックスレイアウト）

説明: 現在人気のレイアウトです。従来のレイアウトでは実装が難しい複雑なレイアウトもありますが、フレックスレイアウトを使用すると非常に簡単に実装できます。

6. データ型を決定する JS メソッド

1、種類

2、インスタンス

3、コンストラクター

4、文字列へ

5. is Array は配列であるかどうかを決定します

7. 配列メソッド

Push()は最後に追加、join()は配列を文字列に変換、pop()は最後に削除、unshift()は最初に追加、shift()は最初に削除、sort()は並べ替え、concat()は配列をマージ、slice() intercepts 、 splice() 配列の更新、最初から最後までの IndexOf() クエリ、最後から最後までの lastIndexOf() クエリ、 reverse() 配列の逆順

map() メソッドは、配列の各要素に対して特別な処理を実行し、新しい配列を返します。

filter() メソッドは、配列内の要件を満たす要素をフィルターし、新しい配列を返します。

配列の判定にはsome()メソッドを使用し、いずれかの配列が条件を満たした場合にtrueを返します。

forEach このメソッドは、配列を走査するために for ループの代わりに使用されます。

Every の戻り値はブール値で、配列内のすべての値が条件を満たしているかどうかを判断し、条件を満たしている場合は true を返し、条件を満たさないものが 1 つある場合は false を返します。

find と findLast の戻り値は、条件を満たす対応する値であり、後者は後ろから前にトラバースします。

include メソッドは、配列に指定された値が含まれているかどうかを判断するために使用され、含まれている場合は true を返し、そうでない場合は false を返します。

8. 文字列メソッド

charAt() 指定された位置の文字を返します concat() 文字列を接続します replace() 置換します split() を分割しますindexOf() 前から後ろへの最初の出現 lastindexOf() 後ろから前への最初の出現 toLowerCase() 小文字に変換しますtoUpperCase( ) 大文字に変換 clice() 文字列インターセプト subString() 文字列インターセプト

include(): パラメータ文字列が見つかったかどうかを示すブール値を返します。startsWith(): パラメータ文字列が元の文字列の先頭にあるかどうかを示すブール値を返します。endsWith(): パラメータ文字列が元の文字列の末尾にあるかどうかを示すブール値を返します。repeat() メソッドは新しい文字列を返します。これは、元の文字列を n 回繰り返すことを意味します。

PadStart() と PadEnd() は 2 つのパラメータを受け入れます。最初のパラメータは文字列補完が有効になる最大長で、2 番目のパラメータは補完に使用される文字列です。追加する量を減らし、削除する量を増やす

9. アレイの重複排除

ES6 セットを使用して重複を削除します (ES6 で最も一般的に使用されます)

 function unique (arr) {
   return Array.from(new Set(arr))
 }

フィルターを使用する

 function unique(arr) {
   return arr.filter(function(item, index, arr) {
     //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
     return arr.indexOf(item, 0) === index;
   });
 }

for を使用してネストし、次にスプライスして重複を削除します (ES5 で最も一般的に使用されます)

 function unique(arr){            
         for(var i=0; i<arr.length; i++){
             for(var j=i+1; j<arr.length; j++){
                 if(arr[i]==arr[j]){         //第一个等同于第二个，splice方法删除第二个
                     arr.splice(j,1);
                     j--;
                 }
             }
         }
 return arr;
 }

10. var let const の違い

 ① var には変数プロモーションがありますが、let と const には変数プロモーションがありません
 ② var は関数内を除いてグローバル変数です Let と const はすべてブロックレベルのスコープに属します
 ③ var は繰り返し定義でき、前の変数は上書きされます Let と const const は繰り返し定義できずエラーが報告される
 4. var は一時的にデッドではない Let と const には一時的なデッドゾーンがある
 ⑤ var がグローバル変数として宣言されるとウィンドウにマウントされる Let と const は⑥varとletは
 変数、constは定数です。

11. 新しいオペレーターは具体的に何をするのですか?

 ① new はメモリ内に新しい空のオブジェクトを作成します。
 ② new はこのオブジェクトをポイントします
 。 ③ コンストラクターでコードを実行し、プロパティとメソッドをこの新しいオブジェクトに追加します。
 ④ new はこの新しいオブジェクトを返します (したがって、コンストラクターは返す必要がありません)。

12. JavaScript のこのポインタについて話しましょう

1. 通常の関数呼び出し。この時点ではウィンドウを指します。

2. コンストラクター呼び出し。この時点ではインスタンスオブジェクトを指します。

3. オブジェクトメソッドの呼び出し。この時点では、メソッドが属するオブジェクトを指します。

4. イベントバインディングメソッドを通じて、this はバインドされたイベントのオブジェクトを指します。

5.タイマー機能、この時点ではウィンドウを指します

13. 配列の平坦化

 [1, [2, [3]]]. flat(2) // [1, 2, 3]

ES6実装:

 function flatten ( arr ) { 
     while ( arr . some ( item => Array . isArray ( item ))) { 
         arr = [ ].concat ( ... arr ) ; 
     戻り値
     arr ; 
 } }

14. イベントループとは何ですか?

 ① 同期タスクと非同期タスクは別の場所に入り、同期的にメインスレッドに入り、非同期的にイベントリストに入り関数を登録します。 ②
 指定されたものが完了すると、イベントリストはこの関数をイベントキューに移動します
 。 ③ メインスレッド内のタスク実行後は空です イベントキューに行って対応する関数を読み込んでメインスレッドに入れて実行します
 ④上記の処理が継続的に繰り返されます、これをイベントループと呼びます

15.promise.allとpromise.raceの違い

 ①すべての状態が満たされた場合にのみ、pの状態が満たされます このとき、戻り値は配列を形成し、pのコールバック関数に渡されます ②p1、p2、p3のいずれかが拒否される限り
 、 p's ステータスが拒否に変わります。このとき、最初に拒否されたインスタンスの戻り値が p のコールバック関数に渡されます
 ③ 1 つの Promise の状態が変化する限り、外側の Promise の状態も変化し、最初の Promise の戻り値も変化しますPromise は外側のレイヤーに渡されます。レイヤーの戻り値

16. プロミスのメリットとデメリット

 ① 非同期操作を同期操作プロセスとして表現できるため、コールバック関数の入れ子を回避でき、また、Promise オブジェクトが統一インターフェイスを提供するため、非同期操作の制御が容易になります ② Promise はキャンセルできません。一度確立されるとすぐに実行され、
 途中でキャンセルできない
 ③ コールバック関数が設定されていない場合、内部でエラーが発生し、外部に反映されない
 ③ 保留状態の場合、現在の進行状況がどの段階にあるのか（開始したばかりか、約）を知ることができない完成予定）

17. アロー関数と通常の関数の違い

 ①アロー関数本体の this オブジェクトは定義されたオブジェクトであり、使用されるオブジェクトではない
 ②アロー関数には引数がないので使いたい場合はrestを代わりに使えばよい
 ③アロー関数はコンストラクタとしては使用できない
 ④アロー関数はプロトタイプを持たないので継承できない⑤
 アロー関数はジェネレータ関数として使用できない、yieldキーワードは使用できない

18.window.onloadと$(document).ready()の違い

 ①window.onload は $(document).ready() を実行する前に Web ページ内のすべてのコンテンツが読み込まれるまで待機し
  、DOM が読み込まれるまで待機する必要があります
 ②window.onload は複数の
  $(document).ready() を同じファイルに書き込むことはできません複数
 ③ 略語 window.onload なし
  $(document).ready()==>(function(){}) 
  <br/>

19. ページリクエストメソッドはいくつありますか?

get: 指定されたページ情報を要求し、エンティティ本体を返します。head: get リクエストと似ていますが、返されるレスポンスにはヘッダーの取得に使用される特定のコンテンツがない点が異なります。post: リクエストを処理するために指定されたリソースにデータを送信します (フォームの送信やファイルのアップロードなど)。データはリクエストの本文に含まれます。リクエストを投稿すると、新しいリソースが作成されたり、既存のリソースが変更されたりする場合があります。put: クライアントからサーバーに転送されたデータは、指定されたドキュメントのコンテンツを置き換えます。delete: 指定されたページの削除をサーバーに要求します。connect: HTTP/1.1 プロトコルは、パイプラインへの接続を変更できるプロキシサーバー用に予約されています。オプション: クライアントがサーバーのパフォーマンスを表示できるようにします。トレース: サーバーが受信したリクエストをエコーし、主にテストまたは診断に使用されます。

20. クロスドメインとは何ですか? の解き方？

これは、ブラウザが他の Web サイトからのスクリプトを実行できないことを意味します。これは、ブラウザの同一生成元ポリシー(ブラウザによって JavaScript に課されるセキュリティ制限) が原因で発生します。

クロスドメインソリューション 1. jsonp によるクロスドメイン 2. クロスドメイン document.domain + iframe 3. Location.hash + iframe 4. クロスドメイン window.name + iframe 5. クロスドメイン postMessage 6. クロスドメインリソース共有 (CORS) 7. nginx プロキシクロスドメイン

21. URLからページ全体の読み込みが完了し、画面に表示されるまでの一連の流れ

 ① アドレスを入力します。
 ② ブラウザはドメイン名の IP アドレスを検索します。
 ③ ブラウザは http リクエストを Web サーバーに送信します。
 ④ サーバーの永続的なリダイレクト応答
 ⑤ ブラウザはリダイレクト アドレスを追跡します。
 ⑥ サーバーはリクエストを処理します
 。 ⑦ サーバーは戻ります。 http リクエスト
 ⑧ ブラウザは HTML を表示します
 ⑨ ブラウザは HTML に埋め込まれたリソース（ビデオ、画像など）を取得するリクエストを送信します

22. ウェブサイトのパフォーマンスを最適化する方法を 4 つ以上挙げてください

 ① HTTP リクエストの数を最小限に抑える ② プリロード ③ DOM 要素の数を減らす ④ DOM アクセスを減らす ⑤ キャッシュ可能な AJAX ⑥ DNS ルックアップの数を減らす ⑦ 外部の JavaScript と CSS を使用する ⑧ JavaScript と CSS をカットする ⑨ ジャンプを避ける ⑩ コンテンツの読み込みを遅延
 する     
 ① iframe の数を最小限に抑える ② スタイルシートを最上部に配置する ③ @import の代わりに <link> を使用する ④ 重複したスクリプトを削除する ⑤ Cookie サイズを小さくする、localStorage を使用するのが最善である ⑥ CSS Spirite を最適化する

23.setTimeout、Promise、Async/Awaitの違い

 この質問は主にイベント ループ内の 3 つの違いを調べるものです イベント ループはマクロ タスク キューとマイクロ タスク キューに分かれています。
 (1) settimeout のコールバック関数はマクロタスク キューに配置され、実行スタックがクリアされた後に実行されます; (2) Promise.then
 のコールバック関数は、対応するマクロタスクのマイクロタスク キューに配置され、同期を待ちます
 (3) async 関数は、関数内に非同期メソッドが存在する可能性があることを示し、await の後に式が続きます。async メソッドが実行されると、式はすぐに実行されます。await が発生すると、式に続くコードがマイクロタスク キューに配置され、実行スタックを放棄し、同期コードを最初に実行します。
 <br/>

24.セットとマップの違い

 ① Set と Map の主な適用シナリオは、データの再編成とデータの保存です。
 ② Set はセットと呼ばれるデータ構造、マップはディクショナリと呼ばれるデータ構造です。
 ③ Set 自体は、セットのデータ構造を生成するために使用されるコンストラクターです。セット オブジェクトを使用すると、プリミティブ値であってもオブジェクト参照であっても、あらゆるタイプの一意の値を格納できます。
 ④ Map は本質的にキーと値のペアのコレクションです。コレクションに似ており、トラバースすることができます (forEach)。さまざまなデータ形式に変換できる方法は多数あります。

25. あなたが知っているすべてのローダーとその機能を書き留めます

 ①babel-loader: js ファイルを処理し、es5 以降の構文をエスケープします。
 ②css-loader: Webpack のパッケージ化と CSS ファイルの処理を支援します。
 ③style-loader: <style></style> タグを使用して css-loader によってパッケージ化された CSS コードを使用します。フォームはHTMLファイルに挿入されます。
 ④less-loader：コンパイルされた.lessファイルを処理し、CSSファイルのコードに変換するために使用されます。
 ⑤sass-loader：sass/scssをロードし、sass/scssをcssにコンパイルします。
 ⑥url-loader：処理に使用されます。画像

26. ミニプログラムのプロジェクト構成

 ①-project.config.json：プロジェクト設定ファイル。たとえば、プロジェクトの名前を設定したり、appid を設定したりします。
 ②-app.js：ミニプログラムロジック処理（グローバルjs）。たとえば、アプレットがロードされて実行された後のコード
 ③-app.json: アプレットの公開設定。例えば、ミニプログラムのページ、tabBarの有無など。
 ④-app.wxss: ミニプログラムのパブリックスタイル(グローバルCSS)。ここに書いたスタイルは全てのページで利用できます
 ⑤-pages：ストレージアプレットページ
     -index：ページ名
         -index.js：インデックスページの論理処理ファイル（部分js）
         -index.json：設定ファイルインデックスページのページ構成
         -index.wxml：インデックスページのページ構造（HTML相当）
         -index.wxss：インデックスページのスタイル（ローカルCSS） -
     その他のページ

27.Webpack がパフォーマンスを最適化する方法

①ビルドパフォーマンス：ビルドパフォーマンスが高いほど開発効率が高く、モジュール解析の削減、ローダーパフォーマンスの最適化、ローダーアプリケーションの制限、ローダー結果のキャッシュ、マルチスレッドパッケージング、ホットリプレースメントの有効化 ②伝送パフォーマンス：ネットワークを重視総転送量、ファイル数、下請け、手動下請け、カスタム下請け、モジュールサイズ最適化、コード圧縮、遅延読み込み、gzip、補助ツール ③実行パフォーマンス：主にjs上での実行効率を指します。クライアントの走行性能

28.ローダーとプラグインの違い

Loader本質は受信した内容を変換し、変換結果を返す関数です。Webpack は JavaScript のみを認識するため、Loader はトランスレーターとなり、他のタイプのリソースの翻訳の前処理作業を実行します。

Pluginこれはプラグインです。イベントフローフレームワークに基づいてTapable、プラグインは Webpack の機能を拡張できます。Webpack の実行ライフサイクル中に多くのイベントがブロードキャストされます。プラグインはこれらのイベントをリッスンし、出力結果を変更できます。 Webpack が提供する API を通じて適切な時間を設定します。

Loadermodule.rules でモジュールの解析ルールとして設定され、型は配列です。各項目はオブジェクトであり、テスト (タイプファイル)、ローダー、オプション (パラメーター) などの属性が含まれます。

Pluginプラグイン内で個別に構成され、型は配列、各項目はプラグインのインスタンスであり、パラメーターはコンストラクターを通じて渡されます。

29.ホットアップデートとは何ですか?

ページは手動で更新する必要がなく、保存されたコンテンツをリアルタイムで更新できます。

ホットアップデートの原則: 保存後、以前のコンテンツと比較します。比較の結果、変更があることが判明した場合は、変更されたコンテンツが更新されます。更新されたコンテンツがない場合は、以前のコンテンツは変更されません。

30. 知っているローダーと関数をすべて書き留めます

babel-loader: js ファイルを処理し、es5 以降の構文をエスケープします。 css-loader: Webpack のパッケージ化と CSS ファイルの処理を支援します。 style-loader: css-loader によってパッケージ化された CSS コードを <style></style> タグでラップします。フォームは HTML ファイルに挿入されます。less-loader: コンパイルされた .less ファイルを処理し、CSS ファイルコードに変換するために使用されます。 sass-loader: sass/scss をロードし、sass/scss を CSS にコンパイルします。 url-loader: 処理に使用されます。画像

31.Webpack がプリロードを実装する方法

インポートを宣言するときは、webapck の組み込み命令 webpackPrefetch: true を使用して、指定されたリソースをプリロードします。

プリロード: 他のリソースがロードされ、ブラウザがアイドル状態になるまで待ってから、プリロードに設定されたリソースを秘密裏にロードします。

 import(webpackChunkName:'test' ,webpackPrefetch:true"./test").then(({test}) => {
             console.log('test加载成功')
             test()
 })

32. 5つのルート（wx.switchTab、wx.reLaunch、wx.redirectTo、wx.navigateTo、wx.navigateBack）の用途と違い

1. wx.switchTab (ホームページにジャンプ): tabBar ページにジャンプし、他のすべての非 tabBar ページを閉じてホームページにジャンプします。

2. wx.reLaunch (すべてのページジャンプを閉じる): すべてのページを閉じて、アプリケーション内のページを開きます。

3. wx.redirectTo (現在のページジャンプを閉じる): 現在のページを閉じてアプリケーション内のページにジャンプしますが、tabBar ページにジャンプすることはできません。

4. wx.navigateTo (ページジャンプを保持): 現在のページを保持し、アプリケーション内のページにジャンプしますが、タブバーページにはジャンプできません。

5. wx.navigateBack (ページ戻り): 現在のページを閉じて、前のページまたは複数レベルのページに戻ります。getCurrentPages を通じて現在のページスタックを取得し、返される必要があるレベルの数を決定できます。

33.setDataの役割

setData 関数は、ロジック層からビュー層にデータを送信する (非同期) と同時に、 this.data の対応する値を変更する (同期) ために使用されます。

34.wx: キーの役割

リスト内の項目の位置が動的に変更されるか、新しい項目がリストに追加され、リスト内の項目が独自の特性とステータスを維持したい場合は、wx:key を使用して、リスト内の項目の一意の識別子を指定する必要があります。リスト内の項目。

35. ミニプログラムのライフサイクル

まず、app.js内部でアプレットのライフサイクル関数を呼び出し、App(Object)その関数を利用してアプレットを登録します。Objectアプレットのライフサイクルコールバックを指定するパラメータを受け入れます。一般にonLaunch、アプレットの初期化の監視、onShowアプレットの表示の監視、onHideアプレットの非表示の監視などのライフサイクルコールバック関数があります。

1. ユーザーが初めてミニプログラムを開くと、onLaunch がトリガーされ (1 回のみトリガーされます)、ミニプログラムの初期化が開始されます。

2. ミニプログラムコードが初期化された後、onShow メソッドをトリガーしてミニプログラムの表示を監視すると、ページが表示されます。

3. ミニプログラムがフォアグラウンドからバックグラウンドに入るとき、onHide メソッドがトリガーされ、他のモバイルプログラム (Baidu APP から QQAPP モバイルプログラムに) に切り替えると、アプリケーションスイッチはバックグラウンドに配置されて実行されます。

4. ミニプログラムがバックグラウンドからフォアグラウンドディスプレイに入ると、onShow メソッドがトリガーされ、モバイルプログラムに戻ると、アプリケーションはフォアグラウンド (QQAPP から Baidu APP モバイルプログラム) に切り替わって実行されます。

5. アプレットでスクリプトエラーが発生するか、API 呼び出しが失敗すると、onError メソッドがエラー情報とともにトリガーされます。

36. ページのライフサイクル

データ	ページの初期データ
onLoad	プログラムの初期化が完了した後、ページが初めてロードされるときに onload がトリガーされます。これは 1 回だけトリガーされます。
オンショー	ライフサイクル機能 - モニターページ表示
準備完了	ライフサイクル機能 - ページの初期レンダリングの完了を監視します。
非表示にする	ライフサイクル機能 - ページの非表示を聞く
アンロード時	ライフサイクル機能 -- ページのアンロードをリッスンします。
onプルダウンリフレッシュ	ページ関連イベント処理機能 - ユーザーのプルダウンアクションの監視
リーチ下	ページプルダウンイベント処理関数

37. WeChat アプレットはどのようにしてページ間のデータ共有を実現しますか?

① コンポーネントテンプレートテンプレートを使用してパラメータを渡す ② グローバル変数を使用してデータ転送を実装 let App = getApp() ③ コンポーネント間の転送、属性をバインドする ④ ローカルキャッシュ（ストレージ） ⑤ 5 種類のルート送信

38.バインドタップとキャッチタップの違い

bindtap イベントバインディングはバブリングイベントを防止しません catchtap イベントバインディングはバブリングイベントを防止できます

39. 小規模プログラムの単独下請けと通常の下請けの違い

通常の下請け: 実行するにはメインパッケージに依存する必要があり、メインパッケージ内のパブリックリソースを参照できます。

独立した下請け: メインパッケージをダウンロードせずに独立して実行でき、メインパッケージ内のパブリックリソースを参照できません。

40.ボタンのオープン型属性とは何ですか?

contact: カスタマーサービスセッションをオープンします。bindcontact: コールバック

共有: ユーザー転送をトリガーします

getPhoneNumber: ユーザーの携帯電話番号を取得します。bindgetphonenumber: callback

getUserInfo: ユーザー情報を取得しますbindgetuserinfo: コールバック

openSetting: 認可設定ページを開きますアプレットの単独委託と通常委託の違い

41.commonjsとES6モジュールの違い

1. この 2 つのモジュールのインポートとエクスポートの構文は異なります。Commonjs は module.exports、exports、exports、require imports を使用しますが、ES6 はエクスポートとインポートを使用します。

2. Commonjs は実行時にモジュールを読み込みますが、ES6 は静的コンパイル中にモジュールの依存関係を決定します。

3. ES6 はコンパイル中にすべての import を最上位に上げますが、commonjs は require を上げません。

4. commonjs がエクスポートするのは値のコピーであり、読み込み結果はキャッシュされ、内部で値が変更されると外部には同期されません。ES6 はエクスポートされたリファレンスであり、内部の変更を外部に同期できます。

5. commonjs のトップレベルの this はモジュール自体を指しますが、ES6 のトップレベルの this は未定義です。

42. アプレットwx.setStorageSyncとwx.setStorageの違い

 (1) 機能: ローカル キャッシュの指定されたキーにデータを格納します。キーに対応する元のコンテンツを上書きします。ユーザーが積極的に削除するか、ストレージ容量の理由でシステムによって消去されない限り、データは常に利用可能です。1 つのキーに格納できるデータ長は最大 1MB、全データ格納上限は 10MB 
 (2) 相違点: wx.setStorageSync は同期キャッシュ wx.setStorage は非同期キャッシュ
     ① 関係なく非同期キャッシュを使用する② 同期キャッシュを使用し、キャッシュが成功した
     場合のみ、プログラムは下方向に実行されます。
     ③ 非同期キャッシュの方がパフォーマンスが高く、ユーザー エクスペリエンスが優れています
     。 ④ 同期キャッシュされたデータはより安全です。

43.Form の Submit 送信と ajax リクエストの違いは何ですか? ajax を使用して Form フォームデータを送信するにはどうすればよいですか?

 ①Ajax送信は非同期で実行され、Webページの更新は不要ですが、フォームフォーム送信は更新が必要です
 ②AjaxはJSで実装する必要がありますが、フォームフォームは必須ではありません
 ③Ajaxはデータ処理用のユーティリティプログラムとフォームフォームが必要です送信はフォームの構造に基づいて自動的に行われます。完了したため、コードの介入は必要ありません。
 ①
 フォームのフォーム データをシリアル化します
 。 ② ウィンドウを通じてフォームの送信を検索します。

44. WeChatミニプログラムとH5の違い

 ① 動作環境の違い（ミニプログラムはWeChat上で動作し、H5はブラウザ上で動作）
 ② 開発コストの違い（H5は異なるブラウザとの互換性が必要）
 ③ システム権限の取得が異なる（システムレベルの権限をミニプログラムとシームレスに接続できる）
 ④ 生成環境の目に見えない速度プロセスへの適用 (H5 はユーザー エクスペリエンスを向上させるためにプロジェクトを継続的に最適化する必要があります)

45. ミニプログラムで一般的に使用される UI コンポーネントに名前を付けます

 ビューコンテナコンポーネント: ビュー、スワイパー、スワイパーアイテム
 基本コンテンツコンポーネント: テキスト、アイコン、リッチテキスト
 フォームコンポーネント: ボタン、フロム、チェックボックス、入力
 ナビゲーションコンポーネント: ナビゲーター
 メディアコンポーネント: 画像

46.JSを遅延ロードする方法は何ですか?

1. JS の遅延読み込みにより、ページの読み込み速度が向上します。2. 遅延と非同期、DOM の動的作成 (最も一般的に使用される)、オンデマンドでの非同期ロード 3. JSdefer: 遅延スクリプト。すぐにダウンロードしますが、実行を遅らせて (実行前にページ全体が解析されるまで遅らせます)、スクリプトを表示された順序で実行します。4. async: 非同期スクリプト。ダウンロード後すぐに実行されますが、スクリプトの出現順に実行されるとは限りません。

47. ルーティングの概要`history`

履歴オブジェクトは、ブラウザウィンドウを開いた瞬間から始まるユーザーのオンライン履歴を保存します。セキュリティ上の理由から、開発者はユーザーが閲覧した URL を知ることができません。ただし、ユーザーが訪問したページのリストを通じて、実際の URL を知らなくても、行ったり来たりすることも可能です。

48.非同期プログラミングの実装について話しますか?

折り返し電話

長所: シンプルで理解しやすい短所: メンテナンスが難しく、コードの結合度が高い

イベントリスニング

利点: 理解しやすい、複数のイベントをバインドできる、イベントごとに複数のコールバック関数を指定できる欠点: イベント駆動型、プロセスが十分に明確ではないパブリッシュ/サブスクライブ (オブザーバーモード) はイベントリスニングに似ていますが、「メッセージセンター」を通じて実行でき、現在パブリッシャーとサブスクライバーが何人いるかを知ることができます。

Promiseオブジェクト

利点: then メソッドを使用してチェーンで記述できる; エラーが発生した場合にコールバック関数を記述できる欠点: 記述して理解するのが比較的難しい

ジェネレーター機能

長所: 関数本体の内外にデータ交換とエラー処理メカニズムがある短所: プロセス管理が不便

非同期関数

長所: 組み込みエグゼキュータ、より優れたセマンティクス、幅広い適用性、Promise を返す、明確な構造短所: エラー処理メカニズム

49. Jsonp と Ajax の違い

Ajax は同じオリジンポリシーに属しますが、Jsonp は非オリジナルオリジンポリシーに属します。原則が異なります: 1.Ajax: 新しい XMLHttpRequest 2.jsonp: スクリプトタグを動的に作成し、src 属性を追加し、フロントエンドがコールバックを渡します。バックグラウンド、バックグラウンドが関数呼び出しを返す、フロントエンド返された関数が呼び出されて解析されると、戻り値が異なります: 1. Ajax はオブジェクトを返す 2. jsonp は文字列を返すリクエストメソッドが異なります: Ajax には複数のリクエストメソッドがあります - (get、post、delete、put、patch) jsonp: get のみ

50. Javascript のスコープについてのあなたの理解について教えてください。

スコープとは、変数が定義されるプログラム内の領域を指し、この場所によって変数のライフサイクルが決まります。一般的に理解されているように、スコープは変数と関数のアクセス可能な範囲です。つまり、スコープは変数と関数の可視性とライフサイクルを制御します。

ES6 より前の ES には、グローバルスコープと関数スコープの 2 種類のスコープしかありませんでした。

グローバルスコープ内のオブジェクトはコード内のどこからでもアクセスでき、そのライフサイクルはページのライフサイクルに従います。関数スコープは関数内で定義された変数または関数であり、定義された変数または関数は関数内でのみアクセスできます。関数の実行が終了すると、関数内で定義された変数は破棄されます。ブロックレベルスコープは ES6 で登場します。ブロックレベルスコープは、関数、判定ステートメント、ループステートメントなど、中かっこで囲まれたコードの一部であり、単一の {} さえもブロックレベルスコープとみなすことができます。。