我如何使這個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）

來源

2012-04-06 Stuart Robson

對我來說不是那個錯。 – 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); 
});

來源

2012-04-06 07:28:57 Dementic

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

jQuery的live被棄用的1.7版本，on 作品/性能更好
由於JT史密斯評論 - 您有多個 '文件準備好' 腳本多發性格式 -

你可以用所有這些到一個關於 '文件準備好' 叫

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

來源

2012-04-06 07:19:22

我如何使這個jQuery代碼更加精簡，更加清潔和更簡潔

回答

相關問題