写代码中的一些总结

1关于数组索引的使用

在关于一个点击“上一个”、“下一个”按钮，实现图片切换的小测试中。

结构代码如下

<div id="contanier">
		<img src="img/1.jpg" alt="图片1" id="pic">
		<button id="lastPic">上一张</button>
		<button id="nextPic">下一张</button>
</div>

其中，只用了一个img的标签，且img和input都是内联元素。并把所有的标签放在了一个container的父级div标签内部。

样式代码如下，

* {
			margin: 0;
			padding: 0;
		}
		#contanier {
			margin:50px auto;
			width: 500px;
			/*background-color: #ff0;*/
			overflow: hidden;
		}
		#contanier img {
			width: 500px;
			height: 250px;
		}
		#lastPic {
			width: 6em;
			height: 2em;
			float:left;
			margin-left: 40px;
		}
		#nextPic {
			width: 6em;
			height: 2em;
			float:right;
			margin-right: 40px;
		}

设置#container元素水平居中：margin:0 auto; 如果想在垂直上离窗口有所距离，可设置margin的第一个参数，overflow:hidden是为了消除子元素的浮动使父元素丧失高度，两个按钮是内联元素，为了实现较好的效果，可以设置左右浮动（即实现两列布局），marign-left、margin-right是为了远离左右内边距。最终的效果如下，

js的行为代码

要点：因为结构代码中只含有一个img的标签，为实现不同的图片切换，应该在点击按钮的时候修改img标签的属性src为相应的路径；其次是应该在点击的时候记录点击事件的结果，即设定一个计数的变量cur_num。

下面是自己写的代码，实现了最后的效果，但是扩展性不足，只能实现特定格式的图片名称——“$.jpg”。

window.onload = function () {
			// 获取按钮对象、
			var lastBtn = document.getElementById("lastPic");
			var nextBtn = document.getElementById("nextPic");
			// 获取图片对象
			var pic = document.getElementById("pic");
			// 为按钮对象添加事件
			var pic_src = "img/1.jpg";
			// 设置一个计数的变量，用于标识当前的图片
			var cur_num = 1;   //默认显示第一张图片  

			// 视频上的方法
			// 当需要操作  容量大的外部文件时 ，而且每次操作代价比较大的情况下，采用索引的方法
			// 创建一个数组,保存所有图片的路径名称,当需要切换路径的时候,直接切换索引值即可
			// var arrSrc = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"];

			lastBtn.onclick = function () {
				// 点击一次
				// var curstr_old = cur_num.toString();
				cur_num -- ;
				if (cur_num<=0) {
					cur_num = 5;
				}
				// pic_src = pic_src.replace(curstr_old, cur_num.toString());
				pic_src = "img/"+cur_num+".jpg";
				pic.setAttribute("src", pic_src);
			};
			nextBtn.onclick = function () {
				// 点击一次
				// var curstr_old = cur_num.toString();
				cur_num ++ ;
				if (cur_num>=6) {
					cur_num = 1;
				}
				// pic_src = pic_src.replace(curstr_old, cur_num.toString());
				pic_src = "img/"+cur_num+".jpg";
				pic.setAttribute("src", pic_src);
			};
		}

视屏上的改进代码

改进的要点：将要改变的内容封装到一个数组里边，通过数组的索引去访问不同的路径字符串，通常  改变的内容不容易控制。其次，通过数组可以轻易的知道所有内容的数量信息，方便以后的操作。

window.onload = function () {
			// 获取按钮对象、
			var lastBtn = document.getElementById("lastPic");
			var nextBtn = document.getElementById("nextPic");
			// 获取图片对象
			var pic = document.getElementById("pic");
			// 为按钮对象添加事件
			var pic_src = "img/1.jpg";
			// 设置一个计数的变量，用于标识当前的图片
			var cur_num = 0;   //默认显示第一张图片  

			// 视频上的方法
			// 当需要操作  容量大的外部文件时 ，而且每次操作代价比较大的情况下，采用索引的方法
			// 创建一个数组,保存所有图片的路径名称,当需要切换路径的时候,直接切换索引值即可
			var arrSrc = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"];

			lastBtn.onclick = function () {
				// 点击一次
				// var curstr_old = cur_num.toString();
				cur_num -- ;
				if (cur_num<=0) {
					cur_num = arrSrc.length-1;
				}
				// pic_src = pic_src.replace(curstr_old, cur_num.toString());
				pic_src = arrSrc[cur_num];
				pic.setAttribute("src", pic_src);
			};
			nextBtn.onclick = function () {
				// 点击一次
				// var curstr_old = cur_num.toString();
				cur_num ++ ;
				if (cur_num>=arrSrc.length) {
					cur_num = 0;
				}
				// pic_src = pic_src.replace(curstr_old, cur_num.toString());
				pic_src = arrSrc[cur_num];
				pic.setAttribute("src", pic_src);
			};
		}

2大量重复性代码的如何实现简写

重复性的代码？

将重复性的代码封装到一个函数中，改变的内容用实参传进来，js总更是可以传进来函数作为回调函数，这方便了实现对不同的参数（或者对象）完成不同的操作。

典型的例子见https://www.bilibili.com/video/av34087791/?p=97，有时间会自己体验。

如一般情况下

obj.onclick = function () {
				/* 事件函数主体 */
}

如果有多个对象需要添加类似的事件处理函数，可以这样写

function eventPrc (){
    /*事件处理函数主体*/
}
obj1.onclick = eventPrc;
obj2.onclick = eventPrc;
.......

而且当事件的处理相差较大时，可以使用回调函数来封装函数体。

eventPrc(obj, fun){
    obj.onclick = fun;
}
//添加事件处理函数时
eventPrc(obj1, function(){
    //事件处理函数主体
});