我们可能已经用过很多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插件其实没有你想象的那么难，基本原理就是面向对象
② 将需要可灵活配置的部分作为构造函数的参数传入，插件中的各个功能可作为原型方法提供给外部调用