将Javascript存储在外部文件和<head>中有什么好处?

aw *_*rud 2 javascript

我有一个启用Ajax的CRUD应用程序.如果我显示数据库中的记录,则会显示每列的记录值,包括其主键.

对于绑定到页面上按钮的Ajax操作,我可以通过在呈现HTML服务器端时将ID直接打印到其onclick函数来设置其调用.例如,为了保存对记录的更改,我可以使用如下按钮,其中"123"是记录的主键.

<button type="button" onclick="saveRecord('123')">Save</button>
Run Code Online (Sandbox Code Playgroud)

有时我有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>
Run Code Online (Sandbox Code Playgroud)

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

解决这个问题的最自然的方法是简单地将所有当前存在于外部文件中的Javascript置于<head>页面中.通过这种方式,我可以生成自定义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>
Run Code Online (Sandbox Code Playgroud)

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

oez*_*ezi 7

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


Fin*_*las 5

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