通過碼雲的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後，將返回的資料再次進行提取與處理即（getbody、getlabels等方法），並將結果放入乙個臨時的物件，將其物件新增到陣列。等渲染時遍歷此陣列即可。因此這個陣列大概是這樣的：

[,,


]
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改為...