JavaScript/jQuery-如何改进此js代码/重构

我想知道如何在最佳实践/性能方面改进这段js

JS代码：

var treeGroupTypes, treeType, leftLeafClass, rightLeafClass;
treeGroupTypes = ["tree-group-small", "tree-group-avg", "tree-group-large", "tree-group-large", "tree-group-avg", "tree-group-small", "tree-group-small", "tree-group-avg", "tree-group-large", "tree-group-large", "tree-group-avg", "tree-group-small"];
treeType = ["small-tree", "avg-tree", "large-tree"];
leftLeafClass = "left-leaf";
rightLeafClass = "right-leaf";

//Both the above arrays have css classes in them, and then the 2 variables as well. Basically the whole js codes builds some trees and appends leaves to them.

buildTrees(treeGroupTypes, treeType, leftLeafClass, rightLeafClass);

buildTrees: function (treeGroupTypes, treeType, leftLeafClass, rightLeafClass) {
        for (j = 0; j < treeGroupTypes.length; j++) {
            var treeGroup;
            treeGroup = $(document.createElement("div"));
            treeGroup.addClass(treeGroupTypes[j]).appendTo(".trees")

            for (i = 0; i < treeType.length; i++) {
                var leftLeaf, rightLeaf, leftIcon, rightIcon;
                leftLeaf = $(document.createElement("span"));
                rightLeaf = leftLeaf.clone();
                leftIcon = $(document.createElement("i"));
                rightIcon = leftIcon.clone();
                leftLeaf.addClass(leftLeafClass).append(leftIcon);
                rightLeaf.addClass(rightLeafClass).append(rightIcon);

                var tree = $(document.createElement("div"));
                tree.addClass(treeType[i]).appendTo(treeGroup);
                leftLeaf.appendTo(tree);

                if (treeGroupTypes[j] == "tree-group-large" && treeType[i] == "large-tree") {
                    for (l = 1; l < 4; l++) {
                        var more = rightLeaf.clone();
                        more.css("top", (tree.height() / 4) * l).appendTo(tree)
                    }
                }
                else if (treeGroupTypes[j] == "tree-group-avg" && treeType[i] == "large-tree") {
                    for (l = 1; l < 3; l++) {
                        var more = rightLeaf.clone();
                        more.css("top", ((tree.height() / 3) * l) + 10).appendTo(tree)
                    }
                }
                else {
                    rightLeaf.css("top", tree.height() / 3).appendTo(tree)
                }
            }
        }
    }

/下面是附在树上的叶类，左叶类表示它将位于树的左侧，右叶位于右侧/

HTML:

它产生的jsiddle链接：

更新代码：

Line No              Code
 1                    $(document).ready(function(){ });
 11                   for (j = 0;l = treeGroupTypes.length ,j < l; j++)
 13                   treeGroup = $("<div />");
 16                   for (i = 0; l = treeType.length, i < l; i++)
 18                   leftLeaf = $("<span />");
 20                   leftIcon = $("<i />");
 25                   var tree = $("<div />");

行无代码
1$（document）.ready（function（）{}）；
11表示（j=0；l=treeGroupTypes.length，j

缩短了几行代码

for（i=0；i

您可能会坚持使用图像，而不是编写如此复杂的HTML和CSS。请查看以决定是否需要它

如果光栅很好，您可以有3个PNG（因为简单的PNG可以很好地压缩）：一个用于挂在树干上的左叶，一个用于右叶（也有树干）一个用于没有叶子的树干。所有宽度相同的树都有透明的占位符，或者有适当的边距。或者你可以使用负比例而不是第二片叶子。可能不会对性能造成太大影响

所以，要组成一棵树，你可以把几个块放在树的后面形成一列。有一个一像素高的主干图像可以方便地进行垂直缩放。你甚至可以将图片base64编码成CSS，以避免额外的文件请求

---

虽然这需要一些准备，但在旧浏览器上可能会更快，因为旧浏览器无法以很快的速度处理复杂的CSS。

这个问题似乎离题了，因为它是关于代码审查的：@M42，非常感谢，我也在那里发布了它。关于使用$（“”）创建元素的问题，我认为$（document.createElement（“div”）))是最快的。请检查以下链接：，嗯，不确定，但我们不需要声明其他变量，如rightLeaf等。虽然代码可能有效，但我们不应该声明变量。变量已声明…如果您仔细查看每个变量声明后的“，”和“；”。哦，对不起，我错过了。只是好奇，这样做是一种最佳实践，还是会带来一些性能提升。没有性能提升，但您没有太多的var语句…只有一个var，所有变量声明都放在一个地方。我认为，在这种情况下，不使用图像本身，这只能通过html/css来实现，没有js，唯一的缺点是这会有很多DOM元素。这两种方法都可以在没有JS的情况下工作。你的代码只是创建了新的DOM元素，所以实际上是一样的。也可以用同样的方法来完成，只是使用了一点不同的HTML结构。我建议用预先绘制的PNGs.Hmm.替换CSS边框和圆形技巧。没错。这样做不是很好吗使用边框半径，而不是使用这样的图像，这将创建额外的http，只是好奇？@whyAto8 base64将它们编码为CSS，而不再使用额外的HTTPs。虽然这将使它们的大小更大，但无论如何，它们都非常小，具有自适应调色板。这对我来说是新的，但无论如何都会尝试。谢谢

.left-leaf i{width:10px; height:10px; border-radius:0 10px 0 10px; display:inline-block; background:#ACCF37; position:relative;behavior: url(css/PIE.htc); }
.left-leaf  {position:absolute; left:-10px;}
.right-leaf i{width:10px; height:10px; border-radius:10px 0 10px 0; display:inline-block; background:#ACCF37; position:relative; behavior: url(css/PIE.htc);}
.right-leaf  {position:absolute;}

<section class="trees"></section>

Line No              Code
 1                    $(document).ready(function(){ });
 11                   for (j = 0;l = treeGroupTypes.length ,j < l; j++)
 13                   treeGroup = $("<div />");
 16                   for (i = 0; l = treeType.length, i < l; i++)
 18                   leftLeaf = $("<span />");
 20                   leftIcon = $("<i />");
 25                   var tree = $("<div />");

for (i = 0; i < treeType.length; i++) {
                    var leftLeaf = $(document.createElement("span")),
                    rightLeaf = leftLeaf.clone(),
                    leftIcon = $(document.createElement("i")),
                    rightIcon = leftIcon.clone();