說(shuō)起插件，可能很多人搞不清楚插件和類庫(kù)、組件、框架的區(qū)別，在這里，我先來(lái)簡(jiǎn)單的聊一聊它們之間的區(qū)別和聯(lián)系

類庫(kù)

提供一些真實(shí)項(xiàng)目中常用的方法，任何項(xiàng)目都可以把類庫(kù)導(dǎo)入進(jìn)來(lái)，調(diào)取里面的方法實(shí)現(xiàn)自己需要的業(yè)務(wù)邏輯，常見的有jQuery、ZEPTO

插件

具備一定的業(yè)務(wù)功能，例如：我們可以封裝輪播圖插件、選項(xiàng)卡插件、模態(tài)框插件等（插件規(guī)定了當(dāng)前這個(gè)功能的樣式結(jié)構(gòu)，把實(shí)現(xiàn)功能的JS進(jìn)行封裝，以后想實(shí)現(xiàn)這個(gè)功能直接導(dǎo)入插件即可）常見的有swiper / iscroll / jquery-dialog / jquery-datepicker / ECharts

組件

把結(jié)構(gòu)和、CSS、JS全部都封裝好了，我們想實(shí)現(xiàn)一個(gè)功能直接導(dǎo)入進(jìn)來(lái)即可（偶爾需要我們修改）常見的有bootstrap等

框架

具備一定的編程思想，要求我們按照框架的思想開發(fā)，一般框架中提供了常用的類庫(kù)方法，提供了強(qiáng)大對(duì)的功能插件，有的也提供了強(qiáng)大的UI組件，常見的有React (React native)/ Vue / Augular

今天，我們的任務(wù)就是封裝一個(gè)輪播圖插件，之前我們已經(jīng)用原生JS實(shí)現(xiàn)了輪播圖功能，那么如何將其封裝為一個(gè)插件呢？

源碼下載地址：輪播圖+輪播圖插件的實(shí)現(xiàn).zip

首先來(lái)看一下效果

• 第一步，我們需要設(shè)置配置項(xiàng)（要盡可能多的支持配置項(xiàng)，讓用戶有更多選擇）我設(shè)計(jì)的只是支持了一點(diǎn)點(diǎn)

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

• 第二步，將所有配置項(xiàng)和需要用到的元素掛載到實(shí)例上，方便調(diào)取使用

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; //記錄當(dāng)前展示快的索引this.autoTimer = null; //自動(dòng)輪播的定時(shí)器

• 第三步，提供Banner的主入口init，在init中規(guī)劃方法的執(zhí)行順序

init() {let promise = this.queryData();promise.then(() => {this.bindHTML();}).then(() => {if (this.isAuto) {//這里的this是window，我們需要讓其為當(dāng)前實(shí)例(用call改變this指向，或者用箭頭函數(shù)讓其上下文的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();}})}

• 第四步，實(shí)現(xiàn)數(shù)據(jù)獲取，數(shù)據(jù)綁定，自動(dòng)輪播，焦點(diǎn)圖片切換，點(diǎn)擊按鈕圖片切換等方法;具體參考我之前一次寫的原生JS實(shí)現(xiàn)輪播圖案例
• 第五步將Banner插件擴(kuò)展到window上

window.Banner = Banner;

• 第六步，調(diào)取使用

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

總結(jié)

以上是生活随笔為你收集整理的案例——封装一个轮播图插件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。