正在加载.js文件<head>
[英]Loading .js file in <head>
问题描述
So I am new to javascript (in fact, new to programming in general). 
因此，我是javascript的新手（实际上，对编程而言是新手）。
My question is, can I consider loading the .js file in the 我的问题是，我可以考虑将.js文件加载到
<head><script src="script.js"></script>...</head>
as loading a header file (like in c/c++)? 作为加载头文件（如C / C ++）？
I guess not. 我猜不会。 Suppose my script.js looks like this: 假设我的script.js看起来像这样：
function copyToClipboard(text)
{window.prompt("Copy to clipboard: Ctrl+C, Enter", text);}
and my index.html looks like this: 我的index.html看起来像这样：
<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
</head>
<body>
<textarea id="a" autofocus="true"></textarea>
<script> onclick=copyToClipboard(document.getElementById("a").value);
</script>
</body>
</html>
It does not work, namely, it does not wait for my clicking (which means that the function is loaded correctly-it is called successfully, it is just that the pop-up does not wait for the mouse event). 它不起作用，也就是说，它不等待我的单击（这意味着该函数已正确加载-成功调用了该函数，只是弹出窗口不等待鼠标事件）。 But if I put the script in-line, it works: 但是，如果我将脚本插入行内，它将起作用：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<textarea id="a" autofocus="true"></textarea>
<script>onclick=function copyToClipboard(text) {
window.prompt("Copy to clipboard:Ctrl+C,Enter",document.getElementById("a").value);
}
</script>
</body>
</html>
2 个解决方案
解决方案1
3 已采纳 2014-06-01 07:01:34
The reason why the first code doesn't work is that you're calling the copyToClipboard() function and assigning the return value to the onclick variable. 第一个代码不起作用的原因是您正在调用copyToClipboard()函数，并将返回值分配给onclick变量。 In the second code you're correctly assigning it a function reference instead of calling the function immediately. 在第二个代码中，您正在正确地为其分配函数引用，而不是立即调用该函数。
In other words: 换一种说法：
onclick = copyToClipboard(document.getElementById("a").value);
"Call copyToClipboard() , assign return value ( undefined ) to the onclick variable" “调用copyToClipboard() ，将返回值（ undefined ）分配给onclick变量”
onclick = function copyToClipboard(text) { ...
"Assign a reference to a function called copyToClipboard() to the onclick variable" “ copyToClipboard()称为copyToClipboard()的函数的引用分配给onclick变量”
To make it work with the function definition in an external script, wrap the function call in an anonymous function: 要使其与外部脚本中的函数定义一起使用，请将函数调用包装在匿名函数中：
onclick = function() {
copyToClipboard(document.getElementById("a").value);
};
解决方案2
3 2014-06-01 07:05:33
All praise the power of javascript to mislead developers into diagnosing their problems incorrectly! 所有人都赞扬javascript的功能，误导开发人员错误地诊断他们的问题！
This is not how you define an inline onclick handler. 这不是定义内联onclick处理程序的方式。 An inline onclick handler is an attribute(or property, as we'll find out in a bit) of an html element: 内联onclick处理程序是html元素的属性（或属性，稍后我们会发现）：
<textarea id="a" autofocus="true" onclick="copyToClipboard(this.textContent)"></textarea>
What you did with the <script> tag was simply include some javascript code, to be executed as the browser is parsing your html: 您对<script>标记所做的只是包含一些JavaScript代码，这些代码将在浏览器解析html时执行：
<script> onclick=copyToClipboard(document.getElementById("a").value);</script> calls your function, and assigns its return value to onclick . <script> onclick=copyToClipboard(document.getElementById("a").value);</script>调用您的函数，并将其返回值分配给onclick 。
But wait, why does your second snippet work? 但是，等等，为什么您的第二个片段起作用了？
This is because onclick is also a property of dom elements. 这是因为onclick也是dom元素的属性。 It also happens that you can assign a click handler to window itself - this is what your second snippet is actually doing(thanks to an uncool feature of javascript that attempts to assign to an undefined variable assigns to properties of the global object). 也可能发生了，您可以为window本身分配一个单击处理程序-这就是您的第二个片段实际上正在做的事情（由于javascript的一个很酷的功能，它试图分配给一个未定义的变量，从而将其分配给全局对象的属性）。 That means that no matter where you click, your new click handler will be called. 这意味着无论您在何处单击，都将调用新的单击处理程序。
As to your opening question, you can't really say that tags are like includes - a script can involve more than just declarations and definitions, unlike an included file. 至于开头的问题，您不能真正说出标签就像包含-脚本不仅仅包含声明和定义，还不同于包含文件。 You can look into some of the module standards/frameworks, like RequireJS , for more similar functionality. 您可以查看一些模块标准/框架，例如RequireJS ，以获取更多类似功能。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.