这是我参与「第五届青训营 」伴学笔记创作活动的第3天。
一、本堂课重点内容
- JavaScript编码原则之各司其责
- JavaScript编码原则之组件封装
- JavaScript编码原则之过程抽象
二、详细知识点介绍
1. 写好JS的原则
- 各司其责——让HTML、CSS、JavaScript职能分离；
- 组件封装——对UI组件的封装去使用，所以封装应具备正确性、扩展性、复用性；
- 过程抽象——对用户交互过程抽象，使得其具有扩展性和复用性。
２. 各司其责
- HTML/CSS/JS各司其责；
- 避免不必要的由JS直接操作样式；
- 可以用class表示状态；
- 纯展示交互寻求零JS方案。
３. 组件封装
- 组件是指Web页面上抽出来的一个个包含模板（HTML）、功能（JS）和样式（CSS）的单元。
- 组件封装可实现插件化、模板化、框架化。
- 组件封装要能够做到复用、正确、可扩展。
４. 过程抽象
- 过程抽象是函数式编程的基础应用。
- 把函数看成封装好的过程，高阶函数（纯函数）输入输出确定，以函数作为参数和返回值。能够实现过程抽象。常用的高阶函数有：
- 编程范式
- 命令式——怎么做 。
- 声明式——做什么，具有可扩展性。
三、实践练习例子
黑白两种模式切换
由于需求只要CSS渲染变化，故下列例子使用CSS，不涉及JS进行夜间和日间变换。 1.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>深夜食堂</title>
</head>
<body>
<input id="modeCheckBox" type="checkbox">
<div class="content">
<header>
<label id="modeBtn" for="modeCheckBox"></label>
<h1>深夜食堂</h1>
</header>
<main>
<div class="descriptin">
<p>
根据知名漫画改编。一个午夜12点至清晨6点营业的食堂，菜谱只有猪肉套餐，但你想吃的都可以点。聚集了一众城市边缘人，一集一餐，一人一个故事。都是平凡人的经历，悲喜人间，酸甜苦辣。温馨治愈，充满人情味。
</p>
</div>
</main>
</div>
</body>
</html>
２.CSS代码
body,html{
width: 100%;
height: 100%;
max-width: 600px;
padding: 0;
margin: 0;
overflow: hidden;
}
body{
box-sizing: border-box;
}
.content{
height: 100%;
padding: 10px;
transition: background-color 1s,color 1s;
}
#modeCheckBox{
display: none;
}
#modeCheckBox:checked+.content{
background-color: black;
color: aliceblue;
transition: all 1s;
}
#modeBtn{
font-size: 2rem;
float: right;
}
#modeBtn::after{
content: '☀';
}
#modeCheckBox:checked+.content #modeBtn::after{
content: '🌙';
}
实验运行结果如下：
- 日间模式
- 夜间模式
课后个人总结
- 通过本次课程学习了如何写好JS代码并了解了如何对组件进行封装等。
- JS基本语法需要我们课下学习巩固，并对老师上课讲的例子及时巩固。才能真正将代码写规范，使其复用性，扩展性增强。
