Question

我想知道如何在最佳实践/表现方面改进这部分j。

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)
                }
            }
        }
    }

需要CSS：

有三个树组 - 平均，大，小，按高度显示，小提琴。按组，这意味着它共有3棵树，每组中的3棵树进一步细分为大树，平均树，小树

.trees { padding:0 10px;}
.tree-group-avg {margin:0 8px; display:inline-block;}
.tree-group-avg div {position:relative; display:inline-block; margin:0 10px 0 0; background:#83919F; width:2px; vertical-align:bottom;}
.tree-group-avg .large-tree { height:120px; }
.tree-group-avg .avg-tree { height:90px;}
.tree-group-avg .small-tree { height:60px;}

.tree-group-large {margin:0 8px;  display:inline-block;}
.tree-group-large div {position:relative; display:inline-block; margin:0 10px 0 0; background:#83919F; width:2px; vertical-align:bottom;}
.tree-group-large .large-tree { height:150px; }
.tree-group-large .avg-tree { height:120px;}
.tree-group-large .small-tree { height:90px;}

.tree-group-small {margin:0 8px;  display:inline-block;}
.tree-group-small div {position:relative; display:inline-block; margin:0 10px 0 0; background:#83919F; width:2px; vertical-align:bottom;}
.tree-group-small .large-tree { height:90px; }
.tree-group-small .avg-tree { height:60px;}
.tree-group-small .small-tree { height:30px;}

/ 下面是附加到树的叶子类，左叶类意味着它将在树的左侧，右侧的叶子在右侧 /

.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;}

HTML：

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

jsfiddle它产生的链接：http://jsfiddle.net/5NrfQ/

Answer 1

您可能会坚持使用图片而不是编写如此复杂的HTML和CSS。请参阅this question以确定是否需要它。

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

因此，要构建一棵树，你可以放置几个用树形部分背景的块来形成一个列。具有一个像素高的主干图像允许容易的垂直缩放。你甚至可以对pics进行base64编码，以避免额外的文件请求。

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

Answer 2

更新代码：

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 />");

Answer 3

缩短了几行代码

http://jsfiddle.net/5NrfQ/

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

JavaScript / jQuery - 如何改进这个js代码/重构器

3 个答案: