JavaScript开发使用小tips总结

前情提要

　　在前端开发过程中遇到过不少有趣/非常规的问题解决方式，作为小tips总结于本篇。

阻止a标记跳转，但保留a标记样式

<a href="javascript:void(0)">
    content
</a>

实现click按钮/文字/其他任何，实现下载pdf/media...

　　要通过click实现下载，最常规的方式是借用a标记的download属性

const clickHandler = () => {
    const url = 'XXX'
    const newEle = document.createElement('a')
    newEle.style.display = 'none'
    newEle.href = url
    newEle.setAttribute('download', '文件名')
    document.body.appendChild(newEle)
    newEle.click()
    document.body.removeChild(newEle)
}

 为动态显示的title转行

　　在实际开发中，我们的title显示内容可能并不是预先写好的某一固定字符串，而是从接口中返回处理过的字段，那么，我们应该如何将此字段进行转行呢？

　　在js中转行可以为该字符串结尾拼接上\r进行回车或者\n进行换行即可。

　　在html中可以直接使用转义字符
(回车)或者
(换行)，或者直接简单粗暴的使用回车键即可进行换行。如果使用转义字符，需要特别注意的是，所有字符都应该是英文半角。

　　这里记录一个本人踩过的坑，在js中处理换行时，我简单地想HTML中绑定的直接是我处理过的这个字符串，也就是说把我处理的这段字符串完全照搬显示，所以在处理字符的时候，自作聪明地使用模板字符串拼接上`${拿到的字符}
`，心想如此操作简直就是万无一失，结果一到页面一看傻眼了，title直接将转义字符
一并显示了。这就离谱了，打开元素审查，在审查里给转义字符后追加一个空格，诶？直接就换行了？！又天真地以为是JS处理时没有加空格，于是模板字符串改为`${拿到的字符}
 `再去页面看，还是不行。难道是空格加错了？在审查中把空格删掉，还没等下一步操作呢，就直接转行了？哈？？？？所以根本就不是空格的问题，是写法的问题！还是乖乖地用换行符吧。果然改成`${拿到的字符}\n`直接就换行了...