将非函数脚本从 HTML 迁移到 JS 文件

Question

作为初学者，我遇到了一个问题，我听从了几个意见的建议，以保持我的 HTML 文件干净，所以我创建了一个 JS 文件并开始将所有脚本迁移到它，一切正常直到我不得不在里面做这个：

<script>
document.getElementById("mobile-toggle").addEventListener("click",function(){
document.getElementById("mobile-date").innerHTML = "Today is ...";});
</script>

当这个脚本是我的 HTML 文件时，浏览器会自动运行但是当我把它放在 JS 文件中时，如果不使用函数调用它就无法工作名称，这就是我想要避免的，因为 javascript 建议不显眼，所以我的问题是“有没有办法让 JS 文件中的脚本自动成为运行而无需 [=18] 的调用=] 事件 ?

谢谢。

Answer 1

将您的脚本包含在具有 defer 属性的 HTML 中。当 HTML 准备好时，这将运行代码。您也可以将脚本标记放在末尾 </body> 之前，但我更喜欢将其放在顶部。

<head>
   <script src="/myscript.js" defer>
</head>

在myscript.js

(function() {
   // your code goes here
})();

将其包装到一个函数中可以提供您自己的作用域，并将另一个包装到括号中，最后的 () 将执行。

将非函数脚本从 HTML 迁移到 JS 文件

Migrate non function script from HTML to JS file

javascript

html

dom-events

unobtrusive-javascript