Question

我最近说过想知道组织JavaScript文件的最佳方式是什么。

示例：

我们说我有一个带输入字段的HTML。我想在提交之前验证这些字段。

我在哪里称这些类型的函数document.getElementById()？在外部JavaScript文件中或在script标记内的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>

或类似以下内容

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>

Answer 1

最佳做法是在html主体的末尾添加一个包含在html文件中的外部javascript文件。

<body>
    awesome html ... 
    <script src='/path/to/file.js'></script>
</body>

通过在正文的末尾加载脚本，您可以确保元素在DOM中加载并可用，以便javascript可以通过Id或其他任何方式获取它们。

如果你想提高你的网页性能（并且有一个重要的js文件），你应该考虑缩小你的javascript。例如，您可以使用gulp执行此操作。

Answer 2

您应该在这些html输入字段之后调用这些脚本。通常JavaScript文件包含在html正文的末尾。因此，javascript可以在加载后在body上运行。虽然js有自己的功能，可以在加载主体后自动运行，但标准是将js文件包含在主体的底部。

要考虑的一个重要的重点是：假设您已经使用了jquery并且还有另一个js用于滑块。如果使用jquery写入滑块的js，则必须在加载jquery文件后加载滑块js文件。

Answer 3

通常的练习，javascript将被放置在body标签之前，或者如果你想玩/搞乱DOM，总是记得在jquery中使用这个.live。

http://api.jquery.com/live/

组织外部Javascript文件

3 个答案: