饿了么配送app下载

在網頁中編寫JavaScript代碼時，有3種引入JavaScript代碼的方式，分別是行內式、內部式和外部式，下面分別對這3種引入方式進行講解。

1．行內式

行內式將JavaScript代碼作為HTML標簽的屬性值使用。例如，在打開網頁時自動彈出一個警告框，警告框中的提示內容為“通過行內式引入JavaScript代碼”，示例代碼如下。

<body onload=＂alert（＇通過行內式引入JavaScript代碼＇）;＂>
</body>

在上述示例代碼中，<body>標簽的onload屬性表示頁面加載事件，用于在網頁打開時自動執行JavaScript代碼，該屬性的值為行內式JavaScript代碼。

需要說明的是，使用行內式不適合在HTML標簽中書寫大量的JavaScript代碼，這是因為行內式代碼與HTML標簽混合在一起，不利于代碼維護。

2．內部式

內部式將 JavaScript 代碼寫在<script>標簽中。<script>標簽可以寫在<head>標簽或<body>標簽中。例如，在打開網頁時自動彈出一個警告框，警告框中的提示內容為“通過內部式引入JavaScript代碼”，示例代碼如下。

<body>
  <script>
    alert（＇通過內部式引入JavaScript代碼＇）;
  </script>
</body>

由于通過內部式可以將多行 JavaScript 代碼寫在<script>標簽中，相比于行內式，使用內部式更方便閱讀代碼，所以內部式是引入JavaScript代碼的常用方式之一。

另外，<script>標簽有一個type屬性，該屬性表示腳本類型。由于在HTML5中type屬性的默認值為text/javascript（表示JavaScript），所以在使用HTML5時可以省略type屬性。

3．外部式

外部式將JavaScript代碼單獨寫在一個文件中（一般使用“.js”作為該文件的擴展名），然后在HTML中通過<script>標簽引入該文件。外部式適合在JavaScript代碼量較多的情況下使用。例如，創建一個test.js文件，在該文件中編寫如下代碼。

alert（＇通過外部式引入JavaScript代碼＇）;

在HTML文件中使用外部式引入JavaScript代碼，示例代碼如下。

<body>
    <script src=＂test.js＂></script>
</body>

上述代碼表示引入當前目錄下的test.js文件。需要注意的是，在使用外部式時，<script>標簽內不可以編寫JavaScript代碼。

以上分別介紹了引入JavaScript代碼的3種方式。在實際開發中，提倡結構、樣式、行為的分離，即分離 HTML、CSS、JavaScript 這3部分代碼，這樣可以提高代碼的可讀性和可維護性。當需要編寫大量的、邏輯復雜的、具有特定功能的JavaScript代碼時，推薦使用外部式。

外部式相比內部式，具有以下3點優勢。

① 使用外部式JavaScript代碼存在于獨立文件中，有利于修改和維護，而使用內部式會導致HTML代碼與JavaScript代碼混合在一起。

② 使用外部式可以通過瀏覽器緩存提高響應速度。例如，在多個頁面中引入相同的JavaScript文件時，打開第1個頁面后，瀏覽器會將JavaScript文件緩存下來，下次打開其他頁面時就不用重新下載該文件。

③ 使用外部式有利于 HTML 頁面代碼結構化，可以把大量的 JavaScript 代碼分離到HTML頁面外，這樣既美觀，又方便文件級別的代碼復用。

另外，瀏覽器運行 JavaScript 代碼時，無論使用的是內部式還是外部式，頁面的加載和渲染都會暫停，等待腳本執行完成后才會繼續。為了盡可能減少對整個頁面的影響，推薦將不需要提前運行的JavaScript代碼所在的<script>標簽放在HTML文檔的底部。

多學一招：JavaScript異步加載

使用外部式時，為了減少JavaScript加載過程對頁面造成的影響，可以使用HTML5為<script>標簽新增的兩個可選屬性 async 和 defer，實現異步加載。實現異步加載后，即使JavaScript文件下載失敗，也不會阻塞后面的JavaScript代碼運行。

async 屬性用于異步加載，即先下載文件，不阻塞其他代碼運行，下載完成后再運行，示例代碼如下。

<script src=＂file.js＂ async></script>

defer屬性用于延后執行，即先下載文件，不阻塞其他代碼運行，直到網頁加載完成后再運行，示例代碼如下。

<script src=＂file.js＂ defer></script>

官术网_书友最值得收藏!