Question

我想知道是否有更好的方法来编写这个JavaScript（Jquery）代码。这个片段动态地创建了一个带有链接的H3。

我的设计师正在尝试将其设计为JavaScript中的样式。我正在尝试将其重新编写/重构为更小的块，以允许我的设计师在没有在一行上查看所有代码的情况下进行样式化。

var dvClassContainer = $(document.createElement('div')).attr("id", 'dvclassconatiner_' + classVal).attr("classifname", classifname).attr("memclassnumber", memclassnumber).html('<h3>' + classifname + '<a id="ancclassremove_'+ classVal +'" classVal="' + classVal + '" onclick="RemoveClassificationUponConfirm(\'' + classVal + '\');" class="buttons delete btnSmall">Delete</a></h3><img style="display:none;" id="imgloadRemClass_' + classVal + '" alt="loading" src="../Images/application/smallUploading.gif" />');

我在考虑创建更多变量并将它们组合在一起。是否有一种“更清洁”的方式来写这个？

Answer 1

var dvClassContainer = $(document.createElement('div'))
                            .attr("id", 'dvclassconatiner_' + classVal)
                            .attr("classifname", classifname)
                            .attr("memclassnumber", memclassnumber)
                            .html('<h3>' + classifname + '<a id="ancclassremove_'+ classVal +'" classVal="' + classVal + '" onclick="RemoveClassificationUponConfirm(\'' + classVal + '\');" class="buttons delete btnSmall">Delete</a></h3><img style="display:none;" id="imgloadRemClass_' + classVal + '" alt="loading" src="../Images/application/smallUploading.gif" />');

最后一行仍然需要修复。我会创建元素，然后设置它们的属性，然后将它们附加到h3。您可以使用var h3 = $("<h3></h3>");（作为示例）执行此操作，并使用.attr()和最后.append()设置属性以将其全部放在一起。

Answer 2

如果您使用更多jQuery的功能，代码将变得更易读并且更容易维护：

var dvClassContainer = $('<div>');
dvClassContainer.attr({
  id: 'dvclasscontainer_'+classVal,
  classifname: classifname,
  memclassnumber: memclassnumber
});
var dvHeader = $('<h3>');
var dvHeaderLink = $('<a>Delete</a>');
dvHeaderLink.attr({
  id: 'ancclassremove_'+classVal,
  classVal: 'classVal',
  class: 'buttons delete btnSmall'
}).on('click',function(){
  RemoveClassificationUponConfirm(classVal);
});
var dvImg = $('<img>');
dvImg.attr({
  id: 'imgloadRemClass_'+classVal,
  alt: 'loading',
  src: '../Images/application/smallUploading.gif'
});
dvClassContainer.append(dvHeader.append(dvHeaderLink.append(dvImg)));

理想情况下，您还希望将所有非标准属性（classifname，memclassnumber，classVal）移动到data-属性，这些属性可通过jQuery的data()函数访问。

Answer 3

在承认这一行代码是令人讨厌的之后，我将采取不同的方式。

这不是让你的设计师头疼的JavaScript。如果他们不能用CSS来设计它，那么他们就不会那么努力。当然，h3和锚在其他元素中，他们可以抓取一些样式：

.someContainer h3 { color: chartreuse; }

然而，如果他们已经尝试了所有可能的东西，你仍然只需要添加一个或两个新类（到h3和锚）。如果您有.html('<h3>'...，则可将其更改为.html('<h3 class="someClass">'...

尽管我们在糟糕的实现中优化并完全修复糟糕的JS，但如果我们假设这是“正常工作”，则问题在于设计师的风格能力。因此，这不是一个JavaScript问题。

Answer 4

var dvClassContainer = $('<div/>')
     .attr({'id': 'dvclassconatiner_' + classVal,
           'classifname': classifname,
           'memclassnumber': memclassnumber
     })
     .html(
         function() {
             var $title = $('<h3>' + classifname + '</h3>');
             var $link = $('<a>Delete</a>').attr({
                 'id': 'ancclassremove_' + classVal,
                 'classVal': classVal,
                 'class': 'buttons delete btnSmall'
             })
             .on('click', function() {
                 RemoveClassificationUponConfirm(classVal);
             });

             var $img = $('<img/>').attr({
                 'id': 'imgloadRemClass_' + classVal,
                 'alt': 'loading',
                 'src': '../Images/application/smallUploading.gif'
             })
             .css('display', 'none');

             return $title.append($link).add($img);
     });

Demo

Answer 5

使用Douglas Crockford的Supplant方法。它会对字符串进行标记，以便您可以动态构建字符串。这是一个小提琴示例：http://jsfiddle.net/mmeah/F23rk/

// http://javascript.crockford.com/remedial.html
if (!String.prototype.supplant) {
    String.prototype.supplant = function (o) {
        return this.replace(/{([^{}]*)}/g,
            function (a, b) {
                var r = o[b];
                return typeof r === 'string' || typeof r === 'number' ? r : a;
            }
        );
    };
}

var classVal="x", classifname="y", memclassnumber="z"; //predefined

var dvClassHtml = $("#someDiv").html();
$("#someDiv").html("");
var params ={
    "classVal":classVal,
    "classifname":classifname,
    "memclassnumber":memclassnumber
};
dvClassHtml=dvClassHtml.supplant(params);

var dvClassContainer = 
$(document.createElement('div'))
.attr("id", 'dvclassconatiner_' + classVal)
.attr("classifname", classifname)
.attr("memclassnumber", memclassnumber)
.html(dvClassHtml);

代码重构一个很长的JavaScript字符串，因此更容易设计样式

5 个答案: