这是我参与「第五届青训营」伴学笔记创作活动的第2天

1 写好JS的一些原则

各司其职

让HTML、CSS、JavaScript职能分离。HTML只负责页面结构，CSS只负责样式、JavaScript则负责行为。每个人负责的东西不要有交叉，这样可以方便我们对代码进行维护。

组件封装

好的UI组件应该具备正确性、扩展性、复用性。

过程抽象

我们在处理UI交互时应该应用函数式编程思想。

2 一个简单的例子

通过深夜食堂第一个版本的代码，虽然这个版本的功能都实现了，运行起来也没有问题。仔细思考可以发现这里通过js去操作CSS其实是不符合前面提出的HTML、CSS、JavaScript各司其职，互不交叉的原则的。如果这样写的话，会导致后续如果业务需求有改动的话会十分麻烦，同时如果代码交给了另外一名程序员，如果另外一名程序员不看需求文档的会很难理解代码当时的需求背景，会导致维护起来十分麻烦。

const btn = document.getElementById('modeBtn');
btn.addEventListener('click',() => {
    const body = document.body;
    if(e.target.innerHTML === '☀'){
        body.style.backgroundColor = 'black';
        body.style.color = 'white';
        e.target.innerHTML = '🌙';
    }else {
        body.style.backgroundColor = 'white';
        body.style.color = 'black';
        e.target.innerHTML = '☀';
    }
});

同时，根据各司其职的原则，可以通过纯CSS来控制样式的改变。可以通过伪类选择器来匹配元素状态。设置一个checkBox，通过checkBox被选中的：check状态来改变页面的颜色。

#modeCheckBox:checked + .content{
    background-color: black;
    color: white;
    transition: all 1s;
}

通过在头部放置一个checkbox，使用label关联起来，这时只要点击太阳，就会触发checkbox选中的状态，这时通过兄弟节点对页面颜色进行改变，就可以仅仅通过CSS来改变样式，做到各司其职的原则。

结论

在实现需求时，应该分析好需要实现的需求与什么相关，做到HTML、CSS、JavaScript各司其职，避免不必要的通过JS直接对CSS样式进行操作。

JavaScript编码原则|青训营笔记

1 写好JS的一些原则

2 一个简单的例子

结论