- 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
相关推荐
拓扑优化88行,是在经典的99行基础上改进的,精简的,这代码对从事结构设计,优化的研究这者,工程师具有很好的价值。
用以帮助pb开发者美化代码 一步注释,提高pb开发工程师编写代码的效率
教你如何优化代码、提高代码的执行效率,压缩Flash空间,适合AVR系列单片机初学工程师
代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 适用对象:工科生、数学专业、算法等方向学习者。 作者介绍:某大厂资深算法工程师,从事Matlab、Python、C/C++、Java算法仿真工作10年;擅长...
现在大量网站为了追求用户体验,使用了大量使用CSS和JS文件。...如果英文阅读不是很流畅,请查看翻译版本: 《Yahoo工程师的前端优化建议-- 中文翻译版》 《Yahoo工程师的前端优化建议-- 中文翻译版》
适合工作3年以上Java工程师阅读
代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 适用对象:工科生、数学专业、算法等方向学习者。 作者介绍:某大厂资深算法工程师,从事Matlab、Python、C/C++、Java算法仿真工作10年;擅长...
2、代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 3、适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 4、更多仿真源码和数据集下载列表(自行寻找...
网易云课堂的深度学习工程师微专业,神经网络和深度学习 改善深层神经网络:超参数调试、正则化以及优化结构化+源代码+文档说明 - - 小白不懂运行,下载完可以私聊问,可远程教学 该资源内项目源码是个人的课程设计...
5.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 6.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 7.作者介绍:某大厂资深算法工程师,从事Matlab、...
2、代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 3、适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 4、更多仿真源码和数据集下载列表(自行寻找...
3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍:某大厂资深算法工程师,从事...
3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍:某大厂资深算法工程师,从事...
3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍:某大厂资深算法工程师,从事...
3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍:某大厂资深算法工程师,从事...
3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍:某大厂资深算法工程师,从事...
适用于各级别工程师的面试题,包含基础js,html,css,vue+react 以及高级浏览器原理,工程化,手写代码和性能优化问题,适用于各级别工程师的面试题,包含基础js,html,css,vue+react 以及高级浏览器原理,工程化...
3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍:某大厂资深算法工程师,从事...
3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍:某大厂资深算法工程师,从事...
3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍:某大厂资深算法工程师,从事...