Question

我有一个支持Ajax的CRUD应用程序。如果我从数据库中显示记录，则会显示每列的记录值，包括其主键。

对于绑定到页面上按钮的Ajax操作，我可以通过在呈现HTML服务器端时将ID直接打印到他们的onclick函数来设置他们的调用。例如，要保存对记录的更改，我可能会有一个按钮，如下所示，“123”是记录的主键。

<button type="button" onclick="saveRecord('123')">Save</button>

有时候我有Javascript生成HTML和Javascript的页面。在某些情况下，主密钥在代码中的该位置自然不可用。在这些情况下，我采用了一个快捷方式并生成了这样的按钮，从一个恰好在屏幕上显示的地方取出主键以供视觉消费：

...
<td>Primary Key: </td>
<td><span id="PRIM_KEY">123</span></td>
...
<button type="button" onclick="saveRecord(jQuery('#PRIM_KEY').text())">DoSomething</button>

这绝对有效，但基于文本的值驱动数据库查询似乎是错误的，其目的是用户消费而不是方法消耗。我可以通过向各种方法添加一系列附加参数来解决这个问题，以便在最终需要时引入主键，但这看起来也很笨拙。

我解决此问题的最自然方式是在页面的<head>中简单地放置当前存在于外部文件中的所有Javascript。通过这种方式，我可以生成自定义Javascript方法，而无需传递尽可能多的参数。

除了可读性之外，我很难看到外部存储Javascript有什么好处。似乎它使得HTML / DOM和Javascript之间已经很弱的联姻更加遥远。

我见过有些人建议我将Javascript保留在外部，但在页面本身设置各种“自定义”变量，例如，在PHP中：

<script type="text/javascript">
var primaryKey = <?php print $primaryKey; ?>;
</script>
<script type="text/javascript" src="my-external-js-file-depending-on-primaryKey-being-set.js"></script>

这比仅仅将所有Javascript放在页面上更好吗？ HTML和Javascript仍然在很大程度上依赖于彼此。

Answer 1

一点：浏览器可以缓存外部文件，每次加载文件时都会加载头部的js-block。

Answer 2

性能（由于浏览器缓存）
关注点分离 - HTML / CSS / JavaScript应该是分开的。它使他们更容易合作。您确切地知道在哪里找到某些区域，而且其他开发人员可以独立地处理HTML，CSS和JavaScript等。
重用 - 您可以在多个位置/项目中包含源文件，而无需重复代码。

Answer 3

如果它位于单独的文件中，您可以YUIC压缩您的javascript（在构建/集成时）。我在构建时将所有Javascript（许多单独的小jQuery插件等）粉碎在一起，这样只需要一个文件来获取/缓存。

Answer 4

这取决于您在服务器端动态生成的Javascript数量与静态数量有多大。如果它们都是动态生成的，那么放置它们并不重要，因为每个请求都会在没有任何缓存的情况下提取新文件。把它放在头脑中的优点是一个较小的HTTP请求几乎没有任何好处，除非你主要关注的是性能和带宽是没有问题的。

但是如果大多数Javascript都是静态的，那么在开发时将它保存在单独的文件中会使事情井然有序。

动态生成的Javascript可以作为单独的文件提供，而不是作为页面本身的一部分。它将添加额外的HTTP调用。

<script src="myServerSideScript.php" type="text/javascript"></script>

将Javascript存储在外部文件中有什么好处？

4 个答案: