成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Object / 730人閱讀

摘要：上篇中初探了的一些功能和在前端自動化測試方面的可行性，本篇主要分析下的實現(xiàn)方式和源碼。文件分析完整文件目錄運行生成目錄分析出了及其組件代碼，可用和值的分析的文件和下面的五個文件。相關(guān)文章前端自動化上篇初步調(diào)研前端自動化下篇實踐應用

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

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

node-module是nodejs的模塊，符合commonJs規(guī)范【具體規(guī)范可以參考：http://javascript.ruanyifeng....】

簡單描述commonJs規(guī)范
1：文件即模塊，作用域在文件內(nèi)，不允許重復，不會污染。
2：加載依賴出現(xiàn)順序，加載即運行，重復則利用緩存。

多說一句：這是amd 和cmd(commonJs)的本質(zhì)區(qū)別，由于node多運行于服務端，加載比較快，因此比較適合cmd 規(guī)范，瀏覽器端的模塊則更適用于cmd的規(guī)范，個人理解沒有廣義的好壞之分

方便看源碼，貼出node_modole簡單構(gòu)成和主要函數(shù)module
node內(nèi)部提供一了一個modle的構(gòu)造函數(shù)，所有的模塊都繼承和依賴于此模塊。

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

page-monitor文件分析

完整文件目錄：

運行生成目錄分析：

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

分析index.js

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

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

通過上面多線程的啟動node可以達到高效和并發(fā)處理測試任務的需求，分析下arr的內(nèi)容如下圖：看到了 窗口大小，延時，ua，存放地址，diff變量等等

分析獲取DOM源碼

獲取dom的源碼主要利用了web api evalution，evalution傳入一個xpath的參數(shù)，返回一個xpath的對象，之后通過遍歷和xpath規(guī)則生成規(guī)則化的json。
貼一個evalution api

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

# evalution example:

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

通過上面函數(shù)和page-monitor中walk.js函數(shù)最后一行，可以看出page-monitor 保存了四個元素：屬性[name,id等等]，節(jié)點類型，位置[后期渲染]，樣式的md5加密[樣式僅需要對比是否變化即可]
具體內(nèi)容和dom結(jié)構(gòu)如下：

對應的具體dom結(jié)構(gòu)

diff.js 代碼

diff代碼主要兩個作用

1：獲取差異

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

歷史完全每個對比現(xiàn)在：獲取更新和刪除的內(nèi)容
現(xiàn)在完全每個對比歷史：獲取更新和新增的內(nèi)容
具體可以參考代碼

其他api和源碼簡單修改

必須了解的web api 還有一個是querySeletor 也就是檢索的api，參考地址
document.querySelector()
了解了這個api就可以做一件事情：不對全局dom diff，只對特別關(guān)心的dom進行diff
實現(xiàn)方式：修改querySelector的根節(jié)點為Header
獲取的dom結(jié)構(gòu)如下：根節(jié)點為header

獲取的頁面截圖如下：

代碼流程圖

總結(jié)

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

相關(guān)文章：
【page-monitor 前端自動化 上篇】 初步調(diào)研
【page-monitor 前端自動化 下篇】 實踐應用

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/80031.html

相關(guān)文章

  • 【page-monitor 前端自動化 下篇】 實踐應用

    摘要：貼一個細節(jié)圖其他分析小拽通過上面的舉例，旨在拋磚引玉，希望或者結(jié)構(gòu)在前端的自動化測試有一定應用，提升產(chǎn)品質(zhì)量。最終再上一張流程圖，便于分析相關(guān)文章前端自動化上篇初步調(diào)研前端自動化中篇源碼分析 通過page-diff的初步調(diào)研和源碼分析，確定page-diff在前端自動化測試和監(jiān)控方面做一些事情。本篇主要介紹下，page-diff在具體的實踐中的一些應用 核心dom校驗 前端的快速發(fā)展，...

    PAMPANG 評論0 收藏0

  • 【page-monitor 前端自動化 上篇】初步調(diào)研

    摘要：前端自動化測試主要在于變化快，不穩(wěn)定，兼容性復雜故而，想通過較低的成本維護較為通用的自動化比較困難。本文旨在通過獲取和分析結(jié)構(gòu)，調(diào)研能否通過監(jiān)控和分析核心，來進行前端自動化測試。相關(guān)文章前端自動化中篇源碼分析前端自動化下篇實踐應用 前端自動化測試主要在于：變化快，不穩(wěn)定，兼容性復雜；故而，想通過較低的成本維護較為通用的自動化case比較困難。本文旨在通過page-monitor獲取和分...

    light 評論0 收藏0

  • 前端20個靈魂拷問 徹底搞明白你就是中級前端工程師 【中篇】

    摘要：前端個靈魂拷問，徹底搞明白你就是中級前端工程師上篇感覺大家比較喜歡看這種類型的文章，以后會多一些。所有依賴這個模塊的語句，都定義在一個回調(diào)函數(shù)中，等到加載完成之后，這個回調(diào)函數(shù)才會運行。此規(guī)范其實是在推廣過程中產(chǎn)生的。 showImg(https://segmentfault.com/img/bVbwAMU?w=700&h=394); 前端20個靈魂拷問，徹底搞明白你就是中級前端工程師...

    MartinDai 評論0 收藏0

  • 前端20個靈魂拷問 徹底搞明白你就是中級前端工程師 【中篇】

    摘要：前端個靈魂拷問，徹底搞明白你就是中級前端工程師上篇感覺大家比較喜歡看這種類型的文章，以后會多一些。所有依賴這個模塊的語句，都定義在一個回調(diào)函數(shù)中，等到加載完成之后，這個回調(diào)函數(shù)才會運行。此規(guī)范其實是在推廣過程中產(chǎn)生的。 showImg(https://segmentfault.com/img/bVbwAMU?w=700&h=394); 前端20個靈魂拷問，徹底搞明白你就是中級前端工程師...

    coolpail 評論0 收藏0

  • Android網(wǎng)絡編程8之源碼解析OkHttp中篇[復用連接池]

    摘要：構(gòu)造函數(shù)默認空閑的最大連接數(shù)為個，的時間為秒通過構(gòu)造函數(shù)可以看出默認的空閑的最大連接數(shù)為個，的時間為秒。實例化實例化是在實例化時進行的在的構(gòu)造函數(shù)中調(diào)用了省略省略緩存操作提供對進行操作的方法分別為和幾個操作。 1.引子 在了解OkHttp的復用連接池之前，我們首先要了解幾個概念。 TCP三次握手 通常我們進行HTTP連接網(wǎng)絡的時候我們會進行TCP的三次握手，然后傳輸數(shù)據(jù)，然后再釋放連接...

    fasss 評論0 收藏0

發(fā)表評論

0條評論

Object

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<