这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天,接下来是一些学习笔记以及我个人的思考和总结。
一、本堂课重点内容:
- 具备正确性、扩展性、复用性的组件封装
- 利用原生 JS 实现电商网站轮播图
- 函数式编程思想
- 过程抽象概念
- 高阶函数使用模式
- JavaScript编程范式
二、详细知识点介绍:
组件封装
组件设计的基本原则:封装性、正确性、扩展性、复用性
过程抽象
过程抽象就是利用函数式编程的思想来处理局部细节控制的一些方法。
-
高阶函数
- 以函数作为参数
- 以函数作为返回值
- 常用于作为函数装饰器
-
常用高阶函数
- Once
- Throttle
- Consumber
- Iterative
三、实践练习例子:
利用原生 JS 实现电商网站轮播图:
- HTML结构:
<li cLass="slider_item__selected">
<img
src="https://img.alicdn.com/imgextra/i4/6000000002650/O1CN013HRU5V1VRkNnNu8XR_!!6000000002650-2-octopus.png">
</li>
<li class="slider_item">
<img
src="https://img.alicdn.com/imgextra/i2/6000000005393/O1CN01QcQoPI1pi2mudna6m_!!6000000005393-2-octopus.png">
</li>
<li class="slider_item">
<img
src="https://img.alicdn.com/imgextra/i1/6000000000342/O1CN01wyWUIP1EOgGGP9dcm_!!6000000000342-2-octopus.png">
</li>
<li class="slider_item">
<img
src="https://img.alicdn.com/imgextra/i4/6000000000330/O1CN016BVmq01EJBVVdPjVi_!!6000000000330-2-octopus.png">
</li>
</ul>
- css样式:
position: relative;
display: fLex;
justify-content: center;
width: 50vw;
height: 500px;
}
slider_item, .slider_item__selected {
position: absolute;
opacity: 0;
transition: .3s ease;
}
.slider_item__seLected {
transition: opacity 1s;
opacity: 1;
}
- JS代码:
- 行为JS,控制流,即使用自定义事件来解耦
我们构建轮播图的控件,通过自定义事件来控制的状态切换,从而来实现轮播图组件解耦。
<a class="slider__control--next">></a>
<div cLass="slider__control">
<span cLass="slider__controlitem-- selected"> </span>
<span cLass="sLider__control-item"> </span>
<span cLass="sLider__control-item"> </span>
<span cLass="slider__control-item"> </span>
</ div>
过程抽象
应用函数式编程思想,是处理局部细节控制的方法。
过程抽象一般应用于节流、防抖等方面。
纯函数:返回结果只依赖于它的参数,并且在执行过程里面没有副作用
优点:
- 方便进行单元测试!
- 减少系统中非纯函数的数量,从而使得系统可靠性增加
四、课后个人总结:
月影老师上课所讲的,JavaScript的组件封装与过程抽象的思想。三次重构:插件化、模板化、抽象化。实现组件要一步一步来:结构设计、展现效果、行为设计。还有编程范式的学习有点生疏,课后要去再找找相关资料加强学习。使用高阶函数:将核心算法整体替换,整个架构不变,比如一个有不同水平的棋类游戏,高阶函数的让这个实现更简单。
五、引用参考:
- 《JavaScript语言精粹》
- 跟着月影学JavaScript- juejin.cn/course/byte…