网易云音乐JS版问题总结

flex布局和float布局混用导致float失效

描述：在父元素display:flex情况下，子元素使用float，会发现子元素原地不动，既没有覆盖前面的子元素，也不会按照float的规则布局
解决：给这个使用float的子元素添加margin-left: auto(我也不知道为啥)

overflow导致盒子外的before消失

描述：盒子加了overflow:hidden，盒子本身自带::before，但是这个before定位在盒子外面，这个时候before就被overflow给hidden了
解决：当前盒子依然overflow，给当前盒子加个父级box，before移到父级盒子上。

table表格td宽度不生效

描述：在table下thead里的th设置了宽度，希望这一整列都是保持这个宽度，然后给tbody里的td设置了文字超出宽度部分...，但是并不起作用，文字太长的时候，整列会被拉长
解决：给table添加一个table-layout:fixed。

dom事件问题

<div class ="box"></div>
<script>
    function a(c) {
        console.log(c);
    }
    let box = document.getElementsByClassName('box')[0]
    let c = 1
    box.addEventListener('click',a(c))   
</script>

上述代码，打开浏览器会立刻在控制台输出1，而不是点击dom标签再输出
$\color{red}{这是因为添加参数的时候，需要用括号括起来，方法名字一看见括号，那它就执行了}$
$\color{red}{所以相当于把a方法的结果赋给了box的click事件，这个事件就无法执行了}$
$\color{green}{解决方案1（不推荐）：通过bind特性。}$
$\color{green}{bind和call/apply相似，通常用于改变函数的this的指向。}$
$\color{green}{不过和后二者不同，bind中不额外加()操作符，就不会立即函数。}$

<script>
    function a(c) {
        console.log(c);
    }
    let box = document.getElementsByClassName('box')[0]
    let c = 1
    box.addEventListener('click',a.bind(box,c)) 
</script>

注意：bind里面如果传递this，this是当前作用域的this，即window，而不是box，所以这里不用this而用box
注意：该方法使用bind会占用更多内存，不建议使用，详见JS函数之不要随便bind

$\color{green}{解决方案2（推荐）：使用闭包}$
$\color{green}{闭包的作用返回的是一个函数，而不是一个函数执行的结果。}$
$\color{green}{这样，就是把return后面那个function赋给了box的click事件，后续点击dom就可执行了}$

<script>
    function a(c) {
        return function() {
            console.log(c);
        }
    }
    let box = document.getElementsByClassName('box')[0]
    let c = 1
    box.addEventListener('click',a(c)) 
</script>

这种方法，a函数内部的this指向box，即不需要再改变this指向

removeEventListener

addEventListener和removeEventListener要求方法名相同，否则无法removeEventListener
$\color{red}{踩坑：如果需要给绑定事件传参，不要使用dom2级事件(addEventListener)！}$
$\color{red}{因为带参数的removeEventListener无法解绑！}$
$\color{red}{原因未知，如果需要给绑定事件传参，请使用dom0级事件(onclick等等)}$

css样式!important不生效

color是一个可以继承的属性，也就是如果内部的元素找不到color就从外面一层层找出去，
$\color{red}{但是内部元素本身就有color的话就使用内部的color，就算外部的color加!important也没用。}$

<style>
    .box {
        width: 200px;
        height: 200px;
        background: yellow;
        color: red !important;
    }
</style>
<div class ="box">
    <p>红红火火恍恍惚惚</p>
    <p style="color: blue;">啊啊啊啊啊啊啊啊啊</p>
</div>

结果如下

!important仅作用于box上的color，不决定box内部设置了style的p的color。

niceScroll插件位置不对

描述：给歌词添加niceScroll，但是滚动条总时出现在歌词所在盒子的左侧，只有页面resize的时候才恢复正常
解决：因为歌词页面存在从左下角开始，宽变为100vw，高变为100%，transition=0.5s，所以要再设置niceScroll的时候添加一个0.5s的定时器。

space-between等属性最后一行居中

-描述：使用justify-content的space-between等属性，如果最后一样标签放不满，那么标签会奇怪的显示，而不是从左边开始摆列。
-解决：给添加了justify-content的标签加上一个::after{content:'',width:子元素宽度(包括margin)}，这个伪元素会占下空白的地方。

操作dom，页面输出[object Promise]

描述，见代码

$(function(){
    let a = b()
})

async function b(){
    let res = await GET(...')
    let str = ''
    res.forEach(r => {
        //下面用模板字符串对str用res返回的数据写html        
        str += ...
    })
    return str
}

完事后，页面上显示[object Promise]

解决：异步async调用b函数，即let a = async b()

自定义属性不支持大写

描述：我给一个标签添加了自定义属性data-playListId，然后在js内的使用dataset.playListId，结果为undefined
解决：改变标签的自定义属性为data-playlist-id，然后在js内使用dataset.playlist-id即可获取，因为html属性和标签名大小写不敏感，全大写也会变回小写