極簡實現列表查看頁面

最近在和各種文檔文案展現鬥智鬥勇，在解決幫助列表靜態化的同時，嘗試了一下以前構思過的極簡列表實現，發現居然還不錯。

本文可能涉及的內容--

• 模板渲染
• 比較冷門的CSS用法
• 一些小聲嗶嗶

場景簡介

假如咱們有下面這組數據，須要將它們變成一個常規的Q&A頁面，而且但願它是個獨立的、小型的靜態頁。(若是有可能的話，儘可能賦予它通用化、模板化的能力)

試試別想vue和react?

雖然說vue和react給了咱們不少驚喜，可是並非全部的項目都適合使用它們，好比此次咱們須要實現的 -- 靜態化的文檔列表查看頁面，固然這並非說vue、react不能靜態化，而是有點殺雞用牛刀的意味了。

如何實現?

好了，咱直接進入主題。雖然不打算用視圖框架了，可是咱們仍是能夠藉助一下里面的思路，其實咱們想要作的頁面本質就是對一堆已知數據的解析以及渲染。基於此咱們大概能構思這樣的一個實現流程，獲取數據 -- 填充模板 -- 生成可用靜態頁。

① 數據源

數據的源頭變幻無窮，這裏以我實踐的狀況來介紹。

咱們會有許許多多條簡短的問答條目存儲在monogoDB中，根據某個tag，能夠在庫裏取出一條或者多條數據，例如：

[{"_id":"111","title":"問題一","body":{"text":"答案一"}},{"_id":"222","title":"問題二","body":{"text":"答案二"}},{"_id":"333","title":"問題三","body":{"text":"答案三"}},{"_id":"444","title":"問題四","body":{"text":"答案四"}},{"_id":"555","title":"問題五","body":{"text":"答案五"}}]
複製代碼

取出來很簡單，可是咱們要怎麼塞進咱們的頁面中呢？(經過接口呀!)其實也不難，甚至只須要replace就能將數據放進去。假設咱們的模板中有一段JS是這樣的：

// ......
let FAQ_LIST = {{FAQ_LIST}};
// ......
複製代碼

咱們只須要將模板中的{{FAQ_LIST}}替換成咱們的數據就好啦，那麼，只要將上述取出的數據直接替換掉{{FAQ_LIST}}這裏的佔位字符串就行了嗎？咱們這麼作了以後會發現，咱們只塞了段字符串進去！

那應該咋辦，既然替換進去成了字符串，那咱們在替換以前就把它變成字符串不就行了？而後在後續的調用中，把它解析成數組就完美了。因而就有了下面這個流程：

//...
const cursor = await col.find({ tag: 'xxx' }) //獲取數據
const list = await cursor.toArray() //將數據轉爲數組
let template = fs.readFileSync(path.join(__dirname, '../templates.html'), 'utf-8') //獲取模板
const tp = template.replace(/{{FAQ_LIST}}/, JSON.stringify(list)) //替換佔位符
//...
複製代碼

沒錯，在填充模板以前，咱們就將取得的數組變成了字符串，而後在模板實際調用時再將其JSON.parse()

② 頁面佈局

<div class="wrapper">
    <div id="help-list"></div>
    <div class="help-content">
        <div id="help-content-container"></div>
        <div class="help-button">
            <div id="button-ok" class="button-item" onclick='handleButtonClick("ok");'>已解決</div>
            <div id="button-no" class="button-item" onclick='handleButtonClick("no");'>未解決</div>
        </div>
    </div>
</div>
複製代碼

咱們整個列表查看頁的佈局大體如上，你們會發現，這是否是少了點內容？是的，咱們條目內容並無出如今html中，它們將會在後續的JS處理被插入到相應的節點中。

看到這裏，也許你們會疑惑，這不是把全部的內容(問題標題&問題正文)混到一塊兒了嗎，怎麼才能實現點擊查看詳情的效果呢？這就要藉助咱們神奇的CSS選擇器了，具體請看下面對頁面樣式的介紹。

③ 頁面樣式

整個列表頁面比較簡單，一些總體的佈局就不在贅述，你們能夠點擊後面的demo頁面自行查看。如今想重點介紹一下點擊列表項實現原頁面查看詳情的實現：

你們能夠再去看看上面的頁面節點圖，會發現列表項的href是對應的詳情的id，若是是錨點功能的話還能夠理解，可是怎麼作到相似頁面切換的查看詳情呢？看到這裏是否是以爲很像咱們寫單頁應用時用過的路由？

雖然不是同一個東西，可是咱們能夠把這看做一個極簡易的單頁路由。咱們點擊任意一個列表項，url都會帶上#xxx字樣，這就能夠與css3的target選擇器配合:

#help-list:target {
    display: block
}

#help-list:target~.help-content {
    display: none
}

#help-content-container>.ww-section {
    display: none
}

#help-content-container>.ww-section:target {
    display: block
}
複製代碼

當url中帶有#help-list錨點時，詳情父節點help-content將會被隱藏，在未選中列表項時，詳情模塊的父節點help-content-container也是隱藏的狀態，當咱們點擊某項列表項時，咱們的url會帶上相應的錨點，帶有相應id的ww-section節點將會顯示，因爲錨點再也不是#help-list，咱們的列表也會一併隱藏。

也許上面的文字描述比較抽象，你們能夠看看上面的GIF，關注url的變化。在剛進入頁面的時候，若是判斷到url沒有帶hash，我會重定向到帶有#help-list的url，這樣就能讓列表顯示出來。

點擊列表中的某一項時，url同時也發生了變化，而且瀏覽器記錄也增長了一條(能夠模擬頁面返回的效果)。

總結

前面囉嗦了不少，但通篇想表達的意思很少 -- 一些頁面仍是能夠用簡單且高效的方案實現的，沒必要都拿着全家桶往上套。

在筆者的實際應用場景中，是須要在外部觸發事件後，將庫中相應的數據取出，而且塞進已編輯好的模板，最終直接上傳到CDN，而後輸出對應連接給使用方。

固然這是千萬種方案中的一種，咱們徹底能夠寫個接口來獲取數據並在頁面中動態渲染......這裏就當作是筆者的一次嘗新實踐~

測試頁面附送 -- 猛擊此處!!