組織外部Javascript文件
[英]Organizing External Javascript Files
問題描述
我最近說過想知道什么是組織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>
3 個解決方案
解決方案1
1 2015-07-09 04:11:31
最佳做法是在html正文末尾的html文件中包含一個外部javascript文件。
<body>
awesome html ...
<script src='/path/to/file.js'></script>
</body>
通過在正文末尾加載腳本，您可以確保元素已加載並在DOM中可用，以便javascript可以通過ID或其他方式獲取它們。
如果您想提高頁面性能（並擁有較大的js文件），則應考慮縮小JavaScript。 例如，您可以用gulp做到這一點。
解決方案2
0 2015-07-09 04:12:08
您應該在這些html輸入字段之后調用這些腳本。 通常，JavaScript文件包含在html主體的末尾。 這樣，JavaScript可以在加載后在身體上起作用。 盡管js具有自己的功能，可在加載主體后自動運行，但標准是在主體底部包含js文件。
需要考慮的重要重要一點是：假設您已經使用了jquery，並且滑塊還有另一個js。 如果滑塊的js是使用jquery編寫的，則必須在加載jquery文件之后加載滑塊的js文件。
解決方案3
0 2015-07-09 04:14:06
通常的做法是，將javascript放在body標簽之前，或者，如果您想使用DOM玩/弄亂，請始終記住在jquery中使用此.live。
整理由PHP，Smarty，JavaScript，MySQL支持的網站文件
[英]Organizing files of a website powered by PHP, Smarty, JavaScript, MySQL
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.