JS｜常規(guī)函數(shù)、嵌套、匿名、字面函數(shù)、閉包及函數(shù)做為

JS｜常規(guī)函數(shù)、嵌套、匿名、字面函數(shù)、閉包及函數(shù)做為對象方法

何計算機(jī)語言都會包含大量的內(nèi)置函數(shù)，當(dāng)然也可以自定義函數(shù)。

JS函數(shù)是由事件驅(qū)動或者當(dāng)它被調(diào)用時執(zhí)行的可重復(fù)使用的代碼塊。相對來說，JS的函數(shù)比較復(fù)雜。

目錄
1 常規(guī)函數(shù)
2 JS嵌套函數(shù)
3 JSt函數(shù)字面值
4 函數(shù)對象Function
5 匿名函數(shù)，也叫內(nèi)聯(lián)函數(shù)
6 閉包
7 內(nèi)聯(lián)函數(shù)作為對象的方法
8 常規(guī)函數(shù)做為對象的方法
9 對象字面量

1 常規(guī)函數(shù)

JS函數(shù)是先定義后調(diào)用。（C語言還要先聲明）

function myFunction(a,b)
{
return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);

JS可以在<script>標(biāo)簽中直接調(diào)用函數(shù)，也可以在鏈接或事件中調(diào)用。

2 JS嵌套函數(shù)

JavaScript允許函數(shù)用作數(shù)據(jù)，也允許在函數(shù)中嵌入函數(shù)。

function hypotenuse(a, b) {
function square(x) { return x*x; }
return Math.sqrt(square(a) + square(b));
}

hypotenuse(1, 2); // This will produce 2.2360

3 JSt函數(shù)字面值

字面值函數(shù)的語法很類似的函數(shù)聲明，不同之處在于它被用作表達(dá)，它不是作為一個聲明，函數(shù)名是必需的。

var func=function(x,y){ return x*y };
你可以在上面函數(shù)中調(diào)用如下：
func(10,20); // This will produce 200

4 函數(shù)對象Function

Function也是一個對象，可以使用new運算符創(chuàng)建一個實例。

<script type="text/javascript">
var variablename=new Function(Arg1, Arg2..., "Function Body");
</script>
下面是創(chuàng)建一個函數(shù)的例子：
<script type="text/javascript">
var func=new Function("x", "y", "return x*y;");
</script>

Function()函數(shù)構(gòu)造預(yù)期任意數(shù)量的字符串參數(shù)。最后一個參數(shù)是函數(shù)體，它可以包含任意JavaScript語句，用分號彼此分開。

請注意，F(xiàn)unction()構(gòu)造不通過任何參數(shù)，指定一個名字為它創(chuàng)建函數(shù)。使用Function()構(gòu)造函數(shù)創(chuàng)建的未命名的函數(shù)稱為匿名函數(shù)。

5 匿名函數(shù)，也叫內(nèi)聯(lián)函數(shù)

函數(shù)(沒有名字)定義可以被賦值給一個變量，該變量被用作函數(shù)的引用。

匿名函數(shù)是指那些無需定義函數(shù)名的函數(shù)。匿名函數(shù)與 Lambda 表達(dá)式（拉姆達(dá)表達(dá)式）是一回事。唯一的不同——語法形式不同。Lambda 表達(dá)式更進(jìn)一步。本質(zhì)上，它們的作用都是：產(chǎn)生方法——內(nèi)聯(lián)方法，也就是說，省去函數(shù)定義，直接寫函數(shù)體。

var abc=function(x,y){
return x+y;
}
alert(abc(2,3)); // "5"

匿名函數(shù)也可以作為事件方法：

window.onload=function(){
alert("Welcome");
}

var baz1=function() {
var foo=10;
var bar=2;
return foo * bar;
};
function mutil() {
var foo=10;
var bar=2;
return foo * bar;
};
alert(baz1());
var baz2=mutil();
alert(baz2);

baz1 與 baz2 完全一樣，但 baz1 與 baz2 相比，省去了函數(shù)定義，直接函數(shù)體——看上去多簡約。

6 閉包

閉包是定義在另一個函數(shù)中的匿名函數(shù)。當(dāng)外部函數(shù)退出時，它會返回內(nèi)部匿名函數(shù)的引用，使得通過引用調(diào)用內(nèi)部函數(shù)成為可能。閉包意味著局部變量對內(nèi)部函數(shù)仍然可用，即使它已經(jīng)超出其作用域。閉包可以讓變量一直存活到不再需要它們的時候。閉包，其實就是指程序語言中能讓代碼調(diào)用已運行的函數(shù)中所定義的局部變量。js中某個函數(shù)的內(nèi)部函數(shù)在該函數(shù)執(zhí)行結(jié)束后仍然可以訪問這個函數(shù)中定義的變量，這稱為閉包(Closure) 。

閉包可以用在許多地方。它的最大用處有兩個，一個是可以讀取函數(shù)內(nèi)部的變量，另一個就是讓這些變量的值始終保持在內(nèi)存中。

請看下面的代碼。

function f1(){
　　　　var n=999;
　　　　nAdd=function(){n+=1}
　　　　function f2(){
alert(n);
}
　　　　return f2;
　　}
　　var result=f1();
　　result(); // 999
　　nAdd();
　　result(); // 1000

在這段代碼中，result實際上就是閉包f2函數(shù)。它一共運行了兩次，第一次的值是999，第二次的值是1000。這證明了，函數(shù)f1中的局部變量n一直保存在內(nèi)存中，并沒有在f1調(diào)用后被自動清除。

為什么會這樣呢？原因就在于f1是f2的父函數(shù)，而f2被賦給了一個全局變量，這導(dǎo)致f2始終在內(nèi)存中，而f2的存在依賴于f1，因此f1也始終在內(nèi)存中，不會在調(diào)用結(jié)束后，被垃圾回收機(jī)制（garbage collection）回收。

這段代碼中另一個值得注意的地方，就是“nAdd=function(){n+=1}”這一行，首先在nAdd前面沒有使用var關(guān)鍵字，因此 nAdd是一個全局變量，而不是局部變量。其次，nAdd的值是一個匿名函數(shù)（anonymous function），而這個

匿名函數(shù)本身也是一個閉包，所以nAdd相當(dāng)于是一個setter，可以在函數(shù)外部對函數(shù)內(nèi)部的局部變量進(jìn)行操作。

function foo() {
var a=10;
function bar() {
a *=2;
return a;
}
return bar;
}

var baz=foo();
document.write(baz(),"<br>");
document.write(baz(),"<br>");
document.write(baz(),"<br>");
var blat=foo();
document.write(blat(),"<br>");
//20,40,80,20

7 內(nèi)聯(lián)函數(shù)作為對象的方法

function Distance(r,t){
this.rate=r;
this.time=t;
this.calculate=function() { return r * t;}
}

<body>
var trip1=new Distance(50, 1.5);
var trip2=new Distance(75, 3.2);
document.write("trip 1 distance: "+trip1.calculate(),"<br />");
document.write("trip 2 distance: "+trip2.calculate(),"<br />");
//75,240
</body>

8 常規(guī)函數(shù)做為對象的方法

var toy=new Object();
toy.name="Lego";
toy.color="red";
toy.shape="rectangle";
toy.display=printObject;
function printObject(){
document.write("<b>The toy is a " + toy.name + ".<br>");
document.write("It is a " + toy.color + " " + toy.shape + ".<br />");
}

<body>
<script>
toy.display();
toy.color="blue";
toy.display();
</script>
</body>

運行結(jié)果：

The toy is a Lego.
It is a red rectangle.
The toy is a Lego.
It is a blue rectangle.

9 對象字面量，也用匿名函數(shù)做為對象方法

<script>
var soldier={
name: undefined,
rank: "captain",
picture: "keeweeboy.jpg",
fallIn: function(){
document.write("At attention……<br>");
},
fallOut: function(){
document.write("Drop out of ……<br>");
}
};
</script>

<body>
<script>
soldier.name="Tian";
document.write("The soldier's name is ", soldier.name,".<br />");
document.write(soldier.name+"'s name is ", soldier.rank,".<br />");
soldier.fallIn();
soldier.fallOut();
</script>
</body>

－End－

ello, world！

本教程的這一部分內(nèi)容是關(guān)于 JavaScript 語言本身的。

但是，我們需要一個工作環(huán)境來運行我們的腳本，由于本教程是在線的，所以瀏覽器是一個不錯的選擇。我們會盡可能少地使用瀏覽器特定的命令（比如 alert），所以如果你打算專注于另一個環(huán)境（比如 Node.js），你就不必多花時間來關(guān)心這些特定指令了。我們將在本教程的下一部分中專注于瀏覽器中的 JavaScript。

首先，讓我們看看如何將腳本添加到網(wǎng)頁上。對于服務(wù)器端環(huán)境（如 Node.js），你只需要使用諸如 "node my.js" 的命令行來執(zhí)行它。

“script” 標(biāo)簽

JavaScript 程序可以在 <script> 標(biāo)簽的幫助下插入到 HTML 文檔的任何地方。

比如：

<!DOCTYPE HTML>
<html>
<body>
 <p>script 標(biāo)簽之前...</p>
 <script>
 alert('Hello, world!');
 </script>
 <p>...script 標(biāo)簽之后</p>
</body>
</html>

現(xiàn)代的標(biāo)記

type 屬性：<script type=...>

在老的 HTML4 標(biāo)準(zhǔn)中，要求 <script> 標(biāo)簽有 type 屬性。通常是 type="text/javascript"。這樣的屬性聲明現(xiàn)在已經(jīng)不再需要。而且，現(xiàn)代 HTML 標(biāo)準(zhǔn) —— HTML5 已經(jīng)完全改變了此屬性的實際含義。現(xiàn)在，該屬性可以被用于 JavaScript 模塊。但那是一個高級一點的話題，我們將會在此教程的其他章節(jié)中探討 JavaScript 模塊。

language 屬性：<script language=...>

這個屬性是為了顯示腳本使用的語言。這個屬性現(xiàn)在已經(jīng)沒有任何意義，因為語言默認(rèn)就是 JavaScript。不再需要使用它了。

腳本前后的注釋：

在非常古老的書籍和指南中，你可能會在 <script> 標(biāo)簽里面找到注釋，就像這樣：

<script type="text/javascript"><!--
 ...
//--></script>

現(xiàn)代 JavaScript 中已經(jīng)不這樣使用了。這些注釋是用于不支持 <script> 標(biāo)簽的古老的瀏覽器隱藏 JavaScript 代碼的。由于最近 15 年內(nèi)發(fā)布的瀏覽器都沒有這樣的問題，因此這種注釋能幫你辨認(rèn)出一些老掉牙的代碼。

外部腳本

如果你有大量的 JavaScript 代碼，我們可以將它放入一個單獨的文件。

腳本文件可以通過 src 屬性添加到 HTML 文件中。

<script src="/path/to/script.js"></script>

這里，/path/to/script.js 是腳本文件從站點根目錄開始的絕對路徑。當(dāng)然也可以提供當(dāng)前頁面的相對路徑。例如，src=“script.js” 表示當(dāng)前文件夾中的 “script.js” 文件。

我們也可以提供一個完整的 URL 地址，例如：

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>

要附加多個腳本，請使用多個標(biāo)簽：

<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
…

請注意：

一般來說，只有最簡單的腳本才嵌入到 HTML 中。更復(fù)雜的腳本存放在單獨的文件中。
使用獨立文件的好處是瀏覽器會下載它，然后將它保存到瀏覽器的緩存^[1]中。
之后，其他頁面想要相同的腳本就會從緩存中獲取，而不是下載它。所以文件實際上只會下載一次。
這可以節(jié)省流量，并使得頁面（加載）更快。

提醒：如果設(shè)置了 src 屬性，script 標(biāo)簽內(nèi)容將會被忽略。

一個單獨的 <script> 標(biāo)簽不能同時有 src 屬性和內(nèi)部包裹的代碼。

這將不會工作：

<script src="file.js">
 alert(1); // 此內(nèi)容會被忽略，因為設(shè)定了 src
</script>

我們必須進(jìn)行選擇，要么使用外部的 <script src="…">，要么使用正常包裹代碼的 <script>。

為了讓上面的例子工作，我們可以將它分成兩個 <script> 標(biāo)簽。

<script src="file.js"></script>
<script>
 alert(1);
</script>

總結(jié)

我們可以使用一個 <script> 標(biāo)簽將 JavaScript 代碼添加到頁面中。
type 和 language 屬性不是必需的。
外部的腳本可以通過 <script src="path/to/script.js"></script> 的方式插入。

有關(guān)瀏覽器腳本以及它們和網(wǎng)頁的關(guān)系，還有很多可學(xué)的。但是請記住，教程的這部分主要是針對 JavaScript 語言本身的，所以我們不該被瀏覽器特定的實現(xiàn)分散自己的注意力。我們將使用瀏覽器作為運行 JavaScript 的一種方式，這種方式非常便于我們在線閱讀，但這只是很多種方式中的一種。

作業(yè)題

1. 顯示一個提示語

重要程度：??????????

創(chuàng)建一個頁面，然后顯示一個消息 “I'm JavaScript!”。

在沙箱中或者在你的硬盤上做這件事都無所謂，只要確保它能運行起來。

你可以先看一下 新窗口的演示結(jié)果^[2]。

在微信公眾號「技術(shù)漫談」后臺回復(fù) 1-2-1 獲取本題答案。

2. 使用外部的腳本顯示一個提示語

重要程度：??????????

打開題目 1 的答案。將答案中腳本的內(nèi)容提取到一個外部的 alert.js 文件中，放置在相同的文件夾中。

打開頁面，確保它能夠工作。

你可以先看一下 新窗口的演示結(jié)果^[3]。

在微信公眾號「技術(shù)漫談」后臺回復(fù) 1-2-1 獲取本題答案。

現(xiàn)代 JavaScript 教程：開源的現(xiàn)代 JavaScript 從入門到進(jìn)階的優(yōu)質(zhì)教程。React 官方文檔推薦，與 MDN 并列的 JavaScript 學(xué)習(xí)教程^[4]。
在線免費閱讀：https://zh.javascript.info/

參考資料

[1] 緩存: https://en.wikipedia.org/wiki/Web_cache

[2] 新窗口的演示結(jié)果: https://zh.js.cx/task/hello-alert/solution/

[3] 新窗口的演示結(jié)果: https://zh.js.cx/task/hello-alert/solution/

[4] React 官方文檔推薦，與 MDN 并列的 JavaScript 學(xué)習(xí)教程: https://zh-hans.reactjs.org/docs/getting-started.html#javascript-resources

關(guān)注微信公眾號「技術(shù)漫談」，訂閱更多精彩內(nèi)容。

習(xí)目標(biāo)：了解JavaScript是如何與HTML結(jié)合來創(chuàng)建動態(tài)網(wǎng)頁，網(wǎng)頁中嵌入JavaScript的不同方式，JavaScript的內(nèi)容類型及其與<script>的關(guān)系

<script>元素

1、async:表示立即開始下載腳本，但不能阻止其他頁面動作，比如下載資源或者等待其他腳本加載。只對外部腳本文件有效。

2、charset：使用src屬性指定代碼字符集。這個屬性很少用，因為大多數(shù)瀏覽器不在乎它的值。

3、crossorigin；配置資源請求的CORS（跨源資源共享）設(shè)置。默認(rèn)情況下不使用CORS。crossorigin=“anonymous”配置文件請求不用設(shè)置憑據(jù)標(biāo)志。crossorigin=”use-credentials“設(shè)置憑據(jù)標(biāo)志，意味著出站請求會包含憑據(jù)。

4、defer:表示腳本可以延遲到文檔全部解析和顯示后再執(zhí)行。新版本中只能用于外部腳本。

5、integrity:允許比對接收到的資源和指定的加密簽名以驗證子資源完整性（SRI，Subresource integrity），如果驗證簽名不匹配則腳本不會執(zhí)行。這個屬性可以用于確保內(nèi)容分發(fā)網(wǎng)絡(luò)（CDN，Content Delivery Network）不會提供惡意內(nèi)容。

6、language：此屬性已被廢止。

7、src:表示包含外部要執(zhí)行的代碼的外部文件。

8、type:代替language，表示代碼塊中腳本語言的內(nèi)容類型（也稱為MIME類型），按照慣例這個值始終都是”text/JavaScript“，盡管”text/JavaScript“和”text/ecmascript“都已經(jīng)廢棄。JavaScript文件的MIME類型通常是”application/x-javascript“,不過給type屬性這個值的話可能會導(dǎo)致腳本被忽略。在非IE的瀏覽器中有效的值還有”application/JavaScript“和”application/ecmascript"。如果這個值是module，則代碼會被當(dāng)成是ES6模塊，而且只有這時候代碼中才能出現(xiàn)import和export關(guān)鍵字。

使用<script>的方式有內(nèi)聯(lián)和外嵌兩種，只要把code寫入<script>code</script>中就好，code中要是包含字符串“<script>”,只要加上轉(zhuǎn)義字符“\”即可。

如果要外嵌JavaScript代碼只要使用src屬性來鏈接外部文件即可如：

XHTML 文檔中，可以忽略結(jié)束標(biāo)簽寫成<script src=“example.js”/>即可，但是這在HTML中不能使用。

標(biāo)簽位置

過去把JavaScript和CSS一起寫在head中，但是這意味著必須下載所有code并解析和解釋完成后才開始渲染頁面，對于JavaScript很多的頁面會導(dǎo)致頁面渲染速度過慢，為解決這個問題，JavaScript一般寫在body元素的頁面內(nèi)容的最后邊，如下

<html>

<body>

message

<\body>

</html>

推遲使用腳本

在外聯(lián)JavaScript時可以使用defer屬性來推遲腳本的運行?？梢詫懗桑?/p>

<html>

<head>

</head>

<body>

message

<\body>

</html>

異步執(zhí)行腳本

async屬性從腳本處理方式上與defer類似，但是不同的是標(biāo)記async的腳本并不能保證腳本按照他們的出現(xiàn)順序執(zhí)行，比如：

<html>

<head>

</head>

<body>

message

<\body>

</html>

不能保證example1比example2先執(zhí)行。

動態(tài)加載腳本

除了<script>以外還可以用其他方式加載腳本。因為JavaScript可以使用DOM API，所以通過向DOM中動態(tài)地加入script元素同樣可以加載指定腳本。只要創(chuàng)建一個script元素并將其添加到DOM即可。

let script=document.createElement('script');

script.src='gibberish.js';

document.head.appendChild(script);

當(dāng)然，在把 HTMLElement 元素添加到 DOM 且執(zhí)行到這段代碼之前不會發(fā)送請求。默認(rèn)情況下，以這種方式創(chuàng)建的<script>元素是以異步方式加載的，相當(dāng)于添加了 async 屬性。不過這樣做可能會有問題，因為所有瀏覽器都支持 createElement()方法，但不是所有瀏覽器都支持 async 屬性。因此，如果要統(tǒng)一動態(tài)腳本的加載行為，可以明確將其設(shè)置為同步加載：

let script=document.createElement('script');

script.src='gibberish.js';

script.async=false;

document.head.appendChild(script);

以這種方式獲取的資源對瀏覽器預(yù)加載器是不可見的。這會嚴(yán)重影響它們在資源獲取隊列中的優(yōu)先級。根據(jù)應(yīng)用程序的工作方式以及怎么使用，這種方式可能會嚴(yán)重影響性能。要想讓預(yù)加載器知道這些動態(tài)請求文件的存在，可以在文檔頭部顯式聲明它們：

XHTML中的變化

可擴(kuò)展超文本標(biāo)記語言（XHTML，Extensible HyperText Markup Language）是將 HTML 作為 XML的應(yīng)用重新包裝的結(jié)果。與 HTML 不同，在 XHTML 中使用 JavaScript 必須指定 type 屬性且值為text/javascript，HTML 中則可以沒有這個屬性。XHTML 雖然已經(jīng)退出歷史舞臺，但實踐中偶爾可能也會遇到遺留代碼，為此本節(jié)稍作介紹。在 XHTML 中編寫代碼的規(guī)則比 HTML 中嚴(yán)格，這會影響使用<script>元素嵌入 JavaScript 代碼。下面的代碼塊雖然在 HTML 中有效，但在 XHML 中是無效的。

function compare(a, b) {

if (a < b) {

console.log("A is less than B");

} else if (a > b) {

console.log("A is greater than B");

} else {

console.log("A is equal to B");

}

</script>

在 HTML 中，解析<script>元素會應(yīng)用特殊規(guī)則。XHTML 中則沒有這些規(guī)則。這意味著 a < b語句中的小于號（<）會被解釋成一個標(biāo)簽的開始，并且由于作為標(biāo)簽開始的小于號后面不能有空格，這會導(dǎo)致語法錯誤。避免 XHTML 中這種語法錯誤的方法有兩種。第一種是把所有小于號（<）都替換成對應(yīng)的 HTML實體形式（<）。結(jié)果代碼就是這樣的：

function compare(a, b) {

if (a < b) {

console.log("A is less than B");

} else if (a > b) {

console.log("A is greater than B");

} else {

console.log("A is equal to B");

}

</script>

這樣代碼就可以在 XHTML 頁面中運行了。不過，缺點是會影響閱讀。好在還有另一種方法。第二種方法是把所有代碼都包含到一個 CDATA 塊中。在 XHTML（及 XML）中，CDATA 塊表示文檔中可以包含任意文本的區(qū)塊，其內(nèi)容不作為標(biāo)簽來解析，因此可以在其中包含任意字符，包括小于號，并且不會引發(fā)語法錯誤。使用 CDATA 的格式如下：

<script type="text/javascript"><![CDATA[

function compare(a, b) {

if (a < b) {

console.log("A is less than B");

} else if (a > b) {

console.log("A is greater than B");

} else {

console.log("A is equal to B");

}

]]></script>

在兼容 XHTML 的瀏覽器中，這樣能解決問題。但在不支持 CDATA 塊的非 XHTML 兼容瀏覽器中則不行。為此，CDATA 標(biāo)記必須使用 JavaScript 注釋來抵消：

//<![CDATA[

function compare(a, b) {

if (a < b) {

console.log("A is less than B");

} else if (a > b) {

console.log("A is greater than B");

} else {

console.log("A is equal to B");

}

//]]>

</script>

這種格式適用于所有現(xiàn)代瀏覽器。雖然有點黑科技的味道，但它可以通過 XHTML 驗證，而且對XHTML 之前的瀏覽器也能優(yōu)雅地降級。

廢棄的語法

自 1995 年 Netscape 2 發(fā)布以來，所有瀏覽器都將 JavaScript 作為默認(rèn)的編程語言。type 屬性使用一個 MIME 類型字符串來標(biāo)識<script>的內(nèi)容，但 MIME 類型并沒有跨瀏覽器標(biāo)準(zhǔn)化。即使瀏覽器默認(rèn)使用 JavaScript，在某些情況下某個無效或無法識別的 MIME 類型也可能導(dǎo)致瀏覽器跳過（不執(zhí)行）相關(guān)代碼。因此，除非你使用 XHTML 或<script>標(biāo)簽要求或包含非 JavaScript 代碼，最佳做法是不指定 type 屬性。在最初采用 script 元素時，它標(biāo)志著開始走向與傳統(tǒng) HTML 解析不同的流程。對這個元素需要應(yīng)用特殊的解析規(guī)則，而這在不支持 JavaScript 的瀏覽器（特別是 Mosaic）中會導(dǎo)致問題。不支持的瀏覽器會把<script>元素的內(nèi)容輸出到頁面上，從而破壞頁面的外觀。Netscape 聯(lián)合 Mosaic 拿出了一個解決方案，對不支持 JavaScript 的瀏覽器隱藏嵌入的 JavaScript 代碼。最終方案是把腳本代碼包含在一個 HTML 注釋中，像這樣：

<script><!--

function sayHi(){

console.log("Hi!");

}

//--></script>

使用這種格式，Mosaic 等瀏覽器就可以忽略<script>標(biāo)簽中的內(nèi)容，而支持 JavaScript 的瀏覽器則必須識別這種模式，將其中的內(nèi)容作為 JavaScript 來解析。雖然這種格式仍然可以被所有瀏覽器識別和解析，但已經(jīng)不再必要，而且不應(yīng)該再使用了。在XHTML 模式下，這種格式也會導(dǎo)致腳本被忽略，因為代碼處于有效的 XML 注釋當(dāng)中。

行內(nèi)代碼與外部文件

雖然可以直接在 HTML 文件中嵌入 JavaScript 代碼，但通常認(rèn)為最佳實踐是盡可能將 JavaScript 代碼放在外部文件中。不過這個最佳實踐并不是明確的強(qiáng)制性規(guī)則。推薦使用外部文件的理由如下。

? 可維護(hù)性。JavaScript 代碼如果分散到很多 HTML 頁面，會導(dǎo)致維護(hù)困難。而用一個目錄保存所有 JavaScript 文件，則更容易維護(hù)，這樣開發(fā)者就可以獨立于使用它們的 HTML 頁面來編輯代碼。

? 緩存。瀏覽器會根據(jù)特定的設(shè)置緩存所有外部鏈接的 JavaScript 文件，這意味著如果兩個頁面都用到同一個文件，則該文件只需下載一次。這最終意味著頁面加載更快。

? 適應(yīng)未來。通過把 JavaScript 放到外部文件中，就不必考慮用 XHTML 或前面提到的注釋黑科技。包含外部 JavaScript 文件的語法在 HTML 和 XHTML 中是一樣的。在配置瀏覽器請求外部文件時，要重點考慮的一點是它們會占用多少帶寬。在 SPDY/HTTP2 中，預(yù)請求的消耗已顯著降低，以輕量、獨立 JavaScript 組件形式向客戶端送達(dá)腳本更具優(yōu)勢。比如，第一個頁面包含如下腳本：

<script src="mainA.js"></script>

<script src="component1.js"></script>

<script src="component2.js"></script>

<script src="component3.js"></script>

...

后續(xù)頁面可能包含如下腳本：

<script src="mainB.js"></script>

<script src="component3.js"></script>

<script src="component4.js"></script>

<script src="component5.js"></script>

...

在初次請求時，如果瀏覽器支持 SPDY/HTTP2，就可以從同一個地方取得一批文件，并將它們逐個放到瀏覽器緩存中。從瀏覽器角度看，通過 SPDY/HTTP2 獲取所有這些獨立的資源與獲取一個大JavaScript 文件的延遲差不多。在第二個頁面請求時，由于你已經(jīng)把應(yīng)用程序切割成了輕量可緩存的文件，第二個頁面也依賴的某些組件此時已經(jīng)存在于瀏覽器緩存中了。當(dāng)然，這里假設(shè)瀏覽器支持 SPDY/HTTP2，只有比較新的瀏覽器才滿足。如果你還想支持那些比較老的瀏覽器，可能還是用一個大文件更合適。

文檔模式

IE5.5 發(fā)明了文檔模式的概念，即可以使用 doctype 切換文檔模式。最初的文檔模式有兩種：混雜模式（quirks mode）和標(biāo)準(zhǔn)模式（standards mode）。前者讓 IE 像 IE5 一樣（支持一些非標(biāo)準(zhǔn)的特性），后者讓 IE 具有兼容標(biāo)準(zhǔn)的行為。雖然這兩種模式的主要區(qū)別只體現(xiàn)在通過 CSS 渲染的內(nèi)容方面，但對JavaScript 也有一些關(guān)聯(lián)影響，或稱為副作用。本書會經(jīng)常提到這些副作用。

IE 初次支持文檔模式切換以后，其他瀏覽器也跟著實現(xiàn)了。隨著瀏覽器的普遍實現(xiàn)，又出現(xiàn)了第三種文檔模式：準(zhǔn)標(biāo)準(zhǔn)模式（almost standards mode）。這種模式下的瀏覽器支持很多標(biāo)準(zhǔn)的特性，但是沒有標(biāo)準(zhǔn)規(guī)定得那么嚴(yán)格。主要區(qū)別在于如何對待圖片元素周圍的空白（在表格中使用圖片時最明顯）。

混雜模式在所有瀏覽器中都以省略文檔開頭的 doctype 聲明作為開關(guān)。這種約定并不合理，因為混雜模式在不同瀏覽器中的差異非常大，不使用黑科技基本上就沒有瀏覽器一致性可言。標(biāo)準(zhǔn)模式通過下列幾種文檔類型聲明開啟：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html>

準(zhǔn)標(biāo)準(zhǔn)模式通過過渡性文檔類型（Transitional）和框架集文檔類型（Frameset）來觸發(fā)：

<!DOCTYPE HTML PUBLIC

"-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC

"-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">

<!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

準(zhǔn)標(biāo)準(zhǔn)模式與標(biāo)準(zhǔn)模式非常接近，很少需要區(qū)分。人們在說到“標(biāo)準(zhǔn)模式”時，可能指其中任何一個。而對文檔模式的檢測（本書后面會討論）也不會區(qū)分它們。本書后面所說的標(biāo)準(zhǔn)模式，指的就是除混雜模式以外的模式。

<noscript>元素

針對早期瀏覽器不支持 JavaScript 的問題，需要一個頁面優(yōu)雅降級的處理方案。最終，<noscript>元素出現(xiàn)，被用于給不支持 JavaScript 的瀏覽器提供替代內(nèi)容。雖然如今的瀏覽器已經(jīng) 100%支持JavaScript，但對于禁用 JavaScript 的瀏覽器來說，這個元素仍然有它的用處。<noscript>元素可以包含任何可以出現(xiàn)在<body>中的 HTML 元素，<script>除外。在下列兩種情況下，瀏覽器將顯示包含在<noscript>中的內(nèi)容：

? 瀏覽器不支持腳本；

? 瀏覽器對腳本的支持被關(guān)閉。任何一個條件被滿足，包含在<noscript>中的內(nèi)容就會被渲染。否則，瀏覽器不會渲染<noscript>中的內(nèi)容。

下面是一個例子：

<!DOCTYPE html>

<html>

<head>

<title>Example HTML Page</title>

</head>

<body>

<noscript>

<p>This page requires a JavaScript-enabled browser.</p>

</noscript>

</body>

</html>

這個例子是在腳本不可用時讓瀏覽器顯示一段話。如果瀏覽器支持腳本，則用戶永遠(yuǎn)不會看到它。

小結(jié)

JavaScript 是通過<script>元素插入到 HTML 頁面中的。這個元素可用于把 JavaScript 代碼嵌入到HTML 頁面中，跟其他標(biāo)記混合在一起，也可用于引入保存在外部文件中的 JavaScript。本章的重點可以總結(jié)如下。

? 要包含外部 JavaScript 文件，必須將 src 屬性設(shè)置為要包含文件的 URL。文件可以跟網(wǎng)頁在同一臺服務(wù)器上，也可以位于完全不同的域。

? 所有<script>元素會依照它們在網(wǎng)頁中出現(xiàn)的次序被解釋。在不使用 defer 和 async 屬性的情況下，包含在<script>元素中的代碼必須嚴(yán)格按次序解釋。

? 對不推遲執(zhí)行的腳本，瀏覽器必須解釋完位于<script>元素中的代碼，然后才能繼續(xù)渲染頁面的剩余部分。為此，通常應(yīng)該把<script>元素放到頁面末尾，介于主內(nèi)容之后及</body>標(biāo)簽之前。

? 可以使用 defer 屬性把腳本推遲到文檔渲染完畢后再執(zhí)行。推遲的腳本原則上按照它們被列出的次序執(zhí)行。

? 可以使用 async 屬性表示腳本不需要等待其他腳本，同時也不阻塞文檔渲染，即異步加載。異步腳本不能保證按照它們在頁面中出現(xiàn)的次序執(zhí)行。

? 通過使用<noscript>元素，可以指定在瀏覽器不支持腳本時顯示的內(nèi)容。如果瀏覽器支持并啟用腳本，則<noscript>元素中的任何內(nèi)容都不會被渲染。

在線咨詢

上一篇：Web前端設(shè)計-如何快速實現(xiàn)網(wǎng)站頁面變灰？
下一篇：“大車”大梁開裂，服務(wù)站說不擔(dān)心曝光

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

JS｜常規(guī)函數(shù)、嵌套、匿名、字面函數(shù)、閉包及函數(shù)做為

1 常規(guī)函數(shù)

2 JS嵌套函數(shù)

3 JSt函數(shù)字面值

4 函數(shù)對象Function

5 匿名函數(shù)，也叫內(nèi)聯(lián)函數(shù)

6 閉包

7 內(nèi)聯(lián)函數(shù)作為對象的方法

8 常規(guī)函數(shù)做為對象的方法

9 對象字面量，也用匿名函數(shù)做為對象方法

ello, world！

<script>元素

標(biāo)簽位置

推遲使用腳本

異步執(zhí)行腳本

動態(tài)加載腳本

XHTML中的變化

廢棄的語法

行內(nèi)代碼與外部文件

文檔模式

<noscript>元素

小結(jié)

您的項目需求

JS｜常規(guī)函數(shù)、嵌套、匿名、字面函數(shù)、閉包及函數(shù)做為

5 匿名函數(shù)，也叫內(nèi)聯(lián)函數(shù)

ello, world！