Let’s free of jQuery! — Part Two

接着上一篇《Let's free of jQuery!》，上一篇主要介绍 jQuery 中最常用的一些方法的原生解决方案，本篇则会介绍余下相对较少用到的内容。

11. form 表单序列化

在 jQuery 中，有一个 serialize() 方法，该可以通过序列化表单值，创建 URL 编码文本字符串，在 ajax 提交表单时很有用，下面介绍一下原生的方法：

function formToString(formObj){

	var allStr = '';

	if(formObj){

		var elementsObj = formObj.elements;
		var obj;
		if( elementsObj ){
			for(var i = 0; i < elementsObj.length; i += 1 ){

				obj = elementsObj[i];

				if( obj.name != undefined && obj.name != 'submit' && obj.name != '' ){

					if( i == 0 )
						allStr += obj.name + '=' + encodeURIComponent(obj.value);
					else
						allStr += '&' + obj.name + '=' + encodeURIComponent(obj.value);
				}
			}
		} else {
			alert('没有elements对象!');
			return ;
		}
	} else {
		alert('form不存在!');
		return ;
	}

	return allStr;
}

// 这里默认排除了 name 为 submit 的表单元素值，参数为一个 form 节点，最终得到的结果保持了与 serialize() 一致的形式，例如：
var data = formToString(document.getElementsByTagName('form')[0]);

12. 动画

这里主要列出 jQuery 的 show(), hide(), slideUp(), slideDown() 的替代算法，关于动画的部分并不是这两篇文章介绍的重点，因此其中的原理就不再详述了，有兴趣的童鞋可以研究下面的源码：

// 动画构造

function animInit(obj, time, type, mode){

	obj.style.overflow = 'hidden';

	if( mode == 'show' ){

		obj.style.height = 0;
		obj.style.display = 'block';

		var resultH = 0;

		for( var i = 0; i < obj.childNodes.length; i++ ){

			var temp = obj.childNodes[i].offsetHeight;

			if( temp != undefined ){
				resultH = resultH + temp;
			}

		}

		if( type == 'slide' ){

			var resultW = 'auto';

		} else {

			var resultW = obj.offsetWidth;
			obj.style.width = 0;
		}

	} else {

		var resultW = obj.offsetWidth;
		var resultH = obj.offsetHeight;
	}

	var dataW = resultW,
		dataH = resultH;

	var piece = time / 10;

	var heightChange = dataH / piece;

	var widthChange = dataW / piece;

	return [dataW, dataH, widthChange, heightChange];

}

// 动画执行

function show(obj, time, type, callback){

	var data = animInit(obj, time, type, 'show'),
		dataW = data[0],
		dataH = data[1],
		widthChange = data[2],
		heightChange = data[3];

	if( type != 'slide' ) var currentW = obj.style.width.replace('px', '');

	var currentH = obj.style.height.replace('px', '');

	var init = setInterval((function(){
		
		if( currentH < dataH ){
			if( type != 'slide' ){
				currentW = parseFloat(currentW) + parseFloat(widthChange);
				obj.style.width = currentW + 'px';
			}
			
			currentH = parseFloat(currentH) + parseFloat(heightChange);
			obj.style.height = currentH + 'px';
			
		} else {

			clearInterval(init);
			obj.style.cssText = 'display: block';

			if( callback != undefined ) callback();
		}

	}), 10);
}

// 动画执行

function hide(obj, time, type, callback){

	var data = animInit(obj, time, type, 'hide'),
		dataW = data[0],
		dataH = data[1],
		widthChange = data[2],
		heightChange = data[3];

	if( type != 'slide' ) var currentW = dataW;

	var currentH = dataH;

	var init = setInterval((function(){
		
		if( currentH > widthChange ){
			if( type != 'slide' ){
				currentW = parseFloat(currentW) - parseFloat(widthChange);
				obj.style.width = currentW + 'px';
			}
			currentH = parseFloat(currentH) - parseFloat(heightChange);
			obj.style.height = currentH + 'px';

		} else {

			clearInterval(init);
			obj.style.cssText = 'display: none';

			if( callback != undefined )	callback();
		}

	}), 10);
}

本文由 Kayo Lee 发表，本文链接：https://kayosite.com/lets-free-of-jquery-part-two.html