JavaScript程序開發(fā)之JS代碼放置的位置

更新時(shí)間：2016年01月15日 11:16:23 作者：西北白楊樹

JavaScript在頁面中使用，那么這些JS代碼應(yīng)該放在什么位置呢？接下來通過本文一起學(xué)習(xí)吧

JavaScript在頁面中使用，那么這些JS代碼應(yīng)該放在什么位置呢？下面來看一下。

一般來說有兩種方式，寫在界面上和使用.js文件。

1.1界面上的Head部分

可以直接放在head標(biāo)簽內(nèi)，如下代碼

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>testPage</title> 
<script type="text/javascript"> 
//your js code 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
</div> 
</form> 
</body> 
</html>

1.2界面上的body部分

一般都是直接放在body部分的，如下

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>testPage</title> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
</div> 
</form> 
<script type="text/javascript"> 
//your js code 
</script> 
</body> 
</html>

放在head和body中沒有什么區(qū)別，一般代碼量不多的時(shí)候，而且只有當(dāng)前頁面使用這些js，那就直接寫在界面上吧。

2、JS文件

對(duì)于那些復(fù)雜的，而且代碼量很多的JS，最好放在專門的一個(gè).js文件里，然后在頁面上按照js文件的相對(duì)路徑引用進(jìn)來。

這樣的好處是，可以防止很多重復(fù)的js代碼?？梢詫⒁恍┕玫膉s方法放在外部js文件里。

比如，一般使用visual studio 2010新建的asp.net工程中都帶的有jquery-1.4.1.js文件，我們看怎么使用這個(gè)js文件。
比如頁面的文件結(jié)構(gòu)如圖，

要在MyJSFrm.aspx中使用這個(gè)js文件就這樣引入。

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>testPage</title> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
</div> 
</form> 
<script type="text/javascript" src="/Scripts/jquery-1.4.1.js"></script> 
<script type="text/javascript"> 
//your js code 
</script> 
</body> 
</html>

總之，別忘了使用相對(duì)目錄，如果當(dāng)前頁面文件的目錄層級(jí)比較深，那就使用../自己算目錄的層級(jí)吧。

js 三種位置的區(qū)別：

head :

-- 在調(diào)用腳本時(shí)，已經(jīng)完成加載了
--

body ：

-- 在生成頁面的時(shí)候就已經(jīng)完成加載了
--

外部js ：

-- 引用外部js 注意：外部js不能包含<script></script>這兩個(gè)標(biāo)簽
-- 主要是為了節(jié)省當(dāng)多個(gè)頁面重復(fù)調(diào)用相同js函數(shù)時(shí)，可以節(jié)省在每個(gè)頁面中嵌入相同的js代碼；

瀏覽器不識(shí)別 js 解決辦法：

您可能感興趣的文章:

相關(guān)文章

微信小程序?qū)崿F(xiàn)播放音頻
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)播放音頻，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-06-06
SharePoint 客戶端對(duì)象模型 (一) ECMA Script
今天開始SharePoint Client對(duì)象模型的介紹，簡(jiǎn)而言之，SharePoint通過WCF技術(shù)在服務(wù)端提供數(shù)據(jù)服務(wù)，這些服務(wù)提供的內(nèi)容相當(dāng)于SharePoint API的一個(gè)子集
2011-05-05
Eclipse去除js(JavaScript)驗(yàn)證錯(cuò)誤
這篇文章主要是對(duì)Eclipse去除js(JavaScript)驗(yàn)證錯(cuò)誤進(jìn)行了介紹。在Eclipse中，js文件常常會(huì)報(bào)錯(cuò)?？梢酝ㄟ^如下幾個(gè)步驟解決
2014-02-02
javascript 精確獲取樣式屬性（上）
設(shè)置與獲取樣式屬性是UI控件與特效庫非常關(guān)鍵的部分，設(shè)置樣式我們基本可以用cssText來包打天下，但獲取樣式就不是這回事了。
2010-01-01
JavaScript實(shí)現(xiàn)九九乘法表的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄狫avaScript實(shí)現(xiàn)九九乘法表的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-06-06
JavaScript 利用StringBuffer類提升+=拼接字符串效率
JavaScript 利用StringBuffer類提升+=拼接字符串效率，需要的朋友可以參考下。
2009-11-11
微信小程序?qū)悠吲Ｔ拼鎯?chǔ)的方法
本篇文章主要介紹了小程序?qū)悠吲Ｔ拼鎯?chǔ)的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-07-07
Javascript 調(diào)試?yán)?Firebug使用詳解六
有時(shí)候，為了更清楚方便的查看輸出信息，我們可能需要將一些調(diào)試信息進(jìn)行分組輸出，那么可以使用console.group來對(duì)信息進(jìn)行分組，在組信息輸出完成后用console.groupEnd結(jié)束分組。
2009-07-07
JavaScript數(shù)組類型Array相關(guān)的屬性與方法詳解
這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)組類型Array相關(guān)的屬性與方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-09-09
js獲取Html元素的實(shí)際寬度高度的方法
下面小編就為大家?guī)硪黄猨s獲取Html元素的實(shí)際寬度高度的方法。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-05-05