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();

7. Jquery の関数について話しましょうbind()、live()、delegate()、on() の違いは何ですか?

jquery のbind()、live()、delegate() はすべて on

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

#メソッド説明bind(type,[ data],fn)live(type,[data], fn)delegate(selector, [type],[data],fn)違い:

## 選択した要素のイベント処理関数に 1 つ以上のイベントをバインドする、互換性のあるイベント バインディング メソッドをカプセル化します。
一致する各要素の特定のイベントにイベント ハンドラーをバインドする
#要素が後で追加された場合でも、一致するすべての要素にイベント ハンドラーを追加します
指定した要素 (選択した要素の子要素) に 1 つ以上のイベント ハンドラーを追加し、これらのイベントが発生したときに実行する関数を指定します。

.bind() は要素

MethodDescription に直接バインドされています。 .bind().live().delegate() よりも優れています。on()

は要素

に直接バインドされます Set

はバブリングを通じて要素にバインドされます。ドキュメント DOM ノードにバインドされたリスト タイプにより適しています。 .bind() の利点は、動的データをサポートしていることです。

は、より正確な小規模な使用法です。イベント エージェント。パフォーマンスは .live()

は、以前の 3 つを統合した最新バージョン 1.9 です。イベント バインディング メカニズム

8、JQuery一个对象可以同时绑定多个事件，这是如何实现的？

jquery中事件绑定的函数中传递多个事件参数，执行事件的时候判断执行事件的类型

9、针对jQuery性能的优化方法？

• 基于Class的选择性的性能相对于Id选择器开销很大，因为需遍历所有DOM元素。

• 频繁操作的DOM，先缓存起来再操作。用Jquery的链式调用更好。
  比如：

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

• for 循环每一次循环都查找了数组(arr) 的.length 属性，在开始循环的时候设置一个变量来存储这个数字，可以让循环跑得更快：

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

10、Jquery与jQuery UI 有啥区别？

1. jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。
2. jQuery UI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等。
3. jQuery本身注重于后台，没有漂亮的界面，而jQuery UI则补充了前者的不足，他提供了华丽的展示界面，使人更容易接受。既有强大的后台，又有华丽的前台。jQuery UI是jQuery插件，只不过专指由jQuery官方维护的UI方向的插件。

11、jQuery和Zepto的区别？各自的使用场景？

zepto主要用在移动设备上，只支持较新的浏览器，好处是代码量比较小，性能也较好。
jquery主要是兼容性好，可以跑在各种pc，移动上，好处是兼容各种浏览器，缺点是代码量大，同时考虑兼容，性能也不够好。

zepto和jQuery选择器实现方法不一样，jQuery使用正则，zepto是使用querySelectAll
zepto针对移动端程序，Zepto还有一些基本的触摸事件可以用来做触摸屏交互，如：

①、tap事件

tap，singleTap，doubleTap，longTap

②、Swipe事件

swipe，swipeLeft，swipeRight，swipeUp，swipeDown

12、Zepto的点透问题如何解决？

①、“点透”是什么

你可能碰到过在列表页面上创建一个弹出层，弹出层有个关闭的按钮，你点了这个按钮关闭弹出层后后，这个按钮正下方的内容也会执行点击事件（或打开链接）。这个被定义为这是一个“点透”现象。

②、点透的解决方法：

• 方案一：来得很直接github上有个fastclick可以完美解决

https://github.com/ftlabs/fastclick，引入fastclick.js，因为fastclick源码不依赖其他库所以你可以在原生的js前直接加上

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

• 方案二：用touchend代替tap事件并阻止掉touchend的默认行为preventDefault()

• 方案三：延迟一定的时间(300ms+)来处理事件

13、移动端最小触控区域是多大？

移动端最小触控区域44*44px ，再小就容易点击不到或者误点

14、jQuery 的slideUp动画，如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行，该如何处理呢?

每次动画开始的时候先使用stop()函数停止当前未动完的动画

15、移动端的点击事件的有延迟，时间是多久，为什么会有？怎么解决这个延时？

click 有300ms 延迟,为了实现safari的双击事件的设计，浏览器要知道你是不是要双击操作。

16、你从jQuery学到了什么？

首先明白了封装的好处，
链式操作的原理
闭包的好处

17、请指出.get()，[]，eq() 的区别。

方法	说明
.get	是jquery中将jquery对象转换为原生对象的方法
[]	是采用了获取数组值的方式将jquery对象转换为原生对象的方法
eq()	是获取对象列表中的某一个jquery dom对象

18、请指出$ 和$.fn 的区别，或者说出$.fn 的用途。

$代表的是jquery对象
$.fn是代表的jQuery.prototype
$.fn是用来给jquery对象扩展方法的

19、jQuery取到的元素和原生Js取到的元素有什么区别

jQuery取到的元素是包含原生dom对象，和jQuery扩展的方法

20、原生JS的window.onload与Jquery的$(document).ready(function(){})有什么不同？如何用原生JS实现Jq的ready方法？

①、window.onload()

window.onload()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行。

②、$(document).ready()

$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

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();        //函数执行
}
});
}
};

（学习视频分享：web前端教程）

以上がjQuery ベースのフロントエンドのインタビュー (モバイル端末に関する FAQ を含む) を要約して共有します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。