前言

很早的时候就想做个个人网站项目，觉得是个不错的实践。当时的设想是做一个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

【完】