JavaScript编码原则 | 青训营笔记这是我参与【第五届青训营】伴学笔记创作活动的第3天写好JS的原则各司其责

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

写好JS的原则

各司其责——让HTML、CSS、JavaScript职责与功能分离
组件封装——对UI组件的封装去使用，因此好的封装应该具备正确性、扩展性、复用性
过程抽象——应用函数式编程思想

各司其责

HTML/CSS/JS各司其责
避免不必要的由JS直接操作样式
可以用class操作CSS
纯展示交互寻求零JS方案

组件封装

组件是指Web页面上抽出来的一个个包含模板（HTML）、功能（JS）和样式（CSS）的单元。组件封装需要注意复用性、正确性、扩展性。

过程抽象

过程抽象是函数式编程的基础应用。需要把函数看成封装好的过程，高阶函数（纯函数）输入输出确定，以函数作为参数和返回值，即把复杂过程封装成函数的过程。

深夜食堂案例

方法一：JavaScript直接更改CSS的样式

const btn = document.getElementById('modeBtn');
btn.addEventListener('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 = '日间';
    }
});

方法二：JavaScript更改HTML元素类名

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

方法三：使用label标签实现转换

<body>
    <!-- 隐藏input -->
    <input id="modeCheckBox" type="checkBox">  
    <div class="content">
        <header>
            <!-- <label> 标签为 input 元素定义标注（标记）。  
             label 元素不会向用户呈现任何特殊效果。不过，它为
             鼠标用户改进了可用性。如果您在 label 元素内点击文
             本，就会触发此控件。就是说，当用户选择该标签时，浏
             览器就会自动将焦点转到和标签相关的表单控件上。<label>
             标签的 for 属性应当与相关元素的 id 属性相同。 -->
            <label id="modeBtn" for="modeCheckBox"></label>
            <h1>深夜食堂</h1>
       </header>
        <main>
        ...
        </main>
    </div>
</body>

高阶函数

以函数为参数
以函数为返回值
常用于作为函数装饰器（注意高阶函数的应用场景：once函数，防抖节流等）

收获

学习了一些JS的基本内容，了解到了写好JS的基本原则：各司其职，组件封装，过程抽象，在今后的学习中必定严加遵循。