【dart-skeleton】自动生成骨架屏项目

Dear，大家好，我是“前端小鑫同学”，😇长期从事前端开发，安卓开发，热衷技术，在编程路上越走越远～

前言：

骨架屏是在数据加载前用来展示给用户页面结构，经常由灰色占位图来体现，在数据加载完毕后自动隐藏。通常比页面白屏，闪烁或转圈的小菊花带给用户的感受要更加舒服。由于初次接触这块的内容，所以这个项目是在dps项目的基础上重写的一个Ts版本，目的是学习思路方便后续改造。

项目结构图：

项目由如图三块内容组成分别是：脚本，逻辑，CLI。

image.png

🥝脚本：

主要的功能就是对目标页面进行分析对指定的元素进行绘制为灰色块，并按条件跳过指定的干扰元素。因为我们的使用是在浏览器中所以在编译Ts的代码的时候我们将target和module分别设置成了es5和es2015，为了方便逻辑块的调用我们没有导出函数而是直接挂在到window对象上。调试本地html文件的话可以直接将编译后的Js引入页面，当我们需要调试在线的一些页面的话可以在浏览器的开发者工具=>Sources=>Snippets中新建一个片段将我们编译后的Js放进去，直接Run来执行。

🥦逻辑：

主要的功能是使用**Puppeteer**来加载目标页面，并执行我们第一阶段调试的脚本，最终导出骨架片段并插入目标页面。逻辑块的代码由于我们后续想通过CLI的方式在Node环境执行，所以编译成了CommonJS模块。需要特殊记录一下的是脚本注入后的执行函数，如下：

// 执行脚本获取生成的html片段
html = await page.evaluate((res) => {
    return window.evalDOMScripts.apply(window, res);
}, opts);

🍦CLI：

这块的功能相对简单，主要是通过命令行的方式来收集用户的输入信息，构建初始化配置文件和执行逻辑部分导出的启动函数。

使用说明：

🍕构建说明：

1. 全局安装Typescript，调试代码推荐一起安装ts-node：yarn global add typescript ts-node
2. 安装项目配置的依赖：yarn 🍿脚本&源码编译：
3. 编译脚本文件：yarn build:script
4. 编译源码文件：yarn build:source 🥗链接模块到本地NPM：
5. 建立连接命令：npm link
6. 反建立连接命令：npm unlink

🍝CLI使用说明：

1. 初始化配置文件：ds init
2. 执行生成函数：ds start演示效果： 手机版百度页面：

image.png

image.png

手机版京东页面：

image.png

image.png

手机版哔哩哔哩页面：

image.png

image.png

结语：

经过简单的测试发现直接生成的骨架屏片段确实不怎么完美（未调整干扰元素的情况下），此次只是通过dps项目来学习处理问题的思路方法，大家在自己的项目中都是怎么处理骨架屏的呀，想学习学习。🎈