NPM酷庫：jsdom，純JS實(shí)現(xiàn)的DOM

tylin 發(fā)布于2019-08-26 17:04 / 3648人閱讀

摘要：酷庫，每天兩分鐘，了解一個(gè)流行庫。昨天認(rèn)識(shí)了一個(gè)在環(huán)境下操作的庫，實(shí)現(xiàn)了接口，用起來十分方便。今天，我們要學(xué)習(xí)的就是一個(gè)純實(shí)現(xiàn)的，可以在環(huán)境中模擬出環(huán)境，像這樣對(duì)依賴的庫就可以在中運(yùn)行了。

NPM酷庫，每天兩分鐘，了解一個(gè)流行NPM庫。

昨天認(rèn)識(shí)了一個(gè)在Node.js環(huán)境下操作HTML的庫 cheerio，cheerio實(shí)現(xiàn)了jQuery接口，用起來十分方便。為什么不直接用jQuery呢？因?yàn)镹ode.js環(huán)境中沒有實(shí)現(xiàn)DOM對(duì)象。

jsdom

今天，我們要學(xué)習(xí)的jsdom就是一個(gè)純JS實(shí)現(xiàn)的DOM，jsdom可以在Node.js環(huán)境中“模擬出”DOM環(huán)境，像jQuery這樣對(duì)DOM依賴的庫就可以在Node.js中運(yùn)行了。

const jsdom = require("jsdom");
const { JSDOM } = jsdom;

const dom = new JSDOM(`Hello world`);

dom.window.document.querySelector("p").textContent; // "Hello world"

const $ = require("jquery")(dom.window);

$("p").text(); // "Hello world"

上述代碼中，首先實(shí)例化一個(gè)JSDOM對(duì)象dom，實(shí)例化參數(shù)就是我們要操作的HTML字符串，然后就可以通過 dom.window.document 等DOM標(biāo)準(zhǔn)接口訪問HTML內(nèi)容了。

最后兩行，我們引入了jQuery庫，并將jQuery的window參數(shù)綁定到dom對(duì)象上，我們就可以用jQuery來訪問HTML文本。

如果你的需求是簡單地操作HTML文本，我建議你仍然使用更加輕量的cheerio庫，但是如果cheerio滿足不了你的需求，或者你為了像兼容jQuery一樣兼容某些依賴DOM的npm庫，你可以嘗試jsdom來解決你的問題。

參考資料

jsdom: https://github.com/tmpvar/jsdom

cheerio: https://github.com/cheeriojs/...

DOM: https://dom.spec.whatwg.org

歡迎關(guān)注公眾號(hào)：梁興臣

每天了解一個(gè)NPM庫，一年后成為Node.js高手

云服務(wù)器 GPU云服務(wù)器 js函數(shù)庫npm js中純數(shù)字純攻擊js 初裝純js mysql

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/110106.html

相關(guān)文章

NPM酷庫：jsdom，純JS實(shí)現(xiàn)的DOM

摘要：酷庫，每天兩分鐘，了解一個(gè)流行庫。昨天認(rèn)識(shí)了一個(gè)在環(huán)境下操作的庫，實(shí)現(xiàn)了接口，用起來十分方便。今天，我們要學(xué)習(xí)的就是一個(gè)純實(shí)現(xiàn)的，可以在環(huán)境中模擬出環(huán)境，像這樣對(duì)依賴的庫就可以在中運(yùn)行了。 NPM酷庫，每天兩分鐘，了解一個(gè)流行NPM庫。昨天認(rèn)識(shí)了一個(gè)在Node.js環(huán)境下操作HTML的庫 cheerio，cheerio實(shí)現(xiàn)了jQuery接口，用起來十分方便。為什么不直接用jQuery...

13651657101 2019-08-01 18:23 評(píng)論0 收藏0
jsdom 中文文檔（純翻譯）

摘要：我們將用戶可控制的控制臺(tái)稱為虛擬控制臺(tái)，以便將其與和頁面內(nèi)部的區(qū)分開來。同樣，目前在中是不能夠處理相關(guān)信息的比如設(shè)置這樣做會(huì)導(dǎo)致虛擬控制臺(tái)發(fā)出，說明此功能未實(shí)現(xiàn)，并且沒有任何變化也將不會(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)，用于在 node...

SHERlocked93 2019-08-22 17:13 評(píng)論0 收藏0
合理的使用純函數(shù)式編程

摘要：但是，如果我們使用過多的函數(shù)式編程的抽象概念，我們的函數(shù)式編程也會(huì)非常難以理解。相比于不太合理的純函數(shù)式編程，我們的代碼更加可讀理解和修改，這也是我們重構(gòu)代碼的目的。本文是篇譯文，原文鏈接An Introduction to Reasonably Pure Functional Programming,不當(dāng)之處還請(qǐng)指正。一個(gè)好的程序員應(yīng)該有能力掌控你寫的代碼，能夠以最簡單的方法使你...

張率功 2019-08-20 12:18 評(píng)論0 收藏0
NPM酷庫：cheerio，服務(wù)端jQuery接口實(shí)現(xiàn)

摘要：酷庫，每天兩分鐘，了解一個(gè)流行庫。是前端操作的利器，我們通過的接口可以方便地訪問修改樹中的節(jié)點(diǎn)和內(nèi)容。但是很遺憾，并不能在服務(wù)端運(yùn)行，因?yàn)閲?yán)重依賴，而環(huán)境中是沒有集成的。方法加載一段格式的字符串，然后返回一個(gè)實(shí)現(xiàn)了接口的對(duì)象。 NPM酷庫，每天兩分鐘，了解一個(gè)流行NPM庫。 jQuery 是前端DOM操作的利器，我們通過jQuery的接口可以方便地訪問、修改DOM樹中的節(jié)點(diǎn)和內(nèi)容。有...

Riddler 2019-08-21 18:46 評(píng)論0 收藏0
使用 AVA 做自動(dòng)化測試

摘要：單元測試，測試一個(gè)簡單的組件。接口測試，用戶信息接口測試。學(xué)習(xí)借鑒，一些使用做測試的開源項(xiàng)目。這里使用到的內(nèi)置斷言斷言結(jié)果值等于我們想要的預(yù)期值，則測試通過。在里放入一個(gè)函數(shù)，函數(shù)自動(dòng)執(zhí)行，里面執(zhí)行的結(jié)果必須拋出錯(cuò)誤，則測試通過。目錄 1、為什么選擇 AVA ？2、API 概覽。3、準(zhǔn)備工作。4、單元測試，測試一個(gè)簡單的工具函數(shù)。5、使用 Promise、Async/await、Ob...

Cruise_Chan 2019-08-20 18:26 評(píng)論0 收藏0