- 封装性不好
针对以上所存在的问题,我们来进行第二版本的优化。具体如下:
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>
<header>
<button id="modeBtn"></button>
<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>
</body>
</html>
CSS
代码:
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: '🌜';
}
JS
代码:
const btn = document.getElementById('modeBtn');
btn.addEventListener('click', (e) => {
const body = document.body;
if(body.className !== 'night') {
body.className = 'night';
} else {
body.className = '';
}
});
大家可以看到,我们尽可能的把样式都抽离到 css
当中,这样让职责更加的分离,代码效果更好。
那看到这里,可能有的小伙伴就会像,有没有可能所有的内容都放在 css
当中呢,而不要去用到 JS
来实现。答案是肯定的。接下来我们来看第三个版本。
进一步优化,我们来看第三个版本。 HTML
代码与上面一样保持不变,没有 JS
代码。下面附上新的 CSS
代码:
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;
}
/\* 当选中时,给其再加个content类 \*/
#modeCheckBox:checked + .content {
background-color: black;
color: white;
transition: all 1s;
}
#modeBtn {
font-size: 2rem;
float: right;
}
#modeBtn::after {
content: '🌞';
}
/\* 当选中时,对content类的内容进行修改 \*/
#modeCheckBox:checked + .content #modeBtn::after {
content: '🌜';
}
大家可以看到,修改到最后版本的时候,是不是就只剩下 HTML
和 CSS
了呢,是不是简洁了许多了呢。
现在,我们来对以上这个例子做个小结。深夜食堂例子结论如下👇
HTML/CSS
各司其职;- 应当避免不必要的使用
JS
来直接操作样式; - 可以用
class
来表示状态; - 纯展示类交互寻求零
JS
解决方案。
到这里,相信大家对上面这个例子也有了一定的了解。
同时,上面代码已放到在线网站 code.h5jun
上,大家根据自身需求在下面点击链接进行获取哦~
2. 组件封装🤏
(1)定义
组件是指 Web
页面上抽出来的一个个包含模板( HTML
)、功能( JS
)和样式( CSS
)的单元。好的组件具备封装性、正确性、扩展性和复用性。
(2)例子阐述:轮播组件
用原生 JS
写一个电商网站的轮播图,应该怎么实现呢?
大家先来看下我们想要实现的轮播组件的效果。具体如下图:
那么现在,依据上面这个效果图,我们来进行代码设计。
首先是结构设计: HTML
。具体代码如下:
<div id="my-slider" class="slider-list">
<ul>
<li class="slider-list\_\_item--selected">
<img src="https://p5.ssl.qhimg.com/t0119c74624763dd070.png" />
</li>
<li class="slider-list\_\_item">
<img src="https://p4.ssl.qhimg.com/t01abe3351db853eb3.jpg" />
</li>
<li class="slider-list\_\_item">
<img src="https://p2.ssl.qhimg.com/t01645cd5ba0c3b60cb.jpg" />
</li>
<li class="slider-list\_\_item">
<img src="https://p4.ssl.qhimg/t01331ac159b58f5478.jpg" />
</li>
<li class="https://slider-list\_\_item">
<img src="htttps://p4.ssl.qhimg.com/t01331ac159b58f5478.jpg" />
</li>
</ul>
</div>
从上面的代码中我们可以看到,轮播图是一个典型的列表结构,我们可以使用无序列表 <ul>
元素来进行实现。
继续,我们来对它的展现效果 css
进行设计。具体代码如下:
#my-slider {
position: relative;
width: 790px;
}
.slider-list ul {
list-style-type: none;
position: relative;
padding: 0;
margin: 0;
}
.slider-list\_\_item,
.slider-list\_\_item--selected {
/\* 使用 css 绝对定位将图片重叠再同一个位置 \*/
position: absolute;
transition: opacity 1s;
opacity: 0;
text-align: center;
}
/\* 轮播图切换的状态使用修饰符 \*/
.slider-list\_\_item--selected {
/\* 轮播图的切换动画使用css transition \*/
transition: opacity 1s;
opacity: 1;
}
对于以上所设计的 css
来说,主要有以下几个特点:
- 使用
css
绝对定位将图片重叠在同一个位置; - 轮播图切换的状态使用修饰符(modifier);
- 轮播图的切换动画使用
CSS transition
。
下面我们来对它的行为也就是 JS
进行设计。具体代码如下:
class Slider {
constructor(id) {
this.container = document.getElementById(id);
this.items = this.container
.querySelectorAll('.slider-list\_\_item, .slider-list\_\_item--selected');
}
getSlectedItem() {
const selected = this.container
.querySelector('.slider-list\_\_item--selected');
return selected;
}
getSlectedItemIndex() {
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.getSlectedItemIndex();
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);
}
}
JS
其实就是用来设计一些行为 API
,那对于 API
设计来说,它应该尽量保证原子操作,且职责要单一,满足灵活性。
下面给出上面这段 JS
代码中的 API
。具体如下图:
除了以上内容以外,细心的小伙伴应该已经发现,下面切换部分还有几个小圆点,我们称它为控制流。那对于这些控制流来说,又该怎么设计呢?
请看下面代码:
<a class="slide-list\_\_next"></a>
<a class="slide-list\_\_previous"></a>
<div class="slide-list\_\_control">
<span class="slide-list\_\_control-buttons--selected"></span>
<span class="slide-list\_\_control-buttons"></span>
<span class="slide-list\_\_control-buttons"></span>
<span class="slide-list\_\_control-buttons"></span>
</div>
同时呢,我们还需要使用自定义事件来进行解耦。如下所示:
const detail = { index: idx }
const event = new CustomEvent('slide', { bubbles: true, detail })
this.container.dispatchEvent(event)
以上代码在线网址👉轮播组件第一版本
现在,我们先来总结一下上面这个基本方法的结构组成,如下所示:
- 结构设计
HTML
; - 展现效果
CSS
; - 行为设计
JS
,分别包含API(功能)
和Event(控制流)
。
好了,到这里,我们的轮播组件基本上也就完成啦!但是呢,同学么看上面的代码,是否有发现存在什么样的问题呢?
在上面的几段代码设计中,主要存在以下问题:
- 构造函数太复杂
- 可扩展性和灵活性相对较小
(3)轮播组件重构:插件化
上面这段代码明显是还不够好的,那如果是让你来重构这个轮播图组件,你又会怎么做呢?
现在,我们首先来对这个组件进行解耦。所谓解耦,就是:
- 将控制元素抽取成插件;
- 插件与组件之间通过依赖注入的方式来立联系。
如下图所示:
从上图中我们可以知道,将向左向右滚动,以及底下的点击切换按钮,这三个控制元素给抽取出来形成插件。
抽离后的三个插件分别进行封装,封装结果如下:
class Slider{
constructor(id, cycle = 3000){
this.container = document.getElementById(id);
this.items = this.container.querySelectorAll('.slider-list\_\_item, .slider-list\_\_item--selected');
this.cycle = cycle;
}
registerPlugins(...plugins){
plugins.forEach(plugin => plugin(this));
}
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';
}
const detail = {index: idx}
const event = new CustomEvent('slide', {bubbles:true, detail})
this.container.dispatchEvent(event)
}
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);
}
addEventListener(type, handler){
this.container.addEventListener(type, handler)
}
start(){
this.stop();
this._timer = setInterval(()=>this.slideNext(), this.cycle);
}
stop(){
clearInterval(this._timer);
}
}
// 封装控制器函数
function pluginController(slider){
const controller = slider.container.querySelector('.slide-list\_\_control');
if(controller){
const buttons = controller.querySelectorAll('.slide-list\_\_control-buttons, .slide-list\_\_control-buttons--selected');
controller.addEventListener('mouseover', evt=>{
const idx = Array.from(buttons).indexOf(evt.target);
if(idx >= 0){
slider.slideTo(idx);
slider.stop();
}
});
controller.addEventListener('mouseout', evt=>{
slider.start();
});
slider.addEventListener('slide', evt => {
const idx = evt.detail.index
const selected = controller.querySelector('.slide-list\_\_control-buttons--selected');
if(selected) selected.className = 'slide-list\_\_control-buttons';
buttons[idx].className = 'slide-list\_\_control-buttons--selected';
});
}
}
// 封装左滑函数
function pluginPrevious(slider){
const previous = slider.container.querySelector('.slide-list\_\_previous');
if(previous){
previous.addEventListener('click', evt => {
slider.stop();
slider.slidePrevious();
slider.start();
evt.preventDefault();
});
}
}
// 封装右滑函数
function pluginNext(slider){
const next = slider.container.querySelector('.slide-list\_\_next');
if(next){
next.addEventListener('click', evt => {
slider.stop();
slider.slideNext();
slider.start();
evt.preventDefault();
});
}
}
const slider = new Slider('my-slider');
slider.registerPlugins(pluginController, pluginPrevious, pluginNext);
slider.start();
以上代码在线网址👉轮播组件解耦第一步
(4)轮播组件重构:模板化
上面我们初步将控制元素进行插件化。细心的小伙伴可能已经发现,上面的图片数据,是固定的,我们如果想要滚动四张,那就得四个 <li>
元素,那如果这个时候是一百张呢,我们也要去写100个 <li>
来进行控制吗?
答案肯定是否定的。因此,我们继续解耦操作,通过将 HTML
进行模板化,使其更容易扩展。如下图所示:
我们通过将不固定数量的内容以动态的方式进行绑定,最终使该组件的扩展性更强。附上代码:
HTML
代码:
<div id="my-slider" class="slider-list"></div>
CSS
代码:
#my-slider{
position: relative;
width: 790px;
height: 340px;
}
.slider-list ul{
list-style-type:none;
position: relative;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.slider-list\_\_item,
.slider-list\_\_item--selected{
position: absolute;
transition: opacity 1s;
opacity: 0;
text-align: center;
}
.slider-list\_\_item--selected{
transition: opacity 1s;
opacity: 1;
}
.slide-list\_\_control{
position: relative;
display: table;
background-color: rgba(255, 255, 255, 0.5);
padding: 5px;
border-radius: 12px;
bottom: 30px;
margin: auto;
}
.slide-list\_\_next,
.slide-list\_\_previous{
display: inline-block;
position: absolute;
top: 50%;
margin-top: -25px;
width: 30px;
height:50px;
text-align: center;
font-size: 24px;
line-height: 50px;
overflow: hidden;
border: none;
background: transparent;
color: white;
background: rgba(0,0,0,0.2);
cursor: pointer;
opacity: 0;
transition: opacity .5s;
}
.slide-list\_\_previous {
left: 0;
}
.slide-list\_\_next {
right: 0;
}
#my-slider:hover .slide-list\_\_previous {
opacity: 1;
}
#my-slider:hover .slide-list\_\_next {
opacity: 1;
}
.slide-list\_\_previous:after {
content: '<';
}
.slide-list\_\_next:after {
content: '>';
}
.slide-list\_\_control-buttons,
.slide-list\_\_control-buttons--selected{
display: inline-block;
width: 15px;
height: 15px;
border-radius: 50%;
margin: 0 5px;
background-color: white;
cursor: pointer;
}
.slide-list\_\_control-buttons--selected {
background-color: red;
}
JS
代码:
class Slider{
constructor(id, opts = {images:[], cycle: 3000}){
this.container = document.getElementById(id);
this.options = opts;
this.container.innerHTML = this.render();
this.items = this.container.querySelectorAll('.slider-list\_\_item, .slider-list\_\_item--selected');
this.cycle = opts.cycle || 3000;
this.slideTo(0);
}
render(){
const images = this.options.images;
const content = images.map(image => `
<li class="slider-list\_\_item">
<img src="${image}"/>
</li>
`.trim());
return `<ul>${content.join('')}</ul>`;
}
registerPlugins(...plugins){
plugins.forEach(plugin => {
const pluginContainer = document.createElement('div');
pluginContainer.className = '.slider-list\_\_plugin';
pluginContainer.innerHTML = plugin.render(this.options.images);
this.container.appendChild(pluginContainer);
plugin.action(this);
});
}
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';
}
let item = this.items[idx];
if(item){
item.className = 'slider-list\_\_item--selected';
}
const detail = {index: idx}
const event = new CustomEvent('slide', {bubbles:true, detail})
this.container.dispatchEvent(event)
}
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);
}
addEventListener(type, handler){
this.container.addEventListener(type, handler);
}
start(){
this.stop();
this._timer = setInterval(()=>this.slideNext(), this.cycle);
}
stop(){
clearInterval(this._timer);
}
}
const pluginController = {
render(images){
return `
<div class="slide-list\_\_control">
${images.map((image, i) => `
<span class="slide-list\_\_control-buttons${i===0?'--selected':''}"></span>
`).join('')}
</div>
`.trim();
},
action(slider){
const controller = slider.container.querySelector('.slide-list\_\_control');
if(controller){
const buttons = controller.querySelectorAll('.slide-list\_\_control-buttons, .slide-list\_\_control-buttons--selected');
controller.addEventListener('mouseover', evt => {
const idx = Array.from(buttons).indexOf(evt.target);
if(idx >= 0){
slider.slideTo(idx);
slider.stop();
}
});
controller.addEventListener('mouseout', evt => {
slider.start();
});
slider.addEventListener('slide', evt => {
const idx = evt.detail.index
const selected = controller.querySelector('.slide-list\_\_control-buttons--selected');
if(selected) selected.className = 'slide-list\_\_control-buttons';
buttons[idx].className = 'slide-list\_\_control-buttons--selected';
});
}
}
};
const pluginPrevious = {
render(){
return `<a class="slide-list\_\_previous"></a>`;
},
action(slider){
const previous = slider.container.querySelector('.slide-list\_\_previous');
if(previous){
previous.addEventListener('click', evt => {
slider.stop();
slider.slidePrevious();
slider.start();
evt.preventDefault();
});
}
}
};
const pluginNext = {
render(){
return `<a class="slide-list\_\_next"></a>`;
},
action(slider){
const previous = slider.container.querySelector('.slide-list\_\_next');
if(previous){
previous.addEventListener('click', evt => {
slider.stop();
slider.slideNext();
slider.start();
evt.preventDefault();
});
}
}
};
const slider = new Slider('my-slider', {images: ['https://p5.ssl.qhimg.com/t0119c74624763dd070.png',
'https://p4.ssl.qhimg.com/t01adbe3351db853eb3.jpg',
'https://p2.ssl.qhimg.com/t01645cd5ba0c3b60cb.jpg',
'https://p4.ssl.qhimg.com/t01331ac159b58f5478.jpg'], cycle:3000});
slider.registerPlugins(pluginController, pluginPrevious, pluginNext);
slider.start();
通过对数据内容的抽离,这样组件的扩展性是不是就更加友好了呢。
以上代码在线网址👉轮播组件解耦第二步
(5)轮播组件重构:组件框架
最后,我们来对整个组件的框架进行抽象。所谓抽象,即将通用的组件模型给抽象出来。如下图所示:
下面附上 JS
代码:
class Component{
constructor(id, opts = {name, data:[]}){
this.container = document.getElementById(id);
this.options = opts;
this.container.innerHTML = this.render(opts.data);
}
registerPlugins(...plugins){
plugins.forEach(plugin => {
const pluginContainer = document.createElement('div');
pluginContainer.className = `.${name}\_\_plugin`;
pluginContainer.innerHTML = plugin.render(this.options.data);
this.container.appendChild(pluginContainer);
plugin.action(this);
});
}
render(data) {
/\* abstract \*/
return ''
}
}
class Slider extends Component{
constructor(id, opts = {name: 'slider-list', data:[], cycle: 3000}){
super(id, opts);
this.items = this.container.querySelectorAll('.slider-list\_\_item, .slider-list\_\_item--selected');
文末有福利领取哦~
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
👉**一、Python所有方向的学习路线**
Python所有方向的技术点做的整理,形成各个领域的知识点汇总,它的用处就在于,你可以按照上面的知识点去找对应的学习资源,保证自己学得较为全面。![img](https://img-blog.csdnimg.cn/c67c0f87cf9343879a1278dfb067f802.png)
👉**二、Python必备开发工具**
![img](https://img-blog.csdnimg.cn/757ca3f717df4825b7d90a11cad93bc7.png)
👉**三、Python视频合集**
观看零基础学习视频,看视频学习是最快捷也是最有效果的方式,跟着视频中老师的思路,从基础到深入,还是很容易入门的。
![img](https://img-blog.csdnimg.cn/31066dd7f1d245159f21623d9efafa68.png)
👉 **四、实战案例**
光学理论是没用的,要学会跟着一起敲,要动手实操,才能将自己的所学运用到实际当中去,这时候可以搞点实战案例来学习。**(文末领读者福利)**
![img](https://img-blog.csdnimg.cn/e78afb3dcb8e4da3bae5b6ffb9c07ec7.png)
👉**五、Python练习题**
检查学习结果。
![img](https://img-blog.csdnimg.cn/280da06969e54cf180f4904270636b8e.png)
👉**六、面试资料**
我们学习Python必然是为了找到高薪的工作,下面这些面试题是来自阿里、腾讯、字节等一线互联网大厂最新的面试资料,并且有阿里大佬给出了权威的解答,刷完这一套面试资料相信大家都能找到满意的工作。
![img](https://img-blog.csdnimg.cn/a9d7c35e6919437a988883d84dcc5e58.png)
![img](https://img-blog.csdnimg.cn/5db8141418d544d3a8e9da4805b1a3f9.png)
👉因篇幅有限,仅展示部分资料,这份完整版的Python全套学习资料已经上传
**网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。**
**[需要这份系统化学习资料的朋友,可以戳这里无偿获取](https://bbs.csdn.net/topics/618317507)**
**一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!**