“这是我参与「第五届青训营 」伴学笔记创作活动的第四天
一、本堂课重点内容
1.写好JS的原则
- 各司其职
- 组件封装
- 过程抽象
二、重点知识点
1.组件封装
- 组件设计的原则:封装性、正确性、扩展性、复用性
- 实现组件的步骤:结构设计(Html)、展现效果(Css)、行为设计(JS)
- 三次重构:插件化、模板化、抽象化(组件框架)
插件化:解耦
- 将控制元素抽取成插件
- 插件与组件之间通过依赖注入方式建立联系
模板化:解耦
- 将HTML模板化，更易于扩展
抽象化:抽象
- 将组件通用模型抽象出来
2.过程抽象
- 用来处理局部细节控制的一些方法
- 函数式编程思想的基础应用
3.高阶函数 HOF
- 以函数作为参数
- 以函数作为返回值
- 常用于作为函数装饰器
function HOF0(fn){
return function(...args){
return fn.apply(this,args);
}
}
4.常用高阶函数
- Once
- Throttle
- Debounce
- Consumer/2
- Iterative
三、代码练习
1.通过JS实现白天、晚上阅读模式互换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>深夜食堂</title>
<style>
body, html {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-weight: 700; }
body {
padding: 10px;
box-sizing: border-box; }
div.pic img {
width: 100%; }
.btn { float: right;
font-size: 2rem;
border: none;
background: transparent; }
</style>
</head>
<body>
<header>
<button class="btn">🌞</button>
<h1 class="title">深夜食堂</h1>
</header>
<main> <div class="pic"> <img src="https://p2.ssl.qhimg.com/t0120cc20854dc91c1e.jpg"> </div>
<div class="description"> <p> 这是一间营业时间从午夜十二点到早上七点的特殊食堂。这里的老板，不太爱说话，却总叫人吃得热泪盈眶。 在这里，自卑的舞蹈演员偶遇隐退多年舞界前辈，前辈不惜讲述自己不堪回首的经历不断鼓舞年轻人，最终令其重拾自信； 轻言绝交的闺蜜因为吃到共同喜爱的美食，回忆起从前的友谊，重归于好； 乐观的绝症患者遇到同命相连的女孩，两人相爱并相互给予力量，陪伴彼此完美地走过了最后一程； 一味追求事业成功的白领，在这里结交了真正暖心的朋友，发现真情比成功更有意义。 食物、故事、真情，汇聚了整部剧的主题，教会人们坦然面对得失，对生活充满期许和热情。 每一个故事背后都饱含深情，情节跌宕起伏，令人流连忘返。 </p> </div> </main>
<script> const btn = document.querySelector('.btn') 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 = '🌞' } }) </script>
</body>
</html>
四、个人总结
通过这节掘金课程的学习，我了解了JavaScript的原则:各司其职 组件封装，过程抽象,其中防抖：指定时间内 频繁触发一个事件，以最后一次触发为准;节流：指定时间内 频繁触发一个事件，只会触发一次.还知道了常用高阶函数Once、Throttle、Debounce、Consumer/2、Iterative 等，丰富了自己的前端知识。
