[譯]內聯Javascript vs 外置Javascript
本文翻譯youtube上的up主kudvenkat的javascript tutorial播放單
源地址在此:
https://www.youtube.com/watch?v=PMsVM7rjupU&list=PL6n9fhu94yhUA99nOsJkKXBqokT3MBK0b
本次視頻中我們將討論
1.Javascript可以出現的不同位置
2.外置Javascript相較於內聯Javascript的好處
Javascript代碼可以出現在網頁中的任意位置或者是外置一個.js的文件.我們來看看兩種方法的例子
內聯Javascript例子: 在這個例子中, IsEven() 函數是以內聯的方式出現在網頁中的
[html] [head] [script type="text/javascript"] function IsEven() { var number = document.getElementById("TextBox1").value; if (number % 2 == 0) { alert(number + " is even number"); } else { alert(number+ " is odd number"); } } [/script] [/head] [body] [form id="form1" runat="server"] Number : [asp:TextBox ID="TextBox1" runat="server"][/asp:TextBox] [input type="button" value="Check Number" onclick="IsEven()" /] [/form] [/body] [/html]
外置Javascript例子: 將Javascript儲存在外部.js文件中的步驟
1.在Visual Studio中,在Solution Explorer中右鍵點擊一個項目名然後選擇添加新項目
2.在"添加新項目"對話框中選擇"JScript文件".然後將文件命名為"ExternalJavaScript.js"然後點擊添加
3.復制粘貼如下的Javascript函數到"ExternalJavasScript.js"文件
function IsEven() { var number = document.getElementById("TextBox1").value; if (number % 2 == 0) { alert(number + " is even number"); } else { alert(number + " is odd number"); } }
4.在網頁的<head>部分添加指向外置JS文件的路徑,如下所示
[script type="text/javascript" src="ExternalJavaScript.js"][/script]
5.到此為止,在你的網頁上,HTML應該如下所示
[html] [head] [script type="text/javascript" src="ExternalJavaScript.js"][/script] [/head] [body] [form id="form1" runat="server"] Number : [asp:TextBox ID="TextBox1" runat="server"][/asp:TextBox] [input type="button" value="Check Number" onclick="IsEven()" /] [/form] [/body] [/html]
使用外置Javascript相較於內聯Javascript的好處在於:
可維護性:外置Javascript文件可以被多個頁面調用而不用在每個頁面上反復地書寫.如果有需要改變的部分,你只需要在一處修改即可.所以外置Javascript導致代碼工作量減少,進而使得維護手續也更加方便
關註點分離:將Javascript封裝在外部的.js文件遵循了關註點分離的法則.總體來說,分離HTML,CSS和Javascript從而讓我們更容易操縱他們.而且如果是多名開發者同步工作的話,這樣也更方便,
表現性:外置Javascript文件可以被瀏覽器緩存住,但是內聯Javascript在每次頁面加載的哦時候都會被重新加載
[譯]內聯Javascript vs 外置Javascript