【dart-skeleton，逻辑篇】自动生成骨架屏项目

「这是我参与11月更文挑战的第11天，活动详情查看：2021最后一次更文挑战」。

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

---

前言：

承接上篇【dart-skeleton】自动生成骨架屏项目内容，这一篇主要来说一下第二块内容逻辑篇。

我们先抽象一个生成骨架页面的类(GeneratePageStructure)：

定义由构造函数传入options选项，且选项的类型使用Ts的interface进行定义。

提供两个函数供使用： 公开使用的start方法的主要工作流程：

1. 建立pb对象(PuppeteerBrowser)；

const page = await pb.open(
  this.options.url,
  this.options.emulateOpts,
  this.options.extraHTTPHeaders
);

2. 生成骨架片段html；

const html = await this.generateSkeletonFragment(page);

3. 重写入门Html文件；

rewriteHtml(this.options.output.injectSelector, this.filepath, html);

4. 关闭并退出进程。

await pb.close();
process.exit(0);

私有的generateSkeletonFragment函数的主要工作流程：

1. 整合构造函数传入的选项；

// function
value: `${this.options.includeElement}`
 
// object
value: JSON.stringify({
  height: this.options.header?.height,
  background: this.options.header?.background,
})
  
// string
value: value

2. 使用fs读取解析dom的js脚本；

let scriptContent = await fs.readFileSync(
  path.resolve(__dirname, "eval-dom-scripts.js"),
  "utf8"
);

3. 使用addScriptTag注入脚本内容；

await page.addScriptTag({ content: scriptContent });

4. 在evaluate中执行挂载到window上的解析函数。

await page.evaluate((res) => {
  // @ts-ignore
  return window.evalDOMScripts.apply(window, res);
  // @ts-ignore
}, opts)

我们还重点操作了一个pb类，这个类的主要功能是对puppeteer库的操作：

1. 使用launch函数启动获得一个浏览器对象，启动时可以控制是否需要显示浏览器页面，是否需要开启devtools或是否需要延缓执行；

this.browser = await puppeteer.launch({
  headless: !this.isDebug,
  devtools: this.isDebug,
  slowMo: 5,
});

2. 启动后使用newPage函数打开一个新的页面；

const page = await this.browser.newPage();

3. 我们可以根据页面的实际需要决定是否需要设置请求头属性；

await page.setExtraHTTPHeaders(extraHTTPHeaders);

4. 现在可以对浏览器的设备属性进行调整,如是否在是手机中或PC电脑中,屏幕的尺寸信息等等；

emulateOpts = puppeteer.devices["iPhone 6"];
await page.emulate(emulateOpts);

5. 通过goto函数跳转我们的目标url，至此就可以开始解析DOM信息做后续的操作了。

await page.goto(url, {
  timeout: 2 * 60 * 1000,
  waitUntil: "networkidle0",
});

说明： 此项目是在dps项目的基础上重写的一个Ts版本，目的是学习思路方便后续改造。

---

欢迎关注我的公众号“前端小鑫同学”，原创技术文章第一时间推送。