1. BFC の理解、BFC の作成方法とその機能を簡単に説明します。
BFC - ブロック フォーマット コンテキスト(BFC) は、Web ページのビジュアル CSS レンダリングの一部です。これは、レイアウト プロセス中にブロック レベルのボックスが生成される領域であり、フローティング要素と他の要素の間の対話のための限定された領域でもあります。要素。
BFC の作成条件:
- ルート要素: 本体;
- 要素設定 float: none 以外の float 値。
- 要素は絶対位置を設定します: 位置 (絶対、固定);
- 表示値は次のとおりです: inline-block、table-cell、table-caption、flex など。
- オーバーフロー値は次のとおりです: 非表示、自動、スクロール。
BFC機能
- 余白が重ならないようにします。bfc によって引き起こされる同じ bfc に属するサブ要素のマージンは、マージンによって決まります (ボックスの垂直方向の距離はマージンによって決まります。同じ BFC に属する 2 つの隣接するボックスのマージンは重なり合います)。コンテナを外側でラップすることができます。 div、コンテナをトリガーして BFC を生成します。この場合、2 つの div は同じ BFC に属さず、マージンの重複は発生しません。
- フローティングの影響をクリアする: ブロック レベルの子要素はフローティングです。ブロック レベルの親要素で高さが設定されていない場合、その高さは折りたたまれます。理由: 子要素がフローティングされた後、BFC がオンになり、親要素は子要素によって展開されなくなります。解決策: BFC の高さを計算するとき、浮動要素も計算に参加します。したがって、子要素を含めるために親コンテナを bfc に設定するだけです。このコンテナにはフロートされた子要素が含まれ、その高さはその子要素を含むように拡張されるため、この BFC ではこれらの要素はページの通常のドキュメント フローに戻ります。
- テキストの折り返しを防止する
2. Javascript スクリプトの読み込みを遅らせるにはどのような方法がありますか?
1. 非同期ロード
「async」属性を追加して JavaScript ファイルを非同期的に読み込み、ページ読み込み中に他のリソースのダウンロードやレンダリングがブロックされないようにします。非同期読み込みはスクリプトの実行順序を保証しませんが、独立したコンポーネントやツール ライブラリには適しています。
<script src="../test.js" async/>2. 遅延ロード
「defer」属性を追加して JavaScript ファイルの読み込みを遅らせ、ページ上の他のリソースが最初に読み込まれてレンダリングされるようにします。非同期読み込みとは異なり、遅延読み込みでは、スクリプトが表示された順序で実行されることが保証されるため、順番に読み込む必要があるコンポーネントや依存ライブラリに適しています。
<script src="../test.js" defer="defer"/>3. 動的ロード
JavaScript コードを使用して HTML タグを動的に追加または削除し、スクリプト ファイルをロードまたはアンロードします。このアプローチは、ユーザーの行動やビジネス ニーズに基づいてコンポーネントと機能をロードおよびアンロードする必要がある状況に適しています。
4. 遅延読み込み
ページの最初の読み込み時ではなく、必要なときに JavaScript ファイルを読み込みます。遅延読み込みにより、最初のページのサイズと読み込み時間を削減し、ユーザー エクスペリエンスを最適化できます。通常、遅延読み込みは、画像、ビデオ、広告、および一部の重要ではない JavaScript コードに適しています。
3. 5 を使用して、10 ～ 100 の間で 10 個の数値をランダムに選択し、配列に格納して並べ替えます。
function randomNub(arr,len,min,max){
//如果给的长度大于取值范围，则超出提示
if(len>=(max-min)){
return "超过"+min+"-"+max+"之间的个数范围"+(max-min-1)+"个的总数";
}
//从小到大排序，实现该数组的降序排列
if(arr.length>=len){
arr.sort(function(a,b){
return a-b;
});
return arr;
}
//定义当前的数字
var nowNub=parseInt(Math.random()*(max-min-1))+(min+1);
//当生产的随机数==数组中的一个数字时，
for(var j=0;j<arr.length;j++){
if(nowNub==arr[j]){
randomNub(arr,len,min,max);
return;
}
}
arr.push(nowNub);
randomNub(arr,len,min,max);
return arr;
}
var arr=[];
//调用该函数，实现功能
console.log(randomNub(arr,10,10,100))4. JS はディープコピーを実装します
ディープ コピー: 新しい複合配列またはオブジェクトが構築され、参照が指す参照データ型に遭遇するとコピーが続行されます。
浅いコピー: オブジェクトまたは配列の最初のレベルのみをコピーし、他のレベルは保存されているメモリ アドレスをコピーすることを指します。
方式一：通过JSON对象的stringify和parse方法实现 let obj = { name: '小红', age: 13, arr: [3, 4], } let obj1= JSON.parse( JSON.stringify(obj) ) 方式二：jquery的extend()方法进行深拷贝（推荐在JQ中使用） 仅适用于JQuery构建的项目。JQuery自身携带的extend let newObj = $.extend(true, {}, obj); //拷贝完成obj.b = 20;console.log(newObj.b); //输出 4
5. 「2023-09-15T09:10:23 Europe/Paris」から結果 ["2023","09","15","09","10","23"] を抽出してください。
let str = '2023-09-15T09:10:23 Europe/Paris';
let arr2 = str.match( /\d{1,}/g);
// \d:返回的是数字
// {1,} 至少返回的是由一个长度的数据6. バインド関数の実装
公式サイトより説明： bind() メソッドは新しい関数を作成します。bind() が呼び出されるとき、この新しい関数の this は、bind() の最初のパラメータとして指定され、残りのパラメータは、bind() のパラメータとして使用されます。新機能、通話時に使用します。
- 1. Bind は Function プロトタイプ チェーンの Function.prototype の属性で、this ポインタを変更し、パラメータをマージして元の関数に渡し、戻り値が新しい関数になります。
- 2.bind によって返される関数は new を通じて呼び出すことができますが、このとき、指定された this パラメータは無視され、new によって生成された新しいオブジェクトを指します。内部シミュレーションは新しいオペレーターを実装します。
成し遂げる：
①
最初に最も単純なものを実装します
fn.bind(context)。前述したように、bind関数は関数を返します。この関数はthisに渡すものですcontext。その後、呼び出された関数を返すことができますcall。ただし、ここで注意する必要があるのは、bind呼び出しメソッド自体がfn.bind(context)、実際にはbind関数内に 1 つありthisこれはthisfn です。次のcontextものと混同しないでください。
② 実装: この要件は非常に簡単で、次のように、最初のパラメータを除く関数で受け取ったすべてのパラメータを内部的に返される関数に渡すだけ
fn.bind(context, p1, p2)です。bind
③
実装では
fn.bind(context, p1, p2)(p3, p4)、この要件は 2 番目の要件と似ていますが、パラメータを受け取る位置が返された関数になる点が異なりbind、返された関数のパラメータをそれに渡すだけで済みますthis.call。
7. イベントループの仕組みについて説明する
イベント ループはコードを非同期的に実行する方法であり、これにより JavaScript がシングルスレッド実行環境で同時イベントを処理できるようになります。非同期イベントが発生すると、イベント キュー EventQueue に置かれて実行を待機し、必要に応じて Eventloop によって取り出して実行されます。EventLoop は、イベント キューにイベントがあるかどうかを常にチェックする継続的に実行されるプロセスです。 If イベントは、イベント キューにイベントがなくなるまで取り出して実行されます。
イベント ループ メカニズムを使用すると、Javascript エンジンが自動的にスレッドの同期やロックの問題を処理するため、スレッドの同期やロックの問題を心配することなく、効率的な非同期コードを作成できます。
8. MVC、MVP、MVVM の違いを簡単に説明します
MVCの正式名称はModel View Controllerといい、model-view-controllerの略で、ビジネスロジック、データ、インターフェース表示を分離する手法でコードを編成するソフトウェア設計モデルです。コンポーネントなので、インターフェイスとユーザー インタラクションを改善およびパーソナライズする際にビジネス ロジックを書き直す必要はありません。MVC は、従来の入力、処理、出力機能を論理的なグラフィカル ユーザー インターフェイス構造にマッピングするために独自に開発されました。
MVP パターン : Model-View-Presenter; MVP は古典的なパターン MVC から進化したもので、基本的な考え方は似ています。Controller/Presenter はロジック処理を担当し、Model はデータを提供し、View は表示を担当します。
MVVMはModel-View-ViewModelの略称です。これは本質的に MVC の改良版です。MVVM はビューの状態と動作を抽象化し、ビュー UI とビジネス ロジックを分離できるようにします。もちろん、ViewModel はこれらのことをすでに行っており、モデルのデータを取り出して、コンテンツを表示する必要があるためにビューに含まれるビジネス ロジックの処理に役立ちます。Microsoft の WPF は、Silverlight、オーディオ、ビデオ、3D、アニメーションなどの新しい技術エクスペリエンスをもたらし、その結果、ソフトウェア UI レイヤーがより詳細でカスタマイズ可能になります。同時に、技術レベルでは、WPF はバインディング、依存関係プロパティ、ルーテッド イベント、コマンド、DataTemplate、ControlTemplate などの新機能ももたらします。MVVM (Model-View-ViewModel) フレームワークの起源は、MVP (Model-View-Presenter) パターンと WPF を組み合わせたアプリケーション手法から進化した新しいアーキテクチャ フレームワークです。これは、オリジナルの MVP フレームワークに基づいており、ますます複雑になる顧客ニーズの変化に対応するために WPF の新機能が組み込まれています。
9. 親コンポーネントと子コンポーネントのライフサイクル実行シーケンスを説明します。
1. ロードとレンダリングのプロセス
親 beforeCreate -> 親作成 -> 親 beforeMount -> 子 beforeCreate -> 子作成 -> 子 beforeMount -> 子マウント -> 親マウント 2.
子コンポーネントの更新プロセス
親 beforeUpdate -> 子 beforeUpdate ->子更新 -> 親更新
3. 親コンポーネント更新処理
親 beforeUpdate -> 親更新
4. 破棄処理
親 beforeDestroy -> 子 beforeDestroy -> 子破棄 -> 親破棄
10. Vue の双方向データ バインディングの原理を説明する
双方向データ バインディングの原理: 「データ ハイジャック」を「パブリッシャー/サブスクライバー」モデルと組み合わせて使用し、「Object.defineProperty()」メソッドを使用して各プロパティのセッターとゲッターをハイジャックし、サブスクライバーにメッセージをパブリッシュします。データが変更されるか、対応するリスニング コールバックをトリガーします。
実装プロセス
データの双方向バインディングを実装するには、まずデータをハイジャックして監視する必要があることはすでにわかっているため、すべてのプロパティを監視するためにオブザーバーをセットアップする必要があります。属性が変更された場合は、更新する必要があるかどうかをサブスクライバー Watcher に通知する必要があります。多くのサブスクライバーが存在するため、これらのサブスクライバーを特別に収集し、オブザーバーとウォッチャーの間でそれらを均一に管理するメッセージ サブスクライバー Dep が必要です。次に、各ノード要素をスキャンして解析し、関連する命令をサブスクライバ Watcher に初期化し、テンプレート データを置き換えるか、対応する関数をバインドする命令パーサー Compile も必要です。このとき、サブスクライバ Watcher が変更を受信すると、対応する属性に応じて、対応する更新関数が実行されてビューが更新されます。したがって、次に次の 3 つの手順を実行して、データの双方向バインディングを実現します。
1. リスナー オブザーバーを実装して、すべてのプロパティをハイジャックして監視し、変更があればサブスクライバーに通知します。
2. プロパティ変更通知を受信し、対応する関数を実行してビューを更新できるサブスクライバー ウォッチャーを実装します。
3. 各ノードの関連命令をスキャンおよび解析できるパーサー Compile を実装し、初期化に従ってテンプレート データと対応するサブスクライバーを初期化します。
11. vue2 で配列の変更を監視するにはどうすればよいですか?
Vue 2 では、最下層は配列のプロトタイプ メソッドをオーバーライドすることで配列の変更を監視します。
具体的には、配列の変更メソッド (プッシュ、ポップ、シフト、シフト解除、スプライス、ソート、リバースなど) を呼び出すと、Vue は次の手順を実行します。
元の配列メソッドを呼び出し、配列に対して対応する変更操作を実行します。
ミューテーション操作を実行した後、Vue は関連する依存関係 (ビューなど) の更新を通知する通知をトリガーします。
通知プロセス中に、Vue は配列のすべてのオブザーバー (Observer) を走査し、それらの更新メソッドを呼び出して関連する依存関係を更新します。
このように、Vue は配列の変更をリアルタイムでキャプチャし、関連する依存関係をタイムリーに更新することで、配列の監視と応答を実現できます。
Vue 2 は、ミューテーション メソッドを通じてのみ配列への変更を検出できますが、配列の要素を直接変更したり、非ミューテーション メソッド (filter、concat など) を使用して配列への変更を検出することはできないことに注意してください。これらの変異していない配列の変更を監視する必要がある場合は、watch オプションまたは $watch メソッドを使用して、配列の変更を手動で監視できます。
12. vue-router は動的ルーティングをどのように定義しますか? 渡された動的パラメーターを取得するにはどうすればよいですか?
定義:ルーターディレクトリ内のindex.jsファイルで、パス属性に/:idを追加します。
ルーター オブジェクトの params.id を使用します (例: this.$route.params.id)。
パラメータの取得: $route は、 パス、パラメータ、ハッシュ、クエリ、フルパス、一致、名前、その他のルーティング情報パラメータを含む「ルーティング情報オブジェクト」です。
13. NextTick が Vue で行うことについて説明してください。
公式の定義:次の DOM 更新サイクルの後に遅延コールバックを実行します。データを変更した直後にこのメソッドを使用して、更新された DOM を取得します。
Vue ライフサイクルの created() フック関数で実行される DOM 操作は、Vue.nextTick() のコールバック関数に配置する必要があります。
Vue.nextTick()更新された DOM を取得するために使用されます。
トリガーのタイミング: 同じイベント ループ内でデータが変更された後、DOM は更新を完了し、Vue.nextTick()コールバックがすぐに実行されます。
