精简 JavaScript 树

• 下载源代码 - 4.39 KB

引言

这一切都始于我对 AJAX 和 DHTML 技术的探索。我想，比较市面上不同的工具包是一个完全不同的文章主题。我只想说，我惊讶于自己知道的太少，AJAX.NET 之外还有多么广阔的世界。然而，我遇到的一个问题是这些 JavaScript 库的规模有多大：大多数功能性库都超过 30,000 行代码。这自然会带来一个维护问题：如果出现问题，我该怎么办？

因此，我想尝试的第一件事之一就是一个树形控件。这似乎很简单。毕竟，HTML 自带 UL/LI 元素。所以我只需要在基本的 UL/LI HTML 代码之上做很少的工作。

• 我需要绘制节点线。
• 我需要处理展开/折叠事件。
• 我需要显示选择。

如果我遵循上述路径，我应该只需要很少的 JavaScript 编程，几乎不需要约定——只需使用 UL/LI 组合即可。

<ul id="t">
    <li>Item1</li>
    <li>Item2
        <ul>
            <li>Item2.1</li>
            <li><a onclick="alert('look mom, I\'m here!');">Item2.2</a>
                <ul>
                    <li>Item2.2.1</li> 
                </ul>
            </li>
            <li>Item2.3</li>
        </ul>
    </li>
    <li>Item3</li>
    <li>Item1</li>
</ul>

<script>
    new Tree("t");
</script>

不幸的是，最终我写的代码比预期的多了一点，但整个代码量仍然不到 150 行 HTML/CSS/JavaScript 代码——对于我们这些在初始开发的有趣部分结束后，不得不面对维护噩梦的人来说，这绝对是一个卖点。

绘制节点线

我不能为大部分代码负责。这里有一个链接指向最初让我开始的原始文章：http://odyniec.net/articles/turning-lists-into-trees/。作者详细地一步一步地解释了如何绘制树线。

内部设计决策

我决定使用 UL/LI 组合在 HTML 代码中定义父子关系。在内部，JavaScript 尊重这一点；但是，会进行一些小的重新格式化。以下内容进行了美化

• 为每个LI添加一个图像图标作为第一个元素。
• 创建一个新的SPAN元素，并将所有LI内容（任何嵌入的子树除外）都推到这个SPAN元素下。

因此，在重新格式化之后，每个LI应该包含一个处理展开/折叠的IMG、一个处理选择的包含叶子内容的SPAN以及一个可选的UL子树。所有这些结构都在树构造函数中初始化，但是如果更改了树/子树的内容，则会提供initChildren函数。

继承

我决定不做真正的继承。这要么会获取过多的代码，要么会依赖于第三方库（这也会获取过多的代码）。相反，我通过可以传递给构造函数的 JSON 对象进行了自定义。以下是如何更改图标的示例。

new Tree("t", { 
        icons : ["list.gif", "list.gif", "list.gif"]
    });

如果您的项目正在使用一些面向对象的 JavaScript 库，那么添加继承并在派生类中自定义默认行为（展开、折叠、图标选择）是有意义的。