【page-monitor 前端自動化 中篇】 源碼分析

上篇中初探了page-monitor的一些功能和在前端自動化測試方面的可行性，本篇主要分析下page-monitor的實現方式和源碼。

mode-module簡介

page-monitor的存在形式是node-module，依賴於node安裝和運行，簡單必須瞭解下node_modules

node-module是nodejs的模塊，符合commonJs規範【具體規範能夠參考：http://javascript.ruanyifeng....】

簡單描述commonJs規範
1：文件即模塊，做用域在文件內，不容許重複，不會污染。
2：加載依賴出現順序，加載即運行，重複則利用緩存。

多說一句：這是amd 和cmd(commonJs)的本質區別，因爲node多運行於服務端，加載比較快，所以比較適合cmd 規範，瀏覽器端的模塊則更適用於cmd的規範，我的理解沒有廣義的好壞之分

方便看源碼，貼出node_modole簡單構成和主要函數module
node內部提供一了一個modle的構造函數，全部的模塊都繼承和依賴於此模塊。

node module的引入 require命令。
其餘加載規則，路徑設定不在此贅述。

page-monitor文件分析

完整文件目錄：

運行生成目錄分析：

出了node_module及其組件代碼，可用和值的分析的文件index.js 和phantomjs 下面的五個文件。

分析index.js

代碼中無非變量聲明和引用，關鍵一句引用phantom的命令乳腺

// 多線程啓動位置
var proc = spawn(binPath, arr);

經過上面多線程的啓動node能夠達到高效和併發處理測試任務的需求，分析下arr的內容以下圖：看到了 窗口大小，延時，ua，存放地址，diff變量等等

分析獲取DOM源碼

獲取dom的源碼主要利用了web api evalution，evalution傳入一個xpath的參數，返回一個xpath的對象，以後經過遍歷和xpath規則生成規則化的json。
貼一個evalution api

爲了看懂page-monitor的代碼舉個栗子

# evalution example:

var headings = document.evaluate("/html/body//h2", document, null, XPathResult.ANY_TYPE, null);
/* 檢索body中全部H2的所欲.
 * 結果存在於一個node的迭代器中 */
var thisHeading = headings.iterateNext();
var alertText = "Level 2 headings in this document are:\n";
while (thisHeading) {
  alertText += thisHeading.textContent + "\n";
  thisHeading = headings.iterateNext();
}
alert(alertText); // Alerts the text of all h2 elements

經過上面函數和page-monitor中walk.js函數最後一行，能夠看出page-monitor 保存了四個元素：屬性[name,id等等]，節點類型，位置[後期渲染]，樣式的md5加密[樣式僅須要對比是否變化便可]
具體內容和dom結構以下：

對應的具體dom結構

diff.js 代碼

diff代碼主要兩個做用

• 1：獲取差別

• 2：渲染差別
  其中對比的策略：

歷史徹底每一個對比如今：獲取更新和刪除的內容
如今徹底每一個對比歷史：獲取更新和新增的內容
具體能夠參考代碼

其餘api和源碼簡單修改

必須瞭解的web api 還有一個是querySeletor 也就是檢索的api，參考地址
document.querySelector()
瞭解了這個api就能夠作一件事情：不對全局dom diff，只對特別關心的dom進行diff
實現方式：修改querySelector的根節點爲Header
獲取的dom結構以下：根節點爲header

獲取的頁面截圖以下：

代碼流程圖

總結

本次在調研page-monitor的基礎上，對page-monitor的源碼實現進行分析；同時利用相關api修改，來只對核心頁面進行獲取優化。下一篇將會進一步思考page-monitor的應用。

相關文章：
【page-monitor 前端自動化 上篇】 初步調研
【page-monitor 前端自動化 下篇】 實踐應用