jQuery ベースのフロントエンドのインタビュー (モバイル端末に関する FAQ を含む) を要約して共有します。

この記事では、jQueryに基づいたフロントエンドのインタビューをいくつかまとめて皆さんと共有します。jQuery に関する一般的なインタビューの質問とモバイルでの一般的な質問が含まれています。皆さんのお役に立てれば幸いです。

関連する推奨事項:2022 年のフロントエンド面接での大きな質問の概要 (コレクション)

jQuery フロントエンド インタビュー - モバイル端末を含む FAQ

1. JQuery のソース コードを見たことがありますか?その実装原理について簡単に説明してもらえますか?

jquery ソース コードは、匿名関数の自己実行環境にカプセル化されており、変数のグローバルな汚染を防ぐのに役立ちます。その後、ウィンドウ オブジェクトのパラメータを渡すことで、ウィンドウ オブジェクトはローカル変数として使用できるため、jquery でウィンドウ オブジェクトにアクセスするときにスコープ チェーンを最上位スコープに戻す必要がないため、ウィンドウ オブジェクトにより速くアクセスできるという利点があります。同様に、未定義パラメータを渡すと、未定義を検索するときにスコープ チェーンが短縮される可能性があります。 [推奨学習:jQuery ビデオ チュートリアル]

(function( window, undefined ) { //用一个函数域包起来，就是所谓的沙箱 //在这里边var定义的变量，属于这个函数域内的局部变量，避免污染全局 //把当前沙箱需要的外部变量通过函数参数引入进来 //只要保证参数对内提供的接口的一致性，你还可以随意替换传进来的这个参数 window.jQuery = window.$ = jQuery; })( window );

• jquery は、いくつかのプロトタイプ プロパティとメソッドを jquery.prototype にカプセル化します。名前を短縮するために、それは に割り当てられます。 jquery.fn、これは非常に鮮やかな書き方です。
• よく使用される配列やオブジェクトのメソッドがいくつかありますが、jQuery ではアクセス速度を向上させるためにローカル変数として保存します。
• jquery によって実装されたチェーン呼び出しはコードを節約でき、同じオブジェクトが返されるため、コードの効率が向上します。
• jquery の利点は、チェーン操作と暗黙的な反復です。

2. jQuery.fn の init メソッドから返されるこれはどのオブジェクトを参照していますか?なぜこれを返すのですか？

返される this は、現在の操作後の jquery オブジェクトを参照します。jquery の連鎖操作を実現するには、

3 方法jqueryを使用します配列をjson文字列に変換し、再度変換しますか?

jquery のグローバル メソッド $.parseJSON を使用するこのメソッド

4. jQuery の属性コピー (拡張) の実装原理とその方法ディープコピーを実装しますか？

①、jQuery の $.extend 浅いコピー

$.jQuery の浅いコピー、オブジェクト A をコピーすると、オブジェクト B は A のすべてのフィールドをコピーします。フィールドがメモリ アドレスの場合、B はアドレスをコピーします。フィールドがプリミティブ型の場合、B はその値をコピーします。欠点は、オブジェクト B が指すメモリ アドレスを変更すると、このアドレスを指すオブジェクト A のフィールドも変更されることです。

$.extend(a,b)

②、$.extend deep copy in jQuery

$.extend deep copy in jQuery. このメソッドはすべてのデータを完全にコピーします。は A との相互依存関係がありません (A と B は完全に切断されています) デメリットは、コピー速度が遅く、コストが高いことです。

$.extend(true,a,b)

5. jquery.extend と jquery.fn.extend の違いは何ですか?

①、jQuery.extend(object);

• これは、jQuery クラスにクラス メソッドを追加することであり、静的メソッドを追加することと理解できます。例:

jQuery.extend({ 　　 min: function(a, b) { return a < b ? a : b; }, 　　 max: function(a, b) { return a > b ? a : b; }); jQuery.min(2,3); // 2 jQuery.max(4,5); // 5

• jQuery.extend(target, object1, [objectN])オブジェクトを 1 つ以上の他のオブジェクトで拡張し、拡張されたオブジェクトを返します。

var settings = { validate: false, limit: 5, name: "foo" }; var options = { validate: true, name: "bar" }; jQuery.extend(settings, options);

• 結果: 設定 == { 検証: true、制限: 5、名前: “bar” }

②、jQuery.fn.extend( object);

• #$.fn?
• $.fn は、jQuery の名前空間を参照します。fn のメンバー (メソッド関数と属性プロパティ) は、jQuery インスタンスに影響を与えます。 1つは機能します。
• jQuery コードを見ると、見つけるのは難しくありません。

jQuery.fn = jQuery.prototype = { 　　　 init: function( selector, context ) {//....　 };

• OriginaljQuery.fn = jQuery.prototype
• つまり、これは jQuery.prototype の拡張であり、「メンバー」を追加することになります。関数"。 jQueryクラスのインスタンスはこの「メンバー関数」を利用することができます。

③、違い

• jQuery.fn.extend(object); jQuery オブジェクト メソッドを拡張します
• jQuery.extend は jQuery グローバル メソッドを拡張します

6. jQuery のキューはどのように実装されていますか?キューはどこで使用できますか?

jQuery の中核にはキュー制御メソッドのセットがあり、このメソッド セットは queue()/dequeue()/clearQueue() の 3 つのメソッドで構成されます。関数の制御は簡潔で快適と言え、主にanimate()メソッドやajaxなど、時系列に実行する必要があるイベントで使用されます。 #

var _slideFun = [ function() { $('.one').delay(500).animate({ top: '+=270px' },500, _takeOne); }, function() { $('.two').delay(300).animate({ top: '+=270px' },500, _takeOne); } ]; $('#demo').queue('slideList', _slideFun); var _takeOne = function() { $('#demo').dequeue('slideList'); }; _takeOne();

ログイン後にコピー

に基づいて実装されています。

var str=$("a").attr("href"); for (var i = size; i < arr.length; i++) {}

for (var i = size, length = arr.length; i < length; i++) {}

window.addEventListener( "load", function() { FastClick.attach( document.body ); }, false );

function ready(fn){ if(document.addEventListener) { //标准浏览器 document.addEventListener('DOMContentLoaded', function() { //注销事件, 避免反复触发 document.removeEventListener('DOMContentLoaded',arguments.callee, false); fn(); //执行函数 }, false); }else if(document.attachEvent) { //IE document.attachEvent('onreadystatechange', function() { if(document.readyState == 'complete') { document.detachEvent('onreadystatechange', arguments.callee); fn(); //函数执行 } }); } };