有没有使用javascript生成html的最佳实践

javascript html ajax dynamic dhtml

2022-08-30 05:35:59

我正在调用一个 Web 服务，该服务以 JSON 格式返回对象数组。我想获取这些对象并使用HTML填充div。假设每个对象都包含一个 url 和一个名称。

如果我想为每个对象生成以下HTML：

<div><img src="the url" />the name</div>

是否有最佳实践？我可以看到一些做到这一点的方法：

答案 1

选项#1和#2将是您最直接的选项，但是，对于这两个选项，您将通过构建字符串或创建DOM对象来感受到性能和维护的影响。

模板并不是那么不成熟，你会看到它在大多数主要的Javascript框架中弹出。

这是JQuery模板插件中的一个例子，它将为您节省性能损失，并且非常非常简单：

var t = $.template('<div><img src="${url}" />${name}</div>');

$(selector).append( t , {
     url: jsonObj.url,
     name: jsonObj.name
});

我说走很酷的路线（性能更好，更易于维护），并使用模板。

答案 2

如果你绝对必须连接字符串，而不是普通的：

var s="";
for (var i=0; i < 200; ++i) {s += "testing"; }

使用临时数组：

var s=[];
for (var i=0; i < 200; ++i) { s.push("testing"); }
s = s.join("");

使用数组要快得多，尤其是在IE中。不久前，我对IE7，Opera和FF进行了一些字符串测试，Opera只花了0.4秒来执行测试，但IE7在20分钟后没有完成!!!!（不，我不是在开玩笑。使用阵列，IE非常快。