您现在的位置是:首页 > 文章详情

手把手教你封装JavaScript插件

日期:2018-08-28点击:355

我们可能已经用过很多JS插件,比如著名的轮播图插件Swiper.js,滚动条插件iScroll.js等等,用起来非常方便,大大提高了我们的工作效率。那么它们基本实现原理是怎样的呢?我们又该如何DIY一个可以复用的JS插件呢?

接下来,我将以图片无缝循环轮播为例,手把手教你封装一个方便复用的原生JS插件。

开始之前,我们先看看实现后的具体效果吧 → 图片无缝循环轮播

一、面向过程编程实现

1. 实现原理

图片无缝循环轮播

如上图所示,后三个 li 元素为复制元素,container 保持不动,ul 向左移动,当状态到达②时瞬间切回①状态,这样整个过程看起来就像一直向左移动一样。

2. 实现代码

/*CSS*/ html{ background-color: #00b0e4;} body,ul,li{ margin: 0; padding: 0;} ul li{ list-style: none;} .container{ height: 300px; margin: 100px auto; padding: 60px 0; overflow: hidden;} .container ul{ display: -webkit-flex; display: flex; height: 100%;} .container ul li{ -webkit-flex-shrink: 0; flex-shrink: 0; position: relative; z-index: 0; width: 400px; height: 100%; padding: 5px; box-sizing: border-box; -webkit-transition: all .6s; transition: all .6s;} .container ul li:hover{ z-index: 1; -webkit-transform: scale(1.2); transform: scale(1.2); } .container ul li img{ width: 100%; height: 100%; object-fit: cover; box-sizing: border-box; border: 10px solid #fff; box-shadow: 0 0 5px #333;} 

布局方式我使用的是flexbox布局,可以轻松实现图片横排,更多相关内容请戳 → 快速理解Flexbox布局

图片样式中我用到了object-fit: cover,这个属性可以使不同比例的图片在宽高固定的情况下不被压缩变形,更多相关内容请戳 → 图片在固定宽高盒子中的显示问题

<!--HTML--> <div class="container"> <ul class="wrapper"> <li class="slide"><img src="./imgs/1.jpg" alt=""></li> <li class="slide"><img src="./imgs/2.jpg" alt=""></li> <li class="slide"><img src="./imgs/3.jpg" alt=""></li> <li class="slide"><img src="./imgs/4.jpg" alt=""></li> </ul> </div> 
// Javascript window.onload = function () { var oContainer = document.querySelector('.container'), oWrapper = oContainer.querySelector('ul'), oSlide = oWrapper.querySelectorAll('li'); var wrapperW = oSlide[0].offsetWidth * oSlide.length; oWrapper.style.width = wrapperW * 2 + 'px'; // 复制所有图片以实现图片无缝衔接 oWrapper.innerHTML += oWrapper.innerHTML; /*此处是为了防止所有图片总宽度小于最外层盒子的宽度, 这时需要将最外层盒子宽度设置为图片总宽度*/ if(wrapperW < oContainer.offsetWidth){ oContainer.style.width = wrapperW + 'px'; } var x = 0, timer = null; // 图片自动轮播函数 var slideMove = function(){ timer = setInterval(function () { x++; if(x > wrapperW){ x = 0; } // 图片左移 oWrapper.style.transform = 'translate('+ (-x) +'px)'; },10); }; // 图片自动无限轮播 slideMove(); // 鼠标移入时清除定时器,图片停止轮播 oContainer.addEventListener('mouseover',function () { clearInterval(timer); }); // 鼠标移出时图片继续轮播 oContainer.addEventListener('mouseout',function () { slideMove(); }); }; 

二、面向对象编程实现

1. 基本改造步骤

如何将面向过程改造成面向对象呢?

一般有以下几个基本步骤:

① 创建一个构造函数
② 变量改为属性
③ 函数改为原型方法(有些实现某块具体功能的代码也可抽离成原型方法)
④ 更正某些不正确的this指向

2. 实现代码

// Javascript /* 创建一个构造函数 */ function FreeSlider(selector,speed) { /* 变量改为属性 */ this.oContainer = document.querySelector(selector); this.oWrapper = this.oContainer.querySelector('ul'); this.oSlide = this.oWrapper.querySelectorAll('li'); /* 当不传入轮播速度时,速度默认为100 */ this.speed = speed || 100; this.containerW = this.oContainer.offsetWidth; this.wrapperW = this.oSlide[0].offsetWidth * this.oSlide.length; this.x = 0; this.timer = null; this.init(); } /* 构造函数的原型对象 */ FreeSlider.prototype = { constructor: FreeSlider, /* 功能抽离,此处实现初始化 */ init: function(){ this.oWrapper.style.width = this.wrapperW * 2 + 'px'; this.oWrapper.innerHTML += this.oWrapper.innerHTML; if(this.wrapperW < this.containerW){ this.oContainer.style.width = this.wrapperW + 'px'; } this.slideMove(); }, /* 图片自动无限轮播 */ slideMove: function(){ /* 此处需要注意this的指向, 在setInterval回调函数中的this指向为window */ var that = this; this.timer = setInterval(function () { that.x++; if(that.x > that.wrapperW){ that.x = 0; } that.oWrapper.style.transform = 'translate('+ (-that.x) +'px)'; },this.containerW / this.speed); // 将速度转化成定时器时间 }, /* 图片停止轮播 */ stopSlideMove: function () { clearInterval(this.timer); } }; window.onload = function(){ var oContainer = document.querySelector('.container'); // 新建图片轮播对象 var mySlider = new FreeSlider('.container',300); // 鼠标移入时清除定时器,图片停止轮播 oContainer.addEventListener('mouseover',function () { mySlider.stopSlideMove(); }); // 鼠标移出时图片继续轮播 oContainer.addEventListener('mouseout',function () { mySlider.slideMove(); }); } 

本文重点总结

① JS插件其实没有你想象的那么难,基本原理就是面向对象
② 将需要可灵活配置的部分作为构造函数的参数传入,插件中的各个功能可作为原型方法提供给外部调用

原文链接:https://yq.aliyun.com/articles/635692
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章