96가지 기본 프론트엔드 JS 인터뷰 질문(답변 포함)

【관련 추천 : 프런트엔드 면접 질문】

1. 여러 가지 기본 데이터 유형? 값 유형과 참조 데이터 유형?

기본 데이터 유형: 정의되지 않음, Null, 부울, 숫자, 문자열
값 유형: 숫자, 부울, null, 정의되지 않음.
참조 유형: 객체, 배열, 함수.
스택 데이터 구조: 후입선출(LIFO)을 지원하는 집합입니다. 즉 나중에 삽입된 데이터를 먼저 꺼내는 것입니다.
JS 배열에는 다음과 같은 메소드가 제공되어 쉽게 사용할 수 있습니다. 스택 구현:
shift: 배열에서 첫 번째 요소를 제거하고 이 요소의 값을 반환합니다.
unshift: 배열의 시작 부분에 하나 이상의 요소를 추가하고 새 길이를 반환합니다.
push: 배열의 끝에 요소를 추가하고 새 길이를 반환합니다.
pop: 배열에서 마지막 요소를 제거하고 이를 반환합니다. 요소의 값.

2. 함수 선언 승격과 함수 선언 승격의 차이점은 무엇인가요?

(1) 변수 선언 승격: 실행 컨텍스트에 들어가면 변수 선언이 완료됩니다.
변수가 코드에 선언되어 있는 한, 선언된 위치에 관계없이 js 엔진은 해당 선언을 범위의 맨 위에 배치합니다.

(2) 함수 선언 승격: 코드를 실행하기 전에 읽혀집니다. 함수 선언은 함수 선언이 이를 호출하는 명령문 뒤에 배치될 수 있음을 의미합니다.
코드에서 함수가 선언되는 한, 선언된 위치에 관계없이 js 엔진은 해당 선언을 범위의 맨 위에 배치합니다.

(3) 변수 또는 함수 선언: 함수 선언은 변수 선언을 재정의합니다. 하지만 변수 할당을 덮어쓰지는 않습니다.
동일한 이름은 a, 즉 변수 선언 var a와 함수 선언 function a() {}가 있음을 식별합니다. 두 선언의 순서에 관계없이 함수 선언이 변수 선언을 덮어씁니다. 이때 a의 값은 함수 function a() {} 선언입니다. 참고: 변수 선언과 동시에 a가 초기화되거나 나중에 a에 값이 할당되면 이때의 값은 변수의 값이 됩니다. 예: var a; var c = 1; a = 1; function a() { return true; } console.log(a);

3. typeof가 반환하는 유형은 다음과 같습니다. 모든 문자 문자열 형식으로 함수의 유형을 결정할 수 있으므로 객체 유형이 아닌 객체를 결정할 때 더 편리합니다. 알려진 객체 유형을 결정하는 방법: object 유형이 뒤에 와야 하며 대소문자가 틀릴 수 없습니다. 이 방법은 일부 조건부 선택이나 분기에 적합합니다.

4. 비동기 프로그래밍?

방법 1: 콜백 함수, 장점은 간단하고 이해 및 배포가 쉽다는 점, 단점은 코드 읽기 및 유지 관리에 도움이 되지 않는다는 점, 다양한 부분이 고도로 결합되어 있다는 점(커플링) , 프로세스는 매우 혼란스러울 것이며 각 작업은 콜백 함수만 지정할 수 있습니다.
방법 2: 시간 모니터링은 여러 이벤트를 바인딩할 수 있고, 각 이벤트는 여러 콜백 함수를 지정할 수 있으며 "분리"될 수 있어 모듈화에 도움이 됩니다. 단점은 전체 프로그램이 이벤트 중심으로 이루어져야 하고 실행 프로세스가 매우 불분명해진다는 것입니다.

방법 3: 게시/구독, 본질적으로 "이벤트 청취"와 유사하지만 분명히 후자보다 더 좋습니다.

방법 4: Promises 개체는 비동기 프로그래밍을 위한 통합 인터페이스를 제공하기 위해 CommonJS 작업 그룹에서 제안한 사양입니다.
간단히 말하면 각 비동기 작업은 콜백 함수를 지정할 수 있는 then 메서드가 있는 Promise 객체를 반환한다는 아이디어입니다.


5. 이벤트 스트리밍? 이벤트가 터지고 있나요?

이벤트 흐름: 페이지에서 이벤트가 수신되는 순서입니다. 즉, 이벤트가 발생했을 때 이 이벤트가 전파되는 과정을 이벤트 흐름이라고 합니다.
IE의 이벤트 스트림을 이벤트 버블링이라고 합니다. 이벤트는 처음에 가장 구체적인 요소에 의해 수신된 다음 덜 구체적인 노드(문서)로 전파됩니다. HTML의 경우 요소가 이벤트를 생성하면 해당 이벤트를 상위 요소에 전달하고, 상위 요소가 이를 수신한 후 계속해서 상위 요소에 전달한 다음 문서에 전파합니다. Object(개인적으로 현재 브라우저를 window 개체로 테스트했는데 IE8 이하는 이렇지 않습니다

이벤트 캡처는 덜 구체적인 요소가 먼저 이벤트를 받아야 하고, 가장 구체적인 노드가 이벤트를 마지막으로 받아야 한다는 것입니다. 그들의 의도는 이전에 이벤트를 캡처하는 것입니다. 즉, 버블링 프로세스의 반대인 HTML의 클릭 이벤트를 예로 들면 문서 객체입니다(DOM 수준 사양에서는 전파가 문서에서 시작되어야 하지만 현재 브라우저는 window 객체에서 시작합니다). 먼저 클릭 이벤트를 수신한 다음 이벤트는 DOM 트리를 따라 이벤트의 실제 대상까지 아래쪽으로 전파됩니다.

window.clearInterval();
window.clearTimeout();

7. DOM 개체를 본문에 추가하는 방법은 무엇입니까? innerHTML과 innerText의 차이점은 무엇입니까? innerHTML: from object Html 태그를 포함하여 시작 위치부터 끝 ​​위치까지의 모든 콘텐츠입니다.
innerText: 시작 위치부터 끝 ​​위치까지의 콘텐츠이지만 Html 태그가 제거됩니다.

5개의 창 개체 및 속성에 대한 간략한 설명

Member 개체
window.event Window.document Window.history
window.screen Window.navigator Window .external
Window 개체의 속성은 다음과 같습니다.
window //창 자체
window.self //이 창 참조 window=window.self
window.name //창 이름 지정
window.defaultStatus //설정 창 상태 표시줄 정보
window.location //URL 주소, 이 속성을 사용하면 새 페이지를 열 수 있습니다


8. 데이터 지속성 기술(ajax)을 간략하게 설명합니다

1) js 이벤트 클라이언트에 의해 생성2) XMLHttpRequest 객체 생성
3) XMLHttpRequest 구성

4) AJAX 엔진을 통해 비동기 요청 보내기

5) 서버가 요청을 수신하고 요청을 처리하여 html 또는 xml 콘텐츠 반환
6) XML 호출 응답 내용을 처리하는 콜백()
7) 부분 페이지 새로 고침


9. 콜백 함수?

콜백 함수는 함수 포인터를 통해 호출되는 함수입니다. 함수 포인터(주소)를 다른 함수에 매개변수로 전달하고 이 포인터가 가리키는 함수를 호출하는 데 사용되는 경우 이를 콜백 함수라고 합니다. 콜백 함수는 함수 구현자가 직접 호출하는 것이 아니라 특정 이벤트나 조건이 발생했을 때 상대방이 해당 이벤트나 조건에 대응하기 위해 호출하는 함수이다.

10. 클로저란 무엇인가요?* 스택 오버플로와 스택 오버플로의 차이점은 무엇인가요? 메모리 누수는 무엇입니까? 메모리 누수를 일으키는 작업은 무엇입니까? 메모리 누수를 방지하는 방법은 무엇입니까?

클로저: 다른 함수의 내부 변수를 읽을 수 있는 함수입니다. 스택 오버플로: 스택에 할당된 로컬 데이터 블록의 크기에 관계없이 너무 많은 데이터가 데이터 블록에 기록되어 데이터가 범위를 벗어나 다른 데이터를 덮어쓰게 됩니다. 재귀로 인해 발생하는 경우가 많습니다.
메모리 누수란 동적 저장소를 사용하여 함수 메모리 공간을 할당하지만 사용 후 해제하지 않아 메모리 장치가 항상 점유되는 것을 의미합니다. 프로그램이 끝날 때까지. 더 이상 소유하지 않거나 필요하지 않게 된 이후에도 살아남는 모든 물건을 의미합니다.

메모리 누수 원인:
setTimeout의 첫 번째 매개변수가 함수 대신 문자열을 사용하면 메모리 누수가 발생합니다.
클로저, 콘솔 로그, 루프(두 객체가 서로 참조하고 서로 유지하면 루프가 생성됨)
메모리 누수 방지:
1. 동적으로 이벤트를 바인딩하지 마세요.
2. 동적으로 제거될 DOM에 대한 이벤트 및 해당 이벤트를 수신하기 위해 상위 컨테이너에서 이벤트를 사용합니다.
3. 위의 원칙을 위반하려면 소멸 메소드를 제공해야 합니다. DOM이 제거된 후에도 이벤트가 제거됩니다. 더 나은 Backbone의 소스 코드를 참조하세요.
4. DOM 생성이 적고 이벤트 바인딩이 적습니다.


11. 일상 업무에서 데이터와 상호 작용하는 방법은 무엇입니까? 백그라운드에서 데이터를 제공하지 않는 경우 어떻게 해야 합니까?

백그라운드에서 반환된 형식과 일치하지 않는 경우 인터페이스 문서를 작성하고 데이터 인터페이스 구현을 제공합니다. 프런트 엔드는 Ajax 액세스를 통해 데이터 상호 작용을 실현합니다. 정적 데이터를 제공하거나 데이터가 없을 때 자체 모의 데이터를 정의하기 위해 배경을 찾습니다.
매핑할 매핑 파일을 작성합니다. 반환된 데이터가 균일하지 않을 때의 데이터입니다.

12 Ajax 실행 과정을 간략하게 설명해주세요

基本步骤：var xhr =null;//创建对象 
if(window.XMLHttpRequest){
       xhr = new XMLHttpRequest();}else{
       xhr = new ActiveXObject("Microsoft.XMLHTTP");}xhr.open(“方式”,”地址”,”标志位”);//初始化请求 
   xhr.setRequestHeader(“”,””);//设置http头信息 
xhr.onreadystatechange =function(){}//指定回调函数 
xhr.send();//发送请求

13. 자체 실행 기능은 어떤 용도로 사용되나요? 장점?

자체 실행 기능: 1. 익명 함수를 선언합니다. 2. 이 익명 함수를 즉시 호출합니다. 기능: 독립적인 범위를 만듭니다.

이점: 다양한 js 라이브러리와의 충돌을 피하기 위해 변수가 전역 세계로 확산되는 것을 방지합니다. 오염을 방지하기 위해 범위를 격리하거나, 참조 변수가 해제되는 것을 방지하는 폐쇄를 방지하기 위해 범위 체인을 자릅니다. 즉시 실행 기능을 활용하여 필요한 비즈니스 기능이나 개체를 반환하고 매번 조건부 판단을 통한 처리를 방지합니다

시나리오: 일반적으로 프레임워크, 플러그인 및 기타 시나리오에서 사용됩니다


14.html과 xhtml의 차이점은 무엇인가요?

HTML 기본적인 WEB 웹페이지 디자인 언어이고, XHTML은 XML 기반의 마크업 언어입니다. 1.XHTML 요소는 올바르게 중첩되어야 합니다.
2.XHTML 요소는 닫혀 있어야 합니다.

3. 태그 이름은 소문자여야 합니다.

4. 빈 태그도 닫아야 합니다.
5.XHTML 문서에는 루트 요소가 있어야 합니다.


15. 생성자란 무엇인가요? 일반 기능과의 차이점은 무엇인가요?

构造函数：是一种特殊的方法、主要用来创建对象时初始化对象，总与new运算符一起使用，创建对象的语句中构造函数的函数名必须与类名完全相同。
与普通函数相比只能由new关键字调用，构造函数是类的标示

16. 通过new创建一个对象的时候，函数内部有哪些改变

function Person(){}Person.prototype.friend = [];Person.prototype.name = '';// var a = new Person();// a.friend[0] = '王琦';// a.name = '程娇';// var b = new Person();// b.friend？// b.name?

1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
2、属性和方法被加入到 this 引用的对象中。
3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。

17.事件委托？有什么好处?

（1）利用冒泡的原理，把事件加到父级上，触发执行效果
（2）好处：新添加的元素还会有之前的事件；提高性能。

18.window.onload ==? DOMContentLoaded ?

一般情况下，DOMContentLoaded事件要在window.onload之前执行，当DOM树构建完成的时候就会执行DOMContentLoaded事件，而window.onload是在页面载入完成的时候，才执行，这其中包括图片等元素。大多数时候我们只是想在DOM树构建完成后，绑定事件到元素，我们并不需要图片元素，加上有时候加载外域图片的速度非常缓慢。

19.节点类型?判断当前节点类型?

1. 元素节点                        
2. 属性节点                        
3. 文本节点                        
8. 注释节点                        
9. 文档节点                        
通过nodeObject.nodeType判断节点类型：其中，nodeObject 为DOM节点（节点对象）。该属性返回以数字表示的节点类型，例如，元素节点返回 1，属性节点返回 2 。

20.如何合并两个数组？数组删除一个元素?

//三种方法。 （1）var arr1=[1,2,3];
               var arr2=[4,5,6];
               arr1 = arr1.concat(arr2);
               console.log(arr1); 
 （2）var arr1=[1,2,3];
               var arr2=[4,5,6];
               Array.prototype.push.apply(arr1,arr2);
               console.log(arr1);
 （3）var arr1=[1,2,3];
               var arr2=[4,5,6];
               for (var i=0; i <p><strong>21.强制转换 显式转换 隐式转换?</strong></p><pre class="brush:php;toolbar:false">//强制类型转换：
Boolean(0)                // => false - 零
           Boolean(new object())   // => true - 对象
               Number(undefined)       // =>   NaN
               Number(null)              // => 0
               String(null)              // => "null"
parseInt( )
parseFloat( )
JSON.parse( )
JSON.stringify ( )

隐式类型转换：
在使用算术运算符时，运算符两边的数据类型可以是任意的，比如，一个字符串可以和数字相加。之所以不同的数据类型之间可以做运算，是因为JavaScript引擎在运算之前会悄悄的把他们进行了隐式类型转换的
（例如：x+""         //等价于String(x)
              +x                 //等价于Number(x)
              x-0         //同上
              !!x         //等价于Boolean(x),是双叹号）

显式转换：
如果程序要求一定要将某一类型的数据转换为另一种类型，则可以利用强制类型转换运算符进行转换，这种强制转换过程称为显示转换。
显示转换是你定义让这个值类型转换成你要用的值类型，是底到高的转换。例 int 到float就可以直接转，int i=5,想把他转换成char类型，就用显式转换（char）i

22. Jq中如何实现多库并存?

Noconfict 多库共存就是“$ ”符号的冲突。

方法一： 利用jQuery的实用函数$.noConflict();这个函数归还$的名称控制权给另一个库，因此可以在页面上使用其他库。这时，我们可以用"jQuery "这个名称调用jQuery的功能。 $.noConflict();  
jQuery('#id').hide();    
.....
//或者给jQuery一个别名  
var $j=jQuery  
$j('#id').hide();    
.....

方法二： (function($){})(jQuery)

方法三： jQuery(function($){})
通过传递一个函数作为jQuery的参数，因此把这个函数声明为就绪函数。 我们声明$为就绪函数的参数，因为jQuery总是吧jQuery对象的引用作为第一个参数传递，所以就保证了函数的执行。

23.Jq中get和eq有什么区别？

get() :取得其中一个匹配的元素。num表示取得第几个匹配的元素，get多针对集合元素，返回的是DOM对象组成的数组 eq():获取第N个元素，下标都是从0开始，返回的是一个JQuery对象

24.如何通过原生js 判断一个元素当前是显示还是隐藏状态?

if( document.getElementById("div").css("display")==='none')
if( document.getElementById("div").css("display")==='block')
$("#div").is(":hidden"); // 判断是否隐藏
$("#div").is(":visible")

25.Jq如何判断元素显示隐藏？

//第一种：使用CSS属性 
var display =$('#id').css('display'); 
if(display == 'none'){    alert("我是隐藏的！"); }
//第二种：使用jquery内置选择器 
<div> <p>仅仅是测试所用</p> </div>
if($("#test").is(":hidden")){        
	$("#test").show();    
	//如果元素为隐藏,则将它显现 
}else{       
	$("#test").hide();     
	//如果元素为显现,则将其隐藏 
}
//第三种：jQuery判断元素是否显示 是否隐藏
var node=$('#id');
if(node.is(':hidden')){　　//如果node是隐藏的则显示node元素，否则隐藏
　　node.show();　
}else{
　　node.hide();
}

26.移动端上什么是点击穿透?

点击穿透现象有3种：
点击穿透问题：点击蒙层（mask）上的关闭按钮，蒙层消失后发现触发了按钮下面元素的click事件跨页面点击穿透问题：如果按钮下面恰好是一个有href属性的a标签，那么页面就会发生跳转另一种跨页面点击穿透问题：这次没有mask了，直接点击页内按钮跳转至新页，然后发现新页面中对应位置元素的click事件被触发了

解决方案：
1、只用touch
最简单的解决方案，完美解决点击穿透问题
把页面内所有click全部换成touch事件（ touchstart 、’touchend’、’tap’）

2、只用click
下下策，因为会带来300ms延迟，页面内任何一个自定义交互都将增加300毫秒延迟

3、tap后延迟350ms再隐藏mask
改动最小，缺点是隐藏mask变慢了，350ms还是能感觉到慢的

4、pointer-events
比较麻烦且有缺陷， 不建议使用mask隐藏后，给按钮下面元素添上 pointer-events: none; 样式，让click穿过去，350ms后去掉这个样式，恢复响应缺陷是mask消失后的的350ms内，用户可以看到按钮下面的元素点着没反应，如果用户手速很快的话一定会发现

27.Jq绑定事件的几种方式？on bind ?

jQuery中提供了四种事件监听方式，分别是bind、live、delegate、on，对应的解除监听的函数分别是unbind、die、undelegate、off

Bind( )是使用频率较高的一种，作用就是在选择到的元素上绑定特定事件类型的监听函数;

Live( )可以对后生成的元素也可以绑定相应的事件,处理机制就是把事件绑定在DOM树的根节点上，而不是直接绑定在某个元素上;

Delegate( )采用了事件委托的概念，不是直接为子元素绑定事件，而是为其父元素（或祖先元素也可）绑定事件，当在p内任意元素上点击时，事件会一层层从event target向上冒泡，直至到达你为其绑定事件的元素；

on( )方法可以绑定动态添加到页面元素的事件，on()方法绑定事件可以提升效率；

28.Jq中如何将一个jq对象转化为dom对象？

方法一：
jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。
如：var $v =$("#v") ; //jQuery对象
var v=$v[0]; //DOM对象
alert(v.checked) //检测这个checkbox是否被选中

方法二：
jQuery本身提供，通过.get(index)方法，得到相应的DOM对象
如：var $v=$("#v"); //jQuery对象
var v=$v.get(0); //DOM对象
alert(v.checked) //检测这个checkbox是否被选中

29.Jq中有几种选择器?分别是什么?

层叠选择器、基本过滤选择器、内容过滤选择器、可视化过滤选择器、属性过滤选择器、子元素过滤选择器、表单元素选择器、表单元素过滤选择器

30.Jq中怎么样编写插件?

//第一种是类级别的插件开发：//1.1 添加一个新的全局函数 添加一个全局函数，我们只需如下定义： 
jQuery.foo = function() {
     alert('This is a test. This is only a test.');  };   //1.2 增加多个全局函数 添加多个全局函数，可采用如下定义： 
jQuery.foo = function() {
       alert('This is a test. This is only a test.');  };  jQuery.bar = function(param) {
      alert('This function takes a parameter, which is "' + param + '".');  };   调用时和一个函数的一样的:jQuery.foo();jQuery.bar();或者$.foo();$.bar('bar');//1.3 使用jQuery.extend(object);　 
jQuery.extend({
      foo: function() {
          alert('This is a test. This is only a test.');
        },
      bar: function(param) {
          alert('This function takes a parameter, which is "' + param +'".');
        }
     }); //1.4 使用命名空间// 虽然在jQuery命名空间中，我们禁止使用了大量的javaScript函数名和变量名。// 但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突，因此我们习惯将一些方法// 封装到另一个自定义的命名空间。jQuery.myPlugin = {         foo:function() {         
  alert('This is a test. This is only a test.');         
 },         
 bar:function(param) {         
  alert('This function takes a parameter, which is "' + param + '".');   
 }        }; //采用命名空间的函数仍然是全局函数，调用时采用的方法： 
$.myPlugin.foo();        $.myPlugin.bar('baz');//通过这个技巧（使用独立的插件名），我们可以避免命名空间内函数的冲突。//第二种是对象级别的插件开发//形式1： 
(function($){    
  $.fn.extend({    
   pluginName:function(opt,callback){    
             // Our plugin implementation code goes here.      
   }    
  })    })(jQuery);  //形式2：(function($) {      
   $.fn.pluginName = function() {    
        // Our plugin implementation code goes here.    
   };     })(jQuery);//形参是$，函数定义完成之后,把jQuery这个实参传递进去.立即调用执行。//这样的好处是,我们在写jQuery插件时,也可以使用$这个别名,而不会与prototype引起冲突

31.$('p+.ab')和$('.ab+p') 哪个效率高？

$('p+.ab')效率高

32.$.map和$.each有什么区别

map()方法主要用来遍历操作数组和对象，会返回一个新的数组。$.map()方法适用于将数组或对象每个项目新阵列映射到一个新数组的函数；
each()主要用于遍历jquery对象，返回的是原来的数组，并不会新创建一个数组。

33.编写一个 getElementsByClassName 封装函数?

   <input>   <script> window.onload = function(){ //方法一         
    var Opt = document.getElementById(&#39;sub&#39;);
    var getClass = function(className,tagName){
        if(document.getElementsByTagName){
            var Inp = document.getElementsByTagName(tagName);
            for(var i=0; i<Inp.length; i++){
                if((new RegExp(&#39;(\\s|^)&#39; +className +&#39;(\\s|$)&#39;)).test(Inp[i].className)){
                      return Inp[i];
                    }
                }
            }else if(document.getElementsByClassName){
                return document.getElementsByClassName(className);
        }
    }                 //方法二    var aa = getClass("confirm", "input");
        function getClass(className, targetName){
            var ele = [];
            var all = document.getElementsByTagName(targetName || "*");
            for(var i=0; i<all.length; i++){
                if(all[i].className.match(new RegExp(&#39;(\\s|^)&#39;+confirm+&#39;(\\s|$)&#39;))){    
                    ele[ele.length] = all[i];
                }
            }
            return ele;
        }//方法三    function getObjsByClass(tagName, className){
           if(document.getElementsByClassName){
               alert("document.getElementsByClassName");
               return document.getElementsByClassName(className);
           }else{
               var el = [];
               var _el = document.getElementsByTagName(tagName);
               for(var i=0; i<_el.length; i++){
                   if(_el[i].className.indexOf(className) > -1){
                       alert(_el[i]);
                       el[_el.length] = _el[i];
                   }
               }
               alert(el);
               return el;
           }
       }
   }
 </script>

34.简述下工作流程

이전 회사에서의 업무 프로세스는 대략 이렇습니다. 회사 최종 회의가 끝난 후 간단한 기술 논의가 진행된 후 프론트엔드에서 사전 기술 준비를 진행했습니다. 프런트 엔드 커터는 psd 디자인 초안을 자르고 CSS 파일을 통합합니다. 우리는 주로 프론트 엔드 프레임워크(대규모 프로젝트) 구축, js 비즈니스 및 데이터 지속성 작업 작성을 포함하는 JS 부분을 작성하고, js 플러그인을 작성하고 쉽게 사용할 수 있도록 캡슐화하며 JS 프론트 엔드 구성 요소를 작성합니다. 최종적으로 완성된 JS 부분을 커터에서 제공하는 HTML 페이지와 통합합니다. 마지막으로 완성된 페이지에서 기능 테스트, 페이지 호환성, 제품 복원을 수행합니다. 그런 다음 제품을 밀봉하고 테스트를 위해 제출합니다. BUG가 발생하면 수정을 위해 개발자에게 반환된 후 테스트를 위해 제출됩니다. 마지막으로 테스트가 성공하면 버전이 보관됩니다. 온라인 테스트를 수행하려면 모든 프로그램이 온라인 상태가 될 때까지 기다리십시오.

35. 일반적으로 사용되는 버전 관리 도구는 무엇입니까? svn 잠금의 목적: 여러 사람이 동시에 동일한 파일에 대한 변경 사항을 덮어쓰는 것을 방지하려면 버전 관리 시스템에 충돌 처리 메커니즘 세트.

svn 잠금에는 두 가지 전략이 있습니다. 낙관적 잠금: 체크아웃된 모든 파일을 읽고 쓸 수 있습니다. 파일을 수정한 후 체크인할 때 먼저 파일을 업데이트하라는 메시지가 표시됩니다. local 파일. 버전 제어 시스템은 로컬 수정 사항을 덮어쓰지 않지만 충돌을 병합하고 체크인할 수 있게 해줍니다.

엄격한 잠금: 체크아웃된 모든 파일은 읽기 전용입니다. 파일을 수정하려면 파일 잠금을 얻어야 합니다. 다른 사람이 파일에 잠금을 설정하지 않은 경우 버전 제어 시스템이 해당 파일을 사용자에게 승인합니다. 잠그고 파일을 편집 가능하게 만듭니다.

svn에 대한 두 가지 잠금 단계: 낙관적 잠금: 잠그려는 파일을 선택한 다음 TortoiseSVN 메뉴를 마우스 오른쪽 버튼으로 클릭하고 잠금 가져오기를 선택합니다.

엄격한 잠금: 엄격하게 잠그려는 파일이나 디렉터리를 마우스 오른쪽 버튼으로 클릭하고 TortoiseSVN 속성 메뉴를 사용한 다음 새 속성을 클릭하고 잠가야 하는 파일이나 디렉터리를 선택합니다.


36. git과 svn의 차이점은 무엇인가요?

SVN은 버전 라이브러리가 중앙 서버에 집중되어 있기 때문에 먼저 시작해야 합니다. 중앙서버는 어디에서 최신 버전을 받아 작업을 할 수 있나요? 작업이 끝나면 지금까지 진행한 작업을 중앙서버로 푸시해야 합니다. 중앙 집중식 버전 관리 시스템이 작동하려면 인터넷에 연결되어 있어야 합니다. LAN에 있으면 괜찮고, 대역폭도 충분히 크고, 인터넷에 있으면 속도도 충분히 빠릅니다. 속도가 느려서 혼란스러울 것입니다.

Git은 분산 버전 관리 시스템이므로 중앙 서버가 없습니다. 모든 사람의 컴퓨터는 완전한 버전 라이브러리입니다. 이렇게 하면 버전이 모두 있기 때문에 작업할 때 인터넷에 연결할 필요가 없습니다. 자신의 컴퓨터에서. 모든 사람의 컴퓨터에는 완전한 버전 라이브러리가 있는데 어떻게 여러 사람이 공동 작업을 할 수 있습니까? 예를 들어, 귀하가 귀하의 컴퓨터에서 파일 A를 수정했고 다른 사람도 귀하의 컴퓨터에서 파일 A를 수정한 경우, 수정 사항을 서로 푸시하기만 하면 서로의 수정 사항을 볼 수 있습니다.

37. jquery와 zepto의 차이점은 무엇인가요?

1. Zepto에는 터치스크린 상호작용에 사용할 수 있는 몇 가지 기본 터치 이벤트가 있습니다(Zepto는 IE를 지원하지 않습니다). browsers 네, 이것은 크로스 브라우저 문제에 대한 Zepto 개발자인 Thomas Fucks의 실수가 아니라, jQuery 팀이 더 이상 이전 버전을 지원하지 않는 것처럼 파일 크기를 줄이기 위해 신중하게 고려한 후에 내린 결정입니다. 버전 2.0에서는 IE(6 7 8)와 동일합니다. Zepto는 jQuery 구문을 사용하기 때문에 설명서에서 jQuery를 IE의 대체 라이브러리로 권장합니다. 그렇게 하면 프로그램이 IE에서 계속 실행될 수 있고 다른 브라우저에서는 Zepto의 파일 크기 이점을 누릴 수 있습니다. 그러나 두 API는 완전히 호환되지 않으므로 이 방법을 사용할 때는 주의하고 충분히 조사하십시오.

2. Dom 작업의 차이점: id를 추가하면 jQuery가 적용되지 않지만 Zepto는 적용됩니다.

3.zepto는 주로 모바일 장치에서 사용되며 최신 브라우저만 지원합니다. 장점은 코드 크기가 더 작고 성능이 더 좋다는 것입니다.
jquery는 주로 호환성이 좋고 다양한 PC와 휴대폰에서 실행이 가능합니다. 장점은 코드량이 많고, 호환성에 비해 성능이 좋지 않다는 점입니다.


38. $(function(){}) 및 window.onload 및 $(document).ready(function(){})

window.onload: 외부 참조 파일, 이미지 등을 포함한 페이지의 모든 요소가 로드되었을 때 함수 내에서 함수를 실행하는 데 사용됩니다. 로드 메소드는 한 번만 실행할 수 있습니다. js 파일에 여러 메소드를 작성한 경우 마지막 메소드만 실행할 수 있습니다.

$(document).ready(function(){}) 및 $(function(){})은 둘 다 페이지의 표준 DOM 요소가 DOM 트리로 구문 분석된 후 내부 함수를 실행하는 데 사용됩니다. 이 함수는 js 파일에 여러 번 작성할 수 있으며, 모든 동작 함수가 실행되므로 여러 사람이 작성한 js에 큰 이점이 있습니다. 또한, $(document).ready() 함수는 HMTL 구조가 로드된 후에 실행될 수 있으며, 실행 전에 대용량 파일 로딩이나 존재하지 않는 연결 등 시간이 많이 걸리는 작업이 완료될 때까지 기다릴 필요가 없습니다. 매우 효율적입니다.

39 Jq에서 attr과 prop의 차이점은 무엇인가요

HTML 요소 자체에 고유한 속성은 처리 시 prop 메소드를 사용하세요.
HTML 요소의 사용자 정의된 DOM 속성을 처리하려면 attr 메소드를 사용하세요.

40. 프로토타입을 정의할 때와 이것의 차이점을 간략하게 설명하시겠습니까?

이것은 현재 개체를 나타냅니다. 전역 범위에서 사용되는 경우 현재 페이지 개체 창을 참조합니다. 함수에서 사용되는 경우 이 함수가 호출되는 개체를 기반으로 합니다. 런타임에. 또한 함수에서 this의 특정 포인터를 변경하기 위해 apply와 call이라는 두 개의 전역 메서드를 사용할 수도 있습니다.

Prototype은 기본적으로 JavaScript 객체입니다. 그리고 모든 함수에는 기본 프로토타입 속성이 있습니다.

프로토타입에 정의된 속성 메서드는 모든 인스턴스에서 공유됩니다. 단일 인스턴스가 프로토타입의 속성을 수정하면 다른 모든 인스턴스에도 영향을 미칩니다.

41. 사전 컴파일된 음성이란 무엇입니까?

Sass는 프로그래밍 방식으로 CSS 코드를 생성하는 CSS 전처리기 언어입니다. 프로그래밍 가능하기 때문에 제어 유연성과 자유도가 높아 CSS 코드를 직접 작성하기 어려운 일부 코드를 쉽게 구현할 수 있습니다.

동시에 Sass는 CSS를 생성하는 언어이기 때문에 작성된 Sass 파일을 직접 사용할 수 없습니다. 컴파일러를 통해 CSS 파일로 컴파일해야 사용할 수 있습니다.

CSS 전처리기는 브라우저 호환성 문제를 고려하지 않고 CSS에 일부 프로그래밍 기능을 추가하는 데 사용되는 언어입니다. 예를 들어 CSS에서 프로그래밍 언어로 변수, 간단한 프로그램 논리, 함수 등을 사용할 수 있습니다. CSS는 더 간결하고, 적응성이 뛰어나며, 코드는 더 직관적입니다. 그 외에도 많은 이점이 있습니다. 가장 일반적으로 사용되는 CSS 전처리기는 sass, less css 및 stylus입니다.

42.ajax 및 jsonp?

ajax와 jsonp의 차이점:
유사점: 둘 다 URL을 요청합니다.
차이점: ajax의 핵심은 xmlHttpRequest를 통해 콘텐츠를 얻는 것입니다.
jsonp의 핵심은 js를 호출하기 위해 <script> 서버에서 제공하는 스크립트입니다. </script>

43.ajax 실행 프로세스?

1. XMLHttpRequest 객체를 생성합니다. 즉, 비동기 호출 객체를 생성합니다
2. 새로운 HTTP 요청을 생성하고 HTTP 요청의 메소드, URL 및 확인 정보를 지정합니다.3. HTTP 요청 상태 변경
4. HTTP 요청 보내기
5. 비동기 호출로 반환된 데이터 가져오기
6. JavaScript 및 DOM을 사용하여 부분 새로 고침 구현

44. readyState는 현재 XMLHttpRequest 객체의 상태를 식별하는 데 사용되는 XMLHttpRequest 객체의 속성입니다.

45.readystate 0~4

0: 초기화되지 않은 상태: 이때 XMLHttpRequest 객체가 생성되었습니다. 1: Ready to send 상태: 이때 XMLHttpRequest 객체의 open 메소드가 호출되었으며, XMLHttpRequest 객체는 서버에 요청을 보낼 준비가 되었습니다. 2: 전송 상태: 현재 send 메소드를 통해 서버에 요청이 전송되었지만 아직 응답을 받지 못했습니다.

3: 수신 상태 : 이때 HTTP 응답 헤더 정보까지 수신되었으나 메시지 본문 부분은 완전히 수신되지 않았습니다

4: 응답 완료 상태: 이때 HTTP 응답 수신이 완료되었습니다


46 . 몇 가지 http 프로토콜 상태 코드를 말해 보세요.

200, 201, 302, 304, 400, 404, 500200: 요청이 성공했습니다.

201: 요청이 성공했고 서버가 새 리소스를 생성했습니다.

302: 서버는 현재 다른 위치에 있는 웹페이지의 요청에 응답하고 있지만 요청자는 향후 요청에 응답하기 위해 계속 원래 위치를 사용해야 합니다.
304: 요청한 웹페이지는 마지막 요청 이후 수정되지 않았습니다. 서버가 이 응답을 반환하면 웹페이지 콘텐츠가 반환되지 않습니다.
400: 서버가 요청 구문을 이해하지 못합니다.
404: 요청한 리소스(웹페이지 등)가 존재하지 않습니다.
500: 내부 서버 오류


47. 이전 프로젝트는 무엇입니까? 귀하의 주요 책임은 무엇입니까? 장바구니 프로세스?

어떤 기능 모듈이 주로 담당하는지 이야기해 보겠습니다.

1) 상품 모듈:
1. 상품 목록: 상품 정렬, 상품 필터링, 상품 필터링, 상품 조회, 상품 추천
2. 상세 상품 평가 A/S 유지보수

2) 장바구니 모듈 : 품목번호, 수량, 가격, 총액, 배송비, 배송 옵션, 배송 총액, 장바구니 옵션 삭제, 수량 업데이트, 결제, 쇼핑 계속, 제품 설명, 인벤토리 정보

48. sessionStorage, localstroage 및 쿠키의 관계는 무엇입니까? 쿠키는 최대 몇 바이트를 저장할 수 있나요? 세 가지의 공통점은 모두 브라우저 측에 저장된다는 것입니다. 기원.

차이점:

1. 쿠키는 브라우저와 서버 사이를 오가며 전달됩니다. SessionStorage와 localStorage는 데이터를 서버에 자동으로 보내지 않고 로컬에만 저장합니다

2. 저장 크기 제한도 다르며 쿠키 데이터는 4k를 초과할 수 없으며 sessionStorage와 localStorage는 쿠키보다 훨씬 크며 5M에 도달할 수 있습니다

3. 데이터 유효기간이 다릅니다. sessionStorage: 현재 브라우저 창을 닫을 때까지만 유효하며 당연히 지속되지 않습니다. localStorage: 항상 유효하며 창이나 브라우저를 닫아도 저장됩니다. 영구 데이터로 사용되며 쿠키는 쿠키에만 설정됩니다. 창이나 브라우저가 닫혀도 만료 시간까지 유효합니다. 4. 동일한 페이지에서도 다른 범위의 sessionStorage는 공유되지 않습니다. 즉, 데이터는 공유되지 않습니다. localStorage는 동일한 출처의 모든 창에서 공유됩니다(즉, 데이터 공유).


49. Ajax에서 get과 post의 차이점은 무엇인가요?

get과 post는 모두 데이터 제출 방법입니다.

get의 데이터는 URL의 물음표 뒤에 이어진 문자열을 통해 전달됩니다. Post는 HTTP 패키지 본문을 통해 데이터를 전송합니다. get의 전송량은 제한되어 있지만 게시물에는 제한이 없습니다. get의 보안은 post만큼 높지 않을 수 있으므로 일반적으로 get을 사용하여 데이터를 얻고, post는 일반적으로 데이터를 수정하는 데 사용됩니다.

50.Gc 메커니즘이 무엇인가요? 클로저가 변수와 함수를 재활용하지 않는 이유는 무엇입니까?

1. Gc 가비지 수집 메커니즘;

2. 외부 변수는 해제되지 않으므로 가리키는 큰 함수 내의 작은 함수도 해제될 수 없습니다.

51 객체지향에 대해 어떻게 이해하는지 간략하게 설명해주세요.

모든 것이 객체입니다. 객체를 클래스로 추상화한다는 것은 객체의 정적 특성과 동적 특성을 속성과 메서드로 추상화하는 것입니다. 즉, 사물의 클래스에 대한 알고리즘과 데이터 구조를 클래스에 캡슐화하는 것입니다. . 프로그램은 여러 개체로 구성되며 개체 간의 통신이 가능합니다.

객체 지향에는 캡슐화, 상속 및 다형성이 있습니다. 캡슐화: 노출할 필요가 없는 세부 사항을 객체 내부에 숨기므로 내부 세부 사항의 변경 사항은 외부 세계와 분리되고 통신용 인터페이스에만 의존하게 되므로 상속을 통해 프로그래밍의 복잡성이 줄어듭니다. 파생 클래스에서 비공개 메서드와 공용 속성을 가져오는 지루한 작업은 인터페이스와 런타임 유형 바인딩 메커니즘을 상속하고 구현하여 생성된 다형성을 통해 다양한 클래스에서 생성된 개체를 사용할 수 있습니다. 동일한 메시지에 다르게 응답하면 코드의 다양성이 크게 향상됩니다.

간단히 말하면, 객체 지향 기능은 대규모 프로그램의 재사용성과 유지 관리성을 향상시킵니다.


52. 이는 다양한 시나리오에서 무엇을 의미합니까?

(1) function a(){ this ?} //This: windows를 가리킵니다

(2) function b(){ return function(){ this ?}}b()() // This: windows

(3) function c(){ return {s:function(){this}}}c().s(); //This: 런타임 바인딩 특성으로 인해 object

를 가리킵니다. JavaScript에서 이것의 의미는 훨씬 더 풍부합니다. 전역 개체, 현재 개체 또는 모든 개체가 될 수 있으며 모두 함수가 호출되는 방식에 따라 다릅니다.


53. 데이터 검증은 어떻게 처리하나요? jquery.validate?

일반 용어로는 데이터의 무결성을 보장하기 위해 지정된 알고리즘을 사용하여 원본 데이터에 대해 계산된 검사 값입니다. 수신자는 동일한 알고리즘을 사용하여 확인 값을 계산합니다. 데이터와 함께 제공되는 확인 값과 동일하면 데이터가 완료되었음을 의미합니다.

정규식을 사용하여 처리합니다.jquery.validate: 양식 유효성 검사 플러그인

54. 로그인 계정 비밀번호를 암호화하는 방법은 무엇입니까?

Md5

55 jq에서는 마우스오버 마우스, 마우스아웃 마우스리브 및 호버 기능이 있습니다. 연결?

mouseenter与mouseover：
不论鼠标指针穿过被选中元素或其子元素，都会触发mouseover事件。
只有在鼠标指针穿过被选元素时，才会触发mouseentr事件。

mouseout与mouseleave：
不论鼠标离开被选元素还是任何子元素，都会触发mouseout事件。
只有在鼠标指针离开被选元素时，才会触发mouseleave事件。

hover:
hover是一个符合方法，相当于mouseenter+mouseleave。

56.jsonp原理？ 缺点?

工作原理：使用script标签实现跨域访问，可在url中指定回调函数，获取JSON数据并在指定的回调函数中执行jquery实现jsop。

缺点：只支持GET方式的jsonp实现，是一种脚本注入行为存在一定的安全隐患。如果返回的数据格式有问题或者返回失败了，并不会报错。

57.除了jsonp 还有什么跨域方式

javascript跨域有两种情况：
1、基于同一父域的子域之间，如：http://a.c.com和http://b.c.com
2、基于不同的父域之间，如：http://www.a.com和http://www.b.com
3、端口的不同，如：http://www.a.com:8080和http://www.a.com:8088
4、协议不同，如：http://www.a.com和https://www.a.com

对于情况3和4，需要通过后台proxy来解决，具体方式如下：
a、在发起方的域下创建proxy程序
b、发起方的js调用本域下的proxy程序
c、proxy将请求发送给接收方并获取相应数据
d、proxy将获得的数据返回给发起方的js

代码和ajax调用一致，其实这种方式就是通过ajax进行调用的
而情况1和2除了通过后台proxy这种方式外，还可以有多种办法来解决：
1、document.domain+iframe（只能解决情况1）：
a、在发起方页面和接收方页面设置document.domain，并将值设为父域的主域名(window.location.hostname)
b、在发起方页面创建一个隐藏的iframe，iframe的源是接收方页面
c、根据浏览器的不同，通过iframe.contentDocument || iframe.contentWindow.document来获得接收方页面的内容
d、通过获得的接收方页面的内容来与接收方进行交互
这种方法有个缺点，就是当一个域被攻击时，另一个域会有安全漏洞出现。

58.如何使用storage 对js文件进行缓存

由于sessionStorage - 针对一个 session 的数据存储，所以我们一般利用localStorage储存js文件，只有在第一次访问该页面的时候加载js文件，以后在访问的时候加载本地localStorage执行

59.如何确保ajax或连接不走缓存路径

在Ajax中使用Get请求数据不会有页面缓存的问题，而使用POST请求可是有时候页面会缓存我们提交的信息，导致我们发送的异步请求不能正确的返回我们想要的数据

$.post(url,data ,ranNum:Math.random()} ,function(data){}）

ranNum : 这个是防止缓存的核心，每次发起请求都会用Math.random()方法生成一个随机的数字，这样子就会刷新url缓存

60.split() join()?

前者是切割成数组的形式，
后者是将数组转换成字符串

61.slice()  splice()?

slice() 方法可从已有的数组中返回选定的元素。
splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。

62.typeof？typeof [ ]返回数据类型是？

//判断基本数据类型；var a=[];typeof a输出object；//本来判断一个对象类型用typeof是最好的，不过对于Array类型是不适用的，//可以使用 instanceof操作符：       var arrayStr=new Array("1","2","3","4","5");    
       alert(arrayStr instanceof Array); //当然以上在一个简单的页面布局里面是没有问题的，如果是复杂页面情况，//入获取的是frame内部的Array对象，可以用这个函数判断：       function isArray(obj) {      
          return Object.prototype.toString.call(obj) === '[object Array]';       
       }

63.disabled readyonly?

readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，当表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而readonly会将该值传递出去。

64.同步异步?

1、进程同步：就是在发出一个功能调用时，在没有得到结果之前，该调用就不返回。也就是必须一件一件事做,等前一件做完了才能做下一件事

2、异步的概念和同步相对。当一个异步过程调用发出后，调用者不能立刻得到结果。实际处理这个调用的部件在完成后，通过状态、通知和回调来通知调用者。

65.promise

Promise的构造函数接收一个参数，是函数，并且传入两个参数：resolve，reject，分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。

66.函数fn1 函数fn2 函数fn3，如果想在三个函数都执行完成后执行某一个事件应该如何实现?

//1、设置事件监听。//2、回调函数：function fn1(){
       console.log("执行fn1");
       fn2();}function fn2(){
       console.log("执行fn2");
       fn3();}function fn3(){
       console.log("执行fn3");
       mou();}function mou(){
       console.log("执行某个函数");}fn1();

67.JavaScript提供了哪几种“异步模式”？

1、回调函数（callbacks）
2、事件监听
3、Promise对象

68.什么是移动端的300ms延迟？什么是点击穿透？解决方案?

移动端300ms延迟：假定这么一个场景。用户在 浏览器里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作，当用户一次点击屏幕之后，浏览器并不能立刻判断用户是确实要打开这个链接，还是想要进行双击操作。因此，浏览器 就等待 300 毫秒，以判断用户是否再次点击了屏幕。也就是说，当我们点击页面的时候移动端浏览器并不是立即作出反应，而是会等上一小会儿才会出现点击的效果。

点击穿透：假如页面上有两个元素A和B。B元素在A元素之上。我们在B元素的touchstart事件上注册了一个回调函数，该回调函数的作用是隐藏B元素。我们发现，当我们点击B元素，B元素被隐藏了，随后，A元素触发了click事件。这是因为在移动端浏览器，事件执行的顺序是touchstart > touchend > click。而click事件有300ms的延迟，当touchstart事件把B元素隐藏之后，隔了300ms，浏览器触发了click事件，但是此时B元素不见了，所以该事件被派发到了A元素身上。如果A元素是一个链接，那此时页面就会意外地跳转。

300ms延迟解决方案：
(1) 禁用缩放，在html文档头部加meta标签如下：


(2) 更改默认的视口宽度 （响应式布局，消除了站点上可能存在的双击绽放的请求）


(3) Css touch-action
touch-action:none;在该元素上的操作不会触发用户代理的任何行为，无需进行3000ms延迟判断。

(4) FastClick为解决移动端浏览器300毫秒延迟开发的一个轻量级的库
点击穿透解决方案：
（1）只用touch
（2）只用click
（3）tap后延迟350ms再隐藏mask
（4）pointer-events

69.变量作用域?

//变量作用域：一个变量的作用域是程序源代码中定义这个变量的区域。全局变量拥有全局作用域，//在js代码中任何地方都是有定义的。在函数内声明的变量只在函数体内有定义，它们是局部变量，//作用域是局部性的。函数参数也是局部变量，它们只在函数体内有定义。var a = "";window.b=''”;function(e) {
       var c= "";
       d="";
       e="";}function go() {
       console.info(this);//window       return function() {
               console.info(this); // window               return {
                b:function(){
                       console.info(this); //b的父对象                   }
            }
       }}go()().b();

70.call & apply 两者之间的区别  

call和apply都是改变this指向的方法，区别在于call可以写多个参数，而apply只能写两个参数，第二个参数是一个数组，用于存放要传的参数。

71.call和apply 有什么好处？

用call和apply:实现更好的继承和扩展，更安全。

72.谁是c的构造函数?

function ab() {
         this.say = ""; } ab.constructor = {} ab.name = ''; var c = new ab(); //构造函数默认指向函数本身,ab是一个类,它的构造函数是它本身，//然后ab.constructor={};ab的构造函数就指向{}了，c是ab的实例化对象，c的构造函数就是{}//通过使用new的时候,创建对象发生了那些改变? 当使用new操作时，会马上开辟一个块内存，//创建一个空对象，并将this指向这个对象。接着，执行构造函数ab()，对这个空对象进行构造//（构造函数里有什么属性和方法都一一给这个空白对象装配上去，这就是为何它叫构造函数了）。

73.sass和less有什么区别?

1. 컴파일 환경이 다릅니다. Sass를 설치하려면 서버 측에서 처리되는 Ruby 환경이 필요하지만 Less에서는 Less 코드를 처리하고 CSS를 브라우저에 출력해야 합니다. 개발 과정을 줄이고 이를 프로젝트에 직접 CSS 파일로 컴파일합니다.

2. 변수 기호는 다르며 less는 @이고 scss는 $이며 범위도 다르며 less는 블록 수준 범위입니다.

3 출력 설정, Less에는 출력 설정이 없으며 sass는 4를 제공합니다. 유형 출력 옵션, 중첩, 압축, 압축 및 확장 중첩: 중첩 들여쓰기 CSS 코드(기본값) 확장: 확장 여러 줄 CSS 코드 압축: 간결한 형식의 CSS 코드 압축: 압축 CSS 코드

4.sass 지원 조건문용 , if{}else{}, for{} 루프 등을 사용할 수 있지만 less는 사용할 수 없습니다.

5. 외부 파일을 참조할 때 sass는 _로 시작해야 합니다. 밑줄 _ 모양, sass 파일은 참조 파일로 간주되어 CSS 파일로 컴파일되지 않습니다. less에서 외부 파일을 참조하는 것과 CSS에서 @import를 참조하는 것에는 차이가 없습니다.

6. Sass와 Less의 도구 라이브러리는 다릅니다. Sass에는 Compass라는 도구 라이브러리가 있습니다. 간단히 말해서 sass와 Compass의 관계는 Javascript와 jQuery의 관계와 약간 비슷합니다. 이를 기반으로 일련의 유용한 모듈과 템플릿이 캡슐화되어 Sass의 기능을 보완하고 강화합니다. Less에는 UI 구성요소 라이브러리가 있습니다. Bootstrap은 웹 프런트엔드 개발에서 잘 알려진 프런트엔드 UI 구성요소 라이브러리입니다. Bootstrap 스타일 파일의 소스 코드 중 일부는 Less 구문을 사용하여 작성됩니다.

요약: sass와 less는 모두 CSS를 기반으로 하는 고급 언어로 간주할 수 있습니다. 그 목적은 CSS 개발을 보다 유연하고 강력하게 만드는 것입니다. 기본적으로 sass의 기능은 less보다 강력하다고 할 수 있습니다. 실제 프로그래밍 언어이며 덜 명확하고 사용하기 쉬우며 컴파일 환경에 대한 요구 사항이 상대적으로 느슨합니다. Sass를 컴파일하려면 Ruby를 설치해야 하고, 중국에서는 Ruby 공식 홈페이지에 접속할 수 없다는 점을 고려하면, 실제 개발에서는 개인적으로 덜 선호합니다.

74. 부트스트랩의 장점은 무엇인가요?

적응형 및 반응형 레이아웃, 12그리드 시스템, 통합 인터페이스 스타일 및 CSS 스타일은 팀 개발에 도움이 됩니다. 유연하고 안정적인 고품질 HTML 및 CSS 코드를 작성하기 위한 규율입니다.

75. 개발 중에 프로젝트를 어떻게 관리하나요?

저는 개발할 때 gulp와 같은 프런트엔드 워크플로 관리 도구를 사용하여 프로젝트를 관리합니다. Gulp는 gulp와 해당 플러그인을 사용하여 프로젝트 코드(less, sass)를 컴파일하고, js 및 css 코드를 압축하고, 이미지를 압축하고 파일을 병합할 수도 있는 차세대 프런트엔드 프로젝트 도구입니다. 파일 압축, 구문 확인, 파일 변경 모니터링, 테스트, 바이너리 변환, 그림 변환 및 기타 기능을 제공합니다. Gulp에는 작은 API만 있으므로 배우기가 매우 쉽습니다. 좋은 프로젝트 관리를 달성하세요.

76. 압축과 병합의 목적은 무엇인가요? http 요청을 최적화하는 방법은 무엇입니까?

1) 웹 성능 최적화를 위한 가장 중요한 모범 사례 중 하나는 HTTP 요청을 줄이는 것입니다. HTTP 요청을 줄이는 주요 방법은 JavaScript와 CSS 파일을 병합하고 압축하는 것입니다.

CSS 스프라이트(CSS 스프라이트): 전체 사이트 아이콘을 이미지 파일에 넣은 다음 CSS background-image 및 background-position 속성을 사용하여 아이콘의 작은 부분을 배치합니다.

스크립트 및 스타일 시트 병합: 이미지 맵 태그를 사용하여 클라이언트 이미지 맵을 정의합니다. 자세한 내용은 http://club.topsage를 참조하세요. .com/thread-2527479-1-1.html

정적 서버나 CDN 서버에 이미지 js/css와 같은 정적 리소스를 배치할 때 사용하지 않는 도메인 이름을 사용하세요. 이렇게 하면 쿠키가 서로 오염되는 것을 방지하고 각 요청에 대한 왕복 데이터를 줄일 수 있습니다.

Css는 이미지를 대체하고 일부 데이터를 캐시합니다.

location.reload()를 적게 사용: location.reload()를 사용하면 페이지가 새로 고쳐지면 페이지의 모든 리소스(css, js, img 등)가 새로 고쳐집니다. ) 서버에 다시 요청합니다. location.reload() 대신 location.href="current page url"을 사용하는 것이 좋습니다. location.href를 사용하면 브라우저가 로컬 캐시 리소스를 읽습니다.

77. Ajax 요청 방법은 몇 가지(8가지)가 있나요?

1) $.get(url,[데이터],[콜백])
2)$.getJSON(url,[데이터],[콜백])
3)$.post(url,[데이터],[ 콜백],[유형])
4) $.ajax(opiton)
5) $.getScript( url, [콜백] )
6) jquery object.load( url, [data], [callback] )
7) serialize() 및 serializeArray()

78 dom 요소를 복사하는 방법은 무엇입니까?

네이티브 Js 메서드: var p = document.getElementsByTagName('p')[0];
var clone = p.cloneNode();
Jquery 메서드: $('p').clone();
기본적으로 .clone() 메서드는 일치하는 요소나 그 하위 요소에 바인딩된 이벤트를 복사하지 않습니다. 그러나 이 메소드에 부울 매개변수를 전달하고 이 매개변수를 true로 설정하여 이벤트를 함께 복사할 수 있습니다(즉, .clone(true)).

79. 배열 정렬(sort) 방법? 종류? 한자 정렬?

배열 정렬 방법: reverse() 및 sort(). reverse() 메서드는 배열 항목의 순서를 반대로 바꿉니다.
예:var 값 ​​= [0, 1, 5, 10, 15]; value.sort();//0,1,10,15,5
var 값 ​​= [1, 2, 3, 4, 5] ; value.reverse();//5,4,3,2,1

JS 정렬(자세한 내용은 http://www.tuicool.com/articles/ 참조) IjInMbU )
정렬 정렬, 버블 정렬, 퀵 정렬, 삽입 정렬, 힐 정렬, 선택 정렬을 사용하세요
Merge sort

localeCompare() 메서드는 문자열 인코딩 정렬에 사용됩니다
localeCompare 메서드: 다음을 나타내는 값을 반환합니다. 현재 두 문자열이 로케일에서 동일한지 여부입니다.

80. 객체지향에 대해 무엇을 이해하고 있는지 간략하게 설명해주세요.

객체 지향은 모든 것이 객체라는 철학적 관점을 기반으로 합니다. 객체를 클래스로 추상화하는 것은 구체적으로 객체의 정적 특성과 동적 특성을 속성과 메서드로 추상화하는 것입니다. 클래스에 캡슐화된 프로그램은 여러 객체와 객체 간의 통신으로 구성됩니다.

객체 지향에는 캡슐화, 상속 및 다형성이 있습니다.

Encapsulation: 노출할 필요가 없는 세부 사항을 객체 내부에 숨겨서 내부 세부 사항의 변경 사항을 외부 세계와 분리하고 통신용 인터페이스에만 의존하도록 하여 프로그래밍의 복잡성을 줄입니다. 상속을 사용하면 새 클래스를 만드는 것이 쉬워집니다. 파생 클래스에서 비공개 메서드와 공용 속성을 가져오는 지루한 작업은 인터페이스와 런타임 유형 바인딩 메커니즘을 상속하고 구현하여 생성되는 다형성입니다. 서로 다른 클래스에 의해 생성된 객체를 만듭니다. 동일한 메시지에 다르게 반응할 수 있으면 코드의 다양성이 크게 향상됩니다.

간단히 말하면 객체 지향 기능은 대규모 프로그램의 재사용성과 유지 관리성을 향상시킵니다. 물체?

1. 생성자 패턴3. 프로토타입 패턴

4. 동적 프로토타입 패턴

6. 안전한 생성자 패턴

패턴을 게시하고 구독하시겠습니까?
1) 디자인 패턴은 특정 언어의 특정 코드 조각이 아닙니다. 디자인 패턴은 코딩 중에 발생하는 다양한 문제에 대한 솔루션을 제공하는 아이디어입니다.
디자인 패턴은 주로 창의적 패턴, 구조적 패턴, 행동 패턴의 세 가지 유형으로 나뉩니다.
창의적인 패턴: 싱글톤 패턴, 추상 팩토리 패턴, 빌더 패턴, 팩토리 패턴 및 프로토타입 패턴.
구조 모드: 어댑터 모드, 브리지 모드, 데코레이터 모드, 조합 모드, 모양 모드, 플라이웨이트 모드 및 프록시 모드.
행동 패턴: 템플릿 메서드 패턴, 명령 패턴, 반복자 패턴, 관찰자 ​​패턴, 중재자 패턴, 메멘토 패턴, 해석기 패턴, 상태 패턴, 전략 패턴, 책임 사슬 패턴 및 방문자 패턴.

2) 생성 패턴과 유사하게, 팩토리 패턴은 생성된 객체의 특정 클래스를 지정하지 않고 객체(공장에서 제품으로 간주)를 생성합니다.
팩토리 패턴은 객체 생성을 위한 인터페이스를 정의합니다. 이 인터페이스는 하위 클래스에서 인스턴스화할 클래스를 결정합니다. 이 패턴은 클래스의 인스턴스화를 하위 클래스로 연기합니다. 서브클래스는 인터페이스 메서드를 재정의하여 생성 시 자체 객체 유형을 지정할 수 있습니다.

3) 관찰자 패턴은 게시-구독 패턴이라고도 합니다. 일대다 관계를 정의하여 주제 개체의 상태가 변경되면 여러 관찰자 개체가 동시에 특정 주제 개체를 모니터링할 수 있습니다. 모든 관찰은 개체를 보유하고 있음을 알립니다. 토픽과 옵저버라는 두 가지 유형의 객체로 구성되며, 옵저버는 이러한 이벤트를 구독하여 주체를 관찰합니다. 게시자와 구독자는 완전히 분리되어 서로의 존재를 알지 못합니다. . 맞춤 이벤트의 이름을 공유하세요.
(디자인 패턴이 너무 고급스럽습니다. 온라인 예제를 기반으로 혼자서 배울 수는 없습니다.)


82.commonjs?requirejs?AMD|CMD|UMD

1. CommonJS는 JS의 성능을 위한 사양을 작성하는 것입니다. NodeJS는 이 사양을 구현한 것이기도 합니다. js에는 모듈의 기능이 없기 때문에 CommonJS가 탄생하게 되었습니다. 하지만 브라우저에서는 작동하지 않습니다. CommonJS에서 정의한 모듈은 다음과 같이 구분됩니다. {모듈 참조(필수)} {모듈 정의(내보내기)} {모듈 식별(모듈)}

2.RequireJS는 JavaScript 모듈 로더입니다. ​ ​ RequireJS에는 정의()와 요구()라는 두 가지 주요 메소드가 있습니다. 이 두 메서드는 기본적으로 동일한 선언을 가지며 둘 다 종속성을 로드한 다음 콜백 함수를 실행하는 방법을 알고 있습니다. require()와 달리, Define()은 코드를 명명된 모듈로 저장하는 데 사용됩니다. 따라서 Define()의 콜백 함수는 이 모듈 정의로 반환 값을 가져야 합니다. 이와 유사하게 정의된 모듈을 AMD(Asynchronous Module Definition)라고 합니다.

3.AMD는 승격 프로세스 중 RequireJS 모듈 정의의 표준화된 출력입니다. 해당 모듈은 객체, 함수, 생성자, 문자열, JSON 등과 같은 다양한 유형의 모듈을 지원합니다. AMD 사양은 모듈을 정의하기 위한 정의 메소드에 적용됩니다.

4.CMD는 SeaJS 승격 과정에서 표준화된 모듈 정의 출력입니다.
AMD와 CDM의 차이점:
(1) 종속 모듈의 경우 AMD가 미리 실행됩니다(지연될 수도 있는 것으로 보입니다). CMD 실행이 지연되었습니다.
(2) AMD는 종속성을 사전에 촉진하는 반면 CMD는 근처의 종속성을 촉진합니다.
(3) AMD는 멀티플렉싱 인터페이스를 옹호하고 CMD는 일회용 인터페이스를 옹호합니다.
(4) 작문 기준의 차이.

5.umd는 AMD와 CommonJS가 혼합된 것입니다.
AMD는 모듈을 비동기적으로 로드하는 브라우저 우선 원칙을 개발합니다.
CommonJS 모듈은 서버 우선 원칙을 기반으로 개발되었으며 해당 모듈은 래핑될 필요가 없습니다(래핑 해제된 모듈). 이로 인해 사람들은 크로스 플랫폼 솔루션을 해결하기 위해 또 다른 보다 일반적인 모델 UMD(Universal Module Definition)를 생각해 내게 됩니다. UMD는 먼저 Node.js를 지원하는 모듈(내보내기)이 있는지 확인합니다. 존재하는 경우 Node.js 모듈 모드를 사용합니다.

83. JS의 상속 방법은 무엇입니까?

1. 객체 가장을 사용하여 상속 구현
2. 함수 컨텍스트를 변경하여 상속 구현

84. JavaScript 프로토타입, 프로토타입 체인은 무엇입니까?

JavaScript에는 원시 값과 객체 값이라는 두 가지 유형의 값이 있습니다. 각 객체에는 일반적으로 프로토타입이라고 부르는 내부 속성인 [[prototype]]이 있습니다. 값이 객체인 경우 이 객체에는 자체 프로토타입도 있어야 합니다. 이는 프로토타입 체인이라고 하는 선형 체인을 형성합니다.

객체의 프로토타입에 액세스하려면 ES5를 사용할 수 있습니다. Object.getPrototypeOf 메소드 또는 ES6의 __proto__ 속성입니다. 프로토타입 체인의 역할은 상속을 구현하는 것입니다. 예를 들어 새 배열을 생성하면 배열 메소드는 배열의 프로토타입에서 상속됩니다.

85. 평가는 무엇을 하나요?

해당 문자열을 JS 코드로 구문 분석하고 실행하는 기능입니다. 안전하지 않고 성능이 많이 소모되는 eval을 사용하지 않아야 합니다(두 번, js 문으로 구문 분석하고 한 번 실행).

86. null과 정의되지 않음의 차이점은 무엇인가요?

undefine은 변수의 값이 선언되었지만 초기화되지 않았음을 의미하고, null은 객체를 저장할 준비가 되었지만 객체의 값이 실제로 저장되지 않았음을 의미합니다. 논리적 관점에서 null은 null 개체 포인터를 나타냅니다.

87. JSON을 아시나요?

JSON(JavaScript Object Notation)은 경량 데이터 교환 형식입니다. 이는 JavaScript의 하위 집합을 기반으로 합니다. 데이터 형식은 간단하고 읽고 쓰기 쉬우며 대역폭을 거의 차지하지 않습니다.

88.js 로딩을 지연시키는 방법은 무엇인가요?

연기 및 비동기, DOM의 동적 생성(가장 일반적으로 사용됨), 요청 시 js의 비동기 로딩

89. Ajax란 무엇인가요?                                                                          비동기 자바스크립트 및 XML은 대화형 웹 애플리케이션을 만드는 방법을 의미합니다. 웹 개발 기술입니다. AJAX는 백그라운드에서 서버와 소량의 데이터를 교환함으로써 웹 페이지의 비동기 업데이트를 활성화할 수 있습니다. 이는 전체 페이지를 다시 로드하지 않고도 웹페이지의 일부를 업데이트할 수 있음을 의미합니다.

90. 동기화와 비동기의 차이점은 무엇인가요?

Javascript 동기화는 코드가 순서대로 실행된다는 의미입니다. JavaScript 비동기는 코드가 순서 없이 실행된다는 의미입니다. 나중에 실행될 때까지 '건너뛰기'하면 비동기화됩니다.

91. 크로스 도메인 문제를 해결하는 방법

Jsonp, iframe, window.name, window.postMessage, 서버에 프록시 페이지 설정

92.

(1) 연기, IE만 지원
(2) async: true
(3) 스크립트 생성, DOM에 삽입, 로드 후 콜백

93 jQuery와 jQuery UI의 차이점은 무엇인가요?

jQuery는 선택기, 속성 수정, 이벤트 바인딩 등을 주로 제공하는 js 라이브러리입니다.
jQuery UI는 jQuery를 기반으로 하고 jQuery의 확장성을 활용하여 설계된 플러그인입니다. 대화 상자, 끌기 동작, 크기 조정 동작 등과 같이 일반적으로 사용되는 일부 인터페이스 요소를 제공합니다.

94. 어떤 성능 최적화 방법이 있나요?

(1) http 요청 수 줄이기: CSS Sprites, JS, CSS 소스 코드 압축, 적절한 이미지 크기 제어 웹 페이지 Gzip, CDN 호스팅, 데이터 캐시, 이미지 서버.

(2) HTML 태그로 인한 대역폭 낭비를 줄이기 위한 프런트 엔드 템플릿 JS + 데이터 프런트 엔드는 AJAX 요청 결과를 저장하기 위해 로컬 변수를 실행할 때마다 요청할 필요가 없으므로 개수가 줄어듭니다.

(3) DOM 작업 대신 innerHTML을 사용하여 DOM 작업 수를 줄이고 JavaScript 성능을 최적화합니다.

(4) 설정할 스타일이 많은 경우 스타일을 직접 조작하는 대신 className을 설정합니다.

(5) 전역 변수를 덜 사용하고 DOM 노드 검색 결과를 캐시합니다. IO 읽기 작업을 줄입니다.

(6) 동적 속성(동적 속성)이라고도 알려진 CSS 표현식(css 표현식)을 사용하지 마세요.

(7) 이미지 사전 로드, 스타일 시트를 상단에 배치하고 스크립트를 타임스탬프와 함께 하단에 배치합니다.

(8) 페이지의 기본 레이아웃에서 테이블을 사용하지 마세요. 콘텐츠가 완전히 다운로드될 때까지 테이블이 표시되지 않습니다. p+css 레이아웃보다 표시 속도가 느립니다.

95. URL 입력부터 페이지 로딩 완료 및 페이지 표시까지의 과정에서 어떤 일이 발생하나요? (프로세스가 자세할수록 좋습니다)

브라우저 캐시 검색
DNS 확인, 도메인 이름에 해당하는 IP 주소 찾기, 리디렉션(301), 두 번째 GET 요청 발행
HTTP 프로토콜 세션 수행
클라이언트 헤더 전송(요청 헤더)
서버 피드백 헤더(응답 헤더)
HTML 문서 다운로드 시작
문서 트리가 구축되고 마크 요청에 필요한 지정된 MIME 유형의 파일
파일 표시

브라우저가 수행하는 작업은 다음과 같습니다.
로딩: 요청한 URL에 따라 도메인 이름 확인을 수행하고, 서버에 요청을 시작하고, 파일(HTML, JS, CSS, 이미지 등)을 수신합니다.
파싱: 로드된 리소스(HTML, JS, CSS 등)에 대한 구문 분석을 수행하고 해당 내부 데이터 구조(예: HTML DOM 트리, JS(객체) 속성 테이블, CSS 스타일 규칙 등)를 제안합니다.

96. ajax의 단점

1. Ajax는 브라우저 뒤로 버튼을 지원하지 않습니다.
2. 보안 문제 AJAX는 서버와의 상호 작용 세부 정보를 노출합니다.
3. 검색 엔진에 대한 지원이 상대적으로 약합니다.
4. 프로그램의 비정상적인 메커니즘을 파괴했습니다.
5. 디버그하기 쉽지 않음

추천 튜토리얼: "JS 튜토리얼"

위 내용은 96가지 기본 프론트엔드 JS 인터뷰 질문(답변 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!