ElemeFE / ElemeFE/page-skeleton-webpack-plugin

关于源码学习的一个小问题

Open
#32 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
2.8k
Forks
388
PR merge metrics
No merged PRs in 30d

Description

你好,我在看这个项目的源码,这是您第一提交的代码,index.js里,我有一个问题,就是在下面代码里,我打断点都走不进去,我想知道您在写这个项目的时候是怎么做调试的

```
const html = await page.evaluate((remove, excludes) => {
const $ = document.querySelectorAll
if (remove.length) {
const removeEle = $(remove.join(','))
Array.from(removeEle).forEach(ele => ele.parentNode.removeChild(ele))
}

const excludesEle = excludes.length ? Array.from($(excludes.join(','))) : []
const isBase64Img = img => /base64/.test(img.src)
const imgs = []
const texts = []
const imgHandler = ele => {
const div = document.createElement('div')
const parent = ele.parentNode

const { width, height } = ele.getBoundingClientRect()

div.style.width = `${width}px`
div.style.height = `${height}px`
div.style.backgroundColor = '#efefef'

parent.removeChild(ele)
parent.appendChild(div)
}
const textHandler = ele => {
const comStyle = window.getComputedStyle(ele)
const { lineHeight, paddingTop, paddingRight, paddingBottom, position: opos, fontSize } = comStyle
const position = ['fixed', 'absolute', 'flex'].find(p => p === opos) ? opos : 'relative'
const height = ele.offsetHeight
const lineCount = height / lineHeight | 0
let textHeightRatio = parseInt(fontSize, 10) / parseInt(lineHeight, 10)
if (Number.isNaN(textHeightRatio)) {
textHeightRatio = 1 / 1.4
}
Object.assign(ele.style, {
color: '#eee',
backgroundImage: `linear-gradient(#fff ${(1 - textHeightRatio) / 2 * 100}%, #eee 0%, #eee ${((1 - textHeightRatio) / 2 + textHeightRatio) * 100}%, #fff 0%)`,
backgroundSize: `100% ${lineHeight}px`,
backgroundClip: 'content-box',
backgroundPositionY: paddingTop,
position
})
// add white mask
if (lineCount > 1) {
const div = document.createElement('div')

Object.assign(div.style, {
width: '50%',
height: lineHeight,
background: '#fff',
position: 'absolute',
right: paddingRight,
bottom: paddingBottom
})

ele.appendChild(div)
}

}

const traverse = ele => {
if (~excludesEle.indexOf(ele)) return false
if (ele.tagName === 'IMG' && !isBase64Img(ele)) return imgs.push(ele)
if (
ele.childNodes
&& ele.childNodes.length === 1
&& ele.childNodes[0].nodeType === 3
) {
return texts.push(ele)
}

if (ele.children && ele.children.length > 0) {
Array.from(ele.children).forEach(child => traverse(child))
}

}

traverse(document.documentElement)

imgs.forEach(ele => imgHandler(ele))
texts.forEach(ele => textHandler(ele))

return document.documentElement.outerHTML

}, remove, excludes)

// browser.close()

return { html }
```

### Versions frist-commit

- Page Skeleton:
- Webpack:

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.