传世经典《菜根谭》中有言曰:“徜徉于山林泉石之间,而尘心渐息;夷犹于诗书图画之内,而俗气潜消。故君子虽不玩物丧志,亦常借物调心。”意思是,徜徉在林泉山石之间,能够摒弃杂念,留意诗词歌画之中,可以尽弃俗见。所以说君子虽然不会玩物丧志,也常常要借一些优雅的小物件来调理情绪,二次元网页小组件(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更符合大多数场景对应用脚本加载和执行的要求:
结语
香令人幽,酒令人远,石令人隽,琴令人寂,得一挂件,清赏把玩,足以借境调心。
领取专属 10元无门槛券
私享最新 技术干货