- Ajax
- jQuery ready事件
- 事件处理
- DOM操作
Ajax
大部分项目这么写:
function getName(personid) { var dynamicData = {}; dynamicData["id"] = personID; $.ajax({ url: "getName.php", type: "get", data: dynamicData, success: function(data) { // Updates the UI based the ajax result $(".person-name").text(data.name); } }); } getName("2342342");
最佳实践:
function getName(personid) { var dynamicData = {}; dynamicData["id"] = personid; return $.ajax({ url: "getName.php", type: "get", data: dynamicData }); } getName("2342342").done(function(data) { // Updates the UI based the ajax result $(".person-name").text(data.name); });
非常灵活
jQuery ready事件
大部分项目用这段代码做闭包
$("document").ready(function() { // The DOM is ready! // The rest of the code goes here });
或者用简写
$(function() { // The DOM is ready! // The rest of the code goes here });
- 如果你清楚代码的执行环境
- 如果你不关注页面加载性能
- 如果你不关注最佳实践
。。。这么写就没问题
更好的写法是
// IIFE - Immediately Invoked Function Expression (function($, window, document) { // The $ is now locally scoped // Listen for the jQuery ready event on the document $(function() { // The DOM is ready! }); // The rest of the code goes here! }(window.jQuery, window, document)); // The global jQuery object is passed as a parameter
更进一步,最佳写法:
// IIFE - Immediately Invoked Function Expression (function(yourcode) { // The global jQuery object is passed as a parameter yourcode(window.jQuery, window, document); }(function($, window, document) { // The $ is now locally scoped // Listen for the jQuery ready event on the document $(function() { // The DOM is ready! }));
事件处理
大部分项目这么写:
$("#longlist li").on("mouseenter", function() { $(this).text("Click me!"); }); $("#longlist li").on("click", function() { $(this).text("Why did you click me?!"); });
更好的写法:
var listItems = $("#longlist li"); listItems.on({ "mouseenter": function() { $(this).text("Click me!"); }, "click": function() { $(this).text("Why did you click me?!"); } });
DRY ( Don't repeat yourself. )
最佳实践:
var list = $("#longlist"); list.on("mouseenter", "li", function(){ $(this).text("Click me!"); }); list.on("click", "li", function() { $(this).text("Why did you click me?!"); });
使用事件代理(Event Delegation)
DOM操作
大部分项目这么写:
$('.class1').click(function() { some_function(); }); $('.class2').click(function() { some_function(); });
- 如果你喜欢重复的编码
- 如果你不关心代码性能
- 如果你不关注最佳实践
更好的实现方法:
$('.class1').$('.class2').click(function() { some_function(); });
大部分项目这么写:
/ Set's an element's title attribute using it's current text $(".container input#elem").attr("title", $(".container input#elem").text()); // Set's an element's text color to red $(".container input#elem").css("color", "red"); // Makes the element fade out $(".container input#elem").fadeOut();
- 如果你喜欢重复的编码
- 如果你不关心代码性能
- 如果你不关注最佳实践
。。。这么写没问题
更好的实现方法:
// Set's an element's title attribute using it's current text
$("#elem").attr("title", $("#elem").text());
// Set's an element's text color to red
$("#elem").css("color", "red");
// Makes the element fade out
$("#elem").fadeOut();
简化你的选择器
最佳实践:
// Stores the live DOM element inside of a variable var elem = $("#elem"); // Set's an element's title attribute using it's current text elem.attr("title", elem.text()); // Set's an element's text color to red elem.css("color", "red"); // Makes the element fade out elem.fadeOut();
使用变量缓存你的选择器
或者是用更简单的写法:
// Stores the live DOM element inside of a variable var elem = $("#elem"); // Chaining elem.attr("title", elem.text()).css("color", "red").fadeOut();
使用链式调用
另外一个操作DOM的示例
大部分项目这么写:
// Dynamically building an unordered list from an array var localArr = ["Greg", "Peter", "Kyle", "Danny", "Mark"], list = $("ul.people"); $.each(localArr, function(index, value) { list.append("<li id=" + index + ">" + value + "</li>"); });
最佳实践:只append一次
// Dynamically building an unordered list from an array var localArr = ["Greg", "Peter", "Kyle", "Danny", "Mark"], list = $("ul.people"), dynamicItems = ""; $.each(localArr, function(index, value) { dynamicItems += "<li id=" + index + ">" + value + "</li>"; }); list.append(dynamicItems);
参考资料:
http://gregfranko.com/jquery-best-practices/
http://stackoverflow.com/questions/18307078/jquery-best-practises-in-case-of-document-ready
http://gregfranko.com/jquery-best-practices/#/29