96가지 기본 프론트엔드 JS 인터뷰 질문(답변 포함)
- hzc앞으로
- 2020-06-28 09:40:426529검색
【관련 추천 : 프런트엔드 면접 질문】
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 태그를 포함하여 시작 위치부터 끝 위치까지의 모든 콘텐츠입니다.
5개의 창 개체 및 속성에 대한 간략한 설명
innerText: 시작 위치부터 끝 위치까지의 콘텐츠이지만 Html 태그가 제거됩니다.
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 객체 생성
4) AJAX 엔진을 통해 비동기 요청 보내기
3) XMLHttpRequest 구성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 요소는 올바르게 중첩되어야 합니다.
3. 태그 이름은 소문자여야 합니다.
2.XHTML 요소는 닫혀 있어야 합니다.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 < arr2.length; i++) { arr1.push( arr2[i] ); } console.log(arr1);21.强制转换 显式转换 隐式转换?
//强制类型转换： 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）i22. 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 id="test"> <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 封装函数?
<body> <input type="submit" id = "sub" class="ss confirm btn" value="提交"/> <script> window.onload = function(){ //方法一 var Opt = document.getElementById('sub'); var getClass = function(className,tagName){ if(document.getElementsByTagName){ var Inp = document.getElementsByTagName(tagName); for(var i=0; i<Inp.length; i++){ if((new RegExp('(\\s|^)' +className +'(\\s|$)')).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('(\\s|^)'+confirm+'(\\s|$)'))){ 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></body>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를 호출하기 위해