慢学JS 上丨青训营笔记

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

这节课主要讲的是JS的编码原则

分别是各司其职、组件封装、过程抽象

一.JavaScirpt编码原则之各司其职

HTML、CSS、JS各司其责
应当避免不必要的由JS直接操作样式
可以用class来表示状态
纯展示类交互寻求零JS方案

二.JavaScript编码原则之组件封装

那啥是组件嘞？

组件是指web页面上抽出来一个个包含模板(html)、样式（css）、功能（js）的单元

出色的组件需要具备哪些特点？

好的组件具备封装性、正确性、扩展性、复用性。

三.JavaScript编码原则之过程抽象

1.过程抽象，即用来处理局部细节控制的一些方法，是函数式编程思想的基础应用。

2.高阶函数，以函数为参数、函数为返回值，常用作为函数装饰器

四.代码优化实例

eg:深夜食堂代码优化

优化前：

        btn.addEventL istener('click', (e) => {
            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 = '浅色';
        }
    });

而优化后：

<style>
        #modeCheckBox:checked + .content {
            background-color: black;
            color: white;
            transition: all 1s;
        }
    </style>
    
    
<body>
    <input id="modeCheckBox” type=" checkbox">
    <div class="content">
        <header>
            <label id="modeBtn" for="modeCheckBox"></label>
            <h1>深夜食堂</h1>
        </header>
    </div>
</body>

应用各司其职的方法，我们使得html,css，js各自控制所负责的部分，增加了代码可读提高了运行效率以及代码逻辑，可谓一举多得

个人总结

通过这几节对JavaScript的学习，我发现自己对算法思想的认知还是太粗浅，写的代码很多自己回过头来都不能很快地理清逻辑。所以，要想写好代码，多方面的考虑是必须的，既要注重运行效率与逻辑性，还要提高代码可读性之后在编码的时候，要注意养成良好的算法思想了

慢学JS 上｜ 青训营笔记