如何避免內聯javascript？

讓說我有了下面的HTML頁面：如何避免內聯javascript？

<input type="button" id="clickme" value="Click Me" />

在同一頁上，我有以下腳本：

<script type="text/javascript"> 

    $('#clickme').click(function(){ 
     console.log("clicked"); 
}); 

</script>

它是罰款以上是內嵌在或頁面是它最好有一個libray的console.log(...)，所以這將是這樣的：

<script type="text/javascript src="external.js"></script> 
<script type="text/javascript"> 

    $('#clickme').click(function(){ 
     LogToConsole("clicked"); 
}); 

</script>

爲了把它帶到一個新的水平，是它甚至是tter把整個點擊功能外部庫，所以代碼最終會變成這樣的：」

<script type="text/javascript src="external.js"></script> 
<script type="text/javascript"> 

ClickMe("clicked"); 

</script>

以上仍包含內嵌JavaScript，或者我在線的理解，因爲它似乎JavaScript的不正確，這是不可能的避免？

來源

2016-08-30 xaisoft

你可以把你的整個JS代碼放在一個外部腳本中，完全避免內聯JS代碼。這就是我所做的。 –

術語「在線」沒有在任何地方的標準中定義，它的術語通常是指在元素屬性中添加腳本，比如'

如何避免內聯的JavaScript？

我能想到的避免使用內嵌JavaScript的最佳方法之一是簡單地而不是腳本內聯JavaScript。其他地方

<script type="text/javascript" src="external.js"></script>

然後在你的HTML文檔，放在元素觸發您點擊功能：

也就是說，在你的HTML文檔的頁眉/頁腳，源的外部JS文件，像這樣

<input type="button" id="clickme" value="Click Me" />

最後，在external.js，放在代碼觸發您點擊：

$('#clickme').click(function() { 
    LogToConsole("clicked"); 
}

通過將JavaScript放在externel JS文件中，您不是在HTML文檔上內嵌JavaScript。從你的問題來看，你對內聯JavaScript的理解確實是「不正確的」。但是通過確認內聯JavaScript僅僅意味着在您的HTML文件中編寫JS代碼，您現在明白了寫入（或不寫）內聯JS的意義。

順便說一句，在<script>標籤是不是內聯JS !!!!它是HTML。

來源

2016-08-30 02:30:10 8protons

謝謝你。我明白腳本標記是HTML，對於混淆抱歉。你的最後一段代碼幫助我。我不知道我可以將整個點擊甚至放在外部文件中。我想我必須通過元素來將點擊綁定到點擊事件，如果有意義 – xaisoft

@xaisoft這是完全合理的。 – 8protons

我會建議大部分時間使用外部JavaScript。 Javascript文件在與html混淆時很難調試。想一想，如果你有幾百行javascript，分散在一個文檔中。如果是這種情況，那麼調試BOTH html和javascript將需要很長時間。

此規則的唯一例外是性能。外部JavaScript文件由瀏覽器緩存，但它們需要增加HTTP請求量，這會減慢頁面加載時間。這實際上取決於瀏覽器回收（緩存）JavaScript外部工作表的次數。如果每個會話都有大量的視圖，那麼它會被回收利用，因此使用外部文件是有意義的，但是對於每個會話中沒有大量視圖的主頁，因此不會獲得回收利用，使用內聯更合理。

有關性能的更多信息，你可以閱讀：

來源

2016-08-30 02:23:23 the12

爲了把它帶到一個新的水平，你可以把一切都在圖書館做：

<script type="text/javascript" src="external.js"></script> 
<script type="text/javascript" src="clickme.js"></script>

注意上面將工作完全與內聯相同。也就是說，代碼的工作與否取決於您放置腳本標記的位置（將其視爲瀏覽器副本並將外部代碼粘貼到內聯 - 這基本上是發生了什麼）。

之後您可以將它帶到下一個級別：使腳本獨立於它們在HTML中的位置。對於大多數人來說，這意味着讓即使他們包含在head腳本工作：

<html> 
    <head> 
    <script type="text/javascript" src="external.js"></script> 
    <script type="text/javascript" src="clickme.js"></script> 
    </head> 
    <body> 
    <input type="button" id="clickme" value="Click Me" /> 
    </body> 
</html>

但是，如果你嘗試這樣做，你會碰到一個問題：該按鈕"clickme"不存在，當你有clickme.js文件，所以腳本將無法工作。爲了使其工作，您可以在加載或DOM準備好時運行腳本。 jQuery使這容易：

// clickme.js 
$(document).ready(function(){ 
    // jQuery will wait until the document is loaded 
    // before executing code inside here 

    ClickMe("clicked"); 
});

來源

2016-08-30 02:29:52 slebetman

謝謝，你的樣品幫了我很多。 – xaisoft

如何避免內聯javascript？

回答

相關問題