案例——封装一个轮播图插件

说起插件，可能很多人搞不清楚插件和类库、组件、框架的区别，在这里，我先来简单的聊一聊它们之间的区别和联系

类库

提供一些真实项目中常用的方法，任何项目都可以把类库导入进来，调取里面的方法实现自己需要的业务逻辑，常见的有jQuery、ZEPTO

插件

具备一定的业务功能，例如：我们可以封装轮播图插件、选项卡插件、模态框插件等（插件规定了当前这个功能的样式结构，把实现功能的JS进行封装，以后想实现这个功能直接导入插件即可）常见的有swiper / iscroll / jquery-dialog / jquery-datepicker / ECharts

组件

把结构和、CSS、JS全部都封装好了，我们想实现一个功能直接导入进来即可（偶尔需要我们修改）常见的有bootstrap等

框架

具备一定的编程思想，要求我们按照框架的思想开发，一般框架中提供了常用的类库方法，提供了强大对的功能插件，有的也提供了强大的UI组件，常见的有React (React native)/ Vue / Augular

今天，我们的任务就是封装一个轮播图插件，之前我们已经用原生JS实现了轮播图功能，那么如何将其封装为一个插件呢？

源码下载地址：轮播图+轮播图插件的实现.zip

首先来看一下效果

• 第一步，我们需要设置配置项（要尽可能多的支持配置项，让用户有更多选择）我设计的只是支持了一点点

                let {
                    ele,
                    url,
                    isArrow = true,
                    isFocus = true,
                    isAuto = true,
                    defaultIndex = 0,
                    interval = 3000,
                    speed = 200,
                    moveEnd
                } = options;

• 第二步，将所有配置项和需要用到的元素挂载到实例上，方便调取使用

               this.ele = ele;
                this.url = url;
                this.isArrow = isArrow;
                this.isFocus = isFocus;
                this.isAuto = isAuto;
                this.defaultIndex = defaultIndex;
                this.interval = interval;
                this.speed = speed;
                this.moveEnd = moveEnd;
                this.container = document.querySelector(ele);
                this.wrapper = null;
                this.focus = null;
                this.arrowLeft = null;
                this.arrowRight = null;
                this.slideList = null;
                this.focusList = null;
                this.stepIndex = 0; //记录当前展示快的索引
                this.autoTimer = null; //自动轮播的定时器

• 第三步，提供Banner的主入口init，在init中规划方法的执行顺序

init() {
                let promise = this.queryData();
                promise.then(() => {
                    this.bindHTML();
                }).then(() => {
                    if (this.isAuto) {
                        //这里的this是window，我们需要让其为当前实例(用call改变this指向，或者用箭头函数让其上下文的this)
                        // this.autoTimer = setInterval(this.autoMove, this.interval);
                        this.autoTimer = setInterval(() => {
                            this.autoMove();
                        }, this.interval);
                    }
                }).then(() => {
                    this.handleContainer();
                    if (this.isFocus) {
                        this.handleFocus();
                    }
                    if (this.isArrow) {
                        this.handleArrow();
                    }
                })
            }

• 第四步，实现数据获取，数据绑定，自动轮播，焦点图片切换，点击按钮图片切换等方法;具体参考我之前一次写的原生JS实现轮播图案例
• 第五步将Banner插件扩展到window上

    window.Banner = Banner;

• 第六步，调取使用

    <section class="container" id="container3">
    </section>
    <section class="container" id="container">
    </section>
    <section class="container" id="container2">
    </section>
    <script src="js/utils.js"></script>
    <script src="js/animate.js"></script>
    <!-- <script src="js/banner.js"></script> -->
    <script src="js/banner-plugin.js"></script>
    <script>
        new Banner({
            ele: '#container',
            url: 'json/banner.json',
            isArrow: false
        });
        new Banner({
            ele: '#container2',
            url: 'json/banner2.json',
            interval: 500,
            speed: 300,
            isFocus: false
        });
        new Banner({
            ele: '#container3',
            url: 'json/banner.json',
            interval: 2000,
            speed: 1000,
        })