資訊專欄INFORMATION COLUMN
摘要：我們將用戶可控制的控制臺(tái)稱為虛擬控制臺(tái)，以便將其與和頁(yè)面內(nèi)部的區(qū)分開(kāi)來(lái)。同樣，目前在中是不能夠處理相關(guān)信息的比如設(shè)置這樣做會(huì)導(dǎo)致虛擬控制臺(tái)發(fā)出，說(shuō)明此功能未實(shí)現(xiàn)，并且沒(méi)有任何變化也將不會(huì)有新的或?qū)ο螅⑶椰F(xiàn)有對(duì)象仍保持當(dāng)前所有相同的屬性值。
jsdom是一個(gè)純粹由 javascript 實(shí)現(xiàn)的一系列 web標(biāo)準(zhǔn)，特別是 WHATWG 組織制定的DOM和 HTML 標(biāo)準(zhǔn)，用于在 nodejs 中使用。大體上來(lái)說(shuō)，該項(xiàng)目的目標(biāo)是模擬足夠的Web瀏覽器子集，以便用于測(cè)試和挖掘真實(shí)世界的Web應(yīng)用程序。
最新版本的 jsdom 運(yùn)行環(huán)境需要 node.js v6或者更高的版本。（jsdom v10以下版本在 nodejs v4以下仍然可用，但是我們已經(jīng)不支持維護(hù)了）
v10版本的 jsdom 擁有全新的 API(如下所述).舊的 API 現(xiàn)在仍然支持;詳細(xì)的參照文檔
基本用法const jsdom = require("jsdom");
const { JSDOM } = jsdom;
為了使用 jsdom，主要用到j(luò)sdom主模塊的一個(gè)命名導(dǎo)出的 jsdom 構(gòu)造函數(shù)。往構(gòu)造器傳遞一個(gè)字符串，將會(huì)得到一個(gè) jsdom 構(gòu)造實(shí)例對(duì)象，這個(gè)對(duì)象有很多實(shí)用的屬性，特別是 window 對(duì)象:
const dom = new JSDOM(`Hello world
`); console.log(dom.window.document.querySelector("p").textContent); // "Hello world"
(請(qǐng)注意，jsdom會(huì)像瀏覽器一樣解析您傳遞的HTML，包括隱含的，和標(biāo)記)
生成的對(duì)象是JSDOM類的一個(gè)實(shí)例，其中包括 window 對(duì)象在內(nèi)的許多有用的屬性和方法。一般來(lái)說(shuō)，它可以用來(lái)從“外部”對(duì)jsdom進(jìn)行操作，而這些操作對(duì)于普通DOM API來(lái)說(shuō)是不可能的。對(duì)于不需要任何功能的簡(jiǎn)單場(chǎng)景，我們推薦使用類似的編碼模式
const { window } = new JSDOM(`...`);
// or even
const { document } = (new JSDOM(`...`)).window;
下面是關(guān)于JSDOM類所能做的一切的完整文檔，在“JSDOM對(duì)象API”部分。
定制 jsdomJSDOM構(gòu)造函數(shù)接受第二個(gè)參數(shù)，可以用以下方式定制您的jsdom。
簡(jiǎn)單選項(xiàng)const dom = new JSDOM(``, {
url: "https://example.org/",
referrer: "https://example.com/",
contentType: "text/html",
userAgent: "Mellblomenator/9000",
includeNodeLocations: true
});
url 設(shè)置的值可以通過(guò)window.location，document.URL和document.documentURI來(lái)返回，并會(huì)影響文檔中相關(guān)URL的解析以及獲取子資源時(shí)使用的同源限制和referrer。默認(rèn)值為"about:blank"。
referrer 僅僅影響document.referrer的值。默認(rèn)沒(méi)有引用（即為空字符串）。
contentType 影響document.contentType的值，是按照HTML解析文檔還是 XML來(lái)解析。它的值如果不是text/html或XML mime type 值的話將會(huì)拋出異常。默認(rèn)值為"text/html"。
userAgent 影響navigator.userAgent的值以及請(qǐng)求子資源時(shí)發(fā)送的User-Agent頭。默認(rèn)值為Mozilla / 5.0（$ {process.platform}）AppleWebKit / 537.36（KHTML，如Gecko）jsdom / $ {jsdomVersion}。
includeNodeLocations 保留由HTML解析器生成的位置信息，允許您使用nodeLocation()方法（如下所述）檢索它。
它還能確保在 `); // 腳本默認(rèn)將不能執(zhí)行: dom.window.document.body.children.length === 1;
要在頁(yè)面內(nèi)啟用腳本，可以使用runScripts:"dangerously"選項(xiàng)：
const dom = new JSDOM(`
`, { runScripts: "dangerously" });
// 腳本將執(zhí)行并修改 DOM:
dom.window.document.body.children.length === 2;
我們?cè)俅螐?qiáng)調(diào)只有在提供給jsdom的代碼是你已知道是安全的代碼時(shí)方可使用它。如果您運(yùn)行了任意用戶提供的或Internet上的不可信的Node.js代碼，可能會(huì)危及您的計(jì)算機(jī)。
假如你想通過(guò)
如果您不能控制該頁(yè)面，則可以嘗試其他解決方法，例如輪詢檢查特定元素是否存在。有關(guān)更多詳細(xì)信息，請(qǐng)查看#640中的討論，尤其是@ matthewkastor的深刻見(jiàn)解。
共享的構(gòu)造函數(shù)和原型目前，對(duì)于大多數(shù)Web平臺(tái)API，jsdom在多個(gè)看似獨(dú)立的jsdoms之間共享相同的類定義。這將意味著，可能會(huì)出現(xiàn)以下情況
const dom1 = new JSDOM();
const dom2 = new JSDOM();
dom1.window.Element.prototype.expando = "blah";
console.log(dom2.window.document.createElement("frameset").expando); // logs "blah"
這主要是出于性能和內(nèi)存的原因：如果在Web平臺(tái)上每次創(chuàng)建jsdom時(shí),創(chuàng)建所有類的多帶帶副本，開(kāi)銷將會(huì)相當(dāng)昂貴。
盡管如此，我們?nèi)匀挥信d趣在有一天提供一個(gè)選項(xiàng)配置來(lái)創(chuàng)建一個(gè)“獨(dú)立”的jsdom，但要犧牲一些性能。
新API中缺失的功能與v9.x之前的舊版jsdom API相比，新API顯然缺少對(duì)資源加載的精細(xì)控制。先前版本的jsdom允許您設(shè)置request時(shí)使用的選項(xiàng)（既可以用于初始請(qǐng)求，也可以用于舊版本的JSDOM.fromURL()和子資源請(qǐng)求）。他們還允許您控制請(qǐng)求哪些子資源并將其應(yīng)用于主文檔，以便您可以下載樣式表，但不下載腳本文件。最后，他們提供了一個(gè)可定制的資源加載器，可以攔截任何傳出的請(qǐng)求并用完全合成的response 響應(yīng)來(lái)結(jié)束。
以上這些功能尚未在新的jsdom API中實(shí)現(xiàn)，盡管我們也希望盡快將它們添加回來(lái)，但不幸的是，這需要相當(dāng)大的幕后工作去實(shí)施。
同時(shí)，請(qǐng)隨時(shí)使用舊的jsdom API來(lái)訪問(wèn)此功能。它一直處于支持和維護(hù)中，但它不會(huì)獲得新功能。舊的文檔位于lib/old-api.md中。
未實(shí)現(xiàn)的Web平臺(tái)部分目前jsdom中有很多缺失的API，盡管我們也想要在jsdom中添加新的功能并保持最新的Web規(guī)范。請(qǐng)隨時(shí)為缺失的任何內(nèi)容提交issue，但我們是一個(gè)很小并且忙碌的團(tuán)隊(duì)，因此大家一起來(lái)提交 pull request可能會(huì)更好。
除了我們尚未擁有的功能之外，還有兩個(gè)主要功能目前超出了jsdom的范圍。這些是：
Navigation：在點(diǎn)擊鏈接或賦值location.href或類似操作時(shí)可以更改全局對(duì)象和所有其他的對(duì)象。
Layout：計(jì)算CSS元素的視覺(jué)布局的能力，這會(huì)影響諸如getBoundingClientRects()或者諸如offsetTop之類的屬性
目前，jsdom對(duì)某些功能的某些方面具有虛擬行為，例如操作navigation 時(shí)向虛擬控制臺(tái)發(fā)送“未實(shí)現(xiàn)的”"jsdomError"，或者為許多與布局相關(guān)的屬性返回0。您通?？梢栽诖a中解決這些限制，例如通過(guò)在爬網(wǎng)過(guò)程中為每個(gè)頁(yè)面創(chuàng)建新的JSDOM實(shí)例，或使用Object.defineProperty更改各種與布局相關(guān)的getter和方法的返回值
請(qǐng)注意，相同領(lǐng)域中的其他工具（如PhantomJS）確實(shí)支持這些功能。在wiki上，我們有關(guān)于jsdom vs. PhantomJS的更完整的比較介紹。
獲取幫助如果您需要jsdom的幫助，請(qǐng)隨時(shí)使用以下任何方式：
郵件組(問(wèn)題最好以"how do i"的形式)
報(bào)iusse(最好用BUG 報(bào)告)
IRC頻道：#jsdom on freenode
特別聲明以上文檔翻譯自開(kāi)源項(xiàng)目 jsdom，如有翻譯錯(cuò)誤，歡迎指正。
jsdom 原文鏈接
jsdom 項(xiàng)目鏈接
jsdom 中文翻譯wiki鏈接
原文博客地址
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/94976.html
摘要：酷庫(kù)，每天兩分鐘，了解一個(gè)流行庫(kù)。昨天認(rèn)識(shí)了一個(gè)在環(huán)境下操作的庫(kù)，實(shí)現(xiàn)了接口，用起來(lái)十分方便。今天，我們要學(xué)習(xí)的就是一個(gè)純實(shí)現(xiàn)的，可以在環(huán)境中模擬出環(huán)境，像這樣對(duì)依賴的庫(kù)就可以在中運(yùn)行了。 NPM酷庫(kù)，每天兩分鐘，了解一個(gè)流行NPM庫(kù)。 昨天認(rèn)識(shí)了一個(gè)在Node.js環(huán)境下操作HTML的庫(kù) cheerio，cheerio實(shí)現(xiàn)了jQuery接口，用起來(lái)十分方便。為什么不直接用jQuery...
摘要：酷庫(kù)，每天兩分鐘，了解一個(gè)流行庫(kù)。昨天認(rèn)識(shí)了一個(gè)在環(huán)境下操作的庫(kù)，實(shí)現(xiàn)了接口，用起來(lái)十分方便。今天，我們要學(xué)習(xí)的就是一個(gè)純實(shí)現(xiàn)的，可以在環(huán)境中模擬出環(huán)境，像這樣對(duì)依賴的庫(kù)就可以在中運(yùn)行了。 NPM酷庫(kù)，每天兩分鐘，了解一個(gè)流行NPM庫(kù)。 昨天認(rèn)識(shí)了一個(gè)在Node.js環(huán)境下操作HTML的庫(kù) cheerio，cheerio實(shí)現(xiàn)了jQuery接口，用起來(lái)十分方便。為什么不直接用jQuery...
摘要：做這個(gè)記錄之前，剛完成使用作為公司前端項(xiàng)目的持續(xù)交付工具的實(shí)踐，打算寫的教程前先把官方文檔扒下來(lái)做個(gè)翻譯站。在實(shí)踐一番后，卡在不能頻密調(diào)取翻譯這塊上，項(xiàng)目無(wú)法進(jìn)行下去。 做這個(gè)記錄之前，剛完成使用drone作為公司前端項(xiàng)目的持續(xù)交付工具的實(shí)踐，打算寫的教程前先把官方文檔扒下來(lái)做個(gè)翻譯站。在實(shí)踐一番后，卡在不能頻密調(diào)取google翻譯這塊上，項(xiàng)目無(wú)法進(jìn)行下去。最后覺(jué)得經(jīng)歷的過(guò)程涉及的內(nèi)容...
摘要：但是，如果我們使用過(guò)多的函數(shù)式編程的抽象概念，我們的函數(shù)式編程也會(huì)非常難以理解。相比于不太合理的純函數(shù)式編程，我們的代碼更加可讀理解和修改，這也是我們重構(gòu)代碼的目的。 本文是篇譯文，原文鏈接An Introduction to Reasonably Pure Functional Programming,不當(dāng)之處還請(qǐng)指正。 一個(gè)好的程序員應(yīng)該有能力掌控你寫的代碼，能夠以最簡(jiǎn)單的方法使你...
摘要：前同事留下的測(cè)試，是基于瀏覽器的，主要還是功能測(cè)試。這里不詳細(xì)說(shuō)怎么在瀏覽器端使用測(cè)試了。而且作者也是建議和支持這樣做的，簡(jiǎn)單明了的測(cè)試腳本，重要性有時(shí)候可能和測(cè)試本身一樣重要。經(jīng)測(cè)試，在瀏覽器也有這種問(wèn)題。 2016-09-03 更新 隨著在工作學(xué)習(xí)中更多地接觸、使用測(cè)試工具，發(fā)現(xiàn)自己在本文中的一些記錄是不準(zhǔn)確、不正確的。 今天（九月三日）在家看了 NingJs 的直播，其中有一個(gè)分...
閱讀 3627·2019-08-30 12:58
閱讀 989·2019-08-29 16:37
閱讀 2903·2019-08-29 16:29
閱讀 3185·2019-08-26 12:18
閱讀 2452·2019-08-26 11:59
閱讀 3502·2019-08-23 18:27
閱讀 2885·2019-08-23 16:43
閱讀 3366·2019-08-23 15:23
