我如何優化這個jQuery代碼

有沒有一個更短的更優化的方式來編寫下面的代碼。我如何優化這個jQuery代碼

$("button.idiv").click(function(){ 
     var elm = $('<div id=divid' + divId + ' class=aaa></div>'); 
     elm.resizable().draggable({ containment: "p", stack:"div" }).appendTo('p'); 
     divId++; 
}); 

$("button.ispan").click(function(){ 
     var elm = $('<img id=spanid' + spanId + ' class=aaas src="Dollar.png"/>'); 
     elm.resizable().parent().draggable({ containment: "p", stack:"div" }).appendTo('p'); 
     spanId++; 
}); 

$("button.itext").click(function(){ 
     var elm = $('<div id=textid' + textId + ' class=aaat>some text</div>'); 
     elm.resizable().draggable({ containment: "p", stack:"div" }).appendTo('p'); 
     textId++; 
});

來源

2011-01-08 Hussein

它運行緩慢嗎？你是否有一個分析器的輸出結果顯示瓶頸在哪裏？ – Rob 2011-01-08 21:31:33

不，它沒有運行緩慢，但我發現我的自我重複，我想知道如果我可以用更短的更優化的方式編寫此代碼。除了上面代碼中已經包含的3個按鈕之外，還有10個按鈕點擊函數可以調用。 – Hussein 2011-01-08 21:35:49

@alex所以你不是在尋找一個「優化」。你正在尋找一種方法來保持代碼乾燥（不要重複自己）。很多人（包括我）不喜歡過早的優化：p – 2011-01-08 21:49:29

您是否想要做類似的事情？代碼可能看起來更像，但我試圖刪除儘可能多的重複，並添加了大量的換行符和製表符以方便閱讀。任何性能差異應該是可以忽略的。

$("button.idiv, button.itext, button.ispan").click(function(){ 
    var $this = $(this), 
     draggableOptions = { 
       containment: "p", 
       stack:"div" 
     }; 
    if ($this.is(".idiv, .itext")) { 
     var elm = $("<div>"), 
      cls = "aaa"; 
     if ($this.is(".idiv")) { 
      id = "divid"+divId; 
      divId++; 
     } else { 
      id = "textid"+textId; 
      cls += "t"; 
      textId++; 
     } 
     elm 
      .addClass(cls) 
      .attr("id", id) 
      .resizable(); 
    } else { 
     var elm = $("<img>") 
      .attr("id", "spanid"+spanId) 
      .attr("src", "Dollar.png") 
      .addClass(cls+"s") 
      .resizable(); 
     elm = elm.parent(); 
     spanId++; 
    } 
    elm.draggable(draggableOptions) 
     .appendTo("p"); 
});

來源

2011-01-09 10:14:17 mekwall

由於所有三組代碼做幾乎同樣的事情除了一些個人的價值觀，這是鞏固與某種配置對象的差異的絕好機會：

var types = { 
    div: { 
     id: 1, 
     element: "<div>", 
     className: "aaa" 
    }, 
    span: { 
     id: 1, 
     element: "<img src='Dollar.png'>", 
     className: "aaas", 
     parentDraggable: true 
    }, 
    text: { 
     id: 1, 
     element: "<div>", 
     className: "aaat" 
    } 
};

然後代碼簡單地變成：

$("button").click(function(){ 
    var $this = $(this), t; 
    // See if the button has any class matching one of the defined "types" 
    for (var i in types) { 
     if (types.hasOwnProperty(i) && $this.hasClass("i" + i)) { 
      t = i; 
      break; 
     } 
    } 
    if (!t) return; 

    // Your condensed code 
    var elem = $(types[t].element) 
     .attr("id", t + "id").addClass(types[t].className) 
     .resizable(); 
    if (types[t].parentDraggable) elem = elem.parent(); 
    elem.draggable({ containment: "p", stack:"div" }).appendTo('p'); 

    // Increment ID on the type itself 
    types[t].id++; 
});

來源

2011-01-09 11:07:15

我如何優化這個jQuery代碼

回答

相關問題