JavaScript StringBuilder

• 下载源代码文件 - 0.4 Kb
• 下载演示项目 - 1.36 Kb

引言

曾经，不久以前，将任何重要的处理推送到客户端浏览器都被认为是一种不良做法。现在，随着 AJAX 风格开发的普及，它突然成为一种热门的新技术。不幸的是，市场上最常用的浏览器在最常见的编程任务之一——字符串连接方面非常缓慢。

好消息是，虽然 IE 在字符串连接方面很慢，但在数组操作方面却相当快。考虑到这一点，我决定编写一个简单的 StringBuilder 类，将单个字符串推送到数组中，然后使用 join 方法生成连接后的输出字符串。在用 5,000 个字符串进行的测试中，它比使用 s1 += s2 语法进行的等效字符串连接快 117 倍。对于 10,000 个字符串，它快得令人惊叹的 261 倍！

使用代码

StringBuilder 类仅提供四种方法：构造函数、append 方法、clear 方法和 toString 方法。如果需要，可以添加更多属性和方法，但我选择尽可能地保持简单，以便于本文的阅读。

以下是定义 StringBuilder 类的整个脚本

// Initializes a new instance of the StringBuilder class
// and appends the given value if supplied
function StringBuilder(value)
{
    this.strings = new Array("");
    this.append(value);
}

// Appends the given value to the end of this instance.
StringBuilder.prototype.append = function (value)
{
    if (value)
    {
        this.strings.push(value);
    }
}

// Clears the string buffer
StringBuilder.prototype.clear = function ()
{
    this.strings.length = 1;
}

// Converts this instance to a String.
StringBuilder.prototype.toString = function ()
{
    return this.strings.join("");
}

代码非常简单明了，应该不言自明。现在，这是一个如何使用它的例子

// create a StringBuilder
var sb = new StringBuilder();

// append some text
sb.append("Lorem ipsum dolor sit amet, consectetuer adipiscing elit, ");
sb.append("sed diem nonummy nibh euismod tincidunt ut lacreet dolore ");
sb.append("magna aliguam erat volutpat.");

// get the full string value
var s = sb.toString();

同样，非常简单明了，不需要进一步的解释。如果您曾经使用过 .NET 中的 StringBuilder，那么您已经知道如何使用这个了。

如果您下载演示项目，您会发现一个 HTML 页面，它对 StringBuilder 与字符串连接进行并排比较。您可以使用它来运行自己的测试，以亲眼看到差异。在我的机器上，IE 连接 5,000 个字符串需要超过 14 秒。StringBuilder 在 110 毫秒内完成。对于 10,000 个字符串，IE 需要整整一分钟才能连接。StringBuilder 在 230 毫秒内完成。从一分钟多到不到四分之一秒，这是一项相当大的改进！

结论

将处理推送到客户端的整个目的是为了提供更丰富、更响应迅速的用户体验。这意味着，确保客户端代码尽可能高效非常重要。我希望这篇文章能帮助您的客户端字符串构建代码真正飞起来。