手把手教你封装JavaScript插件

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