生活随笔
收集整理的這篇文章主要介紹了
案例——封装一个轮播图插件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
說起插件，可能很多人搞不清楚插件和類庫、組件、框架的區別，在這里，我先來簡單的聊一聊它們之間的區別和聯系
類庫
提供一些真實項目中常用的方法，任何項目都可以把類庫導入進來，調取里面的方法實現自己需要的業務邏輯，常見的有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.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-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,})
總結
以上是生活随笔為你收集整理的案例——封装一个轮播图插件的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
