本文的主旨在于如何设计复杂UI组件。
本文以使用JavaScript实现一个轮播图为栗子。由最基础的实现,到后面的优化都会介绍。
slider包括三个部分:放置图片的主体(ul),控制小圆点及向前向后的按钮。效果图如下:
我们要做一个轮播(slider)组件,应该有两个步骤
- 结构设计
- 列表结构(图片是一个列表型结构,所以主体用<ul>)
- css 绝对定位(使用css绝对定位将图片重叠在同一个位置)
- 轮播图切换的状态使用修饰符,命名规范使用BEM(Block_Element-modifier)
- 轮播图的切换动画使用 css transition
- API设计,Slider类应该有以下的方法
- getSelectedItem() 获取当前轮播图
- getSelectedItemIndex() 获取当前位置
- slideTo() 直接到某一张图
- slideNext() 向前一张图
- slidePrevious() 向后一张图
demo1:经过以上的思考及设计实现了一个基础版的Slider
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mySlider</title>
<link rel="stylesheet" type="text/css" href="index.css"/>
<script src="./index.js" type="text/javascript"></script>
</head>
<body>
<div id="my-slider" class="slider-list">
<ul>
<li class="slider-list__item--selected"><img src="./img/1 (1).jpg"/></li>
<li class="slider-list__item"><img src="./img/1 (2).jpg"/></li>
<li class="slider-list__item"><img src="./img/1 (3).jpg"/></li>
<li class="slider-list__item"><img src="./img/1 (4).jpg"/></li>
</ul>
<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>
</div>
</body>
</html>
index.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;
}
li img{
width: 790px;
height: 340px;
}
.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;
}
index.js
window.onload=function(){
// 设计api
// getSelectedItem()
// getSelectedItemIndex()
// slideTo()
// slidePreivous()
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;
const controller = this.container.querySelector('.slide-list__control');
if(controller){
const buttons = controller.querySelectorAll(".slide-list__control-buttons, .slide-list__control-buttons--selected");
controller.addEventListener("mouseover",evt=>{
// 比较是哪一个btn有mouseover的动作 获取btn的idx
const idx = Array.from(buttons).indexOf(evt.target);
if(idx >= 0) {
this.slideTo(idx);
this.stop();
}
});
controller.addEventListener("mouseout", evt=>{
this.start();
});
// 自定义slide事件,保持btn与图片的index同步
this.container.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 previous = this.container.querySelector(".slide-list__previous");
if(previous){
previous.addEventListener('click',evt=>{
this.stop();
this.slidePrevious();
this.start();
evt.preventDefault()
})
}
const next = this.container.querySelector(".slide-list__next");
console.log("next", next)
if(next){
next.addEventListener('click',evt=>{
console.log("ssddsds")
this.stop();
this.slideNext();
this.start();
evt.preventDefault()
})
}
}
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}
// 自定义slide事件
const event = new CustomEvent('slide', {bubbles:true, detail})
this.container.dispatchEvent(event)
}
slideNext(){
let currentIdx = this.getSelectedItemIndex();
let nextIdx = (currentIdx + 1) % this.items.length;
this.slideTo(nextIdx);
}
slidePrevious(){
let currentIdx = this.getSelectedItemIndex();
let previousIdx = (this.items.length + currentIdx - 1) % this.items.length;
this.slideTo(previousIdx);
}
start(){
this.stop();
this._timer = setInterval(()=>this.slideNext(), this.cycle);
}
stop() {
clearInterval(this._timer);
}
}
const slider = new Slider('my-slider');
slider.start()
}
demo2: 这个版本主要是了解插件机制,注入依赖
html及css都没有变化,主要是js部分有变化。通过依赖注入的方式,降低耦合度。UI框架常用。
demo3:改进插件/模板化
当在demo2中只需要轮播的主体的时候,html中的结构依然在,所以想要修改这个这个插件只有主体的时候,还需要修改html
在demo3的版本中我们把html结构也放到js中。
index.html
类似下图,slider及插件都多一个render方法,渲染其对应的html结构
这样 我们就做到了数据驱动组件
demo4: 写一个抽象类作为组件的基类,初始化组件。它有注入插件的方法及抽象的render方法
最后的版本
window.onload=function(){
// 设计api
// getSelectedItem()
// getSelectedItemIndex()
// slideTo()
// slidePreivous()
//模块化
//将结构与js放在一起
//数据驱动 使用者只关心数据
//行为驱动
//也可将css封装起来
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) {
// 抽象方法
return ''
}
}
class Slider extends Component{
constructor(id, opts = {name:'slider-list',images:[], cycle: 3000}){
super(id, opts);
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 => {
// 用一个div来装插件
const pluginContainer = document.createElement('div');
pluginContainer.className = '.slider-list__plugin';
pluginContainer.innerHTML = plugin.render(this.options.images);
// 把插件放在container里的最后一个孩子
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';
}
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);
}
}
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:[
'./img/1 (1).jpg',
'./img/1 (2).jpg',
'./img/1 (3).jpg',
'./img/1 (4).jpg',
]});
slider.registerPlugins(pluginController, pluginPrevious, pluginNext);
slider.start();
}
可在github仓库获取demo4版本
git地址:https://github.com/cindyHua901/smallDemo/tree/master/slider