摘要:扎實基礎幸好自己之前花了大力氣去給自己打基礎,讓自己現在的基礎還算不錯。
寫文章不容易,點個贊唄兄弟
專注 Vue 源碼分享,文章分為白話版和 源碼版,白話版助于理解工作原理,源碼版助于了解內部詳情,讓我們一起學習吧
研究基于 Vue版本 【2.5.17】
如果你覺得排版難看,請點擊 下面鏈接 或者 拉到 下面關注公眾號也可以吧
【Vue原理】Vue源碼閱讀總結大會 - 序
閱讀源碼是需要很多的勇氣的,特別是對這種 Vue 源碼的框架,十分抽象,使用了好多設計模式,封裝得十分精密。很難短時間內能看得明白。
而我顯然也是做好了心里準備 和 知識準備啦,我老早就想攻破 Vue 源碼 這座城堡
但是顯然我當時還沒有做好準備,我認為自己不可以貿然去看,不然自己煩,自己累,還難以收獲
本篇文章算是一個簡單地吹水,就是跟大家談談我的感想,沒有什么知識含量,其實也有的。
閱讀源碼準備了什么1、掌握 Vue 所有API
我把 Vue 的所有 API 都詳細研究使用過了一遍,而且盡量在項目中都有使用,讓自己有深一點的體會
而且我對著官方文檔,一個個做了詳細的筆記,而且聯想過了使用場景。
2、JavaScript 扎實基礎
幸好自己之前花了大力氣去給自己打基礎,讓自己現在的 JavaScript 基礎還算不錯。
逼著自己把很多本 JavaScript 書都看完了,并且做了詳細筆記。像是【 JavaScript易維護】【JavaScript性能 】,【JavaScript 高級程序設計】【巴菲特給股東的信】看了兩遍,說不上精通,也算是還可以?
3、看完 JavaScript 設計模式
光是 JavaScript 設計模式 這本書 我就看了一年半,不能說自己把所有設計模式都掌握了,掌握了大部分吧,設計模式港真真的很有趣,不然我也不會決心學
在這里推薦 張容銘的 【JavaScript設計模式】,書講得非常透徹和詳細,我是從完全不懂開始看的
也經常使用一部分,我一直以設計模式為我的項目基構。就是 能用設計模式的地方,我都盡量使用設計模式。
設計模式看起來就像是 劍客 的劍譜,有招有式,連人家武俠劇發功的時候都知道 喊出 招式的名字... 降龍十八掌!!!!
野路子難登大雅之堂,主要是不好看啊,代碼為了好維護,易擴展
4、學會調試
我很大膽地說,如果你不會調試,你看 Vue 源碼,或者你會想死,你會出現這個場景...
MMP,這個方法是怎么跳到 那個方法的,那個方法和 這個方法又是怎么聯系起來的?
也許你可以慢慢 使用 函數名字 去尋找,但是無疑你會多消耗幾倍時間,而且你會更煩
使用調試真的方便,以前我也真的不喜歡調試,覺得好像很難???
更喜歡使用 console.log 去打印信息.....
是啊,我自己寫項目的時候,我還是會使用 console.log 去調試.......
那是因為我自己代碼,我知道怎么跑,你 看別人的代碼,還是超級抽象的框架,使用 console.log 的方式.....
放心,相信我,你會掉很多頭發.........
這里,我使用的是 VSCode 去調試,真的簡單又方便,我當時也真的很難去讓自己又要學一個東西
但是我咬咬牙,我還是學了,感謝自己......
我可以保證,你從不懂到掌握,只要不到十分鐘,簡直就是 現實版的 十分鐘精通到入門
好吧,下面開始說,Vue 的簡單總結。
1、封裝了很多常用的函數!
為了 復用 且 易維護
常用的類型判斷、 類型轉換 、數據格式轉換(數組轉對象).....
舉些例子
function isObject(obj) { return obj !== null && typeof obj === "object"} function isUndef(v) { return v === undefined || v === null} function isDef(v) { return v !== undefined && v !== null} function toString(val) { return val == null ? "" : typeof val === "object" ? JSON.stringify(val, null, 2) : String(val) } function toObject(arr) { var res = {}; for (var i = 0; i < arr.length; i++) { if (arr[i]) { extend(res, arr[i]); } } return res } ....
你說說不定過了幾年,判斷是否是一個對象,不再是 什么 typeof obj=="object"
如果沒有封裝,那豈不是所有代碼涉及到的都要改一遍,且不說如果有很多個都變了.....那你就頭大了
節點操作兼容函數
addClass ,removeClass,createElement,appendChild,removeChild
function addClass(el, cls) { if (!cls || !(cls = cls.trim())) return if (el.classList) { if (cls.indexOf(" ") > -1) { cls.split(/s+/).forEach(function(c) { return el.classList.add(c); }); } else { el.classList.add(cls); } } else { var cur = " " + (el.getAttribute("class") || "") + " "; if (cur.indexOf(" " + cls + " ") < 0) { el.setAttribute("class", (cur + cls).trim()); } } } ....
這些函數都很有用,所以我都記下來了,畢竟是 框架封裝的,肯定是最完善的
function isObject(obj) { return obj !== null && typeof obj === "object"} function isUndef(v) { return v === undefined || v === null} function isDef(v) { return v !== undefined && v !== null} function toString(val) { return val == null ? "" : typeof val === "object" ? JSON.stringify(val, null, 2) : String(val) } function toObject(arr) { var res = {}; for (var i = 0; i < arr.length; i++) { if (arr[i]) { extend(res, arr[i]); } } return res }
2、真的用了很多設計模式
就我看到的設計模式就有
觀察者模式、狀態模式、節流模式、 參與者模式、備忘錄模式、單例模式 裝飾者模式、組合繼承模式、鏈模式.........
我懷疑 Vue 把所有的設計模式都用完了.... 真的..... 如果你不懂設計模式
你真不會領悟到他這么寫的精髓
我就選 Vue 常用的一個設計模式來講
【參與者模式】
Vue 封裝的很多函數都是用了 參與者模式,也可以叫做柯里化
先來簡單解釋下 參與者模式
1、保存第一次調用 傳入參數
2、返回定制函數,函數內使用 參數
簡單實現像這樣
function add(a){ return function(b){ return a+b } } // 為了定制函數,把第一次調用時的參數閉包保存 add5 = add(5)var result = add5(9)
看一下 Vue其中一個 使用柯里化 的封裝函數
makeMap
創建 對象 map,返回函數,用于后面查找 某個東西是否存在 map 中
function makeMap( str, expectsLowerCase ) { var map = Object.create(null); var list = str.split(","); for (var i = 0; i < list.length; i++) { map[list[i]] = true; } return expectsLowerCase ? function(val) { return map[val.toLowerCase()]; } : function(val) { return map[val]; } } // 應用 var isUnaryTag = makeMap( "area,base,br,col,embed,frame,hr,img,input,isindex,keygen," + "link,meta,param,source,track,wbr"); // 查找 area 標簽是否存在 上面保存過的 字符串中 isUnaryTag("area")
3、使用很多閉包!
據我看過的地方
1、解析組件模板 使用了閉包作為緩存,為了重復解析
2、cached 函數,一個專門使用閉包 為緩存的函數
3、上面所講到 的 柯里化所有涉及的函數,makeMap,parthPath,
4、createPatchFunction 當屬篇幅最大的使用閉包的函數了,把一堆函數作為閉包,然后返回 一個函數。他最大的作用是 比較更新DOM 節點
4、使用很多標志位
Vue 常用標志位來
1、表明是否已經做了某件事
_isMounted:// dom 是否已經掛載 _isDestroyed // 組件是否已經摧毀 pending //表明更新回調的 setTimeout 已經執行 waiting //是否已經初始化更新隊列,在等待新的成員進入對壘 flushing //更新隊列是否已經開始逐個更新成員 ....
2、指明當前東西的身份
isStatic// 是否是靜態節點 isComment// 是否是注釋節點 isClone:// 是否是克隆節點 isOnce// 是否有v-once 指令(如果有當前指令,會跳過編譯) _isComponent// 是否是組件
多用標志位,控制流程,替代多余的判斷(直接判斷標志位來確認身份,不用做太多的判斷),減少開銷
上面那些變量,大家沒看源碼,可能有些懵逼,沒關系,就當先知道有這個東西就好了
我給自己定的任務是 分為兩個部分
Vue 的主體內容
1、依賴收集
2、依賴更新
3、Virtual DOM ,dom 節點 生成虛擬Vnode 節點
4、Compile, 模板編譯
5、Diff、Patch, 節點比較更新
6、NextTick ,延遲執行回調
7、Render, 渲染機制
8、LifeCircle ,生命周期
9、Model ,雙向綁定
10、Event ,事件機制
我就大約以這些為我的學習目標進行 源碼閱讀的,每一塊都是一個非常大的內容,每一塊內容都不是幾天能看完的,有時候還需要一點靈感。當然還有很多內容,但是我的目標也并不是全部,一字不漏讀完,我要的是他的精髓即可,或許等我掌握了這些,再去開發其他的內容,這樣或許更簡單
反正我始終提醒自己不要焦躁,因為這個東西真的是急不來,長期以往,不要妄想一步登天,一開始總會很難,但是久了也一樣很難,哈哈哈哈哈
如果你有興趣也讀源碼,我們可以一起討論學習....
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/105017.html
摘要:算法子節點比較這部分代碼比較多,先說說原理后面再貼代碼。循環結束的標志就是舊子節點數組或新子節點數組遍歷完,即。第二步尾尾比較。第三步頭尾比較。第四步尾頭比較。節點確認后,真實序列為,未確認序列為第五次是均不相似,直接插入到未確認序列頭部。 通過對 Vue2.0 源碼閱讀,想寫一寫自己的理解,能力有限故從尤大佬2016.4.11第一次提交開始讀,準備陸續寫: 模版字符串轉AST語法...
摘要:算法子節點比較這部分代碼比較多,先說說原理后面再貼代碼。循環結束的標志就是舊子節點數組或新子節點數組遍歷完,即。第二步尾尾比較。第三步頭尾比較。第四步尾頭比較。節點確認后,真實序列為,未確認序列為第五次是均不相似,直接插入到未確認序列頭部。 通過對 Vue2.0 源碼閱讀,想寫一寫自己的理解,能力有限故從尤大佬2016.4.11第一次提交開始讀,準備陸續寫: 模版字符串轉AST語法...
閱讀 1565·2021-10-25 09:44
閱讀 2926·2021-09-04 16:48
閱讀 1543·2019-08-30 15:44
閱讀 2475·2019-08-30 15:44
閱讀 1731·2019-08-30 15:44
閱讀 2816·2019-08-30 14:14
閱讀 2964·2019-08-30 13:00
閱讀 2143·2019-08-30 11:09