手把手教你封装JavaScript插件
我们可能已经用过很多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插件其实没有你想象的那么难,基本原理就是面向对象
② 将需要可灵活配置的部分作为构造函数的参数传入,插件中的各个功能可作为原型方法提供给外部调用
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
开涛十年经验之谈:如何构建自己的Java开发体系
蓦然回首,走上这条路我曾迷茫过一年,希望大家看到这篇尽早走出迷茫区!坚定自己的信念,走自己的路。 路上本没有坑,走的人多了,路就烂了。 在大公司做事情有一个特征,你只需要在工作时间做好公司给你安排的那份工作,你就会做的很好,这也就是说每个人都是一颗螺丝钉。所以,我在一进入大公司后,由于自己经历不够,再加上刚毕业就作为大学班上进入大公司的佼佼者,所以有点飘,不能沉下心来研究技术,所以浪费了一段时间。 后来在和在贝尔实验室(上海)工作的研究生同学的一次交流中,让我严重的意识到,做为程序员除了做好公司安排的工作只是为了自己“活着”,而程序员的“生活”应该是体现在自己对技术的追求和对源码的执着之上。 虽然自己经常和周围的朋友进行程序生涯的交流,唯独这次交流才真正影响了我的程序人生。回想起来,影响程序员明天困局的往往就是一直挂着我们嘴边的小事,那些源码啊,框架啊,实战,造轮子,开源这一切都需要我们实实在在亲力亲为的一行行代码去解决。 今天,就为大家整理一份目前互联网公司Java 后台最主流的技术选型 1.阅读源码 程序员每天都和代码打交道。经过数年的基础教育和职业培训,大部分程序员都会「写」代码...
- 下一篇
为什么我们需要C程序员
再说一个招聘的话题。 大家可能知道,润乾的软件产品主体都是Java写的,几乎没有别的语言。但是,我们在招聘算法程序员时,从来都要求C语言背景,会不会Java反而无所谓,而如果没有C语言功底则免谈。事实上,现在润乾研发部几个做算法的程序员,都是来了公司之后才学习使用Java的。 为什么我们会这么关注C/C++? 润乾是做基础软件的,而编写底层代码的技术逻辑和界面有很大不同。底层代码会被千百次的调用,一个函数哪怕只慢了1个微秒,被重复调用100万次时也会导致秒级的延迟。相对来讲,界面程序就不在意这些,代码再慢也不可能慢过人的操作,这时候的重点就变成用户体验而不是性能了。 想写出高效的代码,就必须深入理解计算机的运行原理,知道CPU、内存是如何工作的。应用程序员一般只关注业务功能的正确性,而一个好的系统级程序则不仅要保证正确性,还会习惯性地脑补出每一句代码被编译器翻译成什么样子了,最后会导致CPU和内存的哪些动作,从而判断出代码的效率。举个例子,new是Java代码中很常见的动作,但系统程序员却会很慎重地使用它,因为它涉及动态内存分配,是个非常复杂的任务,效率很低;但应用程序员则很少关注或了...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
-
Docker使用Oracle官方镜像安装(12C,18C,19C)
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS8编译安装MySQL8.0.19
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果