通過碼雲的issue實現乙個「說說」Demo

2021-10-09 16:13:19 字數 3171 閱讀 7659

title: speak開坑記錄

katex: false

tags:

乙個基於gitee的「說說」,通過在gitee倉庫中的issue進行說說的展示。專案靈感來自於:微博

專案最早寫於2023年8月9日,但當時的做法是通過外部載入各種依賴(jquery、marked等)進行的,雖然中間還有一次試圖將其併入js內部,但採用的方式僅僅是通過jquery的getscript方式,由於同時間所用hexo部落格主題作者更新了pjax,導致出現了一些出人意料地錯誤。直到9月20日,最終決定通過webpack打包,將其放在一起並放棄jquery(為了減少體積)。

為了方便使用,採用了類似jquery的寫法。

// 匯入**高亮模組

const hljs =

require

("./js/highlight.min");

// // 匯入marked解析模組

const marked =

require

("./js/marked.min");

(function

(window, undefiend)

; speak.prototype =

// 呼叫初始化方法

return

this;}

,}; speak.extend = speak.prototype.

extend

=function

(obj)};

// 插入元素方法

speak.

extend()

;// 物件方法

speak.prototype.

extend()

; speak.prototype.init.prototype = speak.prototype;

window.speak = speak;})

(window)

;

其好處就是在使用時只需要例項化speak物件即可完成一切。

由於一開始的寫法是獲取與建立是分開寫的,即獲取後返回乙個promise物件,通過then方法在將獲取到的資料進行建立(渲染)。因此放棄jquery的ajax方法後也要返回乙個promise物件,這樣才能以最小的成本相容以前的寫法。

引數_this呼叫時傳入this

getspeak:

function

(_this)$/.

test

(xhr.status));

temp.comments = date[i]

["comments"];

temp.body = speak.

getbody

(date[i]

["body"])

; temp.labels = speak.

getlabels

(_this, date[i]

["labels"])

; temp.created_at = speak.

gettime

(date[i]

["created_at"])

; temp.html_url = date[i]

["html_url"];

_this.text.

push

(temp);}

}resolve

(date, xhr)

;return;}

// 失敗執行

reject

(xhr.statustext, xhr);}

};// 傳送請求資料

xhr.

send

(null);

});}

,

呼叫api後,將返回的資料再次進行提取與處理即(getbodygetlabels等方法),並將結果放入乙個臨時的物件,將其物件新增到陣列。等渲染時遍歷此陣列即可。因此這個陣列大概是這樣的:

[,,

]

jquery的工廠函式過於好用,但為了減少體積,不得不拋棄。因此便遇到了另乙個問題,dom元素的操作。

由於gitee的是帶有防盜煉的,因此需要在頭部插入乙個標籤meta標籤,表示no-referrer才可以正常使用其防盜煉。

norefer:

function()

,

外部css的嵌入

由於使用了打包工具,只需要通過require進行載入即可。

loadingcss:

function()

,speakcss:

function()

,

按鈕的插入

起初並不打算插入翻頁按鈕,因為嵌入到部落格後,每個部落格都會有自己的風格及按鈕樣式,但又為了初始化及使用方便,因此還是決定新增按鈕和頁碼顯示的label。

createbtn:

function

(_this)

關於insertadjacenthtml方法可參考:insertadjacenthtml

highlight.min.js檔案已經100kb大小了,加上marked.min.js34kb,導致最後生成的檔案大小150kb+。

不過沒辦法,目前無解。

使用很簡單,只需要乙個class為container的容器和乙個例項化的speak物件即可。

由於基於某個主題開發,部分樣式可能存在細微差別。

class

="is-container"

>

div>

型別不匹配引發的乙個issue

vs 2003.在使用setfilepointerex 設定檔案位置的時候,需要使用到 longlong型別 然後在讀一段 dwread 長的資料之後,需要把檔案位置復位 large integer lnfilepos quadpart 0x00 dwread setfilepointerex 問題...

碼雲建立乙個完整的專案

前提是,你已經有了碼雲賬號 並且已經簽名名 如果沒有碼雲賬號,請先閱讀這篇文章 完整建立乙個git倉庫 1.登入碼雲,建立乙個倉庫 2.本地windows或者linux上安裝git 3.複製碼雲上git位址 例如 4.轉殖專案 1 windows平台 1.選擇或建立乙個專案儲存的資料夾,右鍵 git...

通過阿里雲發布乙個Tomcat,並通過網域名稱訪問

以下只是我個人的經歷 1.阿里雲購買網域名稱www.qianxueya.com engine節點中defaulthost原localhost改為申請到的網域名稱。name catalina defaulthost www.qianxueya.com 8.host節點中name原localhost改為...