從前端小白到中高級前端須要掌握的技能總結（1）

這篇文章是由於以前看過一篇文章，總結了一些技能，可是並不詳細，以後陸續還會有新的文章。

事件模型

js中有兩種事件，DOM0和DOM2.

• DOM0
  DOM0事件很簡單，就是在dom上綁定事件，代碼以下

document.getElementById('click').onclick = function(){
  console.log('123')
}

解除綁定很簡單，賦值爲null便可。

document.getElementById('click').onclick = null

可是這種事件雖然在全部瀏覽器都能運行，可是有個很明顯的缺陷，就是不能綁定多個相同事件，若是綁定了多個相同事件，後面的會覆蓋前面的

• DOM2
  第二種就是事件捕獲和事件冒泡。代碼上來講就是註冊事件是addEventListener,解除綁定是removeEventListener。阻止冒泡的方法是stopPropagation。

聲明提高

其實js中的聲明提高很簡單，就是指變量聲明提高和函數的聲明提高。聲明提示的意思就是把變量或者函數在編譯的時候提高到環境的頂部，並賦值undefined

• 變量聲明

變量聲明，js會把變量聲明分爲兩個部分，一個是聲明操做（var a）,一個是賦值操做(a=1)，這裏的聲明提高針對的是聲明操做，賦值操做仍是在原來的地方等待執行。

• 函數聲明

定義函數的方式有兩種，函數聲明和函數表達式,函數表達式和變量聲明同等。
在js編譯時，函數聲明會把函數聲明和整個函數體都提高到環境的頂部，因此能夠在函數聲明前調用這個函數，如如下代碼

foo()
function foo(){
    console.log(111)
}

• 聲明的順序

函數聲明是優先於變量聲明的
1.js編譯時，會把全部的函數聲明提到頂部，若是有重複的進行覆蓋
2.把全部的變量提到頂部，並賦值undefined，若是有重複的進行覆蓋
接下來看兩個典型的例子

alert(a)
a();
var a=3;
function a(){
    alert(10)
}   
alert(a)
a=6;
a();  

------------分割線------------------

alert(a)
a();
var a=3;
var a=function(){
    alert(10)
}   
alert(a)
a=6;
a();

第一部分：
1.函數聲明優先於變量聲明，因此，剛開始，a就是function a(){alert(10)} ，就會看到這個函數。
2.a()，執行函數，就是出現alert(10)
3.執行了var a=3; 因此alert(a)就是顯示3
4.因爲a不是一個函數了，因此往下在執行到a()的時候， 報錯。
第二部分運行結果：
1.underfind
2.報錯
在以前說過，預解析是把帶有var和function關鍵字的事先聲明，但不會賦值。因此一開始是underfind，而後報錯是由於執行到a()的時候，a並非一個函數。

繼承

js繼承的幾種方法
1.原型鏈繼承,將父類的實例做爲子類的原型

function Cat(){}
Cat.prototype = New Animal()

2.構造繼承，利用父元素的構造函數來加強子元素的實例，其實就是把父類的實例屬性給了子類

function Cat(){
Animal.call(this);
}

3.實例繼承，父類的實例增長屬性做爲子類的實例返回

function Cat(){
  var instance = new Animal();
  intance.name = 'aaa';
  return instance;
}

4.拷貝繼承,沒法獲取父類不可枚舉的方法（不可枚舉方法，不能使用for in 訪問到）

function Cat(name){
  var animal = new Animal();
  for(var p in animal){
    Cat.prototype[p] = animal[p];
  }
  Cat.prototype.name = name || 'Tom';
}

5.組合繼承，經過調用父類，實現了繼承父類的屬性和保留傳參的優勢，父類的實例做爲子類的原型，實現了函數的複用

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}
Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;//組合繼承也是須要修復構造函數指向的。

6.寄生組合繼承，經過第三方的一個空類，來繼承父類的函數複用，父類的屬性的繼承經過在子類中調用父類實現。

/**
 * 通用方法實現子類繼承父類
 * @param  {function} child  子類構造函數
 * @param  {function} father 被繼承的父類構造函數
 */
function inheritPrototype(child, father) {
    var prototype = object(father.prototype); //建立一個指定原型的對象
    prototype.constructor = child; //加強對象
    child.prototype = prototype; //子類的原型等於該對象
}
function father(name) {
    this.faName = 'father';
}
father.prototype.getfaName = function() {
    console.log(this.faName);
};
function child(args) {
    this.chName = 'child';
    father.apply(this,[]);
}
inheritPrototype(child, father); //子類的原型等於new 空函數(), 而new 空函數()出來的對象的原型等於父類的原型
child.prototype.getchName = function() {
    console.log(this.chName);
};
console.log( child.prototype.isPrototypeOf(new child()) ); //true
console.log(new child() instanceof child); //true

優勢：1.只調用一次父類的構造函數,避免了在子類原型上建立沒必要要的，多餘的屬性
2.原型鏈保持不變
https://blog.csdn.net/xuqingg...
參考https://www.cnblogs.com/humin...

跨域

跨域，是指不能執行其餘網站的腳本，是由於瀏覽器的同源策略（域名，協議，端口均相同）引發的，是瀏覽器對js實施的安全限制。可是script標籤自己就能夠訪問其它域的資源，不受瀏覽器同源策略的限制，能夠經過在頁面動態建立script標籤。
限制：
1.cookie，localstorage，indexDB沒法讀取
2.DOM和js對象沒法獲取
3.ajax請求發不出去
解決辦法：
1.jsonp 可是隻限於get請求
1.1 經過動態建立script標籤，請求一個帶參數的網址實現跨域

var script = document.createElement('script');
script.src = 'http://www.aaa.com/username=aaaa&callback=cb';
document.body.appendChild(script);
function cb(res){}

1.2 jquery的ajax支持jsonp

$.ajax({
    url:'http://www.aaa.com',
    type:'get',
    dataType:'json',
    jsonCallback:'cb',
    data:{
        username:'111'
    }
})

2.document.domain+iframe,可是要求主域名相同
3.window.name + iframe 跨域
4.location.hash + iframe 跨域
5.postMessage
1.html

<iframe id="iframe" src="http://www.neal.cn/b.html" style="display:none;"></iframe>
<script>
    var iframe = document.getElementById('iframe');
    iframe.onload = function() {
        var data = {
            name: 'aym'
        };
        // 向neal傳送跨域數據
        iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.neal.cn');
    };

    // 接受domain2返回數據
    window.addEventListener('message', function(e) {
        alert('data from neal ---> ' + e.data);
    }, false);
</script>

2.html(另外一端口)

script>
    // 接收domain1的數據
    window.addEventListener('message', function(e) {
        alert('data from nealyang ---> ' + e.data);

        var data = JSON.parse(e.data);
        if (data) {
            data.number = 16;

            // 處理後再發回nealyang
            window.parent.postMessage(JSON.stringify(data), 'http://www.nealyang.cn');
        }
    }, false);
</script>

6.跨域資源共享CORS

CORS是目前主流的跨域解決方案。

它容許瀏覽器向跨源服務器，發出XMLHttpRequest請求，從而克服了ajax的同源策略的限制。
目前全部的瀏覽器都支持這個功能。IE要求IE10以上，IE8，9須要用XDomainRequest對象來支持這個功能。

CORS須要客戶端和服務端同時支持。

整個CORS通訊過程，都是瀏覽器完成的，對於開發者來講，CORS和ajax沒有什麼區別，發送請求後，瀏覽器識別到這是跨源請求，就會在頭部添加附加信息，有時還會多一次請求。因此實現CORS的關鍵是服務器，只要服務器實現了CORS接口，就能夠跨源通訊。
這時候就要說到請求的種類了，分爲簡單請求和非簡單請求。
簡單請求
簡單請求（請求方式爲HEAD,GET,POST,頭信息不超過如下字段，Accept,Accept-language,Content-language,Last-Event-ID,Content-type【application/x-www-form-urlencoded、multipart/form-data、text/plain】）。

瀏覽器直接發出CORS請求,在頭信息中會增長origin屬性（origin:http://www.baidu.com），這個屬性代表請求的來源，服務器根據這個是否贊成此次請求。若是origin指定的源不在許可範圍內，服務端會返回http迴應，瀏覽器會發現沒有Access-Control-Allow-Origin字段,就會拋出異常，到XMLHttpRequest的onerror函數。

若是Origin指定的域名在許可範圍內，服務器返回的響應，會多出幾個頭信息字段
上面的頭信息之中，有三個與CORS請求相關的字段，都以Access-Control-開頭

• Access-Control-Allow-Origin :該字段是必須的。它的值要麼是請求時Origin字段的值，要麼是一個*，表示接受任意域名的請求
• Access-Control-Allow-Credentials: 該字段可選。它的值是一個布爾值，表示是否容許發送Cookie。默認狀況下，Cookie不包括在CORS請求之中。設爲true，即表示服務器明確許可，Cookie能夠包含在請求中，一塊兒發給服務器。這個值也只能設爲true，若是服務器不要瀏覽器發送Cookie，刪除該字段便可。
• Access-Control-Expose-Headers:該字段可選。CORS請求時，XMLHttpRequest對象的getResponseHeader()方法只能拿到6個基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。若是想拿到其餘字段，就必須在Access-Control-Expose-Headers裏面指定。

withCredentials 屬性

上面說到，CORS請求默認不發送Cookie和HTTP認證信息。若是要把Cookie發到服務器，一方面要服務器贊成，指定Access-Control-Allow-Credentials字段。

另外一方面，開發者必須在AJAX請求中打開withCredentials屬性。

不然，即便服務器贊成發送Cookie，瀏覽器也不會發送。或者，服務器要求設置Cookie，瀏覽器也不會處理。
可是，若是省略withCredentials設置，有的瀏覽器仍是會一塊兒發送Cookie。這時，能夠顯式關閉withCredentials。

須要注意的是，若是要發送Cookie，Access-Control-Allow-Origin就不能設爲星號，必須指定明確的、與請求網頁一致的域名。同時，Cookie依然遵循同源政策，只有用服務器域名設置的Cookie纔會上傳，其餘域名的Cookie並不會上傳，且（跨源）原網頁代碼中的document.cookie也沒法讀取服務器域名下的Cookie。

非簡單請求
非簡單請求是那種對服務器有特殊要求的請求，好比請求方法是PUT或DELETE，或者Content-Type字段的類型是application/json。

非簡單請求的CORS請求，會在正式通訊以前，增長一次HTTP查詢請求，稱爲"預檢"請求（preflight）。

瀏覽器先詢問服務器，當前網頁所在的域名是否在服務器的許可名單之中，以及可使用哪些HTTP動詞和頭信息字段。只有獲得確定答覆，瀏覽器纔會發出正式的XMLHttpRequest請求，不然就報錯。

var url = 'http://api.alice.com/cors';
var xhr = new XMLHttpRequest();
xhr.open('PUT', url, true);
xhr.setRequestHeader('X-Custom-Header', 'value');
xhr.send();

瀏覽器發現，這是一個非簡單請求，就自動發出一個"預檢"請求，要求服務器確承認以這樣請求。下面是這個"預檢"請求的HTTP頭信息。

OPTIONS /cors HTTP/1.1
   Origin: http://api.bob.com
   Access-Control-Request-Method: PUT
   Access-Control-Request-Headers: X-Custom-Header
   Host: api.alice.com
   Accept-Language: en-US
   Connection: keep-alive
   User-Agent: Mozilla/5.0...

"預檢"請求用的請求方法是OPTIONS，表示這個請求是用來詢問的。頭信息裏面，關鍵字段是Origin，表示請求來自哪一個源。

除了Origin字段，"預檢"請求的頭信息包括兩個特殊字段。

• Access-Control-Request-Method：該字段是必須的，用來列出瀏覽器的CORS請求會用到哪些HTTP方法，上例是PUT。
• Access-Control-Request-Headers：該字段是一個逗號分隔的字符串，指定瀏覽器CORS請求會額外發送的頭信息字段，上例是X-Custom-Header

預檢請求的迴應
服務器收到"預檢"請求之後，檢查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段之後，確認容許跨源請求，就能夠作出迴應.
上面的HTTP迴應中，關鍵的是Access-Control-Allow-Origin字段，表示http://api.bob.com能夠請求數據。該字段也能夠設爲星號，表示贊成任意跨源請求。

若是瀏覽器否認了"預檢"請求，會返回一個正常的HTTP迴應，可是沒有任何CORS相關的頭信息字段。這時，瀏覽器就會認定，服務器不一樣意預檢請求，所以觸發一個錯誤，被XMLHttpRequest對象的onerror回調函數捕獲。控制檯會打印出報錯信息。

服務器迴應的其餘CORS相關字段以下：

Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 1728000

• Access-Control-Allow-Methods：該字段必需，它的值是逗號分隔的一個字符串，代表服務器支持的全部跨域請求的方法。注意，返回的是全部支持的方法，而不單是瀏覽器請求的那個方法。這是爲了不屢次"預檢"請求。
• Access-Control-Allow-Headers：若是瀏覽器請求包括Access-Control-Request-Headers字段，則Access-Control-Allow-Headers字段是必需的。它也是一個逗號分隔的字符串，代表服務器支持的全部頭信息字段，不限於瀏覽器在"預檢"中請求的字段。
• Access-Control-Allow-Credentials： 該字段與簡單請求時的含義相同。
• Access-Control-Max-Age： 該字段可選，用來指定本次預檢請求的有效期，單位爲秒。上面結果中，有效期是20天（1728000秒），即容許緩存該條迴應1728000秒（即20天），在此期間，不用發出另外一條預檢請求。

瀏覽器正常請求迴應

一旦服務器經過了"預檢"請求，之後每次瀏覽器正常的CORS請求，就都跟簡單請求同樣，會有一個Origin頭信息字段。服務器的迴應，也都會有一個Access-Control-Allow-Origin頭信息字段。7.websocket8.nginx