フロントエンド JS の面接での基本的な質問 96 問 (回答を含む)

[関連する推奨事項: フロントエンド面接の質問]

1. いくつかの基本的な質問データ型? 複合データ型? 値型と参照データ型? スタック データ構造?

基本データ型: 未定義、Null、ブール、数値、文字列
値の型: 数値、ブール値、null、未定義。
参照型: オブジェクト、配列、関数。
スタックのデータ構造: 後入れ先出し (LIFO)、つまり後から挿入されたデータが先に取り出されるコレクションです!
js 配列には次のメソッドが用意されています。スタックの実装は簡単です。
shift: 配列から最初の要素を削除し、この要素の値を返します。
unshift: 1 つ以上の要素を配列の先頭に追加し、新しい長さを返します。
push: 要素を配列の末尾に追加し、新しい長さを返します。
pop: 配列から最後の要素を削除します。 array 要素を削除し、この要素の値を返します。

2. 関数の昇格の宣言? 変数の宣言と関数の宣言の違いは何ですか?

(1) 変数宣言の昇格: 変数宣言の前実行コンテキストが完成しました。
変数がコード内で宣言されている限り、どこで宣言されていても、JS エンジンはその宣言をスコープの先頭に配置します;

(2) 関数宣言のプロモーション: 実行関数宣言はコードの前に読み取られます。つまり、関数宣言をそれを呼び出すステートメントの後に配置できます。
関数がコード内で宣言されている限り、どこで宣言されているかに関係なく、JS エンジンはその宣言をスコープの先頭に配置します;

(3) 変数または関数の宣言: 関数宣言は変数宣言をオーバーライドしますが、変数の割り当てはオーバーライドしません。
同じ名前が a を識別します。つまり、変数宣言 var a と関数宣言 function a() {} があります。2 つの宣言の順序に関係なく、関数宣言は変数宣言を上書きします。つまり、このときの a の値は宣言された関数 function a() {} になります。注: 変数の宣言と同時に a が初期化された場合、または後で a に値が割り当てられた場合、その時点の a の値が変数の値になります。例: var a; var c = 1; a = 1; function a() { return true; } console.log(a);

3. データ型を決定しますか?

typeof によって返される型はすべて文字列の形式であり、関数の型を決定するために使用できます。Object 以外の型のオブジェクトを決定する方が便利です。
既知のオブジェクト タイプを決定するメソッド:instanceof、その後にオブジェクト タイプが続く必要があり、大文字と小文字を間違えることはできません。このメソッドは、条件付き選択または分岐に適しています。

4. 非同期プログラミング?

方法 1: コールバック関数。利点は、シンプルで理解しやすく、展開しやすいことです。欠点は、コードを読んだり保守したりしにくいことです。さまざまな部分高度に結合（Coupling）しているため、処理が非常に複雑になり、わかりにくく、タスクごとに指定できるコールバック関数は 1 つだけです。

方法 2: 時間監視。複数のイベントをバインドでき、各イベントは複数のコールバック関数を指定でき、モジュール化に役立つ「分離」 (デカップリング) できます。欠点は、プログラム全体をイベント駆動型にする必要があり、実行プロセスが非常に不明確になることです。

方法 3: パブリッシュ/サブスクライブ。本質的には「イベント リスニング」と似ていますが、明らかに後者よりも優れています。

メソッド 4: Promises オブジェクトは、非同期プログラミング用の統一インターフェイスを提供するために CommonJS ワーキング グループによって提案された仕様です。
簡単に言えば、各非同期タスクが Promise オブジェクトを返し、そのオブジェクトにはコールバック関数を指定できる then メソッドがあるということです。

5. イベント フロー? イベント キャプチャ?イベントが盛り上がってますか？

イベント フロー: ページからイベントを受信する順序。つまり、イベントが発生したとき、そのイベントが伝播するプロセスがイベント フローです。

IE のイベント ストリームはイベント バブリングと呼ばれます。イベント バブリング: イベントは最初に最も具体的な要素によって受信され、その後、より具体的ではないノード (ドキュメント) に上向きに伝播されます。 HTML の場合、要素がイベントを生成すると、そのイベントは親要素に渡され、親要素がイベントを受け取った後、引き続き上位要素に渡され、ドキュメントに伝播されます。オブジェクト (現在のブラウザーをウィンドウ オブジェクトに対して個人的にテストしました。IE8 以下のみがこのようなものではありません)

イベント キャプチャでは、あまり具体的でない要素がイベントをより早く受信し、最も具体的なノードが最後にイベントを受信する必要があります。その目的は次のとおりです。ターゲットに到達する前にイベントをキャプチャすること、つまりバブリング プロセスの逆です HTML のクリック イベントを例に取ると、ドキュメント オブジェクト (DOM レベルの仕様では伝播がドキュメントから開始される必要があります)ただし、現在のブラウザはドキュメントから開始します) ウィンドウ オブジェクト (ウィンドウ オブジェクトから始まる) が最初にクリック イベントを受け取り、次にイベントはイベントの実際のターゲットに到達するまで DOM ツリーに沿って下方向に伝播します。

#6. タイマーをクリアするには?

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

7. 本体に dom オブジェクトを追加するにはどうすればよいですか? innerHTML と innerText の違いは何ですか?

body.appendChild(dom element);
innerHTML: 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)? ajax プロセスについて簡単に説明します

1) クライアントは js イベントを生成します
2) XMLHttpRequest オブジェクトを作成します
3) XMLHttpRequest Configure に応答します
4) AJAX エンジン経由で非同期リクエストを送信します
5) サーバーはリクエストを受信して​​処理し、HTML または XML コンテンツを返します
6)XML はコールバックを呼び出します( ) 応答コンテンツを処理します
7) ページの一部を更新

9. コールバック関数?

コールバック関数は、関数を通じて呼び出される関数です。ポインタ。関数ポインタ (アドレス) をパラメータとして別の関数に渡し、このポインタがそれが指す関数を呼び出すために使用される場合、それをコールバック関数と呼びます。コールバック関数は、関数の実装者によって直接呼び出されるのではなく、特定のイベントまたは条件が発生したときに、そのイベントまたは条件に応答するために別のパーティによって呼び出されます。

10. クロージャとは何ですか?* スタック オーバーフローとスタック オーバーフローの違いは何ですか?メモリ リーク?どのような操作がメモリ リークを引き起こす可能性がありますか?メモリリークを防ぐにはどうすればよいでしょうか?

クロージャ: 他の関数の内部変数を読み込むことができる関数です。
スタック オーバーフロー: スタックに割り当てられたローカル データ ブロックのサイズに関係なく、データ ブロックに書き込まれるデータが多すぎるため、データが範囲外になり、他のデータが上書きされます。再帰でよく起こります。
メモリ リークとは、動的ストレージを使用して関数メモリ領域を割り当て、使用後に解放されず、メモリ ユニットが常に占有されることを指します。プログラムが終了するまで。所有または必要がなくなった後も存続するオブジェクトを指します。

メモリ リークの原因:
setTimeout の最初のパラメータで関数ではなく文字列を使用すると、メモリ リークが発生します。
クロージャ、コンソール ログ、ループ (2 つのオブジェクトが相互に参照し、保持するとループが生成されます)
メモリ リークの防止:
1. イベントを動的にバインドしないでください;
2動的に追加または動的に削除される DOM にイベントをバインドしないでください。イベントを使用して親コンテナー内でバブルアップしてイベントをリッスンします。##3. 上記の原則に違反したい場合は、DOM に destroy メソッドを提供する必要があります。 DOM が削除されていることを確認してください。バックボーン イベントも削除されています。これについては、バックボーンのソース コードを参照してください。これはより良い方法です。#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 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 ページと統合します。最後に、完成したページで機能テスト、ページの互換性、および製品の復元を実行します。その後、製品は密封され、テストに提出されます。バグが発生した場合は、修正のために開発者に返却され、テストのために送信され、最終的にテストが成功すると、バージョンがアーカイブされます。オンライン テストを実行するには、すべてのプログラムがオンラインになるまで待ちます。

35. どのようなバージョン管理ツールが一般的に使用されますか? svn はどのようにファイルをロックしますか?

svn ロックの目的: 複数の人が同じファイルを変更するのを防ぐためです。同時に、お互いをカバーするには、バージョン管理システムに競合処理メカニズムが必要です。

svn ロックの 2 つの戦略: オプティミスティック ロック: チェックアウトされたすべてのファイルは読み取りおよび書き込み可能です。ファイルへの変更にはファイル ロックを取得する必要はありません。ファイルを変更した後にチェックインすると、最初にローカル ファイルを更新するために必要です。バージョン管理システムはローカルの変更を上書きしませんが、競合をマージしてチェックインすることはできます。

厳密なロック: チェックアウトされたファイルはすべて読み取り専用です。ファイルを変更する場合は、ファイルのロックを取得する必要があります。他の人がファイルをロックしていない場合、バージョン管理システムがそのファイルを許可します。 . ファイルをロックし、ファイルを編集可能にします。

svn の 2 つのロック手順: オプティミスティック ロック: ロックするファイルを選択し、メニューを右クリックして [TortoiseSVN] をクリックして [ロックの取得] を選択します。

厳密なロック: 厳密にロックするファイルまたはディレクトリを右クリックし、TortoiseSVN プロパティ メニューを使用して、[新しいプロパティ] をクリックし、必要なロックを選択します。

36. git と svn の違いは何ですか?

SVN は集中バージョン管理システムであり、バージョン ライブラリは中央サーバーに集中されています。全員が自分のコンピュータを使用しているため、まず中央サーバーから最新バージョンを取得して作業を行い、作業が完了したら、行った作業を中央サーバーにプッシュする必要があります。集中バージョン管理システムが動作するには、インターネットに接続する必要があります。ローカル エリア ネットワーク上にある場合は問題ありません。帯域幅が十分に大きく、速度も十分に速いです。インターネット上にある場合は、ネットワークが速度が遅いと混乱してしまいます。

Git は分散バージョン管理システムであるため、中央サーバーがありません。みんなのコンピューターは完全なバージョン ライブラリです。この方法では、作業中にインターネットに接続する必要はありません。バージョンはすべてコンピュータ上にあります。全員のコンピュータには完全なバージョンのライブラリがあるため、複数人で共同作業を行うにはどうすればよいでしょうか?たとえば、あなたがコンピュータ上のファイル A を変更し、他の人もあなたのコンピュータ上のファイル A を変更した場合、お互いに変更をプッシュするだけで、お互いの変更を確認できます。

37. jquery と zepto の違いは何ですか?

1. モバイル プログラムの場合、Zepto にはタッチ スクリーン操作に使用できるいくつかの基本的なタッチ イベントがあります (タップ イベント、スワイプ インシデント)、Zepto は IE ブラウザをサポートしていません。これは、Zepto 開発者の Thomas Funks がクロスブラウザの問題で混乱したからではなく、ファイル サイズを削減するために慎重に検討した結果行われた決定です。jQuery チームのようにバージョン 2.0 では、古いバージョンの IE (6 7 8) はサポートされなくなりました。 Zepto は jQuery 構文を使用するため、ドキュメントでは IE のフォールバック ライブラリとして jQuery を推奨しています。そうすれば、プログラムは IE で引き続き実行でき、他のブラウザでも Zepto のファイル サイズの利点を享受できます。ただし、2 つの API には完全な互換性がないため、この方法を使用する場合は注意し、十分な調査を行ってください。

2. Dom 操作の違い: id の追加時に jQuery は有効になりませんが、Zepto は有効になります。

3.zepto は主にモバイル デバイスで使用され、新しいブラウザのみをサポートしていますが、コード サイズが比較的小さく、パフォーマンスが優れているという利点があります。
jquery は主に互換性が高く、様々な PC や携帯電話で動作し、様々なブラウザに対応しているのが利点ですが、コード量が多く、互換性を考えると性能が十分ではないのが欠点です。

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

window.onload: 外部参照ファイル、画像などを含むページのすべての要素が読み込まれるときに、関数内で関数を実行するために使用されます。 loadメソッドは一度しか実行できず、jsファイル内に複数記述した場合は最後のもののみ実行可能です。

$(document).ready(function(){}) と $(function(){}) はどちらも、ページの標準 DOM 要素が DOM ツリーに解析された後に内部関数を実行するために使用されます。この関数は js ファイル内で複数回記述することができ、すべての動作関数が実行されるため、複数人で作成した js には大きな利点があります。さらに、$(document).ready() 関数は HMTL 構造のロード後に実行できるため、実行前に大きなファイルのロードや存在しない接続などの時間のかかる作業が完了するのを待つ必要がありません。非常に効率的です。

39. Jq の attr と prop の違いは何ですか

HTML 要素自体の固有属性については、処理時に prop メソッドを使用します。
HTML 要素の独自のカスタム DOM 属性の場合、処理時に attr メソッドを使用します。

40. プロパティやメソッドを定義する場合と、プロトタイプを定義する場合の違いを簡単に説明します。

これは現在のオブジェクトを表します。これがグローバル スコープで使用される場合は、現在のページ オブジェクト ウィンドウを参照します。これが関数で使用される場合、これが参照するものはランタイムに基づきますこの関数のどのオブジェクトが呼び出されるのか。また、2 つのグローバル メソッド apply と call を使用して、関数内の this の特定のポインタを変更することもできます。

プロトタイプは本質的には 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 の中核は動的です<script> タグを追加して、サーバーが提供する js スクリプトを呼び出します。 </script>

43.ajax実行プロセス?

1. XMLHttpRequest オブジェクトを作成します、つまり、非同期呼び出しオブジェクトを作成します
2. 新しい HTTP リクエストを作成し、HTTP リクエストのメソッド、URL、検証情報を指定します
3 . HTTP リクエストのステータス変化に応答する関数を設定します
4. HTTP リクエストを送信します
5. 非同期呼び出しで返されたデータを取得します
6. JavaScript と DOM を使用して部分リフレッシュを実装します

44 .xhr object status?readystate?

status は、XMLHttpRequest オブジェクトの属性であり、応答の HTTP ステータス コードを示します。
readyState は XMLHttpRequest オブジェクトの属性であり、現在の XMLHttpRequest オブジェクトの状態を識別するために使用されます。

45.readystate 0~4

0: 未初期化状態: この時点で XMLHttpRequest オブジェクトが作成されています
1: 送信準備完了状態:今回は、XMLHttpRequest オブジェクトの open メソッドが呼び出されており、XMLHttpRequest オブジェクトはサーバーにリクエストを送信する準備ができています。
2: 送信ステータス: この時点で、リクエストはサーバーに送信されました。 sendメソッドを送信したが、まだレスポンスを受信して​​いない
3: 受信状態: この時点でHTTPレスポンスヘッダ情報は受信済みですが、メッセージボディは完全に受信されていません
4: レスポンス完了状態: この時点で時刻、HTTP 応答が完了しました 応答の受信

46. http プロトコルのステータス コードはいくつありますか?

200、201、302、304、400、 404、500

200: リクエストは成功しました
201: リクエストは成功し、サーバーは新しいリソースを作成しました
302: サーバーは現在、別の Web ページからのリクエストに応答していますただし、要求者は今後の要求に応答するために元の位置を使用し続ける必要があります。
304: 要求された Web ページは、最後の要求以降変更されていません。サーバーがこの応答を返すとき、Web ページのコンテンツは返されません。
400: サーバーはリクエストの構文を理解できません。
404: 要求されたリソース (Web ページなど) が存在しません
500: 内部サーバー エラー

47. 前のプロジェクトは何ですか?あなたの主な責任は何ですか?ショッピング カートのプロセス?支払い機能?

主に役割を担う機能モジュールについて説明します:

1) 製品モジュール:
1. 製品リスト: 製品の並べ替え、製品のフィルタリング、製品のフィルタリング、製品のクエリ、製品の推奨
2. 製品詳細 : タイプ 推奨製品紹介 製品詳細 製品評価 アフターメンテナンス

#2) ショッピング カート モジュール: 製品番号、数量、価格、合計金額、運賃、配送オプション、合計運賃、削除オプションショッピング カートから、数量を更新、チェックアウト、ショッピングを続ける、製品説明、在庫情報

48. sessionStorage、localstroage、Cookie の関係は何ですか、Cookie は最大何バイトまで保存できますか

3 つの共通点: これらはすべてブラウザ側に保存され、同じ起源を持ちます。

違い:
1. Cookie はブラウザとサーバーの間でやり取りされます。 SessionStorage と localStorage はデータをサーバーに自動的に送信せず、ローカルに保存するだけです

2。ストレージ サイズの制限も異なります。Cookie データは 4K を超えることはできませんが、sessionStorage と localStorage は Cookie よりもはるかに大きく、 5M に達する可能性があります。

3. データの有効期間は異なります。sessionStorage: は現在のブラウザ ウィンドウが閉じるまでのみ有効であり、当然永続化できません。localStorage: は常に有効であり、ウィンドウまたはブラウザが閉じているため、永続データとして使用されます。Cookie は、ウィンドウまたはブラウザが閉じている場合でも、設定された Cookie の有効期限までのみ有効です

4. スコープが異なると、sessionStorage は共有されません同じページであっても、異なるブラウザ ウィンドウ内で共有されます (つまり、データは共有されません)。localStorage はすべての同種のウィンドウで共有され、Cookie もすべての同種のウィンドウで共有されます (つまり、データ共有)。

49. ajax における get と post の違いは何ですか?

Get と post はどちらもデータ送信方法です。
getのデータはURLの疑問符の後に繋がれた文字列を通して渡されます。 Post は、HTTP パッケージ本体を通じてデータを送信します。
getの送信量には制限がありますが、postには制限がありません。
get のセキュリティは post ほど高くない可能性があるため、データの取得には get を使用し、データの変更には post を使用するのが一般的です。

50.Gc機構とは何ですか？クロージャが変数や関数をリサイクルしないのはなぜですか?

1. Gc ガベージ コレクション メカニズム;
2. 外部変数は解放されないため、指定された大きな関数内の小さな関数も解放できません

51. 簡単にオブジェクト指向について何を理解しているかを説明してください。

すべてはオブジェクトです。オブジェクトをクラスに抽象化することは、具体的には、オブジェクトの静的特性と動的特性を属性とメソッドに抽象化することであり、クラスのアルゴリズムとデータ構造をカプセル化することです。クラスでは、プログラムは複数のオブジェクトと相互間の通信で構成されます。

オブジェクト指向には、カプセル化、継承、ポリモーフィズムがあります。
カプセル化: 公開する必要のないオブジェクト内部の詳細を非表示にするため、内部の詳細の変更が外界から分離され、通信用のインターフェイスのみに依存します。カプセル化により、プログラミングの複雑さが軽減されます。継承を通じて、新しいクラスの作成が簡単になります. クラスが派生クラスから非プライベート メソッドとパブリック プロパティを取得するという面倒な作業はコンパイラに任せられます. インターフェイスの継承と実装、および実行時の型バインディング メカニズムによって生成される多態性により、異なるクラスによって生成されるポリモーフィズム オブジェクトは同じメッセージに対して異なる応答を行うことができ、コードの多用途性が大幅に向上します。
#つまり、オブジェクト指向機能により、大規模なプログラムの再利用性と保守性が向上します。
#52.これは何ですか、またさまざまなシナリオで何を表しますか

(1) function a(){ this ?} //これ: Windows を指します

(2) function b(){ return function(){ this ?}}b()(); //これ: Windows を指します

(3) function c(){ return {s:function( ){this} }}c().s(); //This: オブジェクトを指します

実行時のバインディング特性により、JavaScript における this の意味はさらに豊富です。グローバル オブジェクトにすることもできます。 、現在のオブジェクトまたは Any オブジェクト、すべては関数の呼び出し方法によって異なります。


53. データ検証はどのように処理しますか? jquery.validate?

平たく言えば、データの整合性を保証するために、指定されたアルゴリズムを使用して元のデータに対して計算されるチェック値です。受信機は同じアルゴリズムを使用してチェック値を計算し、それがデータとともに提供されたチェック値と同じであれば、データは完了したことを意味します。 正規表現を使用して処理する;

jquery.validate: フォーム検証プラグイン

54. ログイン アカウントのパスワードを暗号化する方法?

Md5

55. jq では、mouseover、mouseenter、mouseout、mouseleave と hover の関係は何ですか?

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 を出力するために、less.js を導入する必要があります。また、開発プロセスで Less を使用し、CSS ファイルにコンパイルしてプロジェクトに直接配置します。

2. 変数記号が異なります。less は @、scss は $ であり、スコープも異なります。less はブロックレベルのスコープです。

3. 出力設定、Less Thereは出力設定ではありません。Sass は、ネスト、コンパクト、圧縮、展開の 4 つの出力オプションを提供します。ネスト: ネストされたインデント CSS コード (デフォルト)。エキスパンド: 展開された複数行の CSS コード。コンパクト: シンプルな形式の CSS コード。圧縮: 圧縮されています。cssコード

4. Sass は条件ステートメントをサポートしており、if{}else{}、for{} ループなどを使用できますが、

5 は使用できません。外部 CSS ファイル、sass 参照を参照します。 external ファイルは _ で始まる必要があります。ファイル名がアンダースコア _ の形式である場合、Sass はそのファイルが参照ファイルであると判断し、CSS ファイルにコンパイルしません。 Less での外部ファイルの参照と CSS での @import に違いはありません。

6. sassとlessのツールライブラリは異なります。 Sass には Compass というツール ライブラリがあります。簡単に言えば、sass と Compass の関係は Javascript と jQuery の関係に似ています。Compass は sass のツール ライブラリです。これに基づいて、Sass の機能を補完および強化するために、一連の便利なモジュールとテンプレートがカプセル化されています。 Less には、UI コンポーネント ライブラリ Bootstrap があります。Bootstrap は、Web フロントエンド開発でよく知られたフロントエンド UI コンポーネント ライブラリです。Bootstrap のスタイル ファイルのソース コードの一部は、less 構文を使用して記述されています。

要約: sass であろうとそれ以下であろうと、CSS は CSS をベースにした高級言語とみなすことができます。その目的は CSS 開発をより柔軟かつ強力にすることです。sass の機能はそれよりも強力です本物のプログラミング言語と言われていますが、less は比較的明確で使いやすく、コンパイル環境の要件も比較的緩いです。 Sass のコンパイルには Ruby のインストールが必要であり、中国では Ruby の公式 Web サイトにアクセスできないことを考慮すると、個人的には実際の開発ではあまり使いたくないです。

74.ブートストラップのメリット?

適応性と応答性の高いレイアウト、12 グリッド システム、統一されたインターフェイス スタイルと CSS スタイルは、チーム開発に役立ちます。柔軟で安定した高品質の HTML および CSS コードを作成するための規律。

75. 開発中にプロジェクトを管理するにはどうすればよいですか? gulp?

開発するとき、私は gulp などのフロントエンド ワークフロー管理ツールを使用してプロジェクトを管理します。 Gulp は新世代のフロントエンド プロジェクト構築ツールです。gulp とそのプラグインを使用して、プロジェクト コード (less、sass) をコンパイルし、js および css コードを圧縮し、さらには画像を圧縮し、ファイルを結合することができます。ファイルの圧縮、構文チェック、ファイル変更の監視、テスト、バイナリ変換、画像の変換、その他の機能。 Gulp には小さな API しかないため、習得は非常に簡単です。優れたプロジェクト管理を実現します。

76. 圧縮とマージの目的は何ですか? http リクエストを最適化するにはどうすればよいですか?

1) Web パフォーマンス最適化の最も重要なベスト プラクティスの 1 つは、HTTP リクエストを減らすことです。 HTTP リクエストを減らす主な方法は、JavaScript ファイルと CSS ファイルをマージして圧縮することです。

CSS スプライト (CSS スプライト): サイトのアイコン全体を画像ファイルに配置し、CSS のbackground-image属性とbackground-position属性を使用してその一部を配置します。

スクリプトとスタイル シートのマージ; イメージ マップ: イメージ マップ タグを使用して、クライアント イメージ マップを定義します (イメージ マップは、クリック可能な領域のあるイメージを指します) 詳細については、次を参照してください: http:// club.topsage.com/thread-2527479-1-1.html

画像 js/css などの静的リソースを静的サーバーまたは CDN サーバーに配置する場合は、異なるドメイン名を使用するようにしてください。これにより、Cookie が互いに混入するのを防ぎ、リクエストごとの往復データを減らすことができます。

Css は画像を置き換え、一部のデータをキャッシュします

location.reload() の使用を減らす: location.reload() を使用するとページが更新されます。ページを更新すると、ページのすべてのリソース (CSS) 、js、img など) ) はサーバーに再度リクエストします。 location.reload() の代わりに location.href="現在のページの URL" を使用することをお勧めします。location.href を使用すると、ブラウザーはローカル キャッシュ リソースを読み取ります。

77. ajaxリクエストメソッドは何種類(8種類)あるのでしょうか？

1)$.get(url,[データ],[コールバック])
2)$.getJSON(url,[データ],[コールバック])
3)$ .post(url,[データ],[コールバック],[タイプ])
4)$.ajax(オプション)
5)$.getScript(url,[コールバック] )
6) jqueryオブジェクト.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];values.sort();//0,1,10,15,5
var 値 = [1, 2, 3, 4, 5];values.reverse();//5,4,3,2,1

js で並べ替え (詳細については、http://www を参照してください) .tuicool.com/articles/IjInMbU）
ソート ソート、バブル ソート、クイック ソート、挿入ソート、ヒル ソートを使用します。選択ソート
Merge sort

localeCompare() メソッドは文字列エンコーディングのソートに使用されます
localeCompare メソッド: 2 つの文字列が現在のロケールで同じかどうかを示す値を返します。

80. オブジェクト指向について理解していることを簡単に説明してください。

オブジェクト指向は、すべてはオブジェクトであるという哲学的な考え方に基づいており、オブジェクトをクラスに抽象化するとは、具体的には、オブジェクトの静的特性と動的特性を属性とメソッドに抽象化することです。 、クラスを抽象化する 物事のアルゴリズムとデータ構造はクラスにカプセル化され、プログラムは複数のオブジェクトとそれらの間の通信で構成されます。

オブジェクト指向には、カプセル化、継承、ポリモーフィズムがあります。

カプセル化: 公開する必要のないオブジェクト内部の詳細を非表示にするため、内部の詳細の変更が外界から分離され、通信用のインターフェイスのみに依存します。カプセル化により、プログラミングの複雑さが軽減されます。継承を通じて、新しいクラス変数を作成できます 派生クラスから非プライベート メソッドとパブリック プロパティを取得するクラスの面倒な作業はコンパイラに任せられます インターフェイスと実行時の型バインディング メカニズムの継承と実装によって生成される多態性により、異なるクラス 生成されたオブジェクトは、同じメッセージに対して異なる応答を行うことができ、コードの汎用性が大幅に向上します。

つまり、オブジェクト指向機能により、大規模なプログラムの再利用性と保守性が向上します。

81.オブジェクトを作成するにはどうすればよいですか?

1. ファクトリ パターン
2. コンストラクター パターン
3. プロトタイプ パターン
4. コンストラクターとプロトタイプの混合パターン
5. 動的プロトタイプ パターン
6.寄生コンストラクター パターン
7. 安全なコンストラクター パターン

プログラム デザイン パターン? ファクトリ パターン? パブリッシュとサブスクライブ?
1) デザイン パターンは、特定の言語の特定のコード部分ではなく、デザイン A パターンこれは、コーディング時に遭遇するさまざまな問題に対する考えられる解決策を提供するアイデアであり、普遍的なコード ブロックというよりは、一種の論理的思考に傾いています。
デザイン パターンは主に、創造的、構造的、行動的の 3 つのタイプに分類されます。
クリエイティブ パターン: シングルトン パターン、抽象ファクトリー パターン、ビルダー パターン、ファクトリー パターン、プロトタイプ パターン。
構造モード: アダプター モード、ブリッジ モード、デコレーター モード、コンビネーション モード、アピアランス モード、フライウェイト モード、およびプロキシ モード。
動作パターン: テンプレート メソッド パターン、コマンド パターン、イテレータ パターン、オブザーバ パターン、メディエータ パターン、メモ パターン、インタプリタ パターン、状態パターン、戦略パターン、責任連鎖パターン、訪問者パターン。

2) 作成パターンと同様に、ファクトリ パターンは、作成されるオブジェクトの特定のクラスを指定せずにオブジェクト (工場内の製品と見なされます) を作成します。
ファクトリ パターンは、オブジェクトを作成するためのインターフェイスを定義します。このインターフェイスは、サブクラスによってインスタンス化されるクラスを決定します。このパターンでは、クラスのインスタンス化をサブクラスに延期します。サブクラスは、インターフェイス メソッドをオーバーライドして、作成時に独自のオブジェクト タイプを指定できます。

3) オブザーバー パターンは、パブリッシュ/サブスクライブ パターンとも呼ばれ、1 対多の関係を定義し、複数のオブザーバー オブジェクトが特定のトピック オブジェクトを同時に監視できるようにします。トピック オブジェクトが変更されると、監視しているすべてのオブジェクトに通知されます。これは、トピックとオブザーバーの 2 種類のオブジェクトで構成されます。トピックはイベントの発行を担当し、オブザーバーはこれらのイベントをサブスクライブすることでサブジェクトを観察します。パブリッシャーとサブスクライバーは完全に分離されており、相手の存在を知りません。 . カスタム イベントの名前を共有するだけです。
(デザインパターンは本当に高度すぎます。友達はオンラインの例に基づいて自分で学ぶことができます。私は本当に無力です)

82.commonjs?requirejs?AMD|CMD|UMD?

1. CommonJS は JS の性能に関する仕様を策定するもので、NodeJS はこの仕様を実装したもので、Webpack も CommonJS の形式で記述されます。 js にはモジュールの機能がないため、CommonJS が登場しました。しかし、ブラウザでは機能しません。 CommonJS で定義されるモジュールは、{モ​​ジュール参照 (必須)} {モジュール定義 (エクスポート)} {モジュール識別 (モジュール)} に分かれています。

2.RequireJS は JavaScript モジュール ローダーです。 RequireJS には、define() と require() という 2 つの主要なメソッドがあります。これら 2 つのメソッドは基本的に同じ宣言を持ち、どちらも依存関係をロードしてコールバック関数を実行する方法を知っています。 require() とは異なり、define() はコードを名前付きモジュールとして保存するために使用されます。したがって、define()のコールバック関数は、このモジュール定義として戻り値を持つ必要があります。これらの同様に定義されたモジュールは、AMD (Asynchronous Module Definition) と呼ばれます。

3.AMD は、プロモーション プロセス中の RequireJS モジュール定義の標準化された出力であり、AMD はモジュールを非同期的に読み込みます。そのモジュールは、オブジェクト、関数、コンストラクター、文字列、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. call メソッドと apply メソッドを使用して関数コンテキストを変更し、継承を実装する
3. プロトタイプ チェーンの継承

84 . JavaScript プロトタイプ、プロトタイプ チェーン?その特徴は何ですか?

JavaScript には、プリミティブ値とオブジェクト値の 2 つのタイプの値があります。各オブジェクトには、通常プロトタイプと呼ばれる内部プロパティ [[プロトタイプ]] があります。オブジェクトまたは null。値がオブジェクトの場合、オブジェクトには独自のプロトタイプも必要です。これにより、プロトタイプ チェーンと呼ばれる線形チェーンが形成されます。

オブジェクトのプロトタイプにアクセスするには、 ES5 では Object.getPrototypeOf メソッド、ES6 では __proto__ 属性を使用できます。プロトタイプ チェーンの機能は、継承を実装することです。たとえば、新しい配列を作成する場合、配列メソッドは配列のプロトタイプに基づきます。遺伝性の。

85. eval は何をしますか?

その機能は、対応する文字列を JS コードに解析して実行することです。安全ではなく、非常にパフォーマンスを消費する eval の使用は避けるべきです (js ステートメントに解析するために 2 回、そして1 回実行します)。

86. null と未定義の違いは何ですか?

未定義は変数の値が宣言されているが初期化されていないことを意味し、null はオブジェクトを保存する準備はできているが、オブジェクトの値が実際には保存されていないことを意味します。論理的な観点から見ると、null は null オブジェクト ポインターを表します。

87. JSON をご存知ですか?

JSON (JavaScript Object Notation) は軽量のデータ交換形式です。これは JavaScript のサブセットに基づいています。データ形式はシンプルで読み書きが簡単で、占有帯域幅もほとんどありません。

88. js の読み込みを遅らせるにはどのような方法がありますか?

defer と async、DOM の動的作成 (最も一般的に使用される)、オンデマンドでの js の非同期読み込み

89. ajax とは何ですか? 非同期 JavaScript とXML は、インタラクティブな Web アプリケーションを作成するための Web 開発テクノロジを指します。 AJAX は、バックグラウンドでサーバーと少量のデータを交換することで、Web ページの非同期更新を可能にします。これは、ページ全体を再読み込みしなくても、Web ページの一部を更新できることを意味します。

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 スプライト、JS、CSS ソース コード圧縮、画像サイズ制御が適切です (Web ページの Gzip、CDN ホスティング、データ キャッシュ、画像サーバー)。

(2) フロントエンドのテンプレート JS データにより、HTML タグによる帯域の無駄を削減 フロントエンドは変数を使用して AJAX リクエストの結果を保存 ローカル変数を操作するたびにリクエストする必要がなく、コスト削減リクエストの数

( 3) DOM 操作の代わりに innerHTML を使用して、DOM 操作の数を減らし、JavaScript のパフォーマンスを最適化します。

(4) 設定するスタイルが多い場合は、スタイルを直接操作するのではなく、classNameを設定してください。

(5) 使用するグローバル変数を減らし、DOM ノード検索の結果をキャッシュします。 IO 読み取り操作を減らします。

(6) CSS 式 (css 式) (動的プロパティ (動的プロパティ) とも呼ばれます) の使用は避けてください。

(7) 画像のプリロード。スタイルシートを一番上に置き、スクリプトを一番下に置き、タイムスタンプを追加します。

(8) ページのメイン レイアウトでのテーブルの使用は避けてください。コンテンツが完全にダウンロードされるまでテーブルは表示されません。表示は PC CSS レイアウトよりも遅くなります。

95. URL を入力してからページの読み込みが完了し、ページに表示されるまでのプロセスはどうなりますか? (プロセスは詳細であるほど良いです)

ブラウザ キャッシュを見つけます
DNS 解決、ドメイン名に対応する IP アドレスを見つけて、リダイレクト (301) し、2 番目の 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 チュートリアル "

以上がフロントエンド JS の面接での基本的な質問 96 問 (回答を含む)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。