Ringkasan dan perkongsian beberapa wawancara front-end berasaskan jQuery (termasuk Soalan Lazim terminal mudah alih)

Artikel ini meringkaskan beberapa temu bual hadapan berdasarkan jQuery untuk dikongsi dengan anda Ia mengandungi soalan temu bual biasa tentang jQuery dan soalan mudah alih yang biasa saya harapkan.

Cadangan berkaitan: Ringkasan Soalan Temuduga Hadapan Besar 2022 (Koleksi)

Temu bual bahagian hadapan jQuery - termasuk soalan lazim mudah alih

1 Pernahkah anda melihat kod sumber JQuery? Bolehkah anda memberikan gambaran ringkas tentang prinsip pelaksanaannya?

Kod sumber jquery dirangkumkan dalam persekitaran pelaksanaan sendiri bagi fungsi tanpa nama, yang membantu menghalang pencemaran global pembolehubah Kemudian dengan menghantar parameter objek tetingkap, objek tetingkap boleh digunakan sebagai pembolehubah tempatan , kelebihannya ialah apabila mengakses objek tetingkap dalam jquery, tidak perlu mengembalikan rantai skop ke skop peringkat atas, supaya objek tetingkap boleh diakses dengan lebih cepat. Begitu juga, menghantar parameter yang tidak ditentukan boleh memendekkan rantai skop apabila mencari yang tidak ditentukan. [Pembelajaran yang disyorkan: tutorial video jQuery]

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

• jquery merangkum beberapa sifat dan kaedah prototaip dalam jquery.prototype untuk memendekkan nama, ia juga memberikan nilai. Saya memberikannya kepada jquery.fn, yang merupakan cara penulisan yang sangat jelas.
• Terdapat beberapa kaedah tatasusunan atau objek yang sering digunakan jQuery menyimpannya sebagai pembolehubah setempat untuk meningkatkan kelajuan akses.
• Panggilan berantai yang dilaksanakan oleh jquery boleh menyimpan kod, dan objek yang sama dikembalikan, yang boleh meningkatkan kecekapan kod.
• Kelebihan jquery ialah operasi rantaian dan lelaran tersirat

2. Apakah objek yang dikembalikan daripada kaedah init jQuery.fn? Mengapa mengembalikan ini?

Yang dikembalikan ini merujuk kepada objek jquery selepas operasi semasa Untuk merealisasikan operasi rantaian jquery

3 gunakan jquery Tukar tatasusunan kepada rentetan json dan kemudian kembali lagi?

Gunakan kaedah global jquery $.parseJSON kaedah ini

4. Apakah prinsip pelaksanaan salinan atribut jQuery (lanjutkan) dan bagaimana untuk melaksanakannya Salinan mendalam?

①, $.lanjutkan salinan cetek dalam jQuery

$.panjangkan salinan cetek dalam jQuery, apabila menyalin objek A, objek B akan menyalin semua medan A , jika medan adalah alamat memori, B akan menyalin alamat, jika medan adalah jenis primitif, B akan menyalin nilainya. Kelemahannya ialah jika anda menukar alamat memori yang ditunjuk oleh objek B, anda juga menukar medan objek A yang menunjuk ke alamat ini.

$.extend(a,b)

②, $.lanjutkan salinan dalam dalam jQuery

$.lanjutkan salinan dalam dalam jQuery, kaedah ini akan menyalin sepenuhnya semua data, kelebihan B dan A tidak akan bergantung antara satu sama lain (A dan B terputus sepenuhnya).

$.extend(true,a,b)

5. Apakah perbezaan antara jquery.extend dan jquery.fn.extend?

①, jQuery.extend(objek);

• Ia menambahkan kaedah kelas pada kelas jQuery, yang boleh difahami sebagai menambah kaedah statik. Contohnya:

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])Lanjutkan objek dengan satu atau lebih objek lain dan kembalikan objek lanjutan.

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

• Hasil: tetapan == { sahkan: benar, had: 5, nama: “bar” }

②, jQuery.fn. extend(objek);

• Apakah itu $.fn?
• $.fn merujuk kepada ruang nama jQuery Ahli (fungsi kaedah dan sifat atribut) pada fn akan mempengaruhi Setiap Contoh jQuery adalah sah.
• Melihat kod jQuery, ia tidak sukar untuk dicari.

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

• Ternyata jQuery.fn = jQuery.prototype
• Jadi, ia adalah lanjutan daripada jQuery.prototype, iaitu menambah "fungsi ahli" pada jQuery kelas. Contoh kelas jQuery boleh menggunakan "fungsi ahli" ini.

③, perbezaan

• jQuery.fn.extend(objek); memanjangkan kaedah objek jQuery
• jQuery.extend memanjangkan kaedah global jQuery

6. Bagaimanakah baris gilir jQuery dilaksanakan? Di manakah barisan boleh digunakan?

Dalam teras jQuery, terdapat satu set kaedah kawalan baris gilir ini terdiri daripada tiga kaedah: queue()/dequeue()/clearQueue(). untuk dilaksanakan secara berterusan dan berurutan. Kawalan fungsi boleh dikatakan ringkas dan selesa. Ia digunakan terutamanya dalam kaedah animasi (), ajax dan acara lain yang perlu dilaksanakan dalam susunan kronologi >

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 Mari kita bincangkan tentang Jquery Apakah perbezaan antara bind(), live(), delegate() dan on()?

bind(), live(), dan delegate() dalam jquery semuanya dilaksanakan berdasarkan

方法	说明
on	是封装了一个兼容的事件绑定方法，在选择元素上绑定一个或多个事件的事件处理函数
bind(type,[data],fn)	为每个匹配元素的特定事件绑定事件处理函数
live(type,[data],fn)	给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的
delegate(selector,[type],[data],fn)	指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数

Perbezaan:

.bind() terikat terus pada elemen

方法	说明
.bind()	是直接绑定在元素上
.live()	则是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到document DOM节点上。和.bind()的优势是支持动态数据
.delegate()	则是更精确的小范围使用事件代理，性能优于.live()
.on()	则是最新的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前端教程）

Atas ialah kandungan terperinci Ringkasan dan perkongsian beberapa wawancara front-end berasaskan jQuery (termasuk Soalan Lazim terminal mudah alih). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!