这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
一、本堂课重点内容：
- 各司其职: 让
HTMLCSSJS职能分离 - 组件封装: 好的UI组件具备正确性,拓展性,复用性
- 过程抽象: 采用函数式编程思想
二、详细知识点介绍：
深夜食堂
HTML,CSS,JS要各司其职,避免用不必要的js直接操作样式,用class表示状态
但目前前端可以说有很多火爆的cssInJs方案,比如说styledComponent,也有各种 Utilize Class方案,例如tailwindcss和windicss,可以说体验都不赖,HTMLCSS和JS各司其职我觉得还是得看情况而定
JS电商轮播图
细致的解析了组件设计的基本原则:
- 封装性
- 正确性
- 扩展性
- 复用性
实现组件的步骤:
- 结构设计
- 展现效果
- 行为设计
三次重构
- 插件化
- 模板化
- 抽象化
我认为好的组件应该具有
- 扁平化的,面向数据的state/props
- 纯粹的 state 变化
- 耦合低
- 模块化
- 集中状态管理
高阶函数
- 过程抽象/HOF/装饰器
- 命令式/声明式
高阶函数简单来说,就是返回一个函数的函数,比如防抖用的debounce和节流用的throttle,
/*=============================================
= 防抖函数 =
=============================================*/
function debounce(fn,wait){
let timeout = null
return function(){
if(timeout){
clearTimeout(timeout)
}
timeout = setTimeout(()=>{
fn.apply(this,arguments)
},wait)
}
}
/*===== End of 防抖函数 ======*/
/*=============================================
= 节流函数 =
=============================================*/
//时间戳版
function throttle1(fn,wait){
let time = Date.now()
return function(){
let now = Date.now()
if(now-time>wait){
fn.apply(this,arguments)
time = now
}
}
}
//定时器版
function throttle2(fn,wait){
let timer = null
return function(){
if(!timer){
timer = setTimeout(()=>{
fn.apply(this,arguments)
timer = null
},wait)
}
}
}
/*===== End of 节流函数 ======*/
四、课后个人总结：
老师对于js性能优化的理解可以是很强,了解了很多关于性能优化的手段,也了解了代码风格和代码质量的重要性,我们也有针对JavaScript的ESLint,针对样式的StyleLint,针对代码提交的CommitLint,针对代码风格的Pretter这可以说和前端工程化息息相关,,优秀的代码质量和清晰的代码风格可以让一起合作的伙伴更快的理解你的代码
