前言
很早的時(shí)候就想做個(gè)個(gè)人網(wǎng)站項(xiàng)目，覺(jué)得是個(gè)不錯(cuò)的實(shí)踐因悲。當(dāng)時(shí)的設(shè)想是做一個(gè)all-purpose的集合结榄，博客、其他站點(diǎn)文章新聞收集囤捻、MSDNitellyou、常用資源鏡像邻寿，還有所做的一些小項(xiàng)目小游戲蝎土，都可以不斷扔到這個(gè)站點(diǎn)。當(dāng)然現(xiàn)在來(lái)看離這個(gè)目標(biāo)還是有點(diǎn)遠(yuǎn)绣否，可能還需要不短的時(shí)間來(lái)繼續(xù)完成它誊涯。
因?yàn)橐故镜臇|西不止博客文章，所以最初沒(méi)想著在首頁(yè)直接展示文章列表蒜撮，得重新做個(gè)首頁(yè)暴构。首頁(yè)得炫酷跪呈，找了一圈覺(jué)得bing搜索的首頁(yè)就挺炫酷，每天壁紙不一樣取逾，還能切換來(lái)切換去耗绿，那就抄吧。
那時(shí)候太依賴(lài)Bootstrap, 連響應(yīng)式導(dǎo)航欄都沒(méi)親手寫(xiě)過(guò)砾隅，第一個(gè)版本就用了Bootstrap误阻。后端Koa還在摸索，選了模板引擎Nunjucks晴埂，前后端一起寫(xiě)究反。
Bootstrap的輪播圖組件，只要有好看的圖儒洛，很容易就有了一個(gè)炫酷的主頁(yè)精耐。但是在之前項(xiàng)目試過(guò)，直接用這個(gè)組件的時(shí)候有個(gè)明顯缺陷：圖片加載速度的問(wèn)題琅锻。不只是輪播圖幾張圖片一起加載會(huì)慢卦停，哪怕只有一張圖，在帶寬不足的時(shí)候浅浮，它的加載動(dòng)畫(huà)沫浆，從上到下一行行掃描，非常難看滚秩。
查到兩個(gè)解決方案：
- 先加載了一個(gè)縮略圖专执，等原圖下載完成再替換掉
- 使用Progressive JPEG
這樣就巧妙地把問(wèn)題轉(zhuǎn)給了后端，但是從后端出發(fā)郁油，又找出兩個(gè)理由否決了
- 后端也是我寫(xiě)本股，后端并不想多干這么多麻煩事，后端只想著把Bing壁紙API從自己后端轉(zhuǎn)載一下就完事了（因?yàn)樵瑼PI不能跨域訪問(wèn)）
- 要在自己服務(wù)器存圖片桐腌。從自己服務(wù)器加載圖片的速度……還是算了吧
在多次查找MDN文檔和觀察Bing原網(wǎng)站之后得到一個(gè)利用JavaScript的Image對(duì)象作預(yù)加載的方案
const img = new Image();
img.src = url;
img.addEventListener('load', () => {
this.el.style.opacity = 1;
})
即使沒(méi)有添加到DOM中拄显，JavaScript中加載的Image對(duì)象也能成為圖片緩存“刚荆基于這個(gè)原理躬审，讓圖片元素的opacity（不透明度）先置0嘶朱，在JavaScript中new一個(gè)相同url的Image對(duì)象月匣，當(dāng)這個(gè)Image對(duì)象加載完成的時(shí)候，DOM中的圖片由于是同一張毡鉴，所以也加載完成了石挂，再讓圖片顯示出來(lái)博助，就沒(méi)有了難看的逐行掃描過(guò)程。
那段時(shí)間剛好看了個(gè)react代碼的簡(jiǎn)單介紹痹愚，又剛理解了類(lèi)和對(duì)象富岳，就把bing壁紙組件寫(xiě)成了大概這個(gè)樣子
class Wallpaper {
constructor(el) {
fetch...
}
backward () {
...
}
forward () {
...
}
render () {
...
}
}
輪播組件也懶得用了蛔糯，干脆扔了Bootstrap, 把navbar也寫(xiě)成了這么個(gè)類(lèi)
沒(méi)有了CSS，手寫(xiě)CSS又麻煩起來(lái)窖式，又滾去學(xué)習(xí)了Sass預(yù)處理器
當(dāng)前版本
由數(shù)據(jù)驅(qū)動(dòng)視圖蚁飒，這不就是各大前端MV*框架最開(kāi)始要解決的問(wèn)題？加上自己寫(xiě)的模型不斷地發(fā)現(xiàn)新bug脖镀，怒棄第一版飒箭，上了Vue全家桶做WebApp，后端寫(xiě)成RESTful API蜒灰，前后分離弦蹂。
用上Vue之后腰也不酸腿也不疼了，雖然開(kāi)始也遇到些頭疼的問(wèn)題强窖，但最后總能發(fā)現(xiàn)是文檔閱讀不認(rèn)真凸椿，在文檔里往往就有答案
事情的發(fā)展總是難以預(yù)料，認(rèn)為模型簡(jiǎn)單可以手寫(xiě)翅溺，最后還是用了框架脑漫，認(rèn)為數(shù)據(jù)很少不用管理，最后還是用了Vuex咙崎。
想要管理起fetch操作优幸，發(fā)現(xiàn)怎么都不簡(jiǎn)單，不如用起Vuex和數(shù)據(jù)一起管理褪猛。第一次見(jiàn)文檔不知道那說(shuō)的都是啥网杆，當(dāng)帶著需求過(guò)來(lái)找它的時(shí)候總有種不斷恍然大悟的感覺(jué)
出于網(wǎng)站設(shè)計(jì)上的問(wèn)題，我發(fā)現(xiàn)Bing壁紙組件和網(wǎng)站其他部分并不好搭配伊滋，又不忍拋棄碳却，就把它獨(dú)立成一個(gè)單獨(dú)項(xiàng)目，可以搭配Wallpaper Engine軟件作電腦桌面笑旺，也算是物盡其用……
現(xiàn)在整站總算是搭了個(gè)樣子出來(lái)昼浦，當(dāng)然還有很多肉眼可見(jiàn)的bug，正在不斷改進(jìn)中
網(wǎng)站預(yù)覽
網(wǎng)站預(yù)覽(https://luobstack.xyz/)
主要技術(shù)（框架筒主、庫(kù)）
- Vue, Vuex, vue-router
- fetch API
- marked, highlight.js
- Koa, koa-router
- Mongoose
