일부 jQuery 기반 프런트엔드 인터뷰 요약 및 공유(모바일 터미널 FAQ 포함)

이 글은jQuery를 기반으로 한 몇 가지 프론트엔드 인터뷰를 요약하여 여러분과 공유합니다. jQuery에 대한 일반적인 인터뷰 질문과 일반적인 모바일 질문이 모두에게 도움이 되기를 바랍니다.

관련 추천:2022 빅 프론트엔드 면접 질문 요약(모음)

jQuery 프론트엔드 인터뷰 - 모바일 자주 묻는 질문 포함

1. JQuery의 코드? 구현 원칙에 대해 간략하게 설명해주실 수 있나요?

jquery 소스 코드는 익명 함수의 자체 실행 환경에 캡슐화되어 변수의 전역 오염을 방지합니다. 그런 다음 창 개체 매개 변수를 전달하여 창 개체를 로컬 변수로 사용할 수 있습니다. 장점은 jquery 개체에서 창에 액세스할 때 범위 체인을 최상위 범위로 반환할 필요가 없으므로 창 개체에 더 빠르게 액세스할 수 있다는 것입니다. 마찬가지로, 정의되지 않은 매개변수를 전달하면 정의되지 않은 항목을 찾을 때 범위 체인이 단축될 수 있습니다. [추천 학습:jQuery 동영상 튜토리얼]

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

• jquery는 이름을 단축하기 위해 jquery.fn에 할당된 일부 프로토타입 속성과 메소드를 캡슐화합니다. .
• 자주 사용되는 배열이나 객체 메서드가 있는데, jQuery는 이를 로컬 변수로 저장하여 액세스 속도를 향상시킵니다.
• jquery로 구현된 체인 호출은 코드를 절약할 수 있고, 동일한 객체가 반환되므로 코드 효율성을 높일 수 있습니다.
• jquery의 장점은 연쇄 연산과 암시적 반복입니다

2. jQuery.fn의 init 메서드에서 반환되는 이 개체는 무엇을 참조합니까? 이것을 왜 반환합니까?

반환된 것은 현재 작업 후의 jquery 객체를 나타냅니다. jquery의 체인 작업을 구현하려면

3. 배열을 jquery에서 json 문자열로 변환한 다음 다시 변환하는 방법은 무엇인가요?

jquery 전역 메소드인 $.parseJSON

4. jQuery의 속성 복사(확장) 구현 원리와 전체 복사 구현 방법은 무엇인가요?

①, $.extendshallow copy in jQuery

$.extendshallow copy in jQuery, 객체 A를 복사할 때 객체 B는 A의 모든 필드를 복사합니다. 필드가 메모리 주소인 경우 B는 주소를 복사합니다. . 필드가 기본 유형인 경우 B는 해당 값을 복사합니다. 단점은 객체 B가 가리키는 메모리 주소를 변경하면 이 주소를 가리키는 객체 A의 필드도 변경된다는 것입니다.

$.extend(a,b)

②, $.extend deep copy in jQuery

$.extend deep copy in jQuery, 이 방법은 모든 데이터를 완전히 복사합니다. 장점은 B와 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])하나 이상의 다른 개체로 개체를 확장하고 확장된 개체를 반환합니다.jQuery.extend(target, object1, [objectN])用一个或多个其他对象来扩展一个对象，返回被扩展的对象。

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

• 结果：settings == { validate: true, limit: 5, name: “bar” }

②、jQuery.fn.extend(object);

• $.fn是什么?
• $.fn是指jQuery的命名空间，fn上的成员(方法function及属性property)，会对jQuery实例每一个有效。
• 查看jQuery代码，就不难发现。

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

• 原来jQuery.fn = jQuery.prototype

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

로그인 후 복사
결과: 설정 == { 유효성 검사: true, 제한: 5, 이름: "bar" }

$.fn이란 무엇입니까?
$.fn은 jQuery의 네임스페이스를 참조합니다. fn의 멤버(메서드 함수 및 속성 속성)는 각 jQuery 인스턴스에 유효합니다.

jQuery 코드를 보면 찾기 어렵지 않습니다.

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

로그인 후 복사

로그인 후 복사

jQuery.fn = jQuery.prototype

그래서 jQuery.prototype의 확장인데, jQuery 클래스에 "멤버 함수"를 추가하는 것입니다. jQuery 클래스의 인스턴스는 이 "멤버 함수"를 사용할 수 있습니다.

3, 차이

jQuery.fn.extend(object); jQuery 객체 메서드 확장

jQuery.extend는 jQuery 전역 메서드 확장6. 대기열은 어디에 사용될 수 있나요? jQuery의 핵심에는 큐 제어 메소드 세트가 있습니다. 이 메소드 세트는 queue()/dequeue()/clearQueue()의 세 가지 메소드로 구성됩니다. 연속적이고 순차적으로 실행되어야 하는 Ziru, animate() 메소드에서 주로 사용되는 ajax 및 기타 이벤트를 시간순으로 실행해야 합니다.

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

로그인 후 복사

로그인 후 복사

7. , Delegate(), on() Jquery의 차이점은 무엇입니까? jquery의 bind(), live() 및 Delegate()는 모두 를 기반으로 구현됩니다.

差别：

.bind()是直接绑定在元素上

차이점:

. 바인딩()은 요소에 직접 바인딩됩니다.

MethodDescription .bind()요소에 직접 바인딩됩니다 .live()는 버블링을 통해 요소에 바인딩됩니다. 문서 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前端教程）

위 내용은 일부 jQuery 기반 프런트엔드 인터뷰 요약 및 공유(모바일 터미널 FAQ 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!