我如何优化这个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代码

回答

相关问题