我们可能已经用过很多JS插件，比如著名的轮播图插件Swiper.js，滚动条插件iScroll.js等等，用起来非常方便，大大提高了我们的工作效率。那么它们基本实现原理是怎样的呢？我们又该如何DIY一个可以复用的JS插件呢？
接下来，我将以图片无缝循环轮播为例，手把手教你封装一个方便复用的原生JS插件。
开始之前，我们先看看实现后的具体效果吧 → 图片无缝循环轮播 。
一、面向过程编程实现
1. 实现原理
如上图所示，后三个 li 元素为复制元素，container 保持不动，ul 向左移动，当状态到达②时瞬间切回①状态，这样整个过程看起来就像一直向左移动一样。
2. 实现代码
/*CSS*/
html{ background-color: #00b0e4;}
body,ul,li{ margin: 0; padding: 0;}
ul li{ list-style: none;}
.container{ height: 300px; margin: 100px auto; padding: 60px 0; overflow: hidden;}
.container ul{ display: -webkit-flex; display: flex; height: 100%;}
.container ul li{ -webkit-flex-shrink: 0; flex-shrink: 0; position: relative; z-index: 0; width: 400px; height: 100%;
padding: 5px; box-sizing: border-box; -webkit-transition: all .6s; transition: all .6s;}
.container ul li:hover{ z-index: 1; -webkit-transform: scale(1.2); transform: scale(1.2); }
.container ul li img{ width: 100%; height: 100%; object-fit: cover; box-sizing: border-box;
border: 10px solid #fff; box-shadow: 0 0 5px #333;}
布局方式我使用的是flexbox布局，可以轻松实现图片横排，更多相关内容请戳 → 快速理解Flexbox布局。
图片样式中我用到了object-fit: cover，这个属性可以使不同比例的图片在宽高固定的情况下不被压缩变形，更多相关内容请戳 → 图片在固定宽高盒子中的显示问题
<!--HTML-->
<div class="container">
<ul class="wrapper">
<li class="slide"><img src="./imgs/1.jpg" alt=""></li>
<li class="slide"><img src="./imgs/2.jpg" alt=""></li>
<li class="slide"><img src="./imgs/3.jpg" alt=""></li>
<li class="slide"><img src="./imgs/4.jpg" alt=""></li>
</ul>
</div>
// Javascript
window.onload = function () {
var oContainer = document.querySelector('.container'),
oWrapper = oContainer.querySelector('ul'),
oSlide = oWrapper.querySelectorAll('li');
var wrapperW = oSlide[0].offsetWidth * oSlide.length;
oWrapper.style.width = wrapperW * 2 + 'px';
// 复制所有图片以实现图片无缝衔接
oWrapper.innerHTML += oWrapper.innerHTML;
/*此处是为了防止所有图片总宽度小于最外层盒子的宽度，
这时需要将最外层盒子宽度设置为图片总宽度*/
if(wrapperW < oContainer.offsetWidth){
oContainer.style.width = wrapperW + 'px';
}
var x = 0, timer = null;
// 图片自动轮播函数
var slideMove = function(){
timer = setInterval(function () {
x++;
if(x > wrapperW){
x = 0;
}
// 图片左移
oWrapper.style.transform = 'translate('+ (-x) +'px)';
},10);
};
// 图片自动无限轮播
slideMove();
// 鼠标移入时清除定时器，图片停止轮播
oContainer.addEventListener('mouseover',function () {
clearInterval(timer);
});
// 鼠标移出时图片继续轮播
oContainer.addEventListener('mouseout',function () {
slideMove();
});
};
二、面向对象编程实现
1. 基本改造步骤
如何将面向过程改造成面向对象呢？
一般有以下几个基本步骤：
① 创建一个构造函数
② 变量改为属性
③ 函数改为原型方法（有些实现某块具体功能的代码也可抽离成原型方法）
④ 更正某些不正确的this指向
2. 实现代码
// Javascript
/* 创建一个构造函数 */
function FreeSlider(selector,speed) {
/* 变量改为属性 */
this.oContainer = document.querySelector(selector);
this.oWrapper = this.oContainer.querySelector('ul');
this.oSlide = this.oWrapper.querySelectorAll('li');
/* 当不传入轮播速度时，速度默认为100 */
this.speed = speed || 100;
this.containerW = this.oContainer.offsetWidth;
this.wrapperW = this.oSlide[0].offsetWidth * this.oSlide.length;
this.x = 0;
this.timer = null;
this.init();
}
/* 构造函数的原型对象 */
FreeSlider.prototype = {
constructor: FreeSlider,
/* 功能抽离，此处实现初始化 */
init: function(){
this.oWrapper.style.width = this.wrapperW * 2 + 'px';
this.oWrapper.innerHTML += this.oWrapper.innerHTML;
if(this.wrapperW < this.containerW){
this.oContainer.style.width = this.wrapperW + 'px';
}
this.slideMove();
},
/* 图片自动无限轮播 */
slideMove: function(){
/* 此处需要注意this的指向，
在setInterval回调函数中的this指向为window */
var that = this;
this.timer = setInterval(function () {
that.x++;
if(that.x > that.wrapperW){
that.x = 0;
}
that.oWrapper.style.transform = 'translate('+ (-that.x) +'px)';
},this.containerW / this.speed); // 将速度转化成定时器时间
},
/* 图片停止轮播 */
stopSlideMove: function () {
clearInterval(this.timer);
}
};
window.onload = function(){
var oContainer = document.querySelector('.container');
// 新建图片轮播对象
var mySlider = new FreeSlider('.container',300);
// 鼠标移入时清除定时器，图片停止轮播
oContainer.addEventListener('mouseover',function () {
mySlider.stopSlideMove();
});
// 鼠标移出时图片继续轮播
oContainer.addEventListener('mouseout',function () {
mySlider.slideMove();
});
}
本文重点总结
① JS插件其实没有你想象的那么难，基本原理就是面向对象
② 将需要可灵活配置的部分作为构造函数的参数传入，插件中的各个功能可作为原型方法提供给外部调用
