// 阻止事件冒泡  
function stopBubble(e) {  
  if(e && e.stopPropagation){  
      e.stopPropagation();  
  } else {  
    window.event.cancelBubble = true;  
  }  
};  
// 阻止瀏覽器的默認事件  
function stopDefault(e){  
  if(e && e.preventDefault) {  
    e.preventDefault();  
  } else {  
    window.event.returnValue = false;  
  }  
  return false;  
};  

事件模型解釋： https://segmentfault.com/a/11...
Javascript的事件流模型都有什么？如何阻止？

兩種事件模型：捕獲型事件和冒泡型事件
事件流包含三個階段：事件捕獲階段，處于目標階段和事件冒泡階段。首先發生的是事件捕獲，然后是實際的目標接收到事件，最后階段是冒泡階段。
1、事件：是文檔或瀏覽器窗口中發生的一些特定的交互瞬間
 2、事件流：事件發生的順序，頁面中接受事件的順序
3、事件冒泡：(事件從最深的節點開始，然后逐步向上傳播事件，)事件會從最內層的元素開始發生，一直向上傳播，直到document對象。發生click事件的順序應該是p -> div -> body -> html -> document
4、事件捕獲：事件會從最外層開始發生，直到最具體的元素。發生click事件的順序應該是document -> html -> body -> div -> p
5、事件代理（事件委托）：通過它你可以把事件處理器添加到一個父級元素上，這樣就避免了把事件處理器添加到多個子級元素上，給父元素綁定事件，用來監聽子元素的冒泡事件，并找到是哪個子元素的事件。

事件委托的好處：

事件委托技術可以避免對每個字元素添加事件監聽器，減少操作DOM節點的次數，從而減少瀏覽器的重繪和重排，提高代碼的性能。
使用事件委托，只有父元素與DOM存在交互，其他的操作都是在JS虛擬內存中完成的，這樣就大大提高了性能。

https://zhuanlan.zhihu.com/p/...
https://www.cnblogs.com/zhana...
https://www.cnblogs.com/liuga...

jQuery中實現事件委托的三種方法：
1)    $.on: 基本用法:$(".parent").on("click", "a", function () { console.log("click event on tag a"); })，它是 .parent 元素之下的 a 元素的事件代理到$(".parent")之上，只要在這個元素上有點擊事件，就會自動尋找到.parent元素下的a元素，然后響應事件；
2)    $.delegate: 基本用法:$(".parent").delegate("a", "click", function () { console.log("click event on tag a"); })，同上，并且還有相對應的$.delegate來刪除代理的事件；
3)    $.live: 基本使用方法:$("a", $(".parent")).live("click", function () { console.log("click event on tag a"); })，同上，然而如果沒有傳入父層元素$(.parent)，那事件會默認委托到$(document)上；(已廢除)

事件委托原理：

事件委托是通過事件冒泡的原理，利用父級去觸發子級的事件。
如果不用事件委托，將ul下每一個li都去添加click事件監聽，非常麻煩，而且對于內存消耗是非常大的，效率上需要消耗很多性能；
另外就是如果通過js動態創建的子節點，需要重新綁定事件。
而利用事件委托的話，只需要給父級綁定一個事件監聽，即可讓每個li都綁定上相應的事件，讓你避免對特定的每個節點添加事件監聽器；事件監聽器是被添加到它們的父元素上。事件監聽器會分析從子元素冒泡上來的事件，找到是哪個子元素的事件。

適合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。

值得注意的是，mouseover和mouseout雖然也有事件冒泡，但是處理它們的時候需要特別的注意，因為需要經常計算它們的位置，處理起來不太容易。

不適合的就有很多了，舉個例子，mousemove，每次都要計算它的位置，非常不好把控，在不如說focus，blur之類的，本身就沒用冒泡的特性，自然就不能用事件委托了。

18、事件冒泡和事件捕獲

什么是事件，IE與火狐的事件機制有什么區別？ 如何阻止冒泡？

1. 我們在網頁中的某個操作（有的操作對應多個事件）。例如：當我們點擊一個按鈕就會產生一個事件。是可以被 JavaScript 偵測到的行為。  
2、ie支持事件冒泡，火狐支持捕獲和冒泡兩種
3.  w3c支持 e.stopPropagation()，IE則是使用e.cancelBubble = true

https://blog.csdn.net/cyqzy/a...
https://www.cnblogs.com/linxu...
https://www.cnblogs.com/alsy/...

IE和DOM事件流的區別
https://www.cnblogs.com/lucky...

執行順序不一樣、
參數不一樣
事件偵聽函數不一樣
this指向不一樣

https://www.cnblogs.com/amcy/...
19、JavaScript防XSS攻擊

XSS（Cross Site Scripting），跨站腳本攻擊，是一種允許攻擊者在另外一個用戶的瀏覽器中執行惡意代碼腳本的腳本注入式攻擊。XSS攻擊其實就是代碼的注入。

XSS危害

通過document.cookie盜取cookie

使用js或css破壞頁面正常的結構與樣式

流量劫持（通過訪問某段具有window.location.href定位到其他頁面）

Dos攻擊：利用合理的客戶端請求來占用過多的服務器資源，從而使合法用戶無法得到服務器響應。

利用iframe、frame、XMLHttpRequest或上述Flash等方式，以（被攻擊）用戶的身份執行一些管理動作，或執行一些一般的如發微博、加好友、發私信等操作。

利用可被攻擊的域受到其他域信任的特點，以受信任來源的身份請求一些平時不允許的操作，如進行不當的投票活動。

如何防止攻擊

編碼，就是轉義用戶的輸入，把用戶的輸入解讀為數據而不是代碼

校驗，對用戶的輸入及請求都進行過濾檢查，如對特殊字符進行過濾，設置輸入域的匹配規則等。

設置CSP：CSP也是采用白名單的方式來匹配網頁的解析和代碼的執行，只不過，執行的層次上升到了瀏覽器的高度

http://www.cnblogs.com/caizhe...
http://www.cnblogs.com/unclek...
20、適配方案fontsize為什么設在html不是body

使用rem布局，實質都是通過動態改寫html的font-size基準值，來實現不同設備下的良好統一適配

rem是基于root根元素(html)計算的,html{font-size:62.5%} body{font-size:3rem}，rem的實質是等比縮放

https://www.cnblogs.com/axl23...
https://segmentfault.com/a/11...

21、get和post
https://www.cnblogs.com/logsh...

HTTP是什么？HTTP是基于TCP/IP的關于數據如何在萬維網中如何通信的協議。
HTTP的底層是TCP/IP。所以GET和POST的底層也是TCP/IP，也就是說，GET/POST都是TCP鏈接

GET和POST本質上就是TCP鏈接，并無差別。但是由于HTTP的規定和瀏覽器/服務器的限制，導致他們在應用過程中體現出一些不同。
GET和POST是HTTP請求的兩種基本方法，最直觀的區別就是GET把參數包含在URL中，POST通過request body傳遞參數
GET和POST還有一個重大區別，簡單的說：GET產生一個TCP數據包；POST產生兩個TCP數據包。
長的說：對于GET方式的請求，瀏覽器會把http header和data一并發送出去，服務器響應200（返回數據）；而對于POST，瀏覽器先發送header，服務器響應100 continue，瀏覽器再發送data，服務器響應200 ok（返回數據）。
注意： 并不是所有瀏覽器都會在POST中發送兩次包，Firefox就只發送一次。

GET在瀏覽器回退時是無害的，而POST會再次提交請求。
GET產生的URL地址可以被Bookmark，而POST不可以。
GET請求會被瀏覽器主動cache，而POST不會，除非手動設置。
GET請求只能進行url編碼，而POST支持多種編碼方式。
GET請求參數會被完整保留在瀏覽器歷史記錄里，而POST中的參數不會被保留。
GET請求在URL中傳送的參數是有長度限制的，而POST么有。
對參數的數據類型，GET只接受ASCII字符，而POST沒有限制。
GET比POST更不安全，因為參數直接暴露在URL上，所以不能用來傳遞敏感信息。
GET參數通過URL傳遞，POST放在Request body中。

22、http協議中除了get和post之外還有哪些

根據HTTP標準，HTTP請求可以使用多種方法，其功能描述如下所示。
HTTP1.0定義了三種請求方法： GET、POST、HEAD
HTTP1.1新增了五種請求方法：OPTIONS、PUT、DELETE、TRACE 、CONNECT

23、前端緩存（cookies、localStorage、sessionStorage）:https://segmentfault.com/a/11...

1、cookies是服務器發送給客戶端的特殊信息，只能保存字符串類型，以文本的形式保存在客戶端，每次請求都帶著它；如果不在瀏覽器設置過期時間，cookie被保存在內存中，生命周期隨瀏覽器的關閉而結束，這種cookie簡稱為會話cookie；如果瀏覽器設置了過期時間，cookie被保存在硬盤中，關閉瀏覽器，cookie仍存在，直到過期時間結束才消失。

cookie的應用場景：

（1）判斷用戶是否登陸過網站，以便下次實現自動登錄（或記住密碼）。如果我們刪除cookie，每次登錄都必須重新填寫登錄信息，
（2）保存上次登錄時間等信息。
（3）保存上次查看的頁面。
（4）瀏覽計數。

2、localStorage 的生命周期是永久的，關閉頁面或瀏覽器之后localStorage的數據也不會消失。除非localStorage主動刪除數據。否則數據永遠不會消失。
3、sessionStorage 的生命周期僅在當前會話下有效，sessionStorage是在同源窗口中始終保存數據，只要瀏覽器沒有關閉，即使刷新頁面或進入同源的另一個頁面，數據依然存在。但是sessionStorage在瀏覽器關閉后就會被銷毀。同時獨立打開同一個頁面或同一個窗口，sessionStorage也不是一樣的。
其中localStorage 和 sessionStorage 都保存在客戶端，不與服務器進行交互通信。

localStorage 和 sessionStorage 的應用場景：

（1）localStorage 常用于長期登錄（+判斷用戶是否已登錄），適合長期保存在本地的數據。
（2）sessionStorage適用于敏感賬號一次性登錄。

cookie和session的區別

cookie數據存放在客戶的瀏覽器上，session數據放在服務器上

cookie不是很安全，別人可以分析存放在本地的cookie并進行cookie欺騙，考慮*到安全應當使用session

session會在一定時間內保存在服務器上，當訪問增多，會比較占用你服務器的性能，考慮到減輕服務器性能方面，應當使用cookie

單個cookie保存的數*據不能超過4K，很多瀏覽器都限制一個站點最多保存20個cookie

建議將登錄信息等重要信息存放為session，其他信息如果需要保留，可以放在cookie中

session保存在服務器，客戶端不知道其中的信息；cookie保存在客戶端，服務器能夠知道其中的信息

session中保存的是對象，cookie中保存的是字符串

session不能區分路徑，同一個用戶在訪問一個網站期間，所有的session在任何一個地方都可以訪問到，而cookie中如果設置了路徑參數，那么同一個網站中不同路徑下的cookie互相是訪問不到的

Cookie和session的作用。區別、應用范圍。Session的工作原理是什么

區別：
1、cookie數據存放在客戶的瀏覽器上，session數據放在服務器上。
2、cookie不是很安全，別人可以分析存放在本地的COOKIE并進行COOKIE欺騙考慮到安全應當使用session。
3、session會在一定時間內保存在服務器上。當訪問增多，會比較占用你服務器的性能考慮到減輕服務器性能方面，應當使用COOKIE。
4、單個cookie保存的數據不能超過4K，很多瀏覽器都限制一個站點最多保存20個cookie。
5、所以個人建議：
將登陸信息等重要信息存放為SESSION
其他信息如果需要保留，可以放在COOKIE中

描述一下cookies，sessionStorage，localStorage的區別

sessionStorage用于本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問并且當會話結束后數據也隨之銷毀。
因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。
而localStorage用于持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。

**web storage和cookie的區別**

Web Storage的概念和cookie相似，區別是它是為了更大容量存儲設計的。Cookie的大小是受限的，并且每次你請求一個新的頁面的時候Cookie都會被發送過去，這樣無形中浪費了帶寬，另外cookie還需要指定作用域，不可以跨域調用。
除此之外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發者自己封裝setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是與服務器進行交互，作為HTTP規范的一部分而存在 ，而Web Storage僅僅是為了在本地“存儲”數據而生。

localStorage、sessionStorage、Cookie的區別及用法:https://segmentfault.com/a/11...

淺談session,cookie,sessionStorage,localStorage的區別及應用場景:https://www.cnblogs.com/cence...

24、常用的本地存儲-----cookie篇
https://www.cnblogs.com/cxyin...
怎么設置cookie，怎么設置cookie以及刪除cookie和cookie詳解：https://www.cnblogs.com/mader...
編寫web端cookie的設置和獲取方法：https://blog.csdn.net/u010081...
設置獲取cookie，setCookie，getCookie
https://www.cnblogs.com/zmj-b...
25、javascript用戶密碼加密

md5加密是單向不可逆的，md5 是一種 hash 算法

MD5：信息摘要的一種實現，它可以從任意長度的明文字符串生成128位的哈希值。即使明文消息只改動了一點點，生成的結果也會完全不同。

第三方支付平臺如何驗證請求的簽名？
1.發送方和請求方約定相同的字符串拼接規則，約定相同的密鑰。
2.第三方平臺接到支付請求，按規則拼接業務參數和密鑰，利用 MD5 算法生成 Sign。
3.用第三方平臺自己生成的 Sign 和請求發送過來的 Sign 做對比，如果兩個 Sign 值一模一樣，則簽名無誤，如果兩個 Sign 值不同，則信息做了篡改。這個過程叫做驗簽。

md5原理：https://www.cnblogs.com/secon...

DES對稱加密

DES加密原理：https://www.cnblogs.com/xqxac...

26、談談你對this的理解

this是js的一個關鍵字，隨著函數使用場合不同，this的值會發生變化。但是總有一個原則，那就是this指的是調用函數的那個對象。this一般情況下：是全局對象Global。 作為方法調用，那么this就是指這個對象。

個人建議，可以先回答this在不同的場合指向的是什么，在來回答什么時候用到this，這樣回答的邏輯會比較好。

this表示當前對象，this的指向是根據調用的上下文來決定的，默認指向window對象，指向window對象時可以省略不寫。

this是對應執行環境，在全局作用域下，this默認指向window對象。全局環境的this始終指向的是window對象；局部環境下，對象函數調用，this指向的永遠是調用該方法的對象，哪個對象調用就指向哪個對象

顯示綁定就是通過apply，call，bind，直接將函數中的this綁定到想要的對象上

創建一個構造函數的實例，構造函數中的this會綁定到這個實例對象上

This指針作用域：
1）、在全局執行環境中使用this，表示Global對象，在瀏覽器中就是window對象。
2）、當在函數執行環境中使用this時，情況就有些復雜了。如果函數沒有明顯的作為非window對象的屬性，而只是定義了函數，不管這個函數是不是定義在另一個函數中，這個函數中的this仍然表示window對象。如果函數顯示地作為一個非window對象的屬性，那么函數中的this就代表這個對象。
3）、當通過new運算符來調用函數時，函數被當做一個構造函數，this指向構造函數創建出來的對象。
注：當函數被調用時，我們看緊鄰括號“()”的左邊。如果在括號的左側存在一個引用，傳遞給調用函數的“this”值是引用所屬于的那個對象，否則this的值就是全局對象。

var name = "window在手，天下我有！";
var obj = {
  name: "敲代碼的怪蜀黍",
  objBar: {
    name: "BOBO",
    barFun: function(){
      console.log(this.name);
    }
  }
};
 
//()左側是barFun引用，它指向objBar對象，所以打印出 “BOBO”
var test1 = obj.objBar.barFun(); //BOBO
 
//()左側是test2，test2它并不是某個對象的引用，所以打印出 “window在手，天下我有！”
var test2 = obj.objBar.barFun;
test2(); //window在手，天下我有！
 
//下面這個看起來復雜，其實抓住一點就行了：()左側是testBar，testBar并不屬于某個對象的引用，當然打印出來的還是 “window在手，天下我有！”
var test3 = obj.objBar;
var testBar = test3.barFun;
testBar(); //window在手，天下我有！

http://www.ruanyifeng.com/blo...
https://blog.csdn.net/lxcao/a...
https://www.cnblogs.com/liubi...
https://www.cnblogs.com/banzh...
https://www.cnblogs.com/yuanb...

和箭頭函數的區別

箭頭函數中的this:

1.箭頭函數會捕獲其所在上下文的 this 值，作為自己的 this 值，自己本身并沒有this值；
2.箭頭函數的this永遠指向其上下文的this，任何方法都改變不了其指向，如call(), bind(), apply()。
3.箭頭函數作為匿名函數,是不能作為構造函數的,不能使用new
4.箭頭函數沒有原型屬性

https://www.jianshu.com/p/8f7...

27、如何規避javascript多人開發函數重名問題
https://www.cnblogs.com/zhuzh...

可以開發前規定命名規范,根據不同開發人員開發的功能在函數前加前綴;
將每個開發人員的函數封裝到類中,調用的時候就調用類的函數,即使函數重名只要類名不重復就行;
JS中是沒有塊級作用域的只有函數作用域，盡量少的使用全局變量，盡可能使用局部變量，這不僅會減少變量重名的幾率，更會減少內存開銷，因為局部變量一般都會在函數結束后自動銷毀釋放出內存，而全局變量會直到進程結束才會被銷毀,其次，當我們需要一個作用域來關住變量時一般會用一個匿名函數來充當這個作用域。
用類來封裝子頁, 定義一個空對象，變量和方法都掛載到了不同的對象上，這無形中就給每個同名變量和方法增加了一個頂部命名空間，這樣可以最大化的減少代碼耦合的幾率，項目也容易維護。

// A同學負責的工作人員信息
var A = {} //定義一個空對象
A.name = "tom";
A.gender = "male";
A.age = 30;
A.showName = function() {
    alert(this.name);
}
A.showAge = function() {
    alert(this.age);
}

// B同學負責的老師信息
var B = {}
B.name = "Jack";
B.gender = "male";
B.age = 28;
B.showName = function() {
    alert(this.name);
}
B.showAge = function() {
    alert(this.age);
}

// C同學負責的學生信息
var C = {}
C.name = "Lucy";
C.gender = "female";
C.age = 17;
C.showName = function() {
    alert(this.name);
}
C.showAge = function() {
    alert(this.age);
}

https://www.cnblogs.com/leftf...
https://www.cnblogs.com/luoge...

命名空間
封閉空間
js模塊化mvc（數據層、表現層、控制層）
seajs
變量轉換成對象的屬性
對象化

解決全局變量命名空間變量名重復沖突（技巧）

只在函數里面聲明變量。雖然有時候也不是絕對可行，但是函數級作用域可以防止其本地變量跟其他變量發生沖突。

只聲明一個全局對象，然后把本來想作為全局變量的值都作為這個對象的屬性。

var Vis = {};   //聲明空的全局對象
Vis.id = 1;
Vis.name = "dashuaibi";
// 這樣所有的變量都被關在了全局對象Vis里面，因此就不會再污染全局命名空間

28、編寫自己的jquery組件
https://blog.csdn.net/54power...
29、javascript標簽到底是應該放在頭部還是尾部？

一般地：
js是立即交互性優先的頂部
延遲交互性稍后的尾部。
javascript標簽放在尾部當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，類似于將所指向資源嵌入當前標簽內。
但在某種情況下也覺得放在頭部比較好，比如一個給頁面中的某個元素添加了事件的js腳本。頁面出來了但是js沒加載完的那段時間，用戶對此元素做事件操作的時候就出不來應該有的效果。
現在比較傾向于放在頭部，做一些優化的工作盡量讓js加載快一點。
如果放入html的head中,則頁面加載前該js腳本就會被加載入頁面，而放入body中，則會按照頁面從上倒下的加載順序來運行javascript的代碼~~~ 所以我們可以把js外部引入的文件放到頁面底部，來讓js最后引入，從而加快頁面加載速度

30、創建一個對象

function Person(name, age) {
        this.name = name;
        this.age = age;
        this.sing = function() { 
        alert(this.name)
         } 
 }

var Person = function(name, age){
    //共有屬性
    this.name = name;
    this.age = age;
    //共有方法
    this.sayName = function(){
        console.log(this.name);
    };
}

31、封裝一個簡單的javascript類

//函數聲明,然后使用對象或數組訪問
function Person() {
   this.name = "jee";
   this.age = 25;
   this.getName = function() {
      return this.name;
   }
} 
var person = new Person();
alert(person.age);
alert(person.getName());

32、答案是多少？

(function(x){
    delete x;
    alert(x);
})(1+5);

1）delete是用來刪除對象的屬性的，它不能夠刪除函數中傳遞的參數
2）所以這里delete x這句其實并沒有什么軟用，函數正常執行傳參及返回參數；
當然，刪除失敗也不會報錯，所以代碼運行會彈出“6”。

var Employee = {
  age: 28,
  name: "abc",
  designation: "developer"
}

console.log(delete Employee.name);   // returns true
console.log(delete Employee.age);    // returns true

// 當試著刪除一個不存在的屬性時
// 同樣會返回true
console.log(delete Employee.salary); // returns true

https://blog.csdn.net/travelz...
33、模塊化怎么做？

立即執行函數,不暴露私有成員

var module1 = (function(){
　　　　var _count = 0;
　　　　var m1 = function(){
　　　　　　//...
　　　　};
　　　　var m2 = function(){
　　　　　　//...
　　　　};
　　　　return {
　　　　　　m1 : m1,
　　　　　　m2 : m2
　　　　};
　　})();

34、js延遲加載的方式有哪些(寫出異步加載js方案)？

JS延遲加載，也就是等頁面加載完成之后再加載 JavaScript 文件。 
JS延遲加載有助于提高頁面加載速度。

http://www.php.cn/js-tutorial...

defer和async

注釋：有多種執行外部腳本的方法：
如果 async="async"：腳本相對于頁面的其余部分異步地執行（當頁面繼續進行解析時，腳本將被執行）
如果不使用 async 且 defer="defer"：腳本將在頁面完成解析時執行
如果既不使用 async 也不使用 defer：在瀏覽器繼續解析頁面之前，立即讀取并執行腳本

動態創建DOM方式（創建script，插入到DOM中，加載完畢后callBack,用的最多）
按需異步載入js（ajax異步加載）：http://blog.csdn.net/lxcao/ar...

異步加載和延遲加載
https://www.cnblogs.com/mylan...

35、new操作符具體干了什么

new 操作符新建了一個空對象，這個對象原型指向構造函數的prototype，執行構造函數后返回這個對象。

https://www.jianshu.com/p/354...
https://developer.mozilla.org...
https://www.cnblogs.com/onepi...

1、創建一個空對象，并且 this 變量引用該對象，同時還繼承了該函數的原型。
2、屬性和方法被加入到 this 引用的對象中。
3、新創建的對象由 this 所引用，并且最后隱式的返回 this 。

var obj  = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

36、stopPropagation, preventDefault 和 return false 的區別

事件在特定節點執行完之后不再傳遞,可以使用事件對象的 stopPropagation() 方法。

// 在彈出對話框上點擊時, 不進行任何頁面操作, 并阻止冒泡
document.getElementById("dialog").onclick = function(ev) {
    ev.stopPropagation();
};
// 在 documentElement 節點上監聽到點擊事件時, 隱藏對話框
document.documentElement.onclick = function(ev) {
    document.getElementById("dialog").style.display = "none";
};

使用 preventDefault() 阻止后面將要執行的瀏覽器默認動作。