資訊專欄INFORMATION COLUMN
摘要：那個率先改變的實例的返回值，就會傳遞給的回調函數。函數對函數的改進，體現在以下四點內置執行器。進一步說，函數完全可以看作多個異步操作，包裝成的一個對象，而命令就是內部命令的語法糖。中的本質就是沒有的隱藏的組件。
1、原型 - jquery使用
注釋 : 實例雖然不同，但是構造函數是同一個。
jquery源碼中，原型的使用：
為什么要把原型方法放在$.fn上？
好處:
只有 $ 會暴露在window全局變量
將插件擴展統一到$.fn.xxx這一個接口，方便使用
2、原型 - Zepto - 1 使用
3、什么是單線程，和異步的關系：
單線程 - 只有一個線程，只做一件事
原因 - 避免DOM渲染的沖突
解決方案 - 異步
4、 js單線程的原因
原因 - 避免DOM渲染沖突
瀏覽器需要渲染DOM
js可以修改DOM結構
js執行的時候，瀏覽器DOM渲染會暫停
兩段js也不能同時執行(都修改DOM就沖突了)
webworker支持多線程，但是不能訪問DOM
解決方案 - 異步
比如：
單線程 - 總結
問題解答： 單線程就是同時間只能做一件事，兩段js不能同時執行 原因就是為了避免DOM渲染的沖突 異步是一種“無奈”的解決方案，雖然有很多問題 解決方案 - 異步 問題1：沒按照書寫順序執行，可讀性差 問題2：callback中不容易模塊化
5、event -loop 事件輪詢
什么是event-loop：
事件輪詢，js實現異步的具體解決方案
同步代碼，直接執行
異步函數先放在異步隊列中
待同步函數執行完畢，輪詢執行異步隊列的函數
實例分析1：
實例分析2：
注釋：javascript引擎，輪詢機制會一直監視異步隊列，當異步隊列中有函數時，會拿到主線程中執行，然后再回來繼續監視異步隊列，當異步隊列有函數時，再拿到主線程中執行，然后回來繼續監視異步隊列....
6、jqueryy-deferred-介紹
jquery 1.5 的變化：
無法改變js異步和單線程的本質
只能從寫法上杜絕callback這種形式
它是一種語法糖形式，但是解耦了代碼
開放封閉原則(對擴展開放，對修改封閉)的很好體現
7、jquery - defered - 應用-1
改造后：
使用 dtd.promise
8、promise - 語法回顧
9、promise - 串聯
10、 promise-all-race
Promise.all()方法：最終promise的狀態有result1、result2決定，分成兩種情況：
1.只有result1、result2的狀態都變成fullfilled，promise的狀態才會變成fullfilled，此時result1、result2的返回值組成一個數組，傳遞給promise的回調函數
2.只要result1、result2之中有一個被rejected，promise的狀態就會變成rejected，此時第一個被reject的實例的返回值，會傳遞給promise的回調函數
Promise.race()方法：
只要result1、result2中有一個實例率先改變狀態，promise的狀態就跟著改變。那個率先改變的Promise實例的返回值，就會傳遞給promise的回調函數。
11、async-await
then只是將callback拆分了
async/await 是最直接的同步寫法
Generator函數，依次讀取兩個文件：
改寫成async函數，如下
一比較就會發現，async函數就是將Generator函數的星號(*)替換成async，將yield替換成await，僅此而已。
async函數對Generator函數的改進，體現在以下四點：
1.內置執行器。
2.更好的語義。
3.更廣的適用性。
4.返回值是Promise。
進一步說，async函數完全可以看作多個異步操作，包裝成的一個Promise對象，而await命令就是內部then命令的語法糖。
12、什么是vdom
virtual dom,虛擬DOM
用js模擬DOM結構
DOM變化的對比，放在js層來做(圖靈完備語言:能實現高復雜邏輯的語言)，提高效率
提高重繪性能
用js來模擬dom
vdom - 總結
DOM操作是“昂貴”的，js運行效率高
盡量減少DOM操作，而不是“推倒重來”
項目越復雜，影響就越嚴重
vdom即可解決這個問題
13、使用 vdom-snabbdom-1
介紹 snabbdom：
介紹snabbdom - h函數：
介紹snabbdom - patch 函數
14、使用vdom -snabbdom 示例
15、使用vdom - 總結
16、Diff算法 - vdom 為何要使用Diff
DOM操作是“昂貴”的，因此盡量減少DOM
找出本次DOM必須跟新的節點來更新，其他的不更新
這個“找出”的過程，就需要diff算法
17、Diff算法 - 實現-1
18、Diff算法 - 總結
知道什么是diff算法，是linux的基礎命令
vdom中應用diff算法是為了找出需要更新的節點
diff實現，patch(container,vnode) patch(vnode,newVnode)
核心邏輯，createElement 和updateChildren
19、從jQuery 到框架 - 總結
數據和視圖的分離，解耦(開放封閉原則：對擴展開放，對修改封閉)
以數據驅動視圖，只關心數據變化，DOM操作給封裝
20、如何理解MVVM -MVC
MVC：
21、如何理解MVVM -MVVM
Model -模型、數據
View - 視圖、模板(視圖和模板是分離的)
ViewModel - 連接Model和View的橋梁
圖解：
注釋：View通過事件綁定來操作Model，Model通過數據綁定來操作View
關于ViewModel：
MVVM不算是一種創新
但其中的ViewModel卻是一種創新
真正結合前端場景應用的創建
22、Vue三要素(MVVM框架的三大要素)
響應式：vue如何監聽到data的每個屬性變化？
模板引擎：vue的模板如何被解析，指令如何處理？
渲染：vue的模板如何被渲染成html？以及渲染過程
23、響應式-介紹：修改data屬性之后，vue立刻監聽到。實現的核心函數：Object.defineProperty (vue2.0)
重寫 get和set函數。
響應式 - 模擬:
24、模板解析 - 模板是什么
本質：字符串
有邏輯，如v-if,v-for等
與html格式很像，但有很大區別
最終還要轉換為html來顯示
模板最終必須轉換成js代碼，因為：
模板有邏輯，必須用js才能實現(圖靈完備語言)
轉換為html渲染頁面，必須用js才能實現
因此，模板最終要轉換成一個js函數(render函數)
25、 render函數 - with的用法
26、render函數 - 講解
render函數：
模板中所有信息都包含在了render函數中
this即vm
price即this.price即vm.price,即data中的price
_c即this._c 即vm._c
如下圖：
27、如何在源碼中查找生成的render函數：
1.先寫一個簡單的vue-demo示例：
2.在未壓縮的源碼中搜索“code.render”。
3.打印出來。
此時，模板已經變成了render函數了。
render函數和vdom
vm._c 其實就相當于snabbdom中的h函數。
render函數執行之后，返回的是vnode。
渲染頁面：updateComponent
updateComponent中 實現了vdom的patch
頁面首次渲染執行updateComponent
data中每次修改屬性，執行updateComponent
28、vue的整個實現流程：
第一步：解析模板成render函數
第二步：響應式開始監聽
第三步：首次渲染，顯示頁面，且綁定依賴
第四步：data屬性變化，觸發rerender
第一步：
第二步：
第三步：
什么要監聽get，直接監聽set不行嗎:
data中有很多屬性，有些被用到，有些可能不被用到。被用到的會走到get，不被用到的不會走到get。未走到get中的屬性，set的時候我們也無需關心。避免不必要的重復渲染
第四步：
附加：
vuex的工作原理：
其本質就是講我們傳入的state作為一個隱藏的vue組件的data，也就是說：我們的commit操作，本質上其實就是修改這個組件的data的值。vuex中的store本質就是沒有template的隱藏的vue組件。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106918.html
摘要：入門，第一個這是一門很新的語言，年前后正式公布，算起來是比較年輕的編程語言了，更重要的是它是面向程序員的函數式編程語言，它的代碼運行在之上。它通過編輯類工具，帶來了先進的編輯體驗，增強了語言服務。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不覺已經到來了，總結過去的 2017，相信小伙們一定有很多收獲...
摘要：入門，第一個這是一門很新的語言，年前后正式公布，算起來是比較年輕的編程語言了，更重要的是它是面向程序員的函數式編程語言，它的代碼運行在之上。它通過編輯類工具，帶來了先進的編輯體驗，增強了語言服務。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不覺已經到來了，總結過去的 2017，相信小伙們一定有很多收獲...
摘要：入門，第一個這是一門很新的語言，年前后正式公布，算起來是比較年輕的編程語言了，更重要的是它是面向程序員的函數式編程語言，它的代碼運行在之上。它通過編輯類工具，帶來了先進的編輯體驗，增強了語言服務。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不覺已經到來了，總結過去的 2017，相信小伙們一定有很多收獲...
摘要：在上百種語言中算是命好的一個，還有就是最近納入高考體系的。由以下三個部分構成。就是對實現該標準規定的各個方面內容的語言的描述。是針對但經過擴展的用于的應用程序編程接口。將頁面映射為由節點構成的樹狀結構。 JavaScript的歷史這里就不再贅述了，當然JavaScript的歷史還是比較有意思的。在上百種語言中JavaScript算是‘命’好的一個，還有就是最近納入高考體系的python...
摘要：前言今天和大家一起聊聊的推薦書籍，每一本都是精選，做前端開發的朋友們如果沒讀過，可以嘗試一下。如果怕麻煩，也可以關注曉舟報告，發送獲取書籍，四個字，就可以得到電子書的提取碼。 前言 今天和大家一起聊聊JavaScript的推薦書籍，每一本都是精選，做前端開發的朋友們如果沒讀過，可以嘗試一下。下面給大家簡單介紹了書的內容，還有讀書的方法，希望可以幫大家提升讀書效率。 一、《JavaScr...
閱讀 1740·2021-11-25 09:43
閱讀 1785·2021-11-24 10:41
閱讀 3105·2021-09-27 13:36
閱讀 811·2019-08-30 15:53
閱讀 3567·2019-08-30 15:44
閱讀 866·2019-08-30 14:03
閱讀 2572·2019-08-29 16:38
閱讀 996·2019-08-29 13:23
