React和Vue對(duì)比

相同點(diǎn):

數(shù)據(jù)驅(qū)動(dòng)視圖，提供了響應(yīng)式（Reactive）和組件化（Composable）的視圖組件。

都有Virtual DOM，組件化開發(fā)，通過props參數(shù)進(jìn)行父子組件數(shù)據(jù)的傳遞，都實(shí)現(xiàn)webComponents規(guī)范

數(shù)據(jù)流動(dòng)單向

都支持服務(wù)端渲染

都有支持native的方案，React的React native，Vue的weex

不同點(diǎn)：

社區(qū)：React社區(qū)還是要比Vue大很多；

開發(fā)模式：React在view層侵入性還是要比Vue大很多的,React嚴(yán)格上只針對(duì)MVC的view層，Vue則是MVVM模式的一種實(shí)現(xiàn)；

數(shù)據(jù)綁定：Vue有實(shí)現(xiàn)了雙向數(shù)據(jù)綁定，React數(shù)據(jù)流動(dòng)是單向的

數(shù)據(jù)渲染：對(duì)于大規(guī)模數(shù)據(jù)渲染，React要比Vue更快，渲染機(jī)制啟動(dòng)時(shí)候要做的工作比較多；

數(shù)據(jù)更新方面：Vue 由于采用依賴追蹤，默認(rèn)就是優(yōu)化狀態(tài)：你動(dòng)了多少數(shù)據(jù)，就觸發(fā)多少更新，不多也不少。React在復(fù)雜的應(yīng)用里有兩個(gè)選擇:

(1). 手動(dòng)添加 shouldComponentUpdate 來(lái)避免不需要的 vdom re-render。

(2). Components 盡可能都用 pureRenderMixin，然后采用 redux 結(jié)構(gòu) + Immutable.js；

開發(fā)風(fēng)格的偏好：React 推薦的做法是 JSX + inline style，也就是把 HTML 和 CSS 全都寫進(jìn) JavaScript 了，即”all in js”；Vue進(jìn)階之后推薦的是使用 webpack + vue-loader 的單文件組件格式，即html,css,js寫在同一個(gè)文件；

使用場(chǎng)景：React配合Redux架構(gòu)適合超大規(guī)模多人協(xié)作的復(fù)雜項(xiàng)目;Vue則適合小快靈的項(xiàng)目。對(duì)于需要對(duì) DOM 進(jìn)行很多自定義操作的項(xiàng)目，Vue 的靈活性優(yōu)于 React；

Vue要比React更好上手，具體可能體現(xiàn)在很多人不熟悉React的JSX語(yǔ)法和函數(shù)式編程的思想，以及想要發(fā)揮出React的最大威力需要學(xué)習(xí)它一系列生態(tài)的緣故；

Vue著重提高開發(fā)效率,讓前端程序員更快速方便的開發(fā)應(yīng)用。React著重于變革開發(fā)思想，提升前端程序員編程的深度與創(chuàng)造力,讓前端工程師成為真正的程序員而不是UI的構(gòu)建者；

gulp和webpack區(qū)別

gulp是一種工具，我們可以用它來(lái)優(yōu)化前端的工作流程，比如自動(dòng)刷新頁(yè)面、combo、壓縮css、js、編譯less等等。具體體現(xiàn)為：在gulp的配置文件中書寫一個(gè)個(gè)的task，webpack則是一種打包工具，或者說是一種模塊化解決方案，實(shí)際上很大一部分人剛開始使用webpack的方式就是通過gulp-webpack這個(gè)插件，寫好task來(lái)使用webpack對(duì)前端的一些文件進(jìn)行打包;

gulp的處理任務(wù)需要自己去寫，webpack則有現(xiàn)成的解決方案，只需要在webpack.config.js配置好即可;

事件模型

1、事件捕獲階段(capturing phase)。事件從document一直向下傳播到目標(biāo)元素, 依次檢查經(jīng)過的節(jié)點(diǎn)是否綁定了事件監(jiān)聽函數(shù)，如果有則執(zhí)行。

2、事件處理階段(target phase)。事件到達(dá)目標(biāo)元素, 觸發(fā)目標(biāo)元素的監(jiān)聽函數(shù)。

3、事件冒泡階段(bubbling phase)。事件從目標(biāo)元素冒泡到document, 依次檢查經(jīng)過的節(jié)點(diǎn)是否綁定了事件監(jiān)聽函數(shù)，如果有則執(zhí)行。

js中event的target和currentTarget的區(qū)別

arget：觸發(fā)事件的元素。點(diǎn)了那個(gè)標(biāo)簽獲取哪個(gè)標(biāo)簽

currentTarget：事件綁定的元素。

currentTarget始終是監(jiān)聽事件者，而target是事件的真正發(fā)出者

兩者在沒有冒泡的情況下，是一樣的值，但在用了事件委托的情況下，就不一樣了，例如：

事件捕獲階段：事件從最上一級(jí)標(biāo)簽開始往下查找，直到捕獲到事件目標(biāo)(target)。

事件冒泡階段：事件從事件目標(biāo)(target)開始，往上冒泡直到頁(yè)面的最上一級(jí)標(biāo)簽

DOM事件流：同時(shí)支持兩種事件模型：捕獲型事件和冒泡型事件，但是，捕獲型事件先發(fā)生。兩種事件流會(huì)觸及DOM中的所有對(duì)象，從document對(duì)象開始，也在document對(duì)象結(jié)束

假設(shè)一個(gè)元素div，它有一個(gè)下級(jí)元素p。

<div>

? ? ?<p>元素</p>

</div>

這兩個(gè)元素都綁定了click事件，如果用戶點(diǎn)擊了p，它在div和p上都觸發(fā)了click事件，那這兩個(gè)事件處理程序哪個(gè)先執(zhí)行呢？事件順序是什么？

兩種模型

以前，Netscape和Microsoft是不同的實(shí)現(xiàn)方式。

Netscape中，div先觸發(fā)，這就叫做事件捕獲。

Microsoft中，p先觸發(fā)，這就叫做事件冒泡。

兩種事件處理順序剛好相反。IE只支持事件冒泡，Mozilla, Opera 7 和 Konqueror兩種都支持，舊版本的Opera's 和 iCab兩種都不支持 。

事件捕獲

當(dāng)你使用事件捕獲時(shí)，父級(jí)元素先觸發(fā)，子級(jí)元素后觸發(fā)，即div先觸發(fā)，p后觸發(fā)。

事件冒泡

當(dāng)你使用事件冒泡時(shí)，子級(jí)元素先觸發(fā)，父級(jí)元素后觸發(fā)，即p先觸發(fā)，div后觸發(fā)。

W3C模型

W3C模型是將兩者進(jìn)行中和，在W3C模型中，任何事件發(fā)生時(shí)，先從頂層開始進(jìn)行事件捕獲，直到事件觸發(fā)到達(dá)了事件源元素。然后，再?gòu)氖录赐线M(jìn)行事件冒泡，直到到達(dá)document。

程序員可以自己選擇綁定事件時(shí)采用事件捕獲還是事件冒泡，方法就是綁定事件時(shí)通過addEventListener函數(shù)，它有三個(gè)參數(shù)，第三個(gè)參數(shù)若是true，則表示采用事件捕獲，若是false，則表示采用事件冒泡。

ele.addEventListener('click',doSomething2,true)

true=捕獲

false=冒泡

傳統(tǒng)綁定事件方式

在一個(gè)支持W3C DOM的瀏覽器中，像這樣一般的綁定事件方式，是采用的事件冒泡方式。

ele.onclick = doSomething2

IE瀏覽器

如上面所說，IE只支持事件冒泡，不支持事件捕獲，它也不支持addEventListener函數(shù)，不會(huì)用第三個(gè)參數(shù)來(lái)表示是冒泡還是捕獲，它提供了另一個(gè)函數(shù)attachEvent。

ele.attachEvent("onclick", doSomething2);

附：事件冒泡（的過程）：事件從發(fā)生的目標(biāo)（event.srcElement||event.target）開始，沿著文檔逐層向上冒泡，到document為止。

事件的傳播是可以阻止的：

? 在W3c中，使用stopPropagation（）方法

? 在IE下設(shè)置cancelBubble = true；

在捕獲的過程中stopPropagation（）；后，后面的冒泡過程也不會(huì)發(fā)生了~

3.阻止事件的默認(rèn)行為，例如click 后的跳轉(zhuǎn)~

? 在W3c中，使用preventDefault（）方法；

? 在IE下設(shè)置window.event.returnValue = false;

瀏覽器緩存機(jī)制

可參考地址：瀏覽器緩存機(jī)制

Expires策略

Expires是Web服務(wù)器響應(yīng)消息頭字段，在響應(yīng)http請(qǐng)求時(shí)告訴瀏覽器在過期時(shí)間前瀏覽器可以直接從瀏覽器緩存取數(shù)據(jù)，而無(wú)需再次請(qǐng)求。Expires 是HTTP 1.0的東西，現(xiàn)在默認(rèn)瀏覽器均默認(rèn)使用HTTP 1.1，所以它的作用基本忽略。

Cache-Control策略

Cache-Control與Expires的作用一致，都是指明當(dāng)前資源的有效期，控制瀏覽器是否直接從瀏覽器緩讀取數(shù)據(jù)還是重新發(fā)請(qǐng)求到服務(wù)器取數(shù)據(jù)。只不過Cache-Control的選擇更多，設(shè)置更細(xì)致，如果同時(shí)設(shè)置的話，其優(yōu)先級(jí)高于Expires。

以上是設(shè)置緩存時(shí)間的兩種方法。那么當(dāng)緩存時(shí)間過了咋整呢？有人肯定說了，那就再次發(fā)起請(qǐng)求啊，這是對(duì)的。問題是如果服務(wù)器資源并沒有更新呢？比如說我有一個(gè)jQuery.js文件已經(jīng)緩存了，當(dāng)它的緩存時(shí)間到了之后服務(wù)器的jQuery.js文件也沒有更新，那實(shí)際上我們直接使用本地緩存的文件就可以??！沒必要浪費(fèi)帶寬和時(shí)間去重新請(qǐng)求一個(gè)新的文件??！這時(shí)候我們就需要再進(jìn)一步看一下HTTP協(xié)議里這幾個(gè)參數(shù)的作用了。

Last-Modified/If-Modified-Since

首先Last-Modified/If-Modified-Since要配合Cache-Control使用。

Last-Modified：標(biāo)示這個(gè)響應(yīng)資源的最后修改時(shí)間。web服務(wù)器在響應(yīng)請(qǐng)求時(shí)，告訴瀏覽器資源的最后修改時(shí)間(這個(gè)參數(shù)是和Cache-Control一起過來(lái)的)。

If-Modified-Since：當(dāng)資源過期時(shí)（使用Cache-Control標(biāo)識(shí)的max-age），發(fā)現(xiàn)資源具有Last-Modified聲明，則再次向web服務(wù)器請(qǐng)求時(shí)帶上頭If-Modified-Since，表示請(qǐng)求時(shí)間。web服務(wù)器收到請(qǐng)求后發(fā)現(xiàn)有頭If-Modified-Since ，則與被請(qǐng)求資源的最后修改時(shí)間進(jìn)行比對(duì)。若最后修改時(shí)間較新，說明資源又被改動(dòng)過，則響應(yīng)整片資源內(nèi)容（寫在響應(yīng)消息包體內(nèi)），HTTP 200；若最后修改時(shí)間較舊，說明資源無(wú)新修改，則響應(yīng)HTTP 304 (無(wú)需包體，節(jié)省瀏覽)，告知瀏覽器繼續(xù)使用所保存的cache。

ETag/If-None-Match

Etag/If-None-Match也要配合Cache-Control使用。

Etag：web服務(wù)器響應(yīng)請(qǐng)求時(shí)，告訴瀏覽器當(dāng)前資源在服務(wù)器的唯一標(biāo)識(shí)（生成規(guī)則由服務(wù)器覺得）。Apache中，ETag的值，默認(rèn)是對(duì)文件的索引節(jié)（INode），大?。⊿ize）和最后修改時(shí)間（MTime）進(jìn)行Hash后得到的。

If-None-Match：當(dāng)資源過期時(shí)（使用Cache-Control標(biāo)識(shí)的max-age），發(fā)現(xiàn)資源具有Etage聲明，則再次向web服務(wù)器請(qǐng)求時(shí)帶上頭If-None-Match（Etag的值）。web服務(wù)器收到請(qǐng)求后發(fā)現(xiàn)有頭If-None-Match 則與被請(qǐng)求資源的相應(yīng)校驗(yàn)串進(jìn)行比對(duì)，決定返回200或304。

ETag和Last-Modified

HTTP1.1中Etag的出現(xiàn)主要是為了解決幾個(gè)Last-Modified比較難解決的問題：

Last-Modified標(biāo)注的最后修改只能精確到秒級(jí)，如果某些文件在1秒鐘以內(nèi)，被修改多次的話，它將不能準(zhǔn)確標(biāo)注文件的修改時(shí)間

如果某些文件會(huì)被定期生成，當(dāng)有時(shí)內(nèi)容并沒有任何變化，但Last-Modified卻改變了，導(dǎo)致文件沒法使用緩存

有可能存在服務(wù)器沒有準(zhǔn)確獲取文件修改時(shí)間，或者與代理服務(wù)器時(shí)間不一致等情形

Etag是服務(wù)器自動(dòng)生成或者由開發(fā)者生成的對(duì)應(yīng)資源在服務(wù)器端的唯一標(biāo)識(shí)符，能夠更加準(zhǔn)確的控制緩存。Last-Modified與ETag是可以一起使用的，服務(wù)器會(huì)優(yōu)先驗(yàn)證ETag，一致的情況下，才會(huì)繼續(xù)比對(duì)Last-Modified，最后才決定是否返回304。

Ajax的狀態(tài)值與HTTP狀態(tài)碼

Ajax的狀態(tài)值

0: (未初始化)還沒有調(diào)用open()方法；

1: (載入)已經(jīng)調(diào)用open()方法，正在派發(fā)請(qǐng)求，send()方法還未被調(diào)用；

2: (載入完成)send()已經(jīng)調(diào)用，響應(yīng)頭和響應(yīng)狀態(tài)已經(jīng)返回；

3: (交互)響應(yīng)體下載中; responseText中已經(jīng)獲取了部分?jǐn)?shù)據(jù)；

4: (完成)響應(yīng)內(nèi)容已經(jīng)解析完成，用戶可以調(diào)用。

HTTP狀態(tài)碼

200 & OK: 請(qǐng)求成功；

204 & No Content: 請(qǐng)求處理成功，但沒有資源可以返回；

206 & Partial Content: 對(duì)資源某一部分進(jìn)行請(qǐng)求(比如對(duì)于只加載了一般的圖片剩余部分的請(qǐng)求)；

301 & Move Permanently: 永久性重定向；

302 & Found： 臨時(shí)性重定向；

303 & See Other: 請(qǐng)求資源存在另一個(gè)URI，應(yīng)使用get方法請(qǐng)求；

304 & Not Modified: 服務(wù)器判斷本地緩存未更新，可以直接使用本地的緩存；

307 & Temporary Redirect: 臨時(shí)重定向；

400 & Bad Request: 請(qǐng)求報(bào)文存在語(yǔ)法錯(cuò)誤；

401 & Unauthorized: 請(qǐng)求需要通過HTTP認(rèn)證；

403 & Forbidden: 請(qǐng)求資源被服務(wù)器拒絕，訪問權(quán)限的問題；

404 & Not Found: 服務(wù)器上沒有請(qǐng)求的資源；

500 & Internal Server Error: 服務(wù)器執(zhí)行請(qǐng)求時(shí)出現(xiàn)錯(cuò)誤；

502 & Bad Gateway: 錯(cuò)誤的網(wǎng)關(guān)；

503 & Service Unavailable: 服務(wù)器超載或正在維護(hù)，無(wú)法處理請(qǐng)求；

504 & Gateway timeout: 網(wǎng)關(guān)超時(shí)；

什么是原型鏈

詳細(xì)地址：原型鏈詳解

訪問一個(gè)對(duì)象的屬性時(shí)，先在基本屬性中查找，如果沒有，再沿著__proto__這條鏈向上找，這就是原型鏈。

? 在執(zhí)行代碼之前，把將要用到的所有的變量都事先拿出來(lái)，有的直接賦值了，有的先用undefined占個(gè)空——執(zhí)行上下文環(huán)境。

? 作用域鏈，是由當(dāng)前環(huán)境與上層環(huán)境的一系列變量對(duì)象組成，它保證了當(dāng)前執(zhí)行環(huán)境對(duì)符合訪問權(quán)限的變量和函數(shù)的有序訪問。

? 每一個(gè)對(duì)象都會(huì)在內(nèi)部鏈接到另一個(gè)對(duì)象(該對(duì)象的原型對(duì)象)，該對(duì)象有一個(gè)原型prototype，當(dāng)訪問對(duì)象的屬性或是方法的時(shí)候，不僅僅會(huì)在原對(duì)象上查找，還會(huì)順著原型鏈在原型對(duì)象的原型鏈上查找，直到查到null(所有原型鏈的頂層)為止。原型是JavaScript實(shí)現(xiàn)繼承的基礎(chǔ)，new關(guān)鍵字做的主要的事情就是將實(shí)例對(duì)象的__proto__屬性指向原型對(duì)象的prototype。

什么是閉包

閉包是javascript支持頭等函數(shù)的一種方式，它是一個(gè)能夠引用其內(nèi)部作用域變量(在本作用域第一次聲明的變量)的表達(dá)式，這個(gè)表達(dá)式可以賦值給某個(gè)變量，可以作為參數(shù)傳遞給函數(shù)，也可以作為一個(gè)函數(shù)返回值返回。

閉包是函數(shù)開始執(zhí)行的時(shí)候被分配的一個(gè)棧幀，在函數(shù)執(zhí)行結(jié)束返回后仍不會(huì)被釋放(就好像一個(gè)棧幀被分配在堆里而不是棧里！)

閉包的應(yīng)用：

比如寫柯里化函數(shù)的時(shí)候利用閉包，保存參數(shù)在內(nèi)存中；

varcurrying =function(fun){

//格式化arguments

varargs =Array.prototype.slice.call(arguments,1);

returnfunction(){

//收集所有的參數(shù)在同一個(gè)數(shù)組中，進(jìn)行計(jì)算

var_args = args.concat(Array.prototype.slice.call(arguments));

returnfun.apply(null, _args);

? ? };

}

圖片懶加載與預(yù)加載

圖片懶加載的原理就是暫時(shí)不設(shè)置圖片的src屬性，而是將圖片的url隱藏起來(lái)，比如先寫在data-src里面，等某些事件觸發(fā)的時(shí)候(比如滾動(dòng)到底部，點(diǎn)擊加載圖片)再將圖片真實(shí)的url放進(jìn)src屬性里面，從而實(shí)現(xiàn)圖片的延遲加載

圖片預(yù)加載，是指在一些需要展示大量圖片的網(wǎng)站，實(shí)現(xiàn)圖片的提前加載。從而提升用戶體驗(yàn)。常用的方式有兩種，一種是隱藏在css的background的url屬性里面，一種是通過javascript的Image對(duì)象設(shè)置實(shí)例對(duì)象的src屬性實(shí)現(xiàn)圖片的預(yù)加載。相關(guān)代碼如下：

CSS預(yù)加載圖片方式：

#preload-01{background:url(http://domain.tld/image-01.png) no-repeat -9999px-9999px; }

#preload-02{background:url(http://domain.tld/image-02.png) no-repeat -9999px-9999px; }

#preload-03{background:url(http://domain.tld/image-03.png) no-repeat -9999px-9999px; }

Javascript預(yù)加載圖片的方式：

functionpreloadImg(url){

varimg =newImage();

img.src = url;

if(img.complete) {

//接下來(lái)可以使用圖片了

//do something here

}else{

img.onload =function(){

//接下來(lái)可以使用圖片了

//do something here

};

}

}

跨域

跨域的方式有很多種，最常用的是jsonp主要利用了script的開放策略:通過script標(biāo)簽引入一個(gè)js或者是一個(gè)其他后綴形式（如php，jsp等）的文件，此文件返回一個(gè)js函數(shù)的調(diào)用。缺點(diǎn)在于只支持get請(qǐng)求而且存在安全問題，可能會(huì)導(dǎo)致CSRF,因?yàn)檎?qǐng)求的數(shù)據(jù)來(lái)源于其他網(wǎng)站，因?yàn)閻阂夤粽呖梢岳眠@段代碼進(jìn)行請(qǐng)求，獲取數(shù)據(jù)，有可能會(huì)泄露用戶密碼等重要信息

關(guān)于cors在維基百科上的定義是這樣的：跨域資源共享（CORS ）是一種網(wǎng)絡(luò)瀏覽器的技術(shù)規(guī)范，它為Web服務(wù)器定義了一種方式，允許網(wǎng)頁(yè)從不同的域訪問其資源。而這種訪問是被同源策略所禁止的。CORS系統(tǒng)定義了一種瀏覽器和服務(wù)器交互的方式來(lái)確定是否允許跨域請(qǐng)求。它是一個(gè)妥協(xié)，有更大的靈活性，但比起簡(jiǎn)單地允許所有這些的要求來(lái)說更加安全。

CORS跨域，關(guān)鍵在于服務(wù)器，如果服務(wù)器實(shí)現(xiàn)了CORS跨域的接口，那么就可以使用ajax(請(qǐng)求路徑為絕對(duì)路徑)進(jìn)行跨域請(qǐng)求。CORS請(qǐng)求分為兩種，一種是簡(jiǎn)單請(qǐng)求，一種是非簡(jiǎn)單請(qǐng)求。簡(jiǎn)單請(qǐng)求是指請(qǐng)求方法在HEAD,GET,POST三者之間并且請(qǐng)求頭信息局限在

Accept

Accept-Language

Content-Language

Content-Type：只限于三個(gè)值application/x-www-form-urlencoded、multipart/form-data、text/plain

非簡(jiǎn)單請(qǐng)求請(qǐng)求頭：

（1）Access-Control-Request-Method

該字段是必須的，用來(lái)列出瀏覽器的CORS請(qǐng)求會(huì)用到哪些HTTP方法

（2）Access-Control-Request-Headers

該字段是一個(gè)逗號(hào)分隔的字符串，指定瀏覽器CORS請(qǐng)求會(huì)額外發(fā)送的頭信息字段

執(zhí)行簡(jiǎn)單請(qǐng)求的時(shí)候，瀏覽器會(huì)在請(qǐng)求頭信息增加origin字段，服務(wù)器據(jù)此來(lái)判斷請(qǐng)求域名是否在許可范圍之內(nèi)，來(lái)決定是否返回Access-Control-Allow-Origin字段。響應(yīng)頭有以下幾種：

（1）Access-Control-Allow-Origin

該字段是必須的。它的值要么是請(qǐng)求時(shí)Origin字段的值，要么是一個(gè)*，表示接受任意域名的請(qǐng)求。

（2）Access-Control-Allow-Credentials

該字段可選。它的值是一個(gè)布爾值，表示是否允許發(fā)送Cookie。默認(rèn)情況下，Cookie不包括在CORS請(qǐng)求之中。設(shè)為true，即表示服務(wù)器明確許可，Cookie可以包含在請(qǐng)求中，一起發(fā)給服務(wù)器。這個(gè)值也只能設(shè)為true，如果服務(wù)器不要瀏覽器發(fā)送Cookie，刪除該字段即可。

（3）Access-Control-Expose-Headers

該字段可選。CORS請(qǐng)求時(shí)，XMLHttpRequest對(duì)象的getResponseHeader()方法只能拿到6個(gè)基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必須在Access-Control-Expose-Headers里面指定。

(4)Access-Control-Max-Age

Access-Control-Max-Age首部字段指明了預(yù)檢請(qǐng)求的響應(yīng)的有效時(shí)間。

(5)Access-Control-Allow-Methods

Access-Control-Allow-Methods首部字段用于預(yù)檢請(qǐng)求的響應(yīng)。其指明了實(shí)際請(qǐng)求所允許使用的 HTTP 方法。

(6)Access-Control-Allow-Headers

Access-Control-Allow-Headers首部字段用于預(yù)檢請(qǐng)求的響應(yīng)。其指明了實(shí)際請(qǐng)求中允許攜帶的首部字段。

其他方法：document.domin,html5的postMessage,window.name等

函數(shù)節(jié)流和函數(shù)防抖

函數(shù)節(jié)流讓指函數(shù)有規(guī)律的進(jìn)行調(diào)用，應(yīng)用場(chǎng)景：window.resize，游戲中子彈發(fā)射(1s只能發(fā)射一顆子彈)等；

函數(shù)防抖讓函數(shù)在”調(diào)用’’之后的一段時(shí)間后生效，應(yīng)用場(chǎng)景:輸入框(例：在用戶停止輸入的500ms后再處理用戶數(shù)據(jù))。

//函數(shù)節(jié)流

/*

* @params {Function} fun 調(diào)用函數(shù)

* @params {delay} number 延遲時(shí)間

*/

constthrottle =(fun, delay, ...rest) =>{

? ? ? let last =null;

? ? ? return()=>{

? ? ? ? ? ? ? const now = +newDate();

? ? ? ? ? ? ? if(now - last > delay) {

? ? ? ? ? ? ? ? ? ? fun(rest);

? ? ? ? ? ? ? ? ? ? last = now;

? ? ? ? ? ? ? }

? ? ? ?}

}

//實(shí)例

constthrottleExample? = throttle(()=>console.log(1),1000);

//調(diào)用

throttleExample();

throttleExample();

throttleExample();

//函數(shù)防抖

constdebouce =(fun, delay, ...rest) =>{

? ? ? ? ? ? let timer =null;

? ? ? ? ? ? return()=>{

? ? ? ? ? ? ? ? ? ? ?clearTimeout(timer);

? ? ? ? ? ? ? ? ? ? ?timer = setTimeout(()=>{

? ? ? ? ? ? ? ? ? ? ? ? ? ? ?fun(rest);

? ? ? ? ? ? ? ? ? ? ? }, delay);

? ? ? ? ? ? ? }

}

//實(shí)例

constdebouceExample = debouce(()=>console.log(1),1000);

//調(diào)用

debouceExample();

debouceExample();

debouceExample();

AMD和CMD的區(qū)別

AMD 是 RequireJS 在推廣過程中對(duì)模塊定義的規(guī)范化產(chǎn)出。

CMD 是 SeaJS 在推廣過程中對(duì)模塊定義的規(guī)范化產(chǎn)出。

對(duì)于依賴的模塊，AMD 是提前執(zhí)行，CMD 是延遲執(zhí)行。不過 RequireJS 從 2.0 開始，也改成可以延遲執(zhí)行（根據(jù)寫法不同，處理方式不同）。CMD 推崇 as lazy as possible.

CMD 推崇依賴就近，AMD 推崇依賴前置。

AMD 的 API 默認(rèn)是一個(gè)當(dāng)多個(gè)用，CMD 的 API 嚴(yán)格區(qū)分，推崇職責(zé)單一。比如 AMD 里，require 分全局 require 和局部 require，都叫 require。CMD 里，沒有全局 require，而是根據(jù)模塊系統(tǒng)的完備性，提供 seajs.use 來(lái)實(shí)現(xiàn)模塊系統(tǒng)的加載啟動(dòng)。CMD 里，每個(gè) API 都簡(jiǎn)單純粹

BFC

http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.htmlBFC詳解

浮動(dòng)元素和絕對(duì)定位元素，非塊級(jí)盒子的塊級(jí)容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不為“visiable”的塊級(jí)盒子，都會(huì)為他們的內(nèi)容創(chuàng)建新的BFC（塊級(jí)格式上下文）。本身根元素就處在一個(gè)大的BFC中，BFC中元素豎直排列，IFC(行內(nèi)格式上文)中的元素橫向排列

塊格式化上下文由以下之一創(chuàng)建：

根元素或其它包含它的元素

浮動(dòng) (元素的float不是none)

絕對(duì)定位的元素 (元素具有position為absolute或fixed)

內(nèi)聯(lián)塊 inline-blocks (元素具有display: inline-block)

表格單元格 (元素具有display: table-cell，HTML表格單元格默認(rèn)屬性)

表格標(biāo)題 (元素具有display: table-caption, HTML表格標(biāo)題默認(rèn)屬性)

塊元素具有overflow，且值不是visible

display: flow-root；—來(lái)自MDN

用處:

設(shè)置父元素為BFC清除子元素浮動(dòng)；

解決上面的margin合并問題；

用于布局

new關(guān)鍵字的過程

創(chuàng)建一個(gè)空對(duì)象，并且 this 變量引用該對(duì)象，同時(shí)還繼承了該函數(shù)的原型。

屬性和方法被加入到 this 引用的對(duì)象中。

新創(chuàng)建的對(duì)象由 this 所引用，并且最后隱式的返回 this 。

var obj = {};

obj.__proto__ = Base.prototype;//Base為構(gòu)造函數(shù)

Base.call(obj);

return obj