组织外部Javascript文件
我最近想知道组织JavaScript文件的最佳方式是什么 例如： 假设我有一个带有输入字段的HTML。我想在提交这些字段之前验证它们 在哪里调用这些类型的函数组织外部Javascript文件,javascript,html,Javascript,Html,我最近想知道组织JavaScript文件的最佳方式是什么 例如： 假设我有一个带有输入字段的HTML。我想在提交这些字段之前验证它们 在哪里调用这些类型的函数document.getElementById（）？当内容准备就绪时，是否在外部JavaScript文件或脚本标记和侦听器内的HTML中 index.html <script> document.addEventListener('DOMContentLoaded', function(e){ v
document.getElementById（）脚本标记和侦听器内的HTML中
index.html
<script>
document.addEventListener('DOMContentLoaded', function(e){
var field1 = document.getElementById('field1');
var field2 = document.getElementById('field2');
var submit = document.getElementById('submit');
});
</script>
<form method='post' action='some-url'>
<input type='text' id='field1'/>
<input type='text' id='field2'/>
etc...
<input type='submit' id='submit'/>
</form>
index.html
document.addEventListener（'DOMContentLoaded'，函数（e）{
var field1=document.getElementById（'field1'）；
var field2=document.getElementById（'field2'）；
var submit=document.getElementById（'submit'）；
});
等
或者像下面这样
file.js
document.addEventListener('DOMContentLoaded', function(e){
var field1 = document.getElementById('field1');
var field2 = document.getElementById('field2');
var submit = document.getElementById('submit');
});
index.html
<form method='post' action='some-url'>
<input type='text' id='field1'/>
<input type='text' id='field2'/>
etc...
<input type='submit' id='submit'/>
</form>
file.js
document.addEventListener（'DOMContentLoaded'，函数（e）{
var field1=document.getElementById（'field1'）；
var field2=document.getElementById（'field2'）；
var submit=document.getElementById（'submit'）；
});
index.html
等
最佳做法是在html正文的末尾有一个包含在html文件中的外部javascript文件
<body>
awesome html ...
<script src='/path/to/file.js'></script>
</body>
很棒的html。。。
通过在主体末尾加载脚本，您可以确保元素已加载并且在DOM中可用，以便javascript可以通过Id或其他方式获取它们
<>如果你想提高你的页面性能（并且有一个相当大的JS文件），你应该考虑缩小你的JavaScript。例如，你可以用大口大口喝来实现 应该在这些html输入字段之后调用这些脚本。通常JavaScript文件包含在html正文的末尾。这样javascript可以在加载后在主体上工作。虽然js有自己的功能在加载主体后自动运行，但标准是在主体底部包含js文件
要考虑的一个重要要点是：假设您已经使用jQuery，还有另一个JS用于滑块。如果slider的js是使用jquery编写的，那么在加载jquery文件之后，必须加载slider js文件
通常情况下，javascript会放在body标记的前面，或者，如果你想玩/搞乱DOM，请记住使用这个。在jquery中生活
第二个例子是首选方法。尽量保持你的html和JSseparate@michael谢谢大家，我很好奇，因为我在很多网站上都看到过，比如说，一个脚本标签就放在头标签里面。为什么会这样？之所以这样做的更重要的原因（考虑到jquery如此常见）是javascript加载阻止了所有其他资产的加载，直到javascript被下载并执行。加载JS last实际上并没有加快页面的加载速度，但由于它在页面底部时不会阻止图像和CSS，因此最终用户看起来加载速度更快。谢谢！还有一件事，所以一旦我分离了文件并创建了一些名称空间，我就要抓住javascript文件或html中脚本中的元素。例如，我创建了一个名称空间，并将其命名为namespace.init（）。我应该在名称空间内调用document.getElementById和attachth侦听器，还是通过namespace.init（document.getElementById（'some element'））传递元素？谢谢，我希望我说得很清楚！不，对不起，我不明白但作为一条简单的规则，尽可能将所有javascript放在js文件中