Heim  >  Artikel  >  Web-Frontend  >  96 grundlegende Front-End-JS-Interviewfragen (einschließlich Antworten)

96 grundlegende Front-End-JS-Interviewfragen (einschließlich Antworten)

hzc
hzcnach vorne
2020-06-28 09:40:426478Durchsuche

[Verwandte Empfehlungen: Front-End-Interviewfragen]

1 Datentyp? Komplexer Datentyp? Werttyp und Referenzdatentyp: Basisdatentyp: Undefiniert, Null, Boolesch, Zahl, Zeichenfolge , Boolean, null, undefiniert. Referenztypen: Objekte, Arrays, Funktionen.
Stack-Datenstruktur: Es handelt sich um eine Sammlung, die Last-In-First-Out (LIFO) unterstützt, dh die später eingefügten Daten werden zuerst herausgenommen.

Die folgenden Methoden werden im js-Array bereitgestellt Es ist für uns einfach, den Stapel zu implementieren:
Verschiebung: Löschen Sie das erste Element aus dem Array und geben Sie den Wert dieses Elements zurück.
unshift: Füge ein oder mehrere Elemente am Anfang des Arrays hinzu und gebe die neue Länge zurück
push: Füge Elemente am Ende des Arrays hinzu und gebe die neue Länge zurück
pop: Entferne das letzte Element aus dem array Entfernt ein Element und gibt den Wert dieses Elements zurück.


2. Die Wirkung der Deklaration von Funktionen wird verbessert.

(1) Variablendeklarationsförderung: Variable Die Deklaration wird eingegeben. Der Ausführungskontext ist abgeschlossen. Solange eine Variable im Code deklariert ist, platziert die js-Engine ihre Deklaration an der Spitze des Bereichs
(2) Funktionsdeklarationsförderung: Ausführung Die Funktionsdeklaration wird vor dem Code gelesen, was bedeutet, dass die Funktionsdeklaration nach der Anweisung platziert werden kann, die sie aufruft.

Solange die Funktion im Code deklariert ist, platziert die js-Engine ihre Deklaration an der Spitze des Gültigkeitsbereichs.

(3) Variablen- oder Funktionsdeklaration: Funktion Deklarationen überschreiben Variablendeklarationen, jedoch keine Variablenzuweisungen.
Derselbe Name identifiziert a, das heißt, es gibt eine Variablendeklaration var a und eine Funktionsdeklaration function a() {} Unabhängig von der Reihenfolge der beiden Deklarationen überschreibt die Funktionsdeklaration die Variablendeklaration Das heißt, der Wert von a ist zu diesem Zeitpunkt die deklarierte Funktion function a() {}. Hinweis: Wenn a gleichzeitig mit der Deklaration der Variablen initialisiert wird oder a später ein Wert zugewiesen wird, ist der Wert von a zu diesem Zeitpunkt der Wert der Variablen. zB: var a; var c = 1; function a() { return true }


3 🎜 >

Die von typeof zurückgegebenen Typen liegen alle in String-Form vor, was zur Bestimmung des Funktionstyps verwendet werden kann. Dies ist praktischer, wenn andere Objekte als der Objekttyp beurteilt werden.
Methode zur Bestimmung des bekannten Objekttyps: Instanz von, auf die der Objekttyp folgen muss, und die Groß-/Kleinschreibung darf nicht falsch sein. Diese Methode eignet sich für eine bedingte Auswahl oder Verzweigung.

4. Asynchrone Programmierung?


Methode 1: Rückruffunktion. Der Vorteil besteht darin, dass sie einfach, leicht zu verstehen und bereitzustellen ist. Der Nachteil besteht darin, dass sie dem Lesen und Warten der verschiedenen Teile nicht förderlich ist sind stark gekoppelt (Kopplung), und der Prozess ist sehr verwirrend, und pro Aufgabe kann nur eine Rückruffunktion angegeben werden.

Methode 2: Zeitüberwachung, mehrere Ereignisse können gebunden werden, jedes Ereignis kann mehrere Rückruffunktionen angeben und „entkoppelt“ werden, was der Modularisierung förderlich ist. Der Nachteil besteht darin, dass das gesamte Programm ereignisgesteuert werden muss und der laufende Prozess sehr unklar wird. Methode 3: Veröffentlichen/Abonnieren, ähnlich wie „Event Listening“, aber offensichtlich besser als letzteres.

Methode 4: Promises-Objekt ist eine von der CommonJS-Arbeitsgruppe vorgeschlagene Spezifikation, um eine einheitliche Schnittstelle für die asynchrone Programmierung bereitzustellen.
Einfach ausgedrückt besteht die Idee darin, dass jede asynchrone Aufgabe ein Promise-Objekt zurückgibt, das über eine then-Methode verfügt, die die Angabe einer Rückruffunktion ermöglicht.


5. Ereignisablauf? Es brodeln die Ereignisse?



Ereignisfluss: Die Reihenfolge, in der Ereignisse von der Seite empfangen werden. Das heißt, wenn ein Ereignis auftritt, ist der Ausbreitungsprozess dieses Ereignisses der Ereignisfluss.

Der Ereignisstrom im IE wird als Ereignis-Bubbling bezeichnet: Das Ereignis wird zunächst vom spezifischsten Element empfangen und dann an weniger spezifische Knoten (Dokumente) weitergegeben. Wenn bei HTML ein Element ein Ereignis generiert, übergibt es das Ereignis an sein übergeordnetes Element. Nachdem das übergeordnete Element es empfangen hat, übergibt es es weiterhin an sein übergeordnetes Element und wird dann an das Dokument weitergegeben. Objekt (Ich habe den aktuellen Browser persönlich zum Fensterobjekt getestet, nur IE8 und niedriger sind nicht so Die Ereigniserfassung besteht darin, dass weniger spezifische Elemente das Ereignis früher empfangen sollten und der spezifischste Knoten das Ereignis zuletzt empfangen sollte. Ihr Die Absicht besteht darin, das Ereignis zu erfassen, bevor es das Ziel erreicht. Das heißt, es ist genau das Gegenteil des Bubbling-Prozesses. Nehmen wir das Click-Ereignis von HTML als Beispiel: Die Spezifikation auf DOM-Ebene erfordert, dass die Weitergabe vom Dokument, aber aktuelle Browser beginnen mit dem Fensterobjekt) zuerst, um das Klickereignis zu empfangen, dann breitet sich das Ereignis nach unten entlang des DOM-Baums aus, bis hin zum eigentlichen Ziel des Ereignisses

6. Wie lösche ich einen Timer?


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

7. Wie füge ich ein Dom-Objekt zum Körper hinzu?

body.appendChild (dom-Element);
innerHTML: Alle Inhalte von der Startposition bis zur Endposition des Objekts, einschließlich HTML-Tags.
innerText: Inhalt von der Startposition bis zur Endposition, aber es entfernt das HTML-Tag
und beschreibt kurz die fünf Fensterobjekte und -attribute

Mitgliedsobjekte
window.event window.document window .history
window.screen window.navigator window.external
Die Eigenschaften des Window-Objekts sind wie folgt:
window //Fenster selbst
window.self //Referenz auf dieses Fenster window=window .self
window.name // Benennen Sie das Fenster
window.defaultStatus //Legen Sie die Informationen zur Fensterstatusleiste fest
window.location //URL-Adresse, mit diesem Attribut ausgestattet, können Sie eine neue Seite öffnen

8. Datenpersistenztechnologie (Ajax)? Beschreiben Sie kurz den Ajax-Prozess

1) Der Client generiert js-Ereignisse
2) Erstellen Sie ein XMLHttpRequest-Objekt
3) Auf XMLHttpRequest-Konfiguration antworten
4) Eine asynchrone Anfrage über die AJAX-Engine senden
5) Der Server empfängt die Anfrage und verarbeitet die Anfrage, indem er HTML- oder XML-Inhalte zurückgibt
6) XML-Aufrufe a callback() zum Verarbeiten des Antwortinhalts
7) Teilweise Seitenaktualisierung

9. Callback-Funktion?

Die Callback-Funktion ist eine durch aufgerufene Funktion ein Funktionszeiger. Wenn Sie einen Funktionszeiger (Adresse) als Parameter an eine andere Funktion übergeben und dieser Zeiger zum Aufrufen der Funktion verwendet wird, auf die er zeigt, sprechen wir von einer Callback-Funktion. Die Rückruffunktion wird nicht direkt vom Implementierer der Funktion aufgerufen, sondern von einer anderen Partei, wenn ein bestimmtes Ereignis oder eine bestimmte Bedingung eintritt, um auf das Ereignis oder die Bedingung zu reagieren.

10. Was ist ein Abschluss?* Was ist der Unterschied zwischen Stack Overflow und Stack Overflow? Speicherverlust? Welche Vorgänge verursachen einen Speicherverlust? Wie kann man Speicherlecks verhindern?

Abschluss: Es handelt sich um eine Funktion, die die internen Variablen anderer Funktionen lesen kann.
Stapelüberlauf: Unabhängig von der Größe des im Stapel zugewiesenen lokalen Datenblocks werden zu viele Daten in den Datenblock geschrieben, was dazu führt, dass die Daten den zulässigen Bereich überschreiten und andere Daten überschrieben werden. Kommt häufig bei Rekursion vor.
Speicherverlust bezieht sich auf die Verwendung von dynamischem Speicher zur Zuweisung von Funktionsspeicherplatz, der nach der Verwendung nicht freigegeben wird, was dazu führt, dass die Speichereinheit ständig belegt ist. bis das Programm endet. Bezieht sich auf jeden Gegenstand, der überlebt, nachdem Sie ihn nicht mehr besitzen oder benötigen.

Verursacht Speicherverluste:
Wenn der erste Parameter von setTimeout eine Zeichenfolge anstelle einer Funktion verwendet, führt dies zu einem Speicherverlust.
Abschlüsse, Konsolenprotokolle, Schleifen (wenn zwei Objekte aufeinander verweisen und sich gegenseitig beibehalten, entsteht eine Schleife)
Speicherlecks verhindern:
1 Ereignisse nicht dynamisch binden; Binden Sie keine Ereignisse an DOM, die dynamisch hinzugefügt oder entfernt werden. Verwenden Sie Ereignisse, um im übergeordneten Container zu sprudeln.
3. Wenn Sie gegen die oben genannten Prinzipien verstoßen möchten, müssen Sie eine Zerstörungsmethode bereitstellen dass die DOM-Ereignisse ebenfalls entfernt wurden. Sie können sich hierzu auf den Backbone-Quellcode beziehen.
4. Singletonisierung, weniger DOM-Erstellung und weniger Ereignisbindung.

11. Wie interagiere ich mit Daten, wenn der Hintergrund keine Daten bereitstellt? Was soll ich tun, wenn die Scheindaten nicht mit dem vom Hintergrund zurückgegebenen Format übereinstimmen?

Das Backend schreibt Schnittstellendokumente und stellt die Datenschnittstellenimplementierung bereit, und das Frontend realisiert die Dateninteraktion durch Ajax-Zugriff.
Wenn keine Daten vorhanden sind, suchen Sie nach dem Backend, um statische Daten bereitzustellen oder definieren Sie Scheindaten selbst;
Die zurückgegebenen Daten sind beim Schreiben einer Zuordnungsdatei zum Zuordnen der Daten nicht einheitlich.

12 Kurze Beschreibung des Ajax-Ausführungsprozesses

基本步骤: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. Für welches Szenario wird es verwendet? Vorteile?

Selbstausführende Funktion: 1. Deklarieren Sie eine anonyme Funktion 2. Rufen Sie die anonyme Funktion sofort auf.
Funktion: Erstellen Sie einen unabhängigen Bereich.

Vorteile: Verhindern Sie die Verbreitung von Variablen in der globalen Welt, um Konflikte mit verschiedenen JS-Bibliotheken zu vermeiden. Isolieren Sie den Bereich, um eine Kontamination zu vermeiden, oder kürzen Sie die Bereichskette, um Schließungen zu vermeiden, die die Freigabe von Referenzvariablen verhindern. Nutzen Sie die Funktion zur sofortigen Ausführung, um die erforderlichen Geschäftsfunktionen oder -objekte zurückzugeben und die Verarbeitung durch bedingte Beurteilung jedes Mal zu vermeiden

Szenario: Wird im Allgemeinen in Frameworks, Plug-Ins und anderen Szenarien verwendet

14 .html und Was ist der Unterschied zwischen xhtml?

HTML ist eine grundlegende WEB-Webseiten-Designsprache und XHTML ist eine XML-basierte Auszeichnungssprache.
1.XHTML-Elemente müssen korrekt verschachtelt sein.
2.XHTML-Elemente müssen geschlossen sein.
3. Tag-Namen müssen in Kleinbuchstaben angegeben werden.
4. Leere Tags müssen ebenfalls geschlossen werden.
5.XHTML-Dokumente müssen ein Stammelement haben.

15. Was ist ein Konstruktor? Was ist der Unterschied zu gewöhnlichen Funktionen?

构造函数:是一种特殊的方法、主要用来创建对象时初始化对象,总与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)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 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(&#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></body>

34.简述下工作流程

Mein Arbeitsprozess im vorherigen Unternehmen war ungefähr so: Nach dem Abschlussgespräch des Unternehmens fand eine einfache technische Diskussion statt, und dann traf unser Frontend die technischen Vorbereitungen im Voraus. Der Frontend-Cutter schneidet den PSD-Designentwurf aus und integriert die CSS-Dateien. Wir schreiben hauptsächlich den JS-Teil, der den Aufbau des Front-End-Frameworks (großes Projekt), das Schreiben von JS-Geschäfts- und Datenpersistenzvorgängen umfasst. Wir werden auch JS-Plug-Ins schreiben und diese zur einfachen Verwendung kapseln und JS-Front-End-Komponenten schreiben und JS-Testeinheiten. Integrieren Sie abschließend den fertigen JS-Teil in die vom Cutter bereitgestellte HTML-Seite. Führen Sie abschließend Funktionstests, Seitenkompatibilität und Produktwiederherstellung auf der fertigen Seite durch. Anschließend wird das Produkt versiegelt und zur Prüfung eingereicht. Wenn ein Fehler auftritt, wird er zur Änderung an unsere Entwickler zurückgesendet und anschließend zum Testen eingereicht. Wenn der Test erfolgreich ist, wird die Version archiviert. Warten Sie, bis alle Programme online sind, um Online-Tests durchzuführen.

35. Welche Versionskontrolltools werden im Allgemeinen verwendet?

Zweck der SVN-Sperre: Um zu verhindern, dass mehrere Personen gleichzeitig dieselbe Datei ändern Gleichzeitig Um sich gegenseitig abzudecken, muss das Versionskontrollsystem über einen Mechanismus zur Konfliktbehandlung verfügen.

Zwei Strategien für die SVN-Sperre: Optimistische Sperre: Alle ausgecheckten Dateien sind lesbar und beschreibbar. Wenn Sie die Datei nach der Änderung einchecken, ist dies der Fall erforderlich, um lokale Dateien zu aktualisieren. Das Versionskontrollsystem überschreibt Ihre lokalen Änderungen nicht, ermöglicht Ihnen jedoch das Zusammenführen von Konflikten und das Einchecken.

Strenge Sperre: Alle ausgecheckten Dateien müssen gesperrt werden. Wenn andere keine Sperre für die Datei haben, wird dies vom Versionskontrollsystem genehmigt Sie sperren die Datei und machen sie bearbeitbar.

Zwei Sperrschritte für svn: Optimistische Sperre: Wählen Sie die Datei aus, die Sie sperren möchten, klicken Sie dann mit der rechten Maustaste auf das Menü und klicken Sie auf TortoiseSVN, um „Sperren erhalten“ auszuwählen.

Strenge Sperre: Klicken Sie mit der rechten Maustaste auf die Datei oder das Verzeichnis, die Sie streng sperren möchten, verwenden Sie das TortoiseSVN-Eigenschaftenmenü, klicken Sie auf „Neue Eigenschaft“ und wählen Sie die erforderliche Sperre aus.

36. Was ist der Unterschied zwischen Git und SVN?

SVN ist ein zentralisiertes Versionskontrollsystem. Sie alle verwenden ihre eigenen Computer, daher müssen sie zunächst die neueste Version vom zentralen Server abrufen und dann die Arbeit erledigen. Nach Abschluss der Arbeit müssen sie die geleistete Arbeit auf den zentralen Server übertragen. Das zentrale Versionskontrollsystem muss mit dem Internet verbunden sein, wenn es sich in einem lokalen Netzwerk befindet. Die Bandbreite ist groß genug und die Geschwindigkeit ist schnell genug Geschwindigkeit ist langsam, es wird verwirrend sein.

Git ist ein verteiltes Versionskontrollsystem, es gibt also keinen zentralen Server. Auf diese Weise muss man beim Arbeiten nicht mit dem Internet verbunden sein, da die Versionen vorhanden sind sind alle auf Ihrem Computer. Da jeder Computer über eine vollständige Versionsbibliothek verfügt, wie können mehrere Personen zusammenarbeiten? Wenn Sie beispielsweise Datei A auf Ihrem Computer geändert haben und eine andere Person ebenfalls Datei A auf Ihrem Computer geändert hat, müssen Sie Ihre Änderungen nur gegenseitig übertragen und können die Änderungen des anderen sehen.

37. Was ist der Unterschied zwischen jquery und zepto?

1. Für mobile Programme verfügt Zepto über einige grundlegende Touch-Ereignisse, die für die Touchscreen-Interaktion verwendet werden können ( Tap-Ereignisse, Swipe-Vorfall), Zepto unterstützt den IE-Browser nicht, weil der Zepto-Entwickler Thomas Fucks über das Cross-Browser-Problem verwirrt war, sondern eine Entscheidung, die nach sorgfältiger Überlegung getroffen wurde, um die Dateigröße zu reduzieren Unterstützt ältere IE-Versionen (6 7 8) in Version 2.0 nicht mehr. Da Zepto die jQuery-Syntax verwendet, empfiehlt es in seiner Dokumentation jQuery als Fallback-Bibliothek im IE. Auf diese Weise kann das Programm weiterhin im IE ausgeführt werden und andere Browser können den Dateigrößenvorteil von Zepto nutzen. Allerdings sind die APIs der beiden nicht vollständig kompatibel. Seien Sie daher vorsichtig und führen Sie bei der Verwendung dieser Methode ausreichende Recherchen durch.

2. Der Unterschied zwischen Dom-Operationen: jQuery wird beim Hinzufügen einer ID nicht wirksam, Zepto jedoch.

3.zepto wird hauptsächlich auf mobilen Geräten verwendet und unterstützt nur neuere Browser. Der Vorteil ist, dass die Codegröße kleiner und die Leistung besser ist.
JQuery ist hauptsächlich kompatibel und kann auf verschiedenen PCs und Mobiltelefonen ausgeführt werden. Der Vorteil besteht darin, dass es mit verschiedenen Browsern kompatibel ist. Der Nachteil besteht darin, dass die Codemenge groß und die Leistung nicht gut genug ist Kompatibilität.

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

window.onload: Wird verwendet, um die Funktion innerhalb der Funktion auszuführen, wenn alle Elemente der Seite, einschließlich externer Referenzdateien, Bilder usw., geladen werden. Die Lademethode kann nur einmal ausgeführt werden. Wenn mehrere in die js-Datei geschrieben werden, kann nur die letzte ausgeführt werden.

$(document).ready(function(){}) und $(function(){}) werden beide zum Ausführen interner Funktionen verwendet, nachdem die Standard-DOM-Elemente der Seite in einen DOM-Baum analysiert wurden. Diese Funktion kann mehrmals in die JS-Datei geschrieben werden. Dies hat einen großen Vorteil für JS, die von mehreren Personen geschrieben werden, da alle Verhaltensfunktionen ausgeführt werden. Darüber hinaus kann die Funktion $(document).ready() ausgeführt werden, nachdem die HTML-Struktur geladen wurde. Sie muss nicht auf den Abschluss zeitaufwändiger Arbeiten wie das Laden großer Dateien oder den Abschluss nicht vorhandener Verbindungen warten ist hocheffizient.

39. Was ist der Unterschied zwischen attr und prop in Jq?

Für die inhärenten Attribute des HTML-Elements selbst verwenden Sie bei der Verarbeitung die prop-Methode.
Für unsere eigenen benutzerdefinierten DOM-Attribute von HTML-Elementen verwenden Sie bei der Verarbeitung die Methode attr.

40. Beschreiben Sie kurz den Unterschied zwischen diesem und dem Definieren von Eigenschaften und Methoden.

Dies stellt das aktuelle Objekt dar. Wenn dies im globalen Bereich verwendet wird, bezieht es sich auf das aktuelle Seitenobjektfenster. Wenn dies in einer Funktion verwendet wird, basiert es auf der Laufzeit dieser Funktion. Wir können auch die beiden globalen Methoden apply und call verwenden, um den spezifischen Zeiger davon in der Funktion zu ändern.

Prototype ist im Wesentlichen ein JavaScript-Objekt. Und jede Funktion verfügt über ein Standardprototypattribut.

Die im Prototyp definierten Attributmethoden werden von allen Instanzen gemeinsam genutzt. Alle Instanzen beziehen sich auf dasselbe Objekt. Das Ändern der Attribute im Prototyp durch eine einzelne Instanz wirkt sich auch auf alle anderen Instanzen aus.

41. Was ist vorkompilierter Sprachprozessor?

Sass ist eine CSS-Präprozessorsprache, die CSS-Code programmgesteuert generiert. Da es programmierbar ist, verfügt es über eine hohe Steuerungsflexibilität und -freiheit, sodass einige Codes, die sich nur schwer direkt in CSS-Code schreiben lassen, leicht implementiert werden können.

Da Sass eine Sprache ist, die CSS generiert, kann die geschriebene Sass-Datei nicht direkt verwendet werden. Sie muss von einem Compiler in eine CSS-Datei kompiliert werden, bevor sie verwendet werden kann.

Der CSS-Präprozessor ist eine Sprache, mit der CSS einige Programmierfunktionen hinzugefügt werden können, ohne dass Probleme mit der Browserkompatibilität berücksichtigt werden müssen. Sie können beispielsweise Variablen, einfache Programmlogik, Funktionen usw. in CSS verwenden. Einige grundlegende Kenntnisse in Programmiersprachen ​kann neben vielen anderen Vorteilen Ihr CSS prägnanter, anpassungsfähiger und den Code intuitiver machen. Die am häufigsten verwendeten CSS-Präprozessoren sind Sass, Less CSS und Stylus.

42.ajax und jsonp?

Der Unterschied zwischen Ajax und JSONP:
Ähnlicher Punkt: Beide fordern eine URL an
Unterschied: Der Kern von Ajax besteht darin, Inhalte über xmlHttpRequest abzurufen
Der Kern von JSONP ist dynamisch Hinzufügen des