这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天
本堂课重点内容：
写好JS的一些原则、理解常用HOF的使用、
详细知识点介绍
如何写好JS？
各司其责： 让HTML、CSS、JS的职能分离
组件封装： 好的UI组件具备正确性、扩展性、复用性
轮播图
- HTML：用ul li去写
- CSS：用绝对定位让图片重叠在同一个位置，轮播图切换的状态使用修饰符、切换动画用transition
- JS：getSelectItem() 得到选中的元素
getSelectedItemIndex() 得到选中的元素的下标
重构问题
- 插件化：将控制元素抽取或插件
插件与组件之间通过依赖注入方式建立联系
用来定义页面元素的样式，设置字体颜色、盒子位置和大小、添加动画效果等 - 模板化：将HTML模板化，易于扩展
- 抽象化（框架）：代码量少，但不适合用于组件嵌套
过程抽象：应用函数式编程思想
一些高阶函数举例
- HOF: 以函数作为参数返回另外一个函数，常用于作为函数装饰器
// 等价高阶函数
// 一般高阶函数：在HOF0的基础之上对function进行修改，比如改变某些参数或者返回值等
fuction HOF0(fn) {
return funtion(...args) {
return fn.apply(this, args);
}
}
- Once： 为了能够让fn不会嵌套调用，可以将这个需求剥离出来，此过程成为函数抽象
function once(fn) {
return function(...args) {
if(fn) {
const ret = fn.apply(this.args);
fn = null;
return ret;
}
}
}
- Throttle（截留函数）
//time为截留周期，time = 500意为每隔500毫秒调用一次函数
function throttle(fn, time = 500) {
let timer;
return function(this, args) {
if(timer == null) {
fn.apply(this, args);
timer = setTimeout(() => {
timer = null;
}, time)
}
}
}
- Debounce（防抖函数）： 当事件完成之后再触发，并且只触发一次
举例：举个例子：假如有个弹簧，你一直往下按压只要你不松手就是不会弹出的，弹簧只有在你松手的那一瞬间才会弹出去；防抖函数也是如此，只要事情触发没有结束是不会执行的，只有在事件触发结束后延迟执行一次
//定义方法即要做的事情
function fun(){
console.log('onresize');
}
//定义事件触发要执行的方法，两个参数分别是传入的要做的事情和定时器的毫秒数
function debounce(fn,delay){
//定义一个变量作为等会清除对象
var handle;
//这里用到了闭包，一个函数里面return另一个函数，变量相互签引导致垃圾回收机制不会销毁handle变量
return function(){
//在这里一定要清除前面的定时器，然后创建一个新的定时器
clearTimeout(handle)
//最后这个定时器只会执行一次也就是事件触发完成之后延迟500毫秒再触发（这里的变量赋值是跟定时器建立连接，进行地址赋值，一定要重新赋值给handle
handle=setTimeout(function(){
fn()
},delay)
}
}
//给浏览器添加监听事件resize
window.addEventListener('resize', debounce(fun, 500));
纯函数与非纯函数
- 纯函数的输入输出是确定的，意为输出只和传进去的参数有关
- 非纯函数会用到除了参数之外的数据，比如外部定义的变量
- 使用高阶函数可以减少非纯函数的使用
编程范式
- 命令式与声明式
let list = [1, 2, 3, 4];
let mapl = [];
//命令式：强调怎么做
for(let i = 0; i < list.length; i++) {
mapl.psh(list[i] * 2);
}
//声明式：强调做什么，代码简洁
const double = x => x * 2;
list.map(double);
- 声明式比命令式更具有代码扩展性
思考
- 代码可以不断地优化，要多加思考
