亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

【page-monitor 前端自動(dòng)化 中篇】 源碼分析

Object / 846人閱讀

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

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

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

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

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

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

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

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

page-monitor文件分析

完整文件目錄：

運(yùn)行生成目錄分析：

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

分析index.js

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

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

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

分析獲取DOM源碼

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

為了看懂page-monitor的代碼舉個(gè)栗子

# evalution example:

var headings = document.evaluate("/html/body//h2", document, null, XPathResult.ANY_TYPE, null);
/* 檢索body中所有H2的所欲.
 * 結(jié)果存在于一個(gè)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

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

對(duì)應(yīng)的具體dom結(jié)構(gòu)

diff.js 代碼

diff代碼主要兩個(gè)作用

1：獲取差異

2：渲染差異
其中對(duì)比的策略：

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

其他api和源碼簡(jiǎn)單修改

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

獲取的頁(yè)面截圖如下：

代碼流程圖

總結(jié)

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/80031.html

相關(guān)文章

  • 【page-monitor 前端自動(dòng)化 下篇】 實(shí)踐應(yīng)用

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

    PAMPANG 評(píng)論0 收藏0

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

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

    light 評(píng)論0 收藏0

  • 前端20個(gè)靈魂拷問(wèn) 徹底搞明白你就是中級(jí)前端工程師 【中篇】

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

    MartinDai 評(píng)論0 收藏0

  • 前端20個(gè)靈魂拷問(wèn) 徹底搞明白你就是中級(jí)前端工程師 【中篇】

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

    coolpail 評(píng)論0 收藏0

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

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

    fasss 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

Object

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<