摘要：函數(shù)節(jié)流使得一定時間內(nèi)只觸發(fā)一次函數(shù)。區(qū)別函數(shù)節(jié)流不管事件觸發(fā)有多頻繁，都會保證在規(guī)定時間內(nèi)一定會執(zhí)行一次真正的事件處理函數(shù)，而函數(shù)防抖只是在最后一次事件后才觸發(fā)一次函數(shù)。這樣的場景，就適合用節(jié)流技術(shù)來實(shí)現(xiàn)。需要注意一點(diǎn)，服務(wù)端也要支持。

原文 https://github.com/Ritr/mark/...

js

閉包

要理解閉包，首先要知道javascript的作用域。通常javascript作用域分為全局作用域和函數(shù)內(nèi)作用域，通常來說一個函數(shù)執(zhí)行開始到結(jié)束也意味著一個作用域的創(chuàng)建到銷毀，如果函數(shù)A內(nèi)變量被引用，則A會在內(nèi)存中駐留一段時間直至A內(nèi)變量都被釋放，我們就可以將這個函數(shù)作用域稱之為閉包。也可以這么說，閉包是函數(shù)作用域的一種使用方式的實(shí)現(xiàn)。使用閉包會引起內(nèi)存升高，應(yīng)盡量規(guī)避閉包，使用let替代var是一種非常好的方式。

原型和繼承

JavaScript 原型

由于 JS 沒有"類", 所以采用了原型的方式實(shí)現(xiàn)繼承，正確的說法是引用或者委托，因?yàn)閷ο笾g的關(guān)系不是復(fù)制，而是委托。在查找屬性的時候，引用（委托）原型對象的屬性，也就是我們常說的原型繼承。

JavaScript 繼承

原型繼承

    function Person(name){
     this.name=name;
     this.className="person" 
    }
    Person.prototype.getClassName=function(){
     console.log(this.className)
    }
    
    function Man(){
    }
    
    Man.prototype=new Person();//1
    //Man.prototype=new Person("Davin");//2
    var man=new Man;
    >man.getClassName()
    >"person"
    >man instanceof Person
    >true

構(gòu)造函數(shù)繼承

function Person(name){
 this.name=name;
 this.className="person" 
}
Person.prototype.getName=function(){
 console.log(this.name)
}
function Man(name){
  Person.apply(this,arguments)
}
var man1=new Man("Davin");
var man2=new Man("Jack");
>man1.name
>"Davin"
>man2.name
>"Jack"
>man1.getName() //1 報錯
>man1 instanceof Person
>true

組合繼承

    function Person(name){
     this.name=name||"default name"; //1
     this.className="person" 
    }
    Person.prototype.getName=function(){
     console.log(this.name)
    }
    function Man(name){
      Person.apply(this,arguments)
    }
    //繼承原型
    Man.prototype = new Person();
    var man1=new Man("Davin");
    > man1.name
    >"Davin"
    > man1.getName()
    >"Davin"

寄生組合繼承

    function Person(name){
     this.name=name; //1
     this.className="person" 
    }
    Person.prototype.getName=function(){
     console.log(this.name)
    }
    function Man(name){
      Person.apply(this,arguments)
    }
    //注意此處
    Man.prototype = Object.create(Person.prototype);
    Man.prototype.constructor = Man;
    var man1=new Man("Davin");
    > man1.name
    >"Davin"
    > man1.getName()
    >"Davin"

ES6繼承

class Person{
      //static sCount=0 //1
      constructor(name){
         this.name=name; 
         this.sCount++;
      }
      //實(shí)例方法 //2
      getName(){
       console.log(this.name)
      }
      static sTest(){
        console.log("static method test")
      }
    }
    
    class Man extends Person{
      constructor(name){
        super(name)//3
        this.sex="male"
      }
    }
    var man=new Man("Davin")
    man.getName()
    //man.sTest()
    Man.sTest()//4
    輸出結(jié)果：
    Davin
    static method test

還是用TypeScript吧，強(qiáng)行安利
TypeScript,
再強(qiáng)行安利angular哈哈

解決回調(diào)地獄

這個講解很清晰：Promise

async await

this

tihs
this是Javascript語言的一個關(guān)鍵字。 它代表函數(shù)運(yùn)行時，自動生成的一個內(nèi)部對象，只能在函數(shù)內(nèi)部使用。隨著函數(shù)使用場合的不同，this的值會發(fā)生變化。但是有一個總的原則，那就是this指的是，調(diào)用函數(shù)的那個對象

深拷貝淺拷貝

深拷貝是遞歸復(fù)制了一個對象的屬性和值到另一個對象上

淺拷貝相當(dāng)于對象引用

箭頭函數(shù)

沒找到比較好的中文資料，看MDN吧
Arrow function

ES6、7

ES6看這里

ES7看這里

防抖節(jié)流

看這里

函數(shù)防抖：將幾次操作合并為一此操作進(jìn)行。原理是維護(hù)一個計時器，規(guī)定在delay時間后觸發(fā)函數(shù)，但是在delay時間內(nèi)再次觸發(fā)的話，就會取消之前的計時器而重新設(shè)置。這樣一來，只有最后一次操作能被觸發(fā)。

函數(shù)節(jié)流：使得一定時間內(nèi)只觸發(fā)一次函數(shù)。原理是通過判斷是否到達(dá)一定時間來觸發(fā)函數(shù)。

區(qū)別： 函數(shù)節(jié)流不管事件觸發(fā)有多頻繁，都會保證在規(guī)定時間內(nèi)一定會執(zhí)行一次真正的事件處理函數(shù)，而函數(shù)防抖只是在最后一次事件后才觸發(fā)一次函數(shù)。 比如在頁面的無限加載場景下，我們需要用戶在滾動頁面時，每隔一段時間發(fā)一次 Ajax 請求，而不是在用戶停下滾動頁面操作時才去請求數(shù)據(jù)。這樣的場景，就適合用節(jié)流技術(shù)來實(shí)現(xiàn)。

DOM

事件冒泡

所謂冒泡就是子元素會將事件傳遞給父元素，向上傳遞過程就像冒泡一樣。當(dāng)然這個冒泡事件可以阻止
```
  //阻止事件冒泡-標(biāo)準(zhǔn)瀏覽器
　e.stopPropagation();
　
　//阻止事件冒泡-IE
　event.cancelBubble = true;
```

事件委托

事件委托通常會用在處理動態(tài)元素的事件上，利用的原理就是事件冒泡。例如父元素parent的子元素child是動態(tài)生成的，如果要監(jiān)聽child元素的事件，可以通過在父元素事件內(nèi)判斷事件源是否是child元素，由此來執(zhí)行對應(yīng)的函數(shù)。這種方式通常用在以jquery為主的技術(shù)棧的項(xiàng)目，如果你使用的是mvvm一類框架，那么使用到事件委托的機(jī)會可能會很少

css

標(biāo)準(zhǔn)盒模型

IE盒模型

兼容寫法

頭部加入

html5

Web Worker

Web Worker 使用教程

注意，這種多線程能力不是JavaScript語言原生具有的，而是瀏覽器宿主環(huán)境提供的。

還有一個有意思的東西 shared worker，可以多頁面共享一個woker以此來實(shí)現(xiàn)頁面之間的通信

WebSocket

WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進(jìn)行全雙工通訊的協(xié)議。
  WebSocket 使得客戶端和服務(wù)器之間的數(shù)據(jù)交換變得更加簡單，允許服務(wù)端主動向客戶端推送數(shù)據(jù)。在 WebSocket API 中，瀏覽器和服務(wù)器只需要完成一次握手，兩者之間就直接可以創(chuàng)建持久性的連接，并進(jìn)行雙向數(shù)據(jù)傳輸。

需要注意一點(diǎn)，服務(wù)端也要支持WebSocket。在node環(huán)境下可以試試 socket.io

css3

flex布局

掌握flex關(guān)鍵在于掌握兩個軸：main axis和cross axis.

main aixs即是主軸，cross axis即是和主軸交叉的軸，可以叫它交叉軸，實(shí)在不好翻譯。

注意當(dāng)main aixs方向改變時（水平->垂直 或者 垂直->水平），cross axis也會隨著改變

在線demo

animation

animation可以理解為像電影膠卷一樣，讓元素在某個時間段處于某種表現(xiàn)方式

https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation

transition

trabsition相當(dāng)于只有兩個關(guān)鍵幀的animation，一個是開始狀態(tài)一個是結(jié)束狀態(tài)。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition

transform

transform是干嘛的呢？它是控制元素的縮放，旋轉(zhuǎn)，位移等屬性的。transform使元素變成了舞蹈家。
https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform

@font-face

為什么要把字體列出來呢？因?yàn)橛辛诉@個神器，網(wǎng)頁中的圖標(biāo)都被解放了！將圖標(biāo)轉(zhuǎn)換成矢量字體，或者直接用圖標(biāo)（字體）庫，實(shí)現(xiàn)效果杠杠的！簡直就是健康美味，好吃不貴！

https://developer.mozilla.org/zh-CN/docs/Web/CSS/@font-face

RESTful和狀態(tài)碼

RESTful是一種風(fēng)格而不是規(guī)范，具體API設(shè)計還要結(jié)合本身的開發(fā)情況來考慮

RESTful API 最佳實(shí)踐

優(yōu)化

減少請求次數(shù)

合并圖片、js、css

減少請求體積

壓縮圖片、js、css

懶加載

對非必須立刻展示的內(nèi)容，延遲加載或者懶加載（需要時再加載）

預(yù)加載

將資源提前加載到瀏覽器備用

緩存

首頁靜態(tài)化，redis緩存，網(wǎng)站緩存，CDN緩存，客戶端緩存。

工程化

工程化是必須的

https://roshanca.com/2017/front-end-engineering-system/