一、使用最新版本 jQuery 类库
二、合理使用选择器
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| # 推荐使用 $("#id")
# 可以使用 $("p"),$("span")
# 可以使用 $(".class")
# 尽量避免 $("[attribute=value]")
# 尽量避免 $(":hidden")
|
三、使用缓存对象
场景:修改某个按钮的文本和颜色
1 2 3 4 5
| # 不好的写法
$("#btn").text("重置");
$("#btn").css("color","red");
|
1 2 3 4 5
| # 优化的写法
var $btn = $("#btn");
$btn.text("重置").css("color","red");
|
四、循环时减少对DOM的操作
场景:往 <ul> 中添加 <li> 菜单项
1 2 3 4 5 6 7
| # 不好的写法
var $ul = $("#menu");
for(var i=0; i<6; i++) { $ul.append("<li>菜单"+i+"</li>") }
|
1 2 3 4 5 6 7 8 9 10
| # 优化的写法
var $ul = $("#menu"); var html = "";
for(var i=0; i<6; i++) { html += "<li>菜单"+i+"</li>"; }
$ul.append(html);
|
五、使用事件代理
场景:给 <ul> 里的所有 <li> 绑定点击变色事件
1 2 3 4 5
| # 不好的写法
$("ul li").on("click",function() { $(this).css("color","red"); });
|
1 2 3 4 5 6
| # 优化的写法
$("ul li").on("click",function(e) { var $obj = $(e.target); $obj.css("color","red"); });
|
六、将代码转成 jQuery 插件
七、使用 join() 拼接字符串
第四点的案例中,代码还可以进行优化
1 2 3 4 5 6 7 8
| var $ul = $("#menu"); var arr = [];
for(var i=0; i<6; i++) { arr.push("<li>菜单"+i+"</li>"); }
$ul.append(arr.join("");
|
八、合理利用 HTML5 的 data 属性
使用 data-* 属性来嵌入自定义数据。
1
| <div id="user" data-age="26" data-gender="男">张三</div>
|
1 2 3 4 5
| var user = $("#user");
var age = user.data("age"); var gender = $("#user").data("gender");
|
九、尽量使用原生的 JS 方法
第五点的案例中,可以如下优化
1 2 3 4
| $("ul li").on("click",function(e) { var $obj = $(e.target); $obj.get(0).style.color = "red"; });
|
十、压缩 JS 代码
如有更多优化技巧,后续补充......