ElemeFE / ElemeFE/page-skeleton-webpack-plugin
关于源码学习的一个小问题
- 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
Assessment
This issue has not been assessed yet.