如何写好JS，奇舞团学习笔记

实现点击产生这样效果，有很多种实现方式，一步一步的如何做到最佳实践。

版本一

<ul id="list">
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
    <li>赵六</li>
</ul>
<script>
    // 版本一
    var list = document.querySelector('#list');
    var items = document.querySelectorAll('#list > li');

    list.addEventListener('click', function(e) {
        if(e.target.tagName === 'LI'){
            var item = e.target;
        }
        items.forEach(function(item){
           item.style.background = '#fff';
           item.style.color = '#000';
        });
        item.style.background = '#000';
        item.style.color = '#fff';
    });
</script>

缺点 : 样式和行为耦合，css控制样式，js控制行为等，直接通过js操作dom样式，不易扩展，并且也不是一个好的结构样式分离实践

版本二

<ul id="list">
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
    <li>赵六</li>
</ul>
<script>
// 版本二
<style>
    .active {
        background: #000;
        color: #fff;
    }
</style>

var list = document.querySelector('#list');
var items = document.querySelectorAll('#list > li');

list.addEventListener('click', function(e) {
    if(e.target.tagName === 'LI'){
        var item = e.target;
    }
    items.forEach(function(item){
       item.setAttribute('class', '');
    });

    item.setAttribute('class', 'active');
});

使用class防止了纯dom样式操作，已经是一个好的实践了

版本三

如果考虑，我们只是需要有这样一个样式，而不是为了获得我们选中的li标签，以后也不会对他进行dom操作，那么是否有完全脱离js的实现方式呢？

<style>
    input[name = items] {
        display: none;
    }
    input:checked + label {
        background: #000;
        color: #fff;
    }
    label {
        width: 100%;
        display: inline-block;
    }
</style>

<ul id="list">
    <li>
        <input type="radio" id="item0" name="items">
        <label for="item0">张三</label>
    </li>
    <li>
        <input type="radio" id="item1" name="items">
        <label for="item1">李四</label>
    </li>
    <li>
        <input type="radio" id="item2" name="items">
        <label for="item2">王五</label>
    </li>
    <li>
        <input type="radio" id="item3" name="items">
        <label for="item3">赵六</label>
    </li>
</ul>

虽然样式有一点不一样，但是样式是很灵活的，通过css和灵活运用html特性，不用js就完成了这样的一个功能。

总结

老师还讲了一个demo，但是那个demo稍微复杂了一点，其实就是想要列举出如何慢慢优化你的JS，写出JS很容易，写好JS很难，打好基本功，比什么都重要，这是我迷茫了那么久，面对前端无穷无尽的新知识，最后得出的结论。
这篇文章，可以让我浮躁的心，慢慢安静下来