jQuery之代码优化

1、通过浏览器缓存优化选择过程

        在Web前端页面中，比较流行的是使用jQuery作为脚本语言，其可以通过id或者class选择一个标签对象，如果你一次又一次的选择相同的某个元素，可以在页面加载完成后一次性初始化，然后在核心内容中进行调用。以下对不同的初始化方式进行测试，以for循环模拟多次调用：

测试1：
$(function(){ 
	var myList = $('#'+id);
　	console.time('create list');
	for (i = 0; i < 1000; i++) {
<span style="white-space:pre">	</span>  myList.val("This is list item ");
	}
	console.timeEnd('create list');
	});

测试2：
$(function(){ 
　	console.time('create list');
	for (i = 0; i < 1000; i++) {
	  var myList = $('#'+id);
	  myList.val("This is list item ");
	}
	console.timeEnd('create list');
	});

测试1的运行时间大概是13ms而测试2的代码运行时间约为5.7ms,这是由于jQuery内部必须通过大量的步骤才可以实现选择操作。本例中测试2已经在多次使用被选择的标签之前进行初始化，简化了初始化过程。

2、jQuery方法链

      jQuery方法链是指可以在一个已选择的对象上连续调用方法例如:

$('#myTable').find('.firstColumn').css('background','red');//调用find方法对table中样式firstColum的背景颜色进行修改

若希望还在此表格上进行操作，则需要调用 end() 方法即：

$('#myTable').find('.firstColumn').css('background','red').end().find('.lastColumn').css('background','blue');

写一个能够进行方法链式调用的自定义jQuery函数也很容易。你所做的就是要写个能修改元素并返回元素的函数。

代码如下:
$.fn.makeRed = function() {
 return $(this).css('background', 'red');
}
$('#myTable').find('.firstColumn').makeRed().append('hello');

参考资料

http://www.open-open.com/lib/view/open1468455366095.html