前言
很早的时候就想做个个人网站项目，觉得是个不错的实践。当时的设想是做一个all-purpose的集合，博客、其他站点文章新闻收集、MSDNitellyou、常用资源镜像，还有所做的一些小项目小游戏，都可以不断扔到这个站点。当然现在来看离这个目标还是有点远，可能还需要不短的时间来继续完成它。
因为要展示的东西不止博客文章，所以最初没想着在首页直接展示文章列表，得重新做个首页。首页得炫酷，找了一圈觉得bing搜索的首页就挺炫酷，每天壁纸不一样，还能切换来切换去，那就抄吧。
那时候太依赖Bootstrap, 连响应式导航栏都没亲手写过，第一个版本就用了Bootstrap。后端Koa还在摸索，选了模板引擎Nunjucks，前后端一起写。
Bootstrap的轮播图组件，只要有好看的图，很容易就有了一个炫酷的主页。但是在之前项目试过，直接用这个组件的时候有个明显缺陷：图片加载速度的问题。不只是轮播图几张图片一起加载会慢，哪怕只有一张图，在带宽不足的时候，它的加载动画，从上到下一行行扫描，非常难看。
查到两个解决方案：
- 先加载了一个缩略图，等原图下载完成再替换掉
- 使用Progressive JPEG
这样就巧妙地把问题转给了后端，但是从后端出发，又找出两个理由否决了
- 后端也是我写，后端并不想多干这么多麻烦事，后端只想着把Bing壁纸API从自己后端转载一下就完事了（因为原API不能跨域访问）
- 要在自己服务器存图片。从自己服务器加载图片的速度……还是算了吧
在多次查找MDN文档和观察Bing原网站之后得到一个利用JavaScript的Image对象作预加载的方案
const img = new Image();
img.src = url;
img.addEventListener('load', () => {
this.el.style.opacity = 1;
})
即使没有添加到DOM中，JavaScript中加载的Image对象也能成为图片缓存。基于这个原理，让图片元素的opacity（不透明度）先置0，在JavaScript中new一个相同url的Image对象，当这个Image对象加载完成的时候，DOM中的图片由于是同一张，所以也加载完成了，再让图片显示出来，就没有了难看的逐行扫描过程。
那段时间刚好看了个react代码的简单介绍，又刚理解了类和对象，就把bing壁纸组件写成了大概这个样子
class Wallpaper {
constructor(el) {
fetch...
}
backward () {
...
}
forward () {
...
}
render () {
...
}
}
轮播组件也懒得用了，干脆扔了Bootstrap, 把navbar也写成了这么个类
没有了CSS，手写CSS又麻烦起来，又滚去学习了Sass预处理器
当前版本
由数据驱动视图，这不就是各大前端MV*框架最开始要解决的问题？加上自己写的模型不断地发现新bug，怒弃第一版，上了Vue全家桶做WebApp，后端写成RESTful API，前后分离。
用上Vue之后腰也不酸腿也不疼了，虽然开始也遇到些头疼的问题，但最后总能发现是文档阅读不认真，在文档里往往就有答案
事情的发展总是难以预料，认为模型简单可以手写，最后还是用了框架，认为数据很少不用管理，最后还是用了Vuex。
想要管理起fetch操作，发现怎么都不简单，不如用起Vuex和数据一起管理。第一次见文档不知道那说的都是啥，当带着需求过来找它的时候总有种不断恍然大悟的感觉
出于网站设计上的问题，我发现Bing壁纸组件和网站其他部分并不好搭配，又不忍抛弃，就把它独立成一个单独项目，可以搭配Wallpaper Engine软件作电脑桌面，也算是物尽其用……
现在整站总算是搭了个样子出来，当然还有很多肉眼可见的bug，正在不断改进中
网站预览
网站预览(https://luobstack.xyz/)
主要技术（框架、库）
- Vue, Vuex, vue-router
- fetch API
- marked, highlight.js
- Koa, koa-router
- Mongoose
网友评论