案例——封裝一個輪播圖外掛

阿新 • • 發佈：2021-02-19

說起外掛，可能很多人搞不清楚外掛和類庫、元件、框架的區別，在這裡，我先來簡單的聊一聊它們之間的區別和聯絡

類庫

提供一些真實專案中常用的方法，任何專案都可以把類庫匯入進來，調取裡面的方法實現自己需要的業務邏輯，常見的有jQuery、ZEPTO

外掛

具備一定的業務功能，例如：我們可以封裝輪播圖外掛、選項卡外掛、模態框外掛等（外掛規定了當前這個功能的樣式結構，把實現功能的JS進行封裝，以後想實現這個功能直接匯入外掛即可）常見的有swiper / iscroll / jquery-dialog / jquery-datepicker / ECharts

元件

把結構和、CSS、JS全部都封裝好了，我們想實現一個功能直接匯入進來即可（偶爾需要我們修改）常見的有bootstrap等

框架

具備一定的程式設計思想，要求我們按照框架的思想開發，一般框架中提供了常用的類庫方法，提供了強大對的功能外掛，有的也提供了強大的UI元件，常見的有React (React native)/ Vue / Augular

今天，我們的任務就是封裝一個輪播圖外掛，之前我們已經用原生JS實現了輪播圖功能，那麼如何將其封裝為一個外掛呢？

首先來看一下效果

在這裡插入圖片描述

第一步，我們需要設定配置項（要儘可能多的支援配置項，讓使用者有更多選擇）我設計的只是支援了一點點

                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,
        })