JavaScript程式開發之JS程式碼放置的位置_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

JavaScript程式開發之JS程式碼放置的位置_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:19 PM

JavaScript在頁面中使用，那麼這些JS程式碼該放在什麼位置呢？下面來看一下。

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

1.1介面上的Head部分

可以直接放在head標籤內，如下碼

<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沒有什麼差別，一般程式碼量不多的時候，而且只有目前頁面使用這些js，那就直接寫在介面上吧。

2、JS檔

對於那些複雜的，而且程式碼量很多的JS，最好放在專門的一個.js檔案裡，然後在頁面上按照js檔案的相對路徑引用進來。

這樣的好處是，可以防止很多重複的js程式碼。可以將一些公用的js方法放在外部js檔案裡。

例如，一般使用visual studio 2010新建的asp.net工程中都帶的有jquery-1.4.1.js文件，我們看怎麼使用這個js文件。
例如頁面的文件結構如圖，

要在MyJSFrm.aspx中使用這個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>

總之，別忘了使用相對目錄，如果目前頁面檔案的目錄層級比較深，那就使用../自己算目錄的層級吧。

js 三種位置的差異：

head :

-- 在呼叫腳本時，已經完成載入了
--

body ：

-- 在生成頁面的時候就已經完成載入了
--

外部js ：

-- 引用外部js 注意：外部js不能包含<script></script>這兩個標籤
-- 主要是為了節省當多個頁面重複呼叫相同js函數時，可以節省在每個頁面中嵌入相同的js程式碼；

瀏覽器不辨識 js 解決方法：

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。