0

我想知道如何在最佳实践/性能方面改进这段 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)
                }
            }
        }
    }

需要 CSS：

有 3 个树组 - avg, large, small ，根据高度，显示在小提琴中。按组，这意味着它共有 3 棵树，每组中的这 3 棵树进一步细分为 large-tree、avg-tree、small-tree

.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/

4

3 回答 3

1

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

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

因此，要组成一棵树，您可以放置​​几个以树部分为背景的块以形成一列。拥有一个像素高的主干图像可以轻松进行垂直缩放。您甚至可以将图片 base64 编码为 CSS 以避免额外的文件请求。

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

于 2013-09-27T09:26:15.720 回答
0

更新代码：

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 />");
于 2013-09-27T08:43:41.507 回答
0

缩短了几行代码

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();
于 2013-09-27T08:58:02.847 回答