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

本节课的知识要点

Javascript编码原则之各司其职
Javascript编码原则之组件封装
Javascript编码原则之过程抽象
LeftPad事故背景引入
Javascript代码质量优化

js书籍推荐

犀牛书
JavaScript: The Good Parts

Javascript编码一些原则

各司其职：让HTML、CSS和JS职能分离
组件封装：好的UI组件具备正确性、扩展性和复用性
过程抽象：应用函数式编程思想

深夜食堂例子

切换浅色和深色两种模式
版本一：

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

版本二：

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

版本二的代码相对于版本一的代码是更加简洁，版本二是切换HTML元素的状态而版本一是通过JS直接来控制CSS的样式，会带来一个不好的后果：如果a将版本一这段代码交给b来对其添加一个新的功能的时候，b是很难能够理解到这个功能的原始需求的，并且如果需要更换这个字体的颜色需要回到JS文件中对代码进行修改。 其实也可以不需要通过JS来修改CSS样式，将button换成checkbox，通过伪类来进行一个修改 结论：

HTML/CSS/JS应该各司其职
应当避免不必要的用JS来直接对样式进行一个操作
可以用class来表示状态
纯展示类交互可以寻求零JS的方案

轮播图例子

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

可以通过创建一个类来对每一张图片的状态进行切换来实现这个轮播功能。

重构：插件化

解耦

将控制元素抽取成插件
插件和组件之间通过依赖注入的方式建立一个联系

重构：模板化

解耦

将HTML模板化，更易于扩展

重构：抽象化

解耦

使得变成一个框架，代码变得更加简单高效

总结：组件设计的原则是封装性、正确性、扩展性、复用性；实现组件的步骤是：结构设计、展现效果、行为设计；三次重构；

过程抽象：

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

使用高阶函数

HOF
- 以函数作为参数
- 以函数作为返回值
- 常用于作为函数装饰器

评判代码的好坏

不应该通过代码风格来进行一个评判，应该从应用场景出发

代码质量优化

优化代码的几种方法：

数据抽象
过程抽象
异步+函数式

关于这节课的个人思考

写出一段高质量的代码需要千锤百炼，在入门阶段应该首先要注意本节课讲师给我们介绍的每一个小细节，这样子能使我们的代码更加便于维护和拓展。在完成整个代码编写之后，要通过上面的几个方法来对自己代码进行一个优化，这样才能不断地进步，这节课收获很多，让我明白了应该如何去写出一段优秀的代码。未来的路还很长，我们仍需努力！

如何写好JavaScript | 青训营笔记