生活随笔
收集整理的這篇文章主要介紹了
案例——封装一个轮播图插件
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
說起插件，可能很多人搞不清楚插件和類庫、組件、框架的區(qū)別，在這里，我先來簡單的聊一聊它們之間的區(qū)別和聯(lián)系
類庫
提供一些真實(shí)項(xiàng)目中常用的方法，任何項(xiàng)目都可以把類庫導(dǎo)入進(jìn)來，調(diào)取里面的方法實(shí)現(xiàn)自己需要的業(yè)務(wù)邏輯，常見的有jQuery、ZEPTO
插件
具備一定的業(yè)務(wù)功能，例如：我們可以封裝輪播圖插件、選項(xiàng)卡插件、模態(tài)框插件等（插件規(guī)定了當(dāng)前這個功能的樣式結(jié)構(gòu)，把實(shí)現(xiàn)功能的JS進(jìn)行封裝，以后想實(shí)現(xiàn)這個功能直接導(dǎo)入插件即可）常見的有swiper / iscroll / jquery-dialog / jquery-datepicker / ECharts
組件
把結(jié)構(gòu)和、CSS、JS全部都封裝好了，我們想實(shí)現(xiàn)一個功能直接導(dǎo)入進(jìn)來即可（偶爾需要我們修改）常見的有bootstrap等
框架
具備一定的編程思想，要求我們按照框架的思想開發(fā)，一般框架中提供了常用的類庫方法，提供了強(qiáng)大對的功能插件，有的也提供了強(qiáng)大的UI組件，常見的有React (React native)/ Vue / Augular
今天，我們的任務(wù)就是封裝一個輪播圖插件，之前我們已經(jīng)用原生JS實(shí)現(xiàn)了輪播圖功能，那么如何將其封裝為一個插件呢？
源碼下載地址：輪播圖+輪播圖插件的實(shí)現(xiàn).zip
首先來看一下效果
- 第一步，我們需要設(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; this.autoTimer
= null;
- 第三步，提供Banner的主入口init，在init中規(guī)劃方法的執(zhí)行順序
init() {let promise
= this.queryData();promise
.then(() => {this.bindHTML();}).then(() => {if (this.isAuto
) {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ù)綁定，自動輪播，焦點(diǎn)圖片切換，點(diǎn)擊按鈕圖片切換等方法;具體參考我之前一次寫的原生JS實(shí)現(xiàn)輪播圖案例
- 第五步將Banner插件擴(kuò)展到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-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é)
以上是生活随笔為你收集整理的案例——封装一个轮播图插件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
