Javascript 避免两次包含js文件的方法_Javascript_Html

Javascript 避免两次包含js文件的方法

javascript html

Javascript 避免两次包含js文件的方法,javascript,html,Javascript,Html,这是一个简单的html文件： <!DOCTYPE html> <html> <head> <title>Test Uploading Func.</title> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" charset="utf-8" src="jq

这是一个简单的html文件：

<!DOCTYPE html>
<html>
   <head>
<title>Test Uploading Func.</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery-1.7.2.js">                  </script>        
<link type="text/css" href="jquery-ui-1.8.21.custom.css" rel="Stylesheet" />
    <script type="text/javascript" src="jquery-ui-1.8.21.custom.min.js"></script>

        <!--Include js file-->
        <script type="text/javascript" src="upload.js" ></script>
</head>
<body>
    <button id="Upload" value="upload">upload</button>      
    <script type="text/javascript" src="upload.js" ></script>
</body>

如果我只是在开头包含js文件，选择器#无法知道id上传，因此我必须再次包含它在文件的末尾。。。我知道这是不对的。但我不知道怎么解决？我们不是把所有的js文件都包含在标记头中吗？我展示的合适的编码风格是什么？谢谢

更新问题

如果我有很多这样的场景，我应该向所有函数添加“$（document）.ready（）”吗？有点奇怪。。。还有别的办法吗？或者web开发人员总是这样做

我应该在哪里包括我的js文件？到底是开始还是结束

如果我最后把它们都包括进来，这种问题就不会出现了。那么为什么很多人一开始就包含js文件呢？

为什么不检查

$（document）.ready（）

，只包含一次：

$(document).ready(function() {
    $( '#Upload' ).bind('click', function(){
        alert(">");
    });
});

为什么不检查

$（document）.ready（）

，只包含一次：

$(document).ready(function() {
    $( '#Upload' ).bind('click', function(){
        alert(">");
    });
});

在选择元素之前，请等待DOM被删除：

$(document).ready(function () {
    $( '#Upload' ).bind('click', function(){
        alert(">");
    });
});

更新：

如果您正在操作代码运行时希望出现在页面上的元素，则应始终使用

$（document）.ready（…）

。如果您的代码位于文档的

中，这一点尤为重要

如果您的代码在

标记内，则不需要使用

$（document）.ready（…）

，但请注意有标记。

在选择元素之前等待DOM：

$(document).ready(function () {
    $( '#Upload' ).bind('click', function(){
        alert(">");
    });
});

更新：

如果您正在操作代码运行时希望出现在页面上的元素，则应始终使用

$（document）.ready（…）

。如果您的代码位于文档的

中，这一点尤为重要

您不需要使用

$（document）.ready（…）

如果您的代码在

标记内，但请注意有标记。

如果您使用jQuery，则应始终将其放置在

$（document）.ready（function（）{…code here…}）

或

$（function（）{…code here…}）

如果您不知道引用的元素是否已加载。通过这种方式，您可以确保一切都能按照您的预期进行。此函数还有另一个问题，但这是最重要的。

如果使用jQuery，应始终将其放在

$（document）.ready（function（）{…code here…}）

或

$（function（）{…code here…}）

如果您不知道引用的元素是否已加载。通过这种方式，您可以确保一切都能按照您的预期进行。这个函数还有另一个问题，但这是最重要的。

通常认为最好将所有脚本放在body标记的底部。唯一一次我通常不这样做的是专门的脚本，需要在顶部，如HTML5 shiv或某些分析脚本

这样做的主要原因是脚本解释暂停了HTML/CSS呈现，这实际上会降低可感知的加载时间性能

另一个好处是，您通常不必为DOM就绪事件而烦恼，因为当脚本在引用元素下方触发时，您可以确定HTML是“就绪”的。

通常认为最好将所有脚本放在body标记的底部。唯一一次我通常不这样做的是专门的脚本，需要在顶部，如HTML5 shiv或某些分析脚本

这样做的主要原因是脚本解释暂停了HTML/CSS呈现，这实际上会降低可感知的加载时间性能

另一个好处是，您通常不必为DOM就绪事件而烦恼，因为当脚本在引用元素下方启动时，您可以确定HTML已“就绪”。

@Stallman:我更新了我的答案，希望这会有所帮助。如果您需要更多说明，请告诉我您的意思是我们应该始终在js文件中使用$（document）.ready（…），包括标记头中的文件？是的，如果您正在访问DOM中的元素。

标题中的JavaScript将在浏览器解析页面其余部分之前运行。这就是为什么您必须等待ready
事件触发的原因。谢谢！链接确实帮了我很多忙。在引用元素的结束标记之后的任何脚本都应该可以工作。我不知道有例外。当我可以将所有脚本放在底部时，我通常不使用docready或windowload。我认为，如果你知道在你的脚本之后没有后续的HTML，那么即使是HTML和正文也可以安全访问。@Stallman:我更新了我的答案，希望对你有所帮助。如果您需要更多说明，请告诉我您的意思是我们应该始终在js文件中使用$（document）.ready（…），包括标记头中的文件？是的，如果您正在访问DOM中的元素。标题中的JavaScript将在浏览器解析页面其余部分之前运行。这就是为什么您必须等待ready
事件触发的原因。谢谢！链接确实帮了我很多忙。在引用元素的结束标记之后的任何脚本都应该可以工作。我不知道有例外。当我可以将所有脚本放在底部时，我通常不使用docready或windowload。我认为，如果您知道在脚本之后没有后续的HTML，那么即使是HTML和body也可以安全访问。