Ready事件
对DOM操作之前需要监听页面加载进度,应当在页面加载完成之后再执行DOM编辑操作。
$(document).ready(function(){ ... });
或者
$(function(){ ... });
选择器
1.优先使用原生方法var el = document.getElementById("element");
2.优先使用id选择器
性能顺序:ID选择器 > 标签选择器 > 类选择器 > 属性选择器 > 伪类选择器
//性能从上到下递减 $("#element") $("input") $(".element") $("[type=submit]") $(":hidden")
3.id选择器(getElementById),标签选择器(getElementsByTagName)都有原生方法因此速度很快,类选择器在除了IE6-8之外的主流浏览器都有原生方法(getElementsByClassName)。
var foo = document.getElementById("foo"); var input = document.getElementsByTagName("input"); //IE6-8不支持类选择器 var bar = document.getElementsByClassName("bar");
4.对没有id的元素检索,尽量采用路径最短的祖先元素id作为默认的搜索范围,并采用纯类选择器或者标签选择器。
样式表操作
对一个对象应用多个样式的时候,应尽量使用addClass/removeClass方法,避免多次操作该对象。
var $element = $("#element"); $element.css("width","200px"); $element.css("height","300px"); $element.css("background","#fff"); /*推荐写成这样:*/ .on{ width:200px; height:200px; background:#fff; } var $element = $("#element"); $element.addClass("on");
选择器保存
如果对同一个元素进行多次操作,推荐将选择器缓存起来或者采用链式写法。
//性能较差 $("#element").click(function(){ }); $("#element").empty(); $("#element").show(); //推荐写法(缓存) var $element = $("#element"); $element.click(function(){ }); $element.empty(); $element.show(); //推荐写法(链式) $("#element").click(function(){ //... }).empty().show();
事件委托
javascript的事件模型,采用"冒泡"模式,也就是说,子元素的事件会逐级向上"冒泡",成为父元素的事件。
当存在以下两种情况是,推荐使用时间委托的写法
•为DOM中的很多元素绑定相同事件;
•为DOM中尚不存在的元素绑定事件;
//比如,如果有100个td元素,那么这样写会绑定100次click事件 //性能较差 $("td").click(function(){ //... }); //推荐写成这样,只需1次将事件绑定在table上 //推荐写法 $("table").on("click","td",function(){ //... });
事件命名空间
如果可能尽量在绑定事件处理程序时使用一个命名空间,这样可以方便地取消绑定而不会影响其他绑定。
//事件绑定 $("#myLink").on("click.mySpecialClick", myEventHandler); // 解除绑定 $("#myLink").off("click.mySpecialClick");
合并DOM操作
尽量减少或者合并对DOM的操作。
//性能较差 var i; var $wrapper = $("#wrapper"); for(i = 0;i<100;i++){ var html = "<div>"+i+"</div>"; $wrapper.append(html); } //推荐写法 var i; var $wrapper = $("#wrapper"); var html = ""; for(i = 0;i<100;i++){ html += "<div>"+i+"</div>"; } $wrapper.append(html);
JS原生方法
jQuery速度无法与原生的javascript方法相媲美。所以有原生方法可以使用的场合,尽量避免使用jQuery。
/*选择器*/ //性能较差 var id = $(this).attr("id"); //推荐写法 var id = this.id; /*循环*/ //性能较差 $.each(arr,function(){ ... }); //推荐写法 for(var i = 0;i<arr.length;i++){ ... }
ajax
以下是标准ajax请求模板,事件处理推荐使用promise的写法。
//ajax模板 var successHandler = function(){ //... }; var failureHandler = function(){ //... }; var alwaysFunc = function(){ //... }; var jqxhr = $.ajax({ url: url, type: "GET", // 默认为GET,你可以根据需要更改 data: {}, // 将请求参数放这里. dataType: "json", // 指定想要的数据类型 statusCode: { // 如果你想处理各状态的错误的话 404: handler404, 500: handler500 } }); jqxhr.done(successHandler); jqxhr.fail(failureHandler); jqxhr.always(alwaysFunc);
时间: 2024-10-11 10:46:07