君子不玩物丧志，亦常以借物调心，网站集成二次元网页小组件（widget）石蒜模拟器，聊以赏玩

传世经典《菜根谭》中有言曰：“徜徉于山林泉石之间，而尘心渐息；夷犹于诗书图画之内，而俗气潜消。故君子虽不玩物丧志，亦常借物调心。”意思是，徜徉在林泉山石之间，能够摒弃杂念，留意诗词歌画之中，可以尽弃俗见。所以说君子虽然不会玩物丧志，也常常要借一些优雅的小物件来调理情绪，二次元网页小组件(widget)就是这样的小物件，功能上无甚大观，却可以博君一晒。

引入方式

根据官方文档：https://github.com/dsrkafuu/sakana-widget ，引入方式分为两种，分别是模板引入：

或者通过 NPM 包的形式安装：

随后在组件内引入：

本包内默认导出一个类 SakanaWidget，通过该类可以初始化一个小组件。这里初始化了一个默认设置的组件，同样将其挂载到div容器上。

定制化

默认设置的组件一律千篇，我们可以对其进行定制化操作：

这里首先将div容器通过固定定位（position:fixed）设置到屏幕右下角，固定定位非常有辨识度，那就是无论页面有多长，滚动条怎么滚动，固定的容器都相对于浏览器窗口是静止的，脱离了整个文档流的限制，漂浮在右下角，岿然不动。

随后通过getCharacter静态方法获取内置的角色对象，修改参数，并创建一个超慢速无阻尼 (永续) 的泷奈作为新角色，接着通过registerCharacter方法将角色对象注册到组件中。

这里i和d参数分别代表惯性和角度，其他类型参数如下：

组件实例构造参数：

效果如图所示：

除了内置角色，我们也可以自己更换角色的皮肤：

这里以本站logo为例，通过设置image属性来进行角色皮肤的替换，图像类型不限：

除了在线图片地址，也支持base64的图片编码形式。

首先通过Golang脚本获取实体图片的base64编码：

程序返回：

随后将图片编码设置在image属性中：

这里注意图片头部需要声明图片后缀以及编码：data:image/png;base64,

功能优化

官方版本在默认情况下会触发一个异常：

简单理解就是挂件中的Github链接没有一个浏览器可以辨认的描述符，从而让这个超链接变得可疑。

我们可以针对这个节点元素人为地为其加上标签描述符：

与此同时，如果不希望链接直接跳转官方的Github首页，也可以人为地更改其地址：

性能优化

通常情况下，这一类特效挂件都会增加一些带宽成本，为了不影响首屏响应速度，我们可以采取异步的加载方式：

但事实上，script标签存在两个属性，defer和async，加上两个属性之后，在js真正执行之前都不会阻止html的加载。

因此script标签的使用分为几种不同的情况：没有defer或async属性，浏览器会立即加载并执行相应的脚本。也就是说在渲染script标签之后的文档之前，不等待后续加载的文档元素，读到就开始加载和执行，此举会阻塞后续文档的加载；有了async属性，表示后续文档的加载和渲染与js脚本的加载和执行是并行进行的，即异步执行；有了defer属性，加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步)，js脚本的执行需要等到文档所有元素解析完成之后，DOMContentLoaded事件触发执行之前。

defer和async在网络加载过程是一致的，都是异步执行的，二者的区别在于脚本加载完成之后何时执行，可以看出defer更符合大多数场景对应用脚本加载和执行的要求：

结语

香令人幽，酒令人远，石令人隽，琴令人寂，得一挂件，清赏把玩，足以借境调心。