我如何使这个jQuery代码更加精简，更加清洁和更简洁

问题描述：

我目前已经有一个jQuery函数的负载，我现在正在前端处理一个站点。我并不是一个真正的jQuery'ninja'（尽管我终于开始阅读sitepoint书籍了），所以我确信这段代码可能写得很糟糕，并且可能会更简洁，更精简和更精简。我如何使这个jQuery代码更加精简，更加清洁和更简洁

下面的代码 -

// add hasJS to html to allow for CSS fallbacks 

jQuery(function($) { 
$('html').addClass('hasJS'); 
}); 

// ENDS 

// show/hide/kill the upload files modal box 

$('.upload').click(function(){ 
$('.uploader').toggle(); 
}); 

$('.creategroup').click(function(){ 
$('.createnewgroup').toggle(); 
return false; 
}); 

$('.adduser').click(function(){ 
$('.addnewuser').toggle(); 
return false; 
}); 

$('#tap-menu').click(function() { 
$('#left-column, #settings, #ortibi, #userprofile').toggle(); 
}); 

$('.cancel').click(function(){ 
$('.uploader, .shareform').hide(); 
    }); 

$('.connection-type').click(function(){ 
$('.connectform').toggle(); 
    }); 


$('.shareit').click(function(){ 
$('.shareform').show(); 
}); 
$(function() { 
    $('article .folder-items').hide();  

$("p.folder").click(function() { 
     $(this).parent().next(".folder-items").slideToggle("slow"); 
}); 
}); 
$(document).ready(function(){ 

    $('#scrollbar1').tinyscrollbar(); 

}); 


// ENDS 

$('textarea#txtarea_Message"').autoResize({ 
// On resize: 
onResize : function() { 
    $(this).css({opacity:0.8}); 
}, 
// After resize: 
animateCallback : function() { 
    $(this).css({opacity:1}); 
}, 
// Quite slow animation: 
animateDuration : 300, 
// More extra space: 
extraSpace : 40 
}); 

$("input:checkbox").uniform(); 
$("#check1").live("click", function(){ 
var two = $("#check2").attr("checked", this.checked); 
$.uniform.update(two); 
});

现在我可能做了很多错在这里。我能做些什么来改善这些代码？感谢所有帮助：O）

对我来说不是那个错。 – Alex 2012-04-06 06:55:55

对我来说这看起来不错！ – 2012-04-06 06:56:15

这真的很基本你正在做的事情。我认为你将事情分解成组件是正确的。你有你的处理程序来交换你的类，这样你就可以测试你的UI，然后你可以转到实际的业务逻辑并实现在后端实际发生的事情。我强烈建议你想想更具体的问题，你可以在这里问。对Stack Overflow来说，这显然太过泛泛。 :) – jmort253 2012-04-06 06:57:28

答

这样的事情？

// add hasJS to html to allow for CSS fallbacks 
jQuery(function ($) { 
    $('html').addClass('hasJS'); 

    $('article .folder-items').hide(); 
    $("p.folder").click(function() { $(this).parent().next(".folder-items").slideToggle("slow"); }); 

    $('#scrollbar1').tinyscrollbar(); 
}); 

// ENDS 

// show/hide/kill the upload files modal box 

$('.upload').click(function() { $('.uploader').toggle(); }); 

$('.creategroup').click(function (e) { e.preventDefault(); $('.createnewgroup').toggle(); }); 

$('.adduser').click(function (e) { e.preventDefault(); $('.addnewuser').toggle(); }); 

$('#tap-menu').click(function() { $('#left-column, #settings, #ortibi, #userprofile').toggle(); }); 

$('.cancel').click(function() { $('.uploader, .shareform').hide(); }); 

$('.connection-type').click(function() { $('.connectform').toggle(); }); 

$('.shareit').click(function() { $('.shareform').show(); }); 

$('textarea#txtarea_Message"').autoResize({ 
    // On resize: 
    onResize: function() { $(this).css({ opacity: 0.8 }); }, 
    // After resize: 
    animateCallback: function() { $(this).css({ opacity: 1 }); }, 
    // Quite slow animation: 
    animateDuration: 300, 
    // More extra space: 
    extraSpace: 40 
}); 

$("input:checkbox").uniform(); 
$("#check1").bind("click", function() { 
    var two = $("#check2").attr("checked", this.checked); 
    $.uniform.update(two); 
});

e.preventDefault（）;是键，尤其是如果.adduser/.creategroup是链接而不是按钮。 – 2012-04-06 07:32:08

答

jQuery的live被弃用的1.7版本，on 作品/性能更好
由于JT史密斯评论 - 您有多个 '文件准备好' 脚本多发性格式 -

你可以用所有这些到一个关于 '文件准备好' 叫

$(document).ready{function() {} }，jquery(function() { }和 $(function() { } - AFAIK所有这些都是一样的，工作原理是一样的。你可以坚持一种格式。

我如何使这个jQuery代码更加精简，更加清洁和更简洁

相关推荐