添加动态生成的内联JavaScript的替代方案

问题描述：

在HTML中生成内联JavaScript一直让我觉得很肮脏，并且在使用YUI之后，我感觉最好是利用HTML元素作为替代方案。使用隐藏的<ul>来存储要由静态JavaScript使用的键和值，这只会在发现<而不是使用内嵌JavaScript时才起作用？添加动态生成的内联JavaScript的替代方案

那里有哪些常见做法，哪些做法对避免内嵌JavaScript最有好处？

不知道我明白这个问题。为什么要将密钥和值存储在UL中？为什么不在脚本文件中的JavaScript数据结构中？ – 2009-08-18 18:44:17

假设数据是动态的，如传送带的图像或cms中的页面。 – camomileCase 2009-08-18 19:17:33

答

我正在做的事情之一是尽可能输出（来自PHP）一些JSON里面的一些SCRIPT标签，稍后我的JS代码会使用它。类似这样的：

<script type="text/javascript"> 

var db_data = <?php echo json_encode($db_data); ?>; 

process_db_data_from_js(db_data); 

</script>

我相信Flickr正在使用类似的东西来提供他们的搜索。

这是一个有趣的方法。 – camomileCase 2009-08-18 22:30:33

答

我不确定我是否理解这个问题。你是否试图从服务器端添加动态JavaScript数组并将其注入页面？

如果是这样，使用某些Ajax并返回一些JSON会不会更容易？

这当然是一个可行的解决方案。我没有一个具体的问题需要解决，我只是有兴趣听到一些新的想法。我想这个策略的缺点是额外的要求。 – camomileCase 2009-08-18 22:28:33

答

另一种可能性是动态生成.js文件，就像动态生成.html（或其他文件）一样。

然后，这些.js文件不能从CDN提供或利用缓存，从而破坏将它们移动到单独文件的目的。 – 2009-08-18 18:48:12

好吧，它仍然比使用内联脚本块污染你的HTML更清洁（正如接受的答案所暗示的那样）。 – Domenic 2010-10-01 17:09:36

答

根据动态生成的JavaScript的性质，它可能不需要放在内联中。您可以简单地创建一个PHP文件，它将采用一些参数并生成JavaScript代码，然后使用头中的脚本标记（如<script src="foo.js.php?a=b&c=d&x=y&foo=bar">）调用带有所需参数的PHP文件。这就是我处理动态JavaScript生成需求的方式。

答

我认为将JavaScript插入文档是非常合理的，特别是当您填充随页面动态变化的数据时。我认为将这些数据存储在HTML标记中而不是放入内联脚本没有任何优势。

您应该做的是通过分解可移动到单独的JavaScript文件的代码来最小化所需的内联脚本的数量。

答

如果您需要从服务器端应用程序获取一些数据到您的JavaScript中，我发现最好使用Ajax。

当然，你可以把它放到HTML元素中，但这是非常困难的，并且会导致HTML中的错误语义。此外，使用lynx的人会将其视为网页的一部分。

你也可以动态地生成JavaScript本身，但是这样会留下一大堆你必须防御的问题，甚至可能导致JavaScript注入。

虽然在某些情况下，这是很好的（例如，像在原始帖子中的CMS中的页面），但在许多情况下它是过度杀伤的，例如，让JS知道当前的用户名是什么。我猜想“动态服务器端数据”Ajax是有道理的，但对于“只有服务器端知道的数据”，我宁愿将它写入JavaScript。 – Domenic 2010-10-01 17:12:36

答

您可以添加属性到您的元素，然后有非静态或静态JS寻找他们。

<div id="..." extraAttribute="whatever"> 
</div>

使用JQuery，很容易找到。

var extraDivs = $('div[extraAttribute]');

（我强烈推荐这种编码的JQuery。）

如果你用'data-'开始你的属性，它就是有效的HTML5！我们一直使用这种方式进行本地化，例如'

'。 – Domenic 2010-10-01 17:08:50

添加动态生成的内联JavaScript的替代方案

相关推荐