摘要：那個(gè)率先改變的實(shí)例的返回值，就會(huì)傳遞給的回調(diào)函數(shù)。函數(shù)對(duì)函數(shù)的改進(jìn)，體現(xiàn)在以下四點(diǎn)內(nèi)置執(zhí)行器。進(jìn)一步說(shuō)，函數(shù)完全可以看作多個(gè)異步操作，包裝成的一個(gè)對(duì)象，而命令就是內(nèi)部命令的語(yǔ)法糖。中的本質(zhì)就是沒(méi)有的隱藏的組件。

1、原型 - jquery使用

注釋 : 實(shí)例雖然不同，但是構(gòu)造函數(shù)是同一個(gè)。

jquery源碼中，原型的使用：

為什么要把原型方法放在$.fn上？

好處:
只有 $ 會(huì)暴露在window全局變量
將插件擴(kuò)展統(tǒng)一到$.fn.xxx這一個(gè)接口，方便使用

2、原型 - Zepto - 1 使用

3、什么是單線程，和異步的關(guān)系：
單線程 - 只有一個(gè)線程，只做一件事
原因 - 避免DOM渲染的沖突
解決方案 - 異步

4、 js單線程的原因
原因 - 避免DOM渲染沖突
瀏覽器需要渲染DOM
js可以修改DOM結(jié)構(gòu)
js執(zhí)行的時(shí)候，瀏覽器DOM渲染會(huì)暫停
兩段js也不能同時(shí)執(zhí)行(都修改DOM就沖突了)
webworker支持多線程，但是不能訪問(wèn)DOM

解決方案 - 異步
比如：

單線程 - 總結(jié)

問(wèn)題解答：
單線程就是同時(shí)間只能做一件事，兩段js不能同時(shí)執(zhí)行
原因就是為了避免DOM渲染的沖突
異步是一種“無(wú)奈”的解決方案，雖然有很多問(wèn)題

解決方案 - 異步
問(wèn)題1：沒(méi)按照書(shū)寫(xiě)順序執(zhí)行，可讀性差
問(wèn)題2：callback中不容易模塊化

5、event -loop 事件輪詢
什么是event-loop：
事件輪詢，js實(shí)現(xiàn)異步的具體解決方案
同步代碼，直接執(zhí)行
異步函數(shù)先放在異步隊(duì)列中
待同步函數(shù)執(zhí)行完畢，輪詢執(zhí)行異步隊(duì)列的函數(shù)

實(shí)例分析1：

實(shí)例分析2：

注釋：javascript引擎，輪詢機(jī)制會(huì)一直監(jiān)視異步隊(duì)列，當(dāng)異步隊(duì)列中有函數(shù)時(shí)，會(huì)拿到主線程中執(zhí)行，然后再回來(lái)繼續(xù)監(jiān)視異步隊(duì)列，當(dāng)異步隊(duì)列有函數(shù)時(shí)，再拿到主線程中執(zhí)行，然后回來(lái)繼續(xù)監(jiān)視異步隊(duì)列....

6、jqueryy-deferred-介紹



jquery 1.5 的變化：
無(wú)法改變js異步和單線程的本質(zhì)
只能從寫(xiě)法上杜絕callback這種形式
它是一種語(yǔ)法糖形式，但是解耦了代碼
開(kāi)放封閉原則(對(duì)擴(kuò)展開(kāi)放，對(duì)修改封閉)的很好體現(xiàn)

7、jquery - defered - 應(yīng)用-1

改造后：

使用 dtd.promise

8、promise - 語(yǔ)法回顧

9、promise - 串聯(lián)

10、 promise-all-race

Promise.all()方法：最終promise的狀態(tài)有result1、result2決定，分成兩種情況：
1.只有result1、result2的狀態(tài)都變成fullfilled，promise的狀態(tài)才會(huì)變成fullfilled，此時(shí)result1、result2的返回值組成一個(gè)數(shù)組，傳遞給promise的回調(diào)函數(shù)
2.只要result1、result2之中有一個(gè)被rejected，promise的狀態(tài)就會(huì)變成rejected，此時(shí)第一個(gè)被reject的實(shí)例的返回值，會(huì)傳遞給promise的回調(diào)函數(shù)

Promise.race()方法：
只要result1、result2中有一個(gè)實(shí)例率先改變狀態(tài)，promise的狀態(tài)就跟著改變。那個(gè)率先改變的Promise實(shí)例的返回值，就會(huì)傳遞給promise的回調(diào)函數(shù)。

11、async-await
then只是將callback拆分了
async/await 是最直接的同步寫(xiě)法

Generator函數(shù)，依次讀取兩個(gè)文件：

改寫(xiě)成async函數(shù)，如下

一比較就會(huì)發(fā)現(xiàn)，async函數(shù)就是將Generator函數(shù)的星號(hào)(*)替換成async，將yield替換成await，僅此而已。

async函數(shù)對(duì)Generator函數(shù)的改進(jìn)，體現(xiàn)在以下四點(diǎn)：
1.內(nèi)置執(zhí)行器。
2.更好的語(yǔ)義。
3.更廣的適用性。
4.返回值是Promise。
進(jìn)一步說(shuō)，async函數(shù)完全可以看作多個(gè)異步操作，包裝成的一個(gè)Promise對(duì)象，而await命令就是內(nèi)部then命令的語(yǔ)法糖。

12、什么是vdom
virtual dom,虛擬DOM
用js模擬DOM結(jié)構(gòu)
DOM變化的對(duì)比，放在js層來(lái)做(圖靈完備語(yǔ)言:能實(shí)現(xiàn)高復(fù)雜邏輯的語(yǔ)言)，提高效率
提高重繪性能

用js來(lái)模擬dom

vdom - 總結(jié)
DOM操作是“昂貴”的，js運(yùn)行效率高
盡量減少DOM操作，而不是“推倒重來(lái)”
項(xiàng)目越復(fù)雜，影響就越嚴(yán)重
vdom即可解決這個(gè)問(wèn)題

13、使用 vdom-snabbdom-1

介紹 snabbdom：

介紹snabbdom - h函數(shù)：

介紹snabbdom - patch 函數(shù)

14、使用vdom -snabbdom 示例

15、使用vdom - 總結(jié)

16、Diff算法 - vdom 為何要使用Diff
DOM操作是“昂貴”的，因此盡量減少DOM
找出本次DOM必須跟新的節(jié)點(diǎn)來(lái)更新，其他的不更新
這個(gè)“找出”的過(guò)程，就需要diff算法

17、Diff算法 - 實(shí)現(xiàn)-1

18、Diff算法 - 總結(jié)
知道什么是diff算法，是linux的基礎(chǔ)命令
vdom中應(yīng)用diff算法是為了找出需要更新的節(jié)點(diǎn)
diff實(shí)現(xiàn)，patch(container,vnode) patch(vnode,newVnode)
核心邏輯，createElement 和updateChildren

19、從jQuery 到框架 - 總結(jié)
數(shù)據(jù)和視圖的分離，解耦(開(kāi)放封閉原則：對(duì)擴(kuò)展開(kāi)放，對(duì)修改封閉)
以數(shù)據(jù)驅(qū)動(dòng)視圖，只關(guān)心數(shù)據(jù)變化，DOM操作給封裝

20、如何理解MVVM -MVC
MVC：

21、如何理解MVVM -MVVM
Model -模型、數(shù)據(jù)
View - 視圖、模板(視圖和模板是分離的)
ViewModel - 連接Model和View的橋梁

圖解：

注釋：View通過(guò)事件綁定來(lái)操作Model，Model通過(guò)數(shù)據(jù)綁定來(lái)操作View

關(guān)于ViewModel：
MVVM不算是一種創(chuàng)新
但其中的ViewModel卻是一種創(chuàng)新
真正結(jié)合前端場(chǎng)景應(yīng)用的創(chuàng)建

22、Vue三要素(MVVM框架的三大要素)
響應(yīng)式：vue如何監(jiān)聽(tīng)到data的每個(gè)屬性變化？
模板引擎：vue的模板如何被解析，指令如何處理？
渲染：vue的模板如何被渲染成html？以及渲染過(guò)程

23、響應(yīng)式-介紹：修改data屬性之后，vue立刻監(jiān)聽(tīng)到。實(shí)現(xiàn)的核心函數(shù)：Object.defineProperty (vue2.0)


重寫(xiě) get和set函數(shù)。

響應(yīng)式 - 模擬:

24、模板解析 - 模板是什么
本質(zhì)：字符串
有邏輯，如v-if,v-for等
與html格式很像，但有很大區(qū)別
最終還要轉(zhuǎn)換為html來(lái)顯示

模板最終必須轉(zhuǎn)換成js代碼，因?yàn)椋?br>模板有邏輯，必須用js才能實(shí)現(xiàn)(圖靈完備語(yǔ)言)
轉(zhuǎn)換為html渲染頁(yè)面，必須用js才能實(shí)現(xiàn)
因此，模板最終要轉(zhuǎn)換成一個(gè)js函數(shù)(render函數(shù))

25、 render函數(shù) - with的用法

26、render函數(shù) - 講解

render函數(shù)：
模板中所有信息都包含在了render函數(shù)中
this即vm
price即this.price即vm.price,即data中的price
_c即this._c 即vm._c

如下圖：

27、如何在源碼中查找生成的render函數(shù)：
1.先寫(xiě)一個(gè)簡(jiǎn)單的vue-demo示例：

2.在未壓縮的源碼中搜索“code.render”。

3.打印出來(lái)。

此時(shí)，模板已經(jīng)變成了render函數(shù)了。

render函數(shù)和vdom

vm._c 其實(shí)就相當(dāng)于snabbdom中的h函數(shù)。
render函數(shù)執(zhí)行之后，返回的是vnode。

渲染頁(yè)面：updateComponent

updateComponent中 實(shí)現(xiàn)了vdom的patch
頁(yè)面首次渲染執(zhí)行updateComponent
data中每次修改屬性，執(zhí)行updateComponent

28、vue的整個(gè)實(shí)現(xiàn)流程：
第一步：解析模板成render函數(shù)
第二步：響應(yīng)式開(kāi)始監(jiān)聽(tīng)
第三步：首次渲染，顯示頁(yè)面，且綁定依賴
第四步：data屬性變化，觸發(fā)rerender

第一步：

第二步：

第三步：

什么要監(jiān)聽(tīng)get，直接監(jiān)聽(tīng)set不行嗎:
data中有很多屬性，有些被用到，有些可能不被用到。被用到的會(huì)走到get，不被用到的不會(huì)走到get。未走到get中的屬性，set的時(shí)候我們也無(wú)需關(guān)心。避免不必要的重復(fù)渲染

第四步：

附加：
vuex的工作原理：
其本質(zhì)就是講我們傳入的state作為一個(gè)隱藏的vue組件的data，也就是說(shuō)：我們的commit操作，本質(zhì)上其實(shí)就是修改這個(gè)組件的data的值。vuex中的store本質(zhì)就是沒(méi)有template的隱藏的vue組件。