小知识,大挑战!本文正在参与“程序员必备小知识”创作活动
本文同时参与掘力星计划,赢取创作大礼包,挑战创作激励金
前言
一个好的JS代码要遵守以下一些原则
-
各司其责:即HTML负责网页结构,CSS负责元素样式,JS 则负责交互和行为。
-
组件封装:组件是指Web页面上抽出来一个个包含模板(HTML)、样式(CSS)和功能(JS)的单元,好的组件应具备封装性、正确性、扩展性、复用性。
-
过程抽象:用函数作为黑盒来编写和使用,这过程也称为过程抽象。
各司其责
例子
通过写一段JS,控制一个网页,让它支持浅色和深色两种浏览模式。如果是你来实现,你会怎么做?
深夜食堂:版本一
const btn = document.getElementById('modeBtn');
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 = '🌞';
}
});
深夜食堂:版本二
const btn = document.getElementById('modeBtn');
btn.addEventListener('click', (e) => {
const body = document.body;
if(body.className !== 'night') {
body.className = 'night';
} else {
body.className = '';
}
});
body, html {
width: 100%;
height: 100%;
max-width: 600px;
padding: 0;
margin: 0;
overflow: hidden;
}
body {
padding: 10px;
box-sizing: border-box;
transition: all 1s;
}
div.pic img {
width: 100%;
}
#modeBtn {
font-size: 2rem;
float: right;
border: none;
outline: none;
cursor: pointer;
background: inherit;
}
body.night {
background-color: black;
color: white;
transition: all 1s;
}
#modeBtn::after {
content: '🌞';
}
body.night #modeBtn::after {
content: '🌜';
}
深夜食堂:版本三
<!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="pic">
<img src="https://p2.ssl.qhimg.com/t0120cc20854dc91c1e.jpg">
</div>
<div class="description">
<p>
这是一间营业时间从午夜十二点到早上七点的特殊食堂。这里的老板,不太爱说话,却总叫人吃得热泪盈
眶。在这里,自卑的舞蹈演员偶遇隐退多年舞界前辈,前辈不惜讲述自己不堪回首的经历不断鼓舞年轻人,最终令其重拾自信;轻言绝交的闺蜜因为吃到共同喜爱的美食,回忆起从前的友谊,重归于好;乐观的绝症患者遇到同命相连的女孩,两人相爱并相互给予力量,陪伴彼此完美地走过了最后一程;一味追求事业成功的白领,在这里结交了真正暖心的朋友,发现真情比成功更有意义。食物、故事、真情,汇聚了整部剧的主题,教会人们坦然面对得失,对生活充满期许和热情。每一个故事背后都饱含深情,情节跌宕起伏,令人流连忘返 [6] 。
</p>
</div>
</main>
</div>
</body>
</html>
body, html {
width: 100%;
height: 100%;
max-width: 600px;
padding: 0;
margin: 0;
overflow: hidden;
}
body {
box-sizing: border-box;
}
.content {
padding: 10px;
transition: background-color 1s, color 1s;
}
div.pic img {
width: 100%;
}
#modeCheckBox {
display: none;
}
#modeCheckBox:checked + .content {
background-color: black;
color: white;
transition: all 1s;
}
#modeBtn {
font-size: 2rem;
float: right;
}
#modeBtn::after {
content: '🌞';
}
#modeCheckBox:checked + .content #modeBtn::after {
content: '🌜';
}
深夜食堂:结论
-
HTML/CSS/JS各司其责
-
应当避免不必要的由JS直接操作样式
-
可以用class来表示状态
-
纯展示类交互寻求零JS方案
组件封装
组件是指Web页面上抽出来一个个包含模版(HTML) 、功能(JS) 和样式(CSS) 的单元。好的组件具备封装性、正确性、扩展性、复用性。
例子
用原生JS 写一个电商网站的轮播图,应该怎么实现?
结构设计:HTML
结构:HTML
轮播图是一个典型的列表结构,我们可以使用无序列表<ul>
元素来实现。
展现效果:CSS
表现:CSS
-
使用CSS绝对定位将图片重叠在同一个位置
-
轮播图切换的状态使用修饰符(modifier)
-
轮播图的切换动画使用CSS transition
行为设计:API
行为:JS
- API设计应保证原子操作,职责单一,满足灵活性。
class Slider{
constructor(id){
this.container = document.getElementById(id);
this.items = this.container
.querySelectorAll('.slider-list__item, .slider-list__item--selected');
}
getSelectedItem(){
const selected = this.container
.querySelector('.slider-list__item--selected');
return selected
}
getSelectedItemIndex(){
return Array.from(this.items).indexOf(this.getSelectedItem());
}
slideTo(idx){
const selected = this.getSelectedItem();
if(selected){
selected.className = 'slider-list__item';
}
const item = this.items[idx];
if(item){
item.className = 'slider-list__item--selected';
}
}
slideNext(){
const currentIdx = this.getSelectedItemIndex();
const nextIdx = (currentIdx + 1) % this.items.length;
this.slideTo(nextIdx);
}
slidePrevious(){
const currentIdx = this.getSelectedItemIndex();
const previousIdx = (this.items.length + currentIdx - 1)
% this.items.length;
this.slideTo(previousIdx);
}
}
const slider = new Slider('my-slider');
slider.slideTo(1);
行为设计:控制流
行为:控制流
- 使用自定义事件来解耦。
总结:基本方法
-
结构设计
-
展现效果
-
行为设计
-
API(功能)
-
Event(控制流)
-
重构:插件化
解耦
-
将控制元素抽取成插件
-
插件与组件之间通过依赖注入方式建立联系
重构:模板化
解耦
- 将HTML模板化,更易于扩展
重构:组件框架
抽象
- 将通用的组件模型抽象出来
总结
-
组件设计的原则:封装性、正确性、扩展性、复用性
-
实现组件的步骤:结构设计、展现效果、行为设计
-
三次重构
-
插件化
-
模板化
-
抽象化(组件框架)
-
-
如以上有错误的地方,请在评论区中指出,谢谢!
小可爱们看完点个赞再走一走~~