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

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

js

閉包

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

原型和繼承

JavaScript 原型

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

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 報(bào)錯(cuò)
>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,
再?gòu)?qiáng)行安利angular哈哈

解決回調(diào)地獄

這個(gè)講解很清晰：Promise

async await

this

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

深拷貝淺拷貝

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

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

箭頭函數(shù)

沒(méi)找到比較好的中文資料，看MDN吧
Arrow function

ES6、7

ES6看這里

ES7看這里

防抖節(jié)流

看這里

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

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

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

DOM

事件冒泡

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

事件委托

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

css

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

IE盒模型

兼容寫法

頭部加入

html5

Web Worker

Web Worker 使用教程

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

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

WebSocket

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

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

css3

flex布局

掌握f(shuō)lex關(guān)鍵在于掌握兩個(gè)軸：main axis和cross axis.

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

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

在線demo

animation

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

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

transition

trabsition相當(dāng)于只有兩個(gè)關(guān)鍵幀的animation，一個(gè)是開始狀態(tài)一個(gè)是結(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

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

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

RESTful和狀態(tài)碼

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

RESTful API 最佳實(shí)踐

優(yōu)化

減少請(qǐng)求次數(shù)

合并圖片、js、css

減少請(qǐng)求體積

壓縮圖片、js、css

懶加載

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

預(yù)加載

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

緩存

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

工程化

工程化是必須的

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