写好JS的原则｜青训营

1. 各司其职。让HTML、CSS和JavaScript职能分离
2. 组件封装。好的UI组件具备正确性、扩展性和复用性
3. 过程抽象。应用函数编程的思想

示例：要求实现一个方法，点击可进行夜间模式切换 第一种方式

const btn=document.getElementById('modelBtn')
btn.addEventListener('click',(event)=>{
    const body=document.body
    if(event.target.innerHTML=='light'){
        body.style.backgroundColor='black'
        body.style.color='white'
        event.target.innerHTML='night'
    }else{
        body.style.backgroundColor='white'
        body.style.color='black'
        event.target.innerHTML='light'
    }
})

此方法存在的问题：直接在代码中操作CSS，不便后来的人员对程序进行修改。 第二种方式

const btn=document.getElementById('modelBtn')
btn.addEventListener('click',(event)=>{
    const body=document.body
    if(body.className!=='night'){
        body.className='night'
    }else{
        body.className=''
    }
})

该方法直接避免了在JS中直接操作CSS，但是样式切换本质是CSS的工作，此时依然是在JS中完成对CSS的操作。 第三种方式：使用纯css特性，使用伪类来操作，例如:hover,:checked等

写好JS的结论：

1. HTML、CSS、JS各司其职
2. 应当避免不必要的由JS直接操作样式
3. 可以使用class来表示状态
4. 纯展示类交互应该尽量避免使用JS

那么，究竟如何才能做到分离呢？ 首先需要了解CSS中一些特殊元素，比如伪类选择器，奇数选择器，算中状态等等，这些内容可以帮助我们更流畅地操作CSS，遇到这种问题，应该首先考虑是否能用CSS本身的内容解决，如果解决不了，再考虑是否能通过在JS中切换CSS中的class进行操作

这篇好文章是转载于：学新通技术网