这是我参与⌈第五届青训营⌋伴学笔记创作活动的第3天
如何让写好JS
深夜食堂
版本一：
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 = '🌞';
}
});
版本二：
btn.addEventListener('click', (e) => {
const body = document.body;
if(body.className !== 'night') {
body.className = 'night';
} else {
body.className = '';
}
});
用classname切换样式
版本三：
background-color: black;
color: white;
transition: all 1s;
}
不使用js来操作白天夜晚模式切换，巧妙简便
总结
各司其职，纯展示类交互寻求零CSS方案，避免用不必要的JS操作样式
组件是指Web页面上抽出来的一个个HTML、CSS、JS的单元。好的组件具有封装性、正确性、扩展性、复用性
轮播图实现
HTML:轮播图是一个列表结构，可以用无序列表<ul>元素
CSS:
- 绝对定位，将图片重叠在同一位置。
- 切换状态使用修饰符（modifier）
- 切换动画使用CSS transition
JS: - API:
1.+getSelectedltem() 当前选中图片元素
2.+getSelectedltemIndex() 当前选中图片元素在列表中的下标
3.slideTo() 当前某图片
4.slideNext() 向后轮播下一张图片
5.slidePrevious() 向前轮播下一张图片 - Event
1.使用自定义事件解耦
重构化
- 将控制元素抽取成插件
- 插件与组件之间通过依赖注入方式建立联系
模板化
HTML模板化，易于拓展
组件框架抽象化
将通用的组件模型抽象出来
过程抽象
用来处理局部细节控制的方法 函数式编程思想的基础应用
例子：
操作次数限制
一些异步交互
一次性的HTTP请求
在两秒内，按钮只能点击一次，若点击多次就会报错
解决：
once：为了能够让“只执行一次”的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个个过程称为过程抽象
高阶函数：以函数作为参数，以函数作为返回值，常用于作为函数装饰器
常用高阶函数：
- Once
- Throttle节流函数
- Debounce防抖函数
- Consumer/2
- Iterative
命令式与声明式
Toggle-命令式
if(evt.target.className === 'on'){
evt.target.className = 'off';
}else{
evt.target.className = 'on';
}
}
Toggle-声明式
return function(...args){
let action = actions.shift();
actions.push(action);
return action.apply(this, args);
}
}
switcher.onclick = toggle(
evt => evt.target.className = 'off',
evt => evt.target.className = 'on'
);
声明式有更强的可扩展性
Toggle-三态
return function(...args){
let action = actions.shift();
actions.push(action);
return action.apply(this, args);
}
}
switcher.onclick = toggle(
evt => evt.target.className = 'warn',
evt => evt.target.className = 'off',
evt => evt.target.className = 'on'
);
总结
本节课月影老师介绍了过程抽象，理解高阶函数和函数装饰器。编程语言有命令式和声明式两种风格，现在编程语言代码同时拥有两种编程方式。掌握了三个写代码原则，组件封装，过程抽象。
