这是我参与「第四届青训营 」笔记创作活动的的第3天
写好JS的三个原则
各司其职，组件封装，过程抽象
各司其职
让HTML，CSS，JS的代码分离
HTML就专注页面结构，CSS就专注页面样式，JS就专注交互等页面操作
应当避免js直接操作样式
let div = document.querySelector('.oDiv');
if (div.style.backgroundColor == 'blue') {
div.style.backgroundColor = 'red';
} else {
div.style.backgroundColor = 'blue';
}
})
像这样的就不行
可以让js来更改class名进行修改样式
document.querySelector('.btn').addEventListener('click', function () {
let div = document.querySelector('#oDiv');
if (div.className == 'oDiv') {
div.className = 'oDiv2';
} else {
div.className = 'oDiv';
}
})
这种方法就很好的避免了js直接操作元素的样式
组件封装
组件是指web页面上抽出来一个个包含模板，功能，样式的单元。好的组件具备封装性，正确性，扩展性，复用性。
比如，如果头部部分需要一个轮播图进行展示，然后底部又需要一个轮播图，这个时候就可以用到组件封装了。避免重复写一个功能点。
组件设计的原则：
- 封装性
- 正确性
- 扩展性
- 复用性
实现组件的步骤：
- 结构设计
- 展示效果
- 行为设计
三次重构
- 插件化
- 模板化
- 抽象化（组件框架）
过程抽象
我们想象一个应用场景，就是常见的表单提交，一般我们都应该限制点击提交后不能再次提交，防止多次提交。
为了能够让‘只执行一次’的需求来覆盖不同的事件处理，我们可以将这个需求剥离出来，这个过程也被称为过程抽象。 我们可以创建一个函数，来处理“只执行一次”的这个事件
参考了本片文章juejin.cn/post/700780…
高阶函数
JavaScript的函数其实都指向某个变量。既然变量可以指向函数，函数的参数能接收变量，那么一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数。
