跟着月影学 JavaScript ｜青训营笔记--- theme: channing-cyan --- **这是我参与

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

对于学习前端的同学来说,如果把HTML比作的骨架，CSS比作外表，那么JavaScript可以比作灵魂。此次课程月影老师没有带着我们重新学习JS语法等等，而是以如何写好JavaScript这一话题进行了授课，从中学到了特别多的干货。

一、JavaScript 编码原则之各司其责

月影老师主要告诉我们Html css js 需要根据业务的场景各司其职，其中讲解的案例，就是通过三个实现方式

通过事件去直接改变css属性
通过JS点击切换class去改变点击后的效果
通过css本身input的check有切换的效果，通过for链接其他id标签，css自己达到交互式

以下就讲解第三种方式零JS方案

点击太阳或月亮切换浅色和深色两种模式 HTML部分

    <input type="checkbox" id="btn">
    <div id="main">
      <div id="title">
        <h1>深夜食堂</h1>
        <label for="btn"></label>
      </div>
      <p >
        写一段JS，控制一个网页，让它支持浅色和深色两种浏览模式
      </p>
    </div>

CSS部分

        #btn{
            display: none;
        }
        /* 当checkbox选中时，通过兄弟选择器改变main的样式 */
        #btn:checked+#main {
            color: white;
            background-color: black;
        }

        #main label::before {
            content: '🌞';
        }

        #btn:checked+#main label::before {
            content: '🌛';
        }

总结

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

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

使用原生JS实现轮播图就不贴上来了

组件设计原则：封装性、正确性、扩展性、复用性
实现组件的步骤：结构设计、展现效果、行为设计
三次重构
- 插件化
- 模板化
- 抽象化

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

所谓过程抽象

用来处理局部细节控制的一些方法
函数式编程实现的基础应用

常用高阶组件（HOF） - 单词执行、节流、防抖

单次执行（once）

        function once(fn) {
            return function(...args) {
                if (fn) {
                   const res = fn(...args)
                    fn = null
                    return res
                }
            }
        }

节流（throttle）

方法一：（通过当前时间 - 之前记录的时间 > 限制时间）

    function throttle(fn, t) {
        let oldTime = +new Date()
        return function(...args) {
            let newTime = +new Date()
            if (newTime - oldTime > t) {
                fn.apply(this, args)
                oldTime = newTime
            }
        }
    }

方法二：（定时器）

        function throttle(fn, t) {
            let timer = null
            return function(...args) {
                if (timer === null) {
                    fn.apply(this, args)
                    timer = setTimeout(() => {
                        timer = null
                    }, t)
                }
            }
        }

防抖（debounce）

    function debounce(fn, t = 500) {
        let timer 
        return function(...args) {
            if(timer) clearTimeout(timer)
            timer = setTimeout(() => {
                    fn.apply(this, args)
            }, t)
    }
}

四、JavaScript 代码质量优化之路

案例：交通灯

通过使用async/await让代码达到最简洁

HTML部分

    <div id="traffic">
        <div class="lamp"></div>
        <div class="lamp"></div>
        <div class="lamp"></div>
    </div>