有关javascript的小玩具——轮播图组件

纯原生js的手工打造，童叟无欺

如今前端业务已经是一个框架横飞的年代，大大小小的公司招聘需求里都明确表明着对框架的熟悉程度。无法否认的是框架毕竟是前辈的劳动结晶，给工作确实带来了极大的便利，但是框架用久了之后，如果深挖框架源码，追根究底还好，能体会框架整体结构的思想，学习精髓。但是如果是刚入门没多久，js基础还没怎么扎牢，就为了找工作而学习如何使用框架的前端小白来说，一直被框架束缚着，很可能就会慢慢对框架产生很强的依赖性，一提到原生js，就是一顿头大（别想了，就是我这种人，滑稽），于是乎，今天想到用原生js去手撸一个轮播图插件，找回最原始的自己，下面开始进入正题。

何为组件

“既然要追求刺激（基础），那就干脆贯彻到底了～”
“你好骚啊。（世贤笑）”
那么，何为组件。组件是……（官方回答和大神回答请自行搜索，在我这是看不到的）
在我看来，组件就好像玩拼图时的一块块儿材料，每一个材料都是独立的，都有他自身的功能，把所有有用的材料拼在一起，也就凑成了一块完整的拼图。那么，既然要保证独立性，以及考虑的可拓展性，那么这个时候面向对象就派上用场了。

功能分析

有好点子，或者有新任务的时候我们脑子里想的第一件事应该是干什么呢？对了，那必须是加班啊，加班啊！（?）。对于加班，我觉得一般人内心都是拒绝的，那么既然加班也许无可避免，那就只好缩短加班的时间了。俗话说得好，磨刀不误砍柴工。有了新的开发需求，咱们首先得分析分析这个任务需要干啥，不能提枪就上，不妥～
那么咱们这个轮播图插件应该有啥呢？先从最基本的考虑，既然是轮播图插件，那么他在哪渲染，何时渲染，应该都不会对其他元素产生影响，所以它的样式应该是保证在其内部才有效。既然要互不影响，那么就要最干净的容器来包裹着轮播图，什么容器是最干净的呢？要说document.createElement()自称第二，怕没有谁敢称第一了。现在有了互不影响的样式、最干净的容器，那么还差什么呢？那就是本体，毕竟有了本体，才叫插件。本体是什么，我们可以理解为对象，那么说到对象，请看下文。

一个最基础的构造函数

现在我们假设它仅仅只需要完成最基本的点击切换下一张图片这个功能，那么我们需要记录下来当前是第几张图片，不妨定义属性为page，如果仅仅是这样，也许还够，我们不该写死这个轮播图组件中轮播着多少图片，所以我们还需要一个装着图片地址的数组imgSrc

funciton Swipper() {
	this.page = 0;		//	记录当前是第几页
	this.imgSrc = [];	//	存放图片地址的数组
}

本体登场

由于咱们初步的想法是做一个功能较为简单的轮播图组件，所以有了构造函数之后咱们就该着手创建干净的容器了

Swipper.prototype.createSwipper = function() {
	// 创建一个干净的容器
	var swipper = document.createElement('div');
}

为了让这个容器有着独立的样式，咱们给他加上一个特有的类名

Swipper.prototype.createSwipper = function() {
	// 创建一个干净的容器
	var swipper = document.createElement('div');
	//	加上一个特有的类名
	swipper.className = 'swipper-box'
}

有了干净的容器，也有了独立的样式，那么接下来就该往里面塞东西了。塞什么呢？反正不是棉花就对了

Swipper.prototype.createSwipper = function() {
	// 创建一个干净的容器
	var swipper = document.createElement('div');
	//	加上一个特有的类名
	swipper.className = 'swipper-box'
	//	往容器里面塞内容
	//	imgSrc有内容的情况下,这里就不做判断了
	this.imgSrc.forEach(function(item) {
		var img = document.createElement('img');
        img.src = item
        swipper.appendChild(img)
	})
}

现在容器也有了，样式也有了，内容也有了，是不是感觉就这么简单的完成了呢？于是我们满怀期待的打开浏览器，发现。。。什么都没有，对的，什么都没有。为什么呢？这不是方法定义了还没有调用吗～，那么我们需要接着定义一个初始化的方法

Swipper.prototype.init = function() {
	//	调用上面的方法
	this.createSwipper();
}

心里想着这回应该好了吧，方法都调用了。于是打开浏览器一看，nice！一片空白，白就对了！我们确实创建了干净的容器，写好了独立的样式，插入了有内涵的图片，但是，我们没有将它放进文档流，也可以理解为body里面。是时候加上一点代码了

Swipper.prototype.init = function() {
	//	调用上面的方法
	this.createSwipper();
	//	假设html里有这么一个元素
	var box = document.getElementById('swipperBox');
}

这个时候会发现，即使有了目标，但是之前辛辛苦苦写的东西拿不出来，createSwipper方法执行完毕之后一切烟消云素，轻轻的走，不带走一片云彩，这样可太难受了，我们要阻止它的这种行为

Swipper.prototype.createSwipper = function() {
	// 创建一个干净的容器
	var swipper = document.createElement('div');
	//	加上一个特有的类名
	swipper.className = 'swipper-box'
	//	往容器里面塞内容
	//	imgSrc有内容的情况下,这里就不做判断了
	this.imgSrc.forEach(function(item) {
		var img = document.createElement('img');
        img.src = item
        swipper.appendChild(img)
	})
	//	将咱们辛苦写出来的东西展现给别人看
	return swipper;
}

这个时候就能拿到咱们的劳动成果了，现在我们把劳动成果展示到页面上

Swipper.prototype.init = function() {
	//	调用上面的方法，并接收成果
	var swipper = this.createSwipper();
	//	假设html里有这么一个元素
	var box = document.getElementById('swipperBox');
	// 将成果展现到页面上
	box.appendChild(swipper);
}

这个时候点开浏览器，发现还是没有东西！这是为什么，一晚上了，要如此折腾我，很心累的好吗？
这次我就不卖关子了，这个问题一般也不会犯?
在index.html的body标签最下面加上

<script>
	var swipper = new Swipper();
	swipper.init();
</script>

第一次检验成果

这个时候，页面上应该真正就能看到咱们的成果了，这样咱们一晚上总算没白忙会儿了。不过是不是觉得这个组件多少有点局限性？没错，且看完下次更新。（如果样式乱了可别找我。。。毕竟样式这个东西嘛，不是咱们这次的主题，不过我会在最后贴出来。太晚了，我溜了）