來(lái)自公眾號(hào)：前端真好玩

大家肯定遇到過(guò)這樣類(lèi)似的場(chǎng)景：多個(gè) Tab 頁(yè)點(diǎn)擊切換功能，如果用戶點(diǎn)擊頻繁，很可能會(huì)出現(xiàn)。因?yàn)槊總€(gè)接口返回信息的時(shí)間是不同的，你不能保證先請(qǐng)求的一定最先返回?cái)?shù)據(jù)，那么就很可能會(huì)出現(xiàn)停留在頁(yè)面一卻出現(xiàn)別的頁(yè)面的數(shù)據(jù)的情況。這種異步的情況術(shù)語(yǔ)稱之為異步競(jìng)態(tài)。這時(shí)肯定有讀者會(huì)說(shuō)了，這還不簡(jiǎn)單，我能給你輕松想出好幾個(gè)解決辦法。節(jié)流、防抖、加 Loading！這些做法固然能解決問(wèn)題，但是都治標(biāo)不治本，而且還影響了用戶體驗(yàn)，其實(shí)還有種辦法能夠完美解決問(wèn)題：取消請(qǐng)求。當(dāng)然了這個(gè)取消請(qǐng)求它只是不繼續(xù)處理接口后續(xù)的響應(yīng)了，并不是真的把請(qǐng)求給取消了。畢竟請(qǐng)求如果已經(jīng)發(fā)出去的話，我們也不能順著網(wǎng)線把它追回來(lái)。我們這邊以 axios 為例來(lái)看看怎么取消請(qǐng)求：

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // handle error
  }
});

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

// cancel the request (the message parameter is optional)
source.cancel('Operation canceled by the user.');
123456789101112131415161718192021123456789101112131415161718192021

用法還是挺簡(jiǎn)單的，對(duì)于可能會(huì)出現(xiàn)異步競(jìng)態(tài)的情況下大家可以采用這個(gè)方法來(lái)解決。簡(jiǎn)單好用，還不會(huì)影響用戶體驗(yàn)，封裝下代碼就能用起來(lái)了。

當(dāng)今互聯(lián)網(wǎng)時(shí)代，HTML 和 Markdown 都是非常流行的標(biāo)記語(yǔ)言。HTML 用于構(gòu)建網(wǎng)頁(yè)結(jié)構(gòu)和內(nèi)容，而 Markdown 則以其簡(jiǎn)潔易讀的語(yǔ)法被廣泛用于編寫(xiě)文檔、博客文章等。在很多場(chǎng)景下，我們需要將 HTML 內(nèi)容轉(zhuǎn)換為 Markdown 格式，例如網(wǎng)頁(yè)內(nèi)容抓取、文檔格式轉(zhuǎn)換等。

Rust 作為一門(mén)以安全、性能和可靠性著稱的系統(tǒng)級(jí)編程語(yǔ)言，也提供了相應(yīng)的庫(kù)來(lái)處理 HTML 到 Markdown 的轉(zhuǎn)換。本文將介紹一個(gè)名為 htmd 的 Rust 庫(kù)，它提供了一種高效且易于使用的方式來(lái)完成這項(xiàng)任務(wù)。

htmd 簡(jiǎn)介

htmd 是一個(gè)受 JavaScript 庫(kù) turndown.js 啟發(fā)而開(kāi)發(fā)的 Rust 庫(kù)，用于將 HTML 文檔轉(zhuǎn)換為 Markdown 格式。它具有以下特點(diǎn)：

• 功能豐富： 提供了與 turndown.js 相媲美的豐富選項(xiàng)，可以靈活地控制轉(zhuǎn)換過(guò)程。
• 可靠性高： 通過(guò)了 turndown.js 的所有測(cè)試用例，確保轉(zhuǎn)換結(jié)果的準(zhǔn)確性。
• 依賴項(xiàng)少： 僅依賴于 html5ever 庫(kù)，輕量級(jí)且易于集成。
• 性能優(yōu)異： 轉(zhuǎn)換速度快，能夠高效處理大型 HTML 文檔。

htmd 的安裝

在使用 htmd 之前，我們需要先安裝它。將以下依賴項(xiàng)添加到你的 Cargo.toml 文件中：

[dependencies]
htmd = "0.1"

htmd 的使用

基本轉(zhuǎn)換

使用 htmd 進(jìn)行 HTML 到 Markdown 的基本轉(zhuǎn)換非常簡(jiǎn)單。以下代碼展示了如何將一個(gè) <h1> 標(biāo)簽轉(zhuǎn)換為 Markdown 中的 # 標(biāo)題：

use htmd::HtmlToMarkdown;

fn main() {
    let markdown = HtmlToMarkdown::new();
    let html = "<h1>這是一個(gè)標(biāo)題</h1>";
    let result = markdown.convert(html).unwrap();
    assert_eq!(result, "# 這是一個(gè)標(biāo)題\n");
}

跳過(guò)標(biāo)簽

在某些情況下，我們可能希望跳過(guò) HTML 文檔中的某些標(biāo)簽，例如 <script> 和 <style> 標(biāo)簽。htmd 提供了 skip_tags 方法來(lái)實(shí)現(xiàn)這一點(diǎn)：

use htmd::HtmlToMarkdown;

fn main() {
    let markdown = HtmlToMarkdown::builder()
        .skip_tags(vec!["script", "style"])
        .build();

    let html = r#"
        <script>
            // 一些 JavaScript 代碼
        </script>
        <h1>這是一個(gè)標(biāo)題</h1>
    "#;

    let result = markdown.convert(html).unwrap();
    assert_eq!(result, "# 這是一個(gè)標(biāo)題\n");
}

自定義標(biāo)簽處理器

htmd 允許我們自定義標(biāo)簽處理器來(lái)處理特定的 HTML 標(biāo)簽。例如，我們可以定義一個(gè)處理器將 <img> 標(biāo)簽轉(zhuǎn)換為 Markdown 中的圖片語(yǔ)法：

use htmd::{HtmlToMarkdown, HandleResult};
use html5ever::tendril::StrTendril;
use html5ever::QualName;

fn main() {
    let markdown = HtmlToMarkdown::builder()
        .add_handler(
            vec!["img"],
            |el| {
                let src = el
                    .attrs
                    .iter()
                    .find(|(name, _)| name.local.as_ref() == "src")
                    .map(|(_, value)| value.as_ref());

                let alt = el
                    .attrs
                    .iter()
                    .find(|(name, _)| name.local.as_ref() == "alt")
                    .map(|(_, value)| value.as_ref());

                match (src, alt) {
                    (Some(src), Some(alt)) => Some(format!("![{}]({})", alt, src)),
                    _ => None,
                }
            },
        )
        .build();

    let html = r#"<img src="https://example.com/image.jpg" alt="圖片描述">"#;
    let result = markdown.convert(html).unwrap();
    assert_eq!(result, "![圖片描述](https://example.com/image.jpg)\n");
}

多線程處理

htmd 支持多線程處理，可以充分利用多核 CPU 的性能來(lái)加速轉(zhuǎn)換過(guò)程。以下代碼展示了如何使用多線程將多個(gè) HTML 文檔轉(zhuǎn)換為 Markdown：

use htmd::HtmlToMarkdown;
use std::sync::Arc;
use std::thread;

fn main() {
    let markdown = Arc::new(HtmlToMarkdown::new());
    let html_docs = vec![
        "<h1>文檔 1</h1>",
        "<h2>文檔 2</h2>",
        "<h3>文檔 3</h3>",
    ];

    let threads: Vec<_> = html_docs
        .into_iter()
        .map(|html| {
            let markdown = markdown.clone();
            thread::spawn(move || {
                let result = markdown.convert(html).unwrap();
                println!("{}", result);
            })
        })
        .collect();

    for thread in threads {
        thread.join().unwrap();
    }
}

結(jié)論

htmd 是一個(gè)功能強(qiáng)大且易于使用的 Rust 庫(kù)，用于將 HTML 文檔轉(zhuǎn)換為 Markdown 格式。它提供了豐富的選項(xiàng)、自定義標(biāo)簽處理器和多線程支持，可以滿足各種轉(zhuǎn)換需求。如果你正在尋找一種高效可靠的 HTML 到 Markdown 轉(zhuǎn)換解決方案，htmd 絕對(duì)值得一試。

<input type="button" value="按鈕"
onclick="javascrtpt:window.location. />

<button onclick="window.location.>百度</button>

<a >
 <button>百度</button>
</a>

<a ><input type="button" value='百度'></a>