说起插件,可能很多人搞不清楚插件和类库、组件、框架的区别,在这里,我先来简单的聊一聊它们之间的区别和联系
类库
提供一些真实项目中常用的方法,任何项目都可以把类库导入进来,调取里面的方法实现自己需要的业务逻辑,常见的有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,
})