01.01 史上被罵最多的編程語言：JavaScript

點擊上方 "程序員小樂"關注, 星標或置頂一起成長

每天凌晨00點00分, 第一時間與你相約

每日英文

Sleeping is nice. You forget about everything for a little while.

還是睡覺好，能暫時忘掉一切煩惱。

每日掏心話

有些話說與不說都是傷害，有些人留與不留都會離開。如果我放棄了，不是因為我輸了而是我懂了。

鏈接：blog.csdn.net/bitfan/article/details/10362461

程序員小樂(ID:study_tech)第 733 次推文 圖片來自網絡

往日回顧：學 Redis 看這篇就夠了，建議收藏！

正文

一、世無英雄，遂使豎子成名

1 Web客戶端編程語言事實上的王者

（1）JavaScript為何成功？

幾乎所有的JavaScript書都會先介紹一番JavaScript的歷史，比較有趣的是我在資料中看到這樣一句話：

JavaScript的設計者Brendan Eich曾在一次採訪中說，JavaScript“幾天就設計出來了”。

Ruby的設計者——松本行弘為此感嘆：

“這樣的出身，得到這樣的成功，還真讓人出乎意料，……”，

“但由於開發週期短，確實也存在著不足……”。

確實，作為一種編程語言，JavaScript並不完美，在實際開發中，JavaScript同樣也存在著嚴重的問題，其中最突出的就是早期沒有完整的規範，導致瀏覽器廠商各行其是所帶來的兼容性問題。

但奇怪的是，就是這樣一個並不完美的東西，最終卻成為了Web客戶端編程語言事實上的王者，而它的種種缺陷，卻給我們帶來了豐富多彩的各種JavaScript庫及框架，整個JavaScript社區則生機勃勃，活力四射，這真是一件很有趣的事。

在我看來，JavaScript的成功在於它“生逢其時”，趕上了互聯網大發展的時代契機。而當時“時無英雄，使豎子成名”。

讀者可能不服氣，那建議你看看那本著名的、指出過“10000小時專業訓練是成為天才的必要條件”的《異類》，在此書中，作者Malcolm Gladwell列舉了諸多二十世紀在IT業呼風喚雨的大人物：微軟比爾蓋茨、保羅艾倫和史蒂夫鮑爾默，蘋果的喬布斯，Google的埃裡克施密特，Sun的比爾喬伊……，他們全部出生在1953~1956之間；

再看看當前中國IT大佬們——李彥宏（1968.11）、張朝陽(1964)、馬化騰(1971)、丁磊(1971)，馬雲（1964），劉強東（1974）……，他們的出生日期都集中在上世紀60與70年代交替的時期，……

為什麼會這樣呢？請結合他們創業的時代大背景看看就明白了。

時勢造英雄。JavaScript就是這樣的幸運兒。生逢其時，伴隨著互聯網的發展，有不計其數的Web應用是使用它編寫的，JavaScript應用得越廣，其社區就越活躍，優秀的程序員不斷為JavaScript貢獻大量的框架和庫，還有Google和微軟這樣的大公司不斷地想辦法彌補或改進JavaScript的現有缺陷，推出新的腳本語言和優化其引擎……

一切都構成了一個完整的生態圈。以後的腳本語言，哪怕比JavaScript要好很多，也難以重現JavaScript的輝煌了，JavaScript己經成為Web客戶端事實上的王者。

（2）為什麼JavaScript招人罵？

有趣的是，儘管JavaScript用得如此廣泛，但仍然承擔了很多開發者的抱怨，我估計JavaScript可能是“到目前為止，計算機軟件史上被人罵得最多的編程語言”。

為什麼會這樣呢？

我看原因有三。

首先是至今猶存的瀏覽器兼容性問題，請看以下代碼：

• function showInformation(info) {

• var h3 = document.getElementById("info");

• //適合於IE,Chrome, Opera

• if (h3.innerText!==undefined) {

• h3.innerText = info;

• }

• else {

• //適合於FireFox

• 
  

• h3.textContent = info;

• }

• }

上述代碼只是簡單地給一個

元素賦值，你可以看到，代碼必須針對不同的瀏覽器寫不同的代碼，更讓人鬱悶的是，還可能為同一種瀏覽器的不同版本寫不同的代碼，有些瀏覽器（比如IE6）生命週期之長讓人無奈，這些都強迫Web開發者把大量時間花在測試兼容性這種毫無成就感的工作之上，實在頗有點浪費生命的感覺。

大家都覺得不爽的地方，就是創新點，於是有了以jQuery為代表的大量的JavaScript庫和框架，其成功在於有意無意地迎合了人們的這種偷懶的心理：

“把麻煩丟給別人，把方便留給自己”。

JavaScript招人罵的第2個原因是它名字引起的誤會。

JavaScript，名字中有個Java，初次聽到幾乎100%的人都以為它與Java有著密切的關係，而且很有可能就是Java語言的子集。

但事實上，叫“李富貴”的人可能在街上討飯，叫“劉美美”的其實長得不怎麼樣，而取名“楊德有”的人其實是個小人，幹了很多見不得人的事……

這世上名不副實的多了，其實，JavaScript與Java根本是兩種語言，取這個名字純粹是最早設計並實現JavaScript的那批人想攀高枝拍Java馬屁的結果。

由於許多人把它當成自己所熟悉的Java語言去用，結果發現它根本不是自己所熟悉的那種編程語言，加上下面要講的第三個原因讓人編起程來很不爽，許多人憤怒了：“NND，給這丫騙了！”

JavaScript招人罵的第3個原因其實與語言本身無關，而與瀏覽器相關。

許多人最早使用JavaScript不是因為喜歡這種語言，而是工作中必須用它，在實際工作中用得最多的就是DOM，而DOM API的設計與各瀏覽器的具體實現 實在不怎麼樣，按照jQuery設計者John Resig的觀點，它絕不可能獲得任何“年度友好API（Friendliest API of the Year）”的獎項！

2 精華與糟粕的並存JavaScript

Douglas Crockford寫了一本《JavaScript：The Good Parts》，在書中他這樣寫到：

JavaScript建立在一些非常好的想法和少數非常壞的想法之上。

那些非常好的想法包括函數、弱類型、動態對象和一個富有表現力的對象字面量表示法，而那些壞的想法包括基於全局變量的編程模型、缺乏塊作用域、“保留”了一堆根本沒用到的保留字，不支持真正的數組（它所提供的類數組對象性能不好）等等。

還有一些是“雞肋”，比如with語句，原始類型的包裝對象，new,void等等

JavaScript受到的主要批判有：

• 無法應對複雜的互聯網應用程序，不支持大家己普遍熟悉的以類為模板的面向對象編程方式

• 運行速度慢，其對象內部採用散列表形式組織，相比數組和結構體，存取速度慢

• 不支持多核CPU，JavaScript沒有線程的概念，也缺乏必要的線程同步手段，使得它幾乎無法編寫能充分應用客戶端多核CPU計算能力的代碼

• 瀏覽器兼容性問題是硬傷

• ……

不少被批判的內容並不全是事實，或者說現在不少己經有很大改善，但JavaScript身上的這些罵名是洗不掉的了。

其實，JavaScript本身有很多精華，下面的內容就集中於JavaScript的這些亮點之上。

二、JavaScript技術導航

談到JavaScript技術，其實應該區分以下三個概念：JavaScript語言、JavaScript庫和JavaScript宿主。

JavaScript語言的學習主要是JavaScript語法學習，JavaScript宿主是指JavaScript程序的運行環境，通常是瀏覽器，瀏覽器提供了許多對象（比如window,document等），JavaScript代碼可以直接調用它們，另外，瀏覽器還包容一個專門負責運行JavaScript代碼的組件，我們把它稱為JavaScript引擎，在實際學習過程中，一般不需要深入地瞭解JavaScript引擎的內部運行機理。JavaScript庫通常是指由JavaScript社區所貢獻出來的能完成特定功能的打包在一起的JavaScript代碼。

在學習過程中，通常是把JavaScript語言與JavaScript運行環境所提供的對象和實現的功能“打包到一塊”作為一個整體學習，因此，下面的介紹不再明確地區分哪些內容屬於JavaScript語言特性，哪些功能實際上是由宿主環境提供的。至於JavaScript庫，不在本文的介紹範圍之內。讀者可自行閱相關的技術書籍。

1 掌握JavaScript基礎編程技能

（1）第一件事情，弄明白在哪兒寫JavaScript代碼

三種方式寫JavaScript代碼。

Inline JavaScript：直接將簡短的JavaScript代碼嵌入到HTML元素聲明中：

Embedded JavaScript：將javaScript放到

鏈接外部JavaScript文件：將JavaScript代碼放到獨立的.js文件中，然後在

（2）快速瞭解JavaScript語法基礎

學習這部分內容，可以與C/Java/C#的基礎語法相對照，重點關注其不同點就行了，以下是部分要點：

• JavaScript定義了四種基本數據類型：numbers, strings, Booleans, undefined和null，其餘所有的都是對象。

• JavaScript所有的數都是64位浮點數，還有一個常量叫NaN（Not a Number），在編程中常用。

• JavaScript有一些比較獨特的運算符，列舉幾個： ===（嚴格判等運算符）、 !!（把後面跟著的表達式變成一個bool值），方括號運算符（可以用於訪問對象屬性）

• 變量的作用域：JavaScript沒有塊作用域，但有函數作用域。即：定義在函數中的參數和變量在函數外部不可見，並且在一個函數中的任何位置定義的變量在該函數中的任何地方都可見。這點與C和Java等編程語言都不一樣。

• ……

（3）比較獨特與有用的內部對象

JavaScript本身提供了一些內部對象，可以在代碼中直接使用，列舉幾個：

• 數組：JavaScript其實沒有傳統意義上的數組，因此，你應該把它看成是“另外一種東西”，需要花點時間去明白它的特性。

• 全局對象：JavaScript中有一個全局的global對象，除了那些有明確對象歸屬的成員，其它所有的東西都成為它的成員，在瀏覽器環境中，window對象就是全局對象。

• 正則表達式：正則表達式在處理字符串上功能強大，花時間在這上面是值得的。

• timer對象:可以用它實現定時調用

• ……

（4）JavaScript代碼調試方法

有幾種方法可以調試JavaScript代碼，最土的一種是使用alert()輸出信息，比較專業的是使用console.log和設置斷點。

每個Web開發者都一定要至少掌握一種瀏覽器所提供的調試工具：Firebug（Firefox）、IE Developer Tools（IE 8以後）、Opera Dragonfly（ Opera 9.5以後）、WebKit Developer Tools（ Safari和Chrome）。

大多數瀏覽器調試工具都可以使用F12這個熱鍵呼叫出來，並且其提供的功能都很強大。

另外，一些IDE（比如Visualstudio），也支持對JavaScript代碼的跟蹤與調試。

2 把握JavaScript編程語言的精華

在學習JavaScript的過程中，我建議別把JavaScript看成是一種OO語言，應把它看成是一種函數式語言！

另外，重點搞掂函數、對象、閉包三個東東，則JavaScript精華盡在我手！

首先，我們先來擺函數的龍門陣。

（1）函數

JavaScript中函數是“一等公民”。理解JavaScript的函數是打開這門編程語言奧秘的鑰匙，由它可以引申出N多重要的特性。

函數是一個對象

JavaScript使用function關鍵字定義函數

function add(x, y) { return x + y; }

函數可看成是一個“函數”對象。函數名是指向這一“函數”對象的指針，可以有多個變量引用同一個函數對象

• console.info(add(100,200)); //300

• 
  

• var other =add; //other和add引用同一函數對象

• console.info(other(300,400)); //700

函數中定義的變量是私有的，因此，JavaScript變量只有兩種作用域：全局的和由函數所限制的局部作用域。這點非常重要。

函數可以沒有名字，我們通常把這種“匿名”函數賦值給一個變量，通過變量來調用它：

var square = function (x) { return x * x; } console.info(square(10)); //100

牢記“函數是一個對象”，對看懂許多JavaScript代碼至關重要。

返回函數的函數

由於函數是對象，因此，我們可以寫出一個返回函數的函數，這是一種非常重要的編程技巧：

• function func(x,y) {

• var value=300;

• return function () {

• return value + x + y;

• };

• }

• 
  

• console.info(func(100, 200)()); //600

被返回給外界的“內部”函數能夠直接訪問外部函數的變量，並且需要時它還可以再返回另一個函數，這樣便可以構成一個排成“一字長蛇陣”的連續函數調用語句，這在許多JavaScript庫中都能看到。

函數的參數

JavaScript對函數的要求極其地寬鬆。

定義函數時，不需要指定參數類型，對於參數值，JavaScript不會進行類型檢查，任何類型的值都可以被傳遞給參數。

對於函數參數，如果過少，沒得到值的參數為undefined，如果過多，多的會被忽略掉。

JavaScript將所有傳給函數的參數放到一個arguments對象中（它類似於數組，但JavaScript中沒有傳統意義上的數組，只能說是類似於數組的對象），使用它可以寫出靈活的代碼，比如模擬實現OO語言中的方法重載（method overload）.

特別地，函數可以作為另一個函數的參數：

var values = [ 213, 16, 2058, 54, 10, 1965, 57, 9 ]; values.sort(function(value1,value2){return value2 - value1; });

如果有C#的delegate經驗，看懂上述代碼一點也不困難，反過來，理解了上述JavaScript代碼，再學習C#的delegate和Lambda表達式也就沒多少難度，這就是各種語言均有相通之處的一個例子。

this對象

JavaScript中的this與Java/C#中的不一樣，在JavaScript中，每次對函數的調用都有一個上下文對象，this關鍵字引用它。如果函數歸屬於某個對象，則this關鍵字將引用此對象，它就是本次函數調用的上下文。

this引用的函數上下文對象是可以動態改變的，使用函數對象的call方法可以動態地指定它：

• window.color = "red";

• var o = { color: "blue" };

• 
  

• function sayColor(){

• alert(this.color);

• }

• 
  

• sayColor(); //red

• 
  

• sayColor.call(this); //red

• 
  

• sayColor.call(window); //red

• 
  

• sayColor.call(o); //blue

不少JavaScript庫中，使用這個特性玩出了許多花樣。

（2）閉包

“閉包（closure）”是函數式編程的重要特性，這也是在學習時最讓人難以理解的技術關鍵點之一。請費點腦筋看看以下代碼：

• function a() {

• var i = 0;

• return function b() {

• console.info(++i);

• };

• };

• 
  

• var c = a();

• 
  

• for (var i = 0; i < 10; i++) {

• c();

• }

上述代碼中，內部函數b中的代碼會訪問外部函數a中的變量i, 最值得注意的是：執行完c=a()一句後，函數a()己經執行完畢，但由於c引用a()返回的函數b，因此，當前的執行環境被完整保存，從而讓i保存上次調用的值！

這就是閉包的神奇特性。

閉包在JavaScript Library開發中被廣泛使用。

有關對閉包內部機理的詳細介紹，可以參看《Professional JavaScript For Web Developer》一書。

（3）對象與原型

JavaScript的面向對象特性非常地獨特，學習這部分內容時，己非常熟悉C#/C++/Java的朋友一定要Undo己有的知識，才能真正理解它們。

對象的創建

在JavaScript中，對象並不是以類為模板創建出來的，它可以看成是一堆屬性的集合，每個屬性都有一個name（就是它的屬性名字）和Value。

正式地說，JavaScript中的對象是可變的鍵控集合（keyedcollections），既然是一個集合，所以它支持foreach遍歷，也支持動態地給對象添加（直接賦值即可）和刪除成員（使用delete內部函數）。

JavaScript中可以使用四種方式定義對象，用起來非常地靈活：

方式一：定義一個空對象，再給它添加成員：

• var myObject = {};

• 
  

• myObject.name = “John”;

• 
  

• myObject.age = 29;

方式二：使用對象字面量直接創建對象：

var myObject = { name:"John", age:40 };

可以看到，這種形式非常類似於Json字串，事實上，JavaScript提供了相應的機制直接由JSON字串創建JavaScript對象（或反之）

方式三：使用工廠函數構建

new一個空白對象，添加完成員之後，return給外界:

• function createPerson(name, age, job){

• var o = new Object();

• o.name = name;

• o.sayName = function(){

• alert(this.name);

• };

• 
  

• return o;

• }

方式四：通過對象構造函數創建

• function Person(name, age, job){

• this.name = name;

• this.sayName = function(){

• alert(this.name);

• };

• }

• 
  

• var person1 = new Person(“John”, 29, “Software Engineer”);

可以看到，這種方式使用this關鍵字給對象添加成員，使用new關鍵字調用並創建對象。

通常會把構造函數的首字母設置為大寫的。

構造函數其實也是一個函數，不同之處在於調用它時必須要加一個“new”關鍵字，如果不加這個關鍵字，則對它的調用被認為是普通函數調用。

使用這種方法構造對象，每個對象都加了一個constructor屬性：

alert(person1.constructor== Person); //true

JavaScript對象在運行時可以動態地創建和修改其成員，這就給編程帶來了很強的靈活性，下面舉一個例子，看看如何在函數內部構建一個數據緩衝區：

• function getElements(name) {

• 
  

• if (!getElements.cache)

• 
  

• getElements.cache = {};

• 
  

• return getElements.cache[name] =

• 
  

• getElements.cache[name] || document.getElementsByTagName(name);

• 
  

• }

上述函數在內部使用一個名為cache的空對象用於保存己訪問過的頁面元素，僅在首次訪問時調用DOM API去獲取節點對象，從而提升了性能。

對象原型（Pototype）

這是JavaScript語言中最有特色的地方。

• function MyObject(name) {

• 
  

• this.name = name;

• 
  

• };

• 
  

• var obj1 = newMyObject("Object1");

• 
  

• //向原型中添加新成員

• 
  

• MyObject.prototype.value = 100;

• 
  

• //新對象與老對象將同時擁有這個新的成員

• 
  

• var obj2 = newMyObject("Object2");

• 
  

• console.info(obj1.value); //100

• 
  

• console.info(obj2.value); //100

上述代碼的背後，其實是以下文字描述的JavaScript內部機理：

• 每個對象都連接到一個原型對象（Prototype），如果我們添加一個新的屬性到原型中，該屬性會立即對所有基於該原型創建的對象可見。

• 各個對象的原型也是一個對象，它們可以“鏈接”起來，構成一個原型鏈。

• 當我們嘗試去獲取對象的某個屬性值，且該對象沒有此屬性值，那麼JavaScript會嘗試從它直接關聯的原型對象中去獲取，如果那個原型對象也沒有此屬性值，那麼會再從這一原型對象所關聯的另一個原型中尋找，依次類推，直到該過程最後到達終點Object.prototype。如果想要的屬性完全不存在於原型鏈中，那麼結果就是undefined。

JavaScript引入原型，其主要目的之一就是為開發者提供經典的OOP編程風格：以類為模板創建對象和實現繼承，其實現思路基於以下事實：

當你創建一個新對象時，你可以選擇某個對象作為它的原型。

以下代碼使用prototype模擬實現了面向對象編程中的繼承特性。

• function Parent() {

• 
  

• this.baseFunc = function () {

• 
  

• console.info("基類方法");

• 
  

• };

• 
  

• }

• 
  

• function Child() {

• 
  

• this.childFunc = function () {

• 
  

• console.info("子類方法");

• 
  

• };

• 
  

• }

• 
  

• //形成繼承關係

• 
  

• Child.prototype = new Parent();

• 
  

• 
  

• 
  

• var obj = new Child();

• 
  

• obj.childFunc();

• 
  

• obj.baseFunc();

上述示例代碼只是使用JavaScript語言特性實現OOP的方式之一，還有不少JavaScript書還介紹了其他實現繼承的方法，五花八門，大多比較複雜，理解起來有一定難度，類似於“代碼遊戲”，這就引發了一個問題：

我們是否一定要使用JavaScript以經典的OOP方式編程？

要回答這樣一個問題，先來思索一下另一個相關聯的現實問題：

是否所有的Web應用都應該使用面向對象的方式開發？

其實要回答這個問題並不困難。

對於很小的很簡單的網站，不用面向對象其實也沒什麼問題。想想看，整個網站只有幾個十幾個頁面，這也要分成N個類，應用XXX設計模式，再加上能支持分佈式緩存和負載均衡N層架構，是不是有點過份？

當然，對於複雜的網站情況就不一樣了，這種Web系統後臺通常會包容複雜的業務流程，並且很可能需要與多個其他的內部或外部系統進行信息交換，……。實踐證明在這種情況下，面向對象是最有效最成熟的解決問題的方法。

JavaScript本身是一種主要用於Web前端的腳本語言，你想想，一個將要運行於客戶端瀏覽器內的Web網頁，需要它完成多複雜的事？並且就算它真能完成很多工作，也不能將業務邏輯前移到客戶端實現，這會帶來巨大的風險。

儘管現在有Node.js之類可以讓JavaScript代碼跑在服務端，但Node.js更多是基於模塊來構建系統，很少使用它來建立一個擁有複雜的繼承體系的用戶類型系統，這些工作使用標準的OO語言如Java或C#完成更為合適。

另外，JavaSript本身從一開始就沒打算設計成純面向對象編程語言，只是支持OOP，前面也看到了，用原生的JavaScript實現繼承都比較麻煩，如果還想實現多態，那就更費腦筋了。

除非你要寫一個諸如jQuery之類的框架，那深入研究並把握JavaScript的OOP編程技巧才是必須的，大多數Web開發者直接用JavaScript“原生的”函數、閉包、對象、原型這些語言特性就足夠應付工作所需。

3 探索JavaScript應用技術領域

在介紹完了JavaScript編程語言本身的亮點之後，現在將目光轉向JavaScript的應用領域。

（1）BOM

瀏覽器對象模型（BrowserObject Model，BOM）是由瀏覽器實現的，可供JavaScript程序調用的一組對象，通過它JavaScript代碼可以完成與“控制”瀏覽器進程相關的許多工作。BOM由一系列相關的對象構成，主要有以下六個：

• window對象，前面也說過，它是JavaScript的最頂層對象，其它的BOM對象都是windows對象的屬性。

• document對象表示瀏覽器中加載頁面的文檔對象；

• location對象包含了瀏覽器當前的URL信息；

• navigator對象包含了瀏覽器本身的信息；

• screen對象包含了客戶端屏幕及渲染能力的信息；

• history對象包含了瀏覽器訪問網頁的歷史信息。

當瀏覽器裝載網頁完畢之後，這幾大對象就可用了。

基於BOM的編程很簡單，主要就是使用JavaScript訪問這些對象的相關屬性和調用它們的相關方法，查查技術手冊（諸如《JavaScript權威指南》那樣厚達1000多頁的書）就OK了。

（2）DOM

Web網頁本身是一個純文本形式的文檔，是由許多嵌套的HTML元素所構成，如果直接按照字符串來處理文檔，相當地不便。

瀏覽器裝入HTML文檔之後，依據文檔中包容的內容，創建出一棵樹，並把這棵樹稱為“DOM（Document Object Model，文檔對象模型）”，程序員們通常直接稱之為DOM樹。

事實上，Web前端編程主要就是圍繞著DOM樹而展開的。使用JavaScript可以很方便地操控整個DOM樹。其基本步驟可以簡化為以下兩步：

（1）從DOM樹中選取要操作的節點（或節點集合），有多種方式完成這一工作，最常用的就是document對象所提供的getElementById( )：

var div = document.getElementById("info");

其它的JavaScript庫或框架，比如jQuery,提供了更多更方便的方式選擇節點，但其最終目的都是一樣的——選擇要操控的DOM節點。

（2）針對選擇的節點對象，設置其屬性、調用其方法或響應其事件：

div.innerHTML = "Hello,JavaScript";

記住這兩點之後，花些時間看看DOM文檔，知道我們可以使用哪些方法、事件和屬性，也就夠了，在編程上並沒有什麼特殊之處。

這裡特別地說說事件，DOM規範定義了兩種事件：冒泡型和捕獲型。這兩種類型事件的在DOM樹中傳輸方向正好相反，一個從觸發事件的節點向上傳播到DOM樹的根節點，另一個則從DOM樹的根節點向下傳播到觸發事件的節點。把握這兩者的區別在實際開發中很重要，同時注意不同瀏覽器和不同版本瀏覽器的具體實現會有所區別。

（3）AJAX與JSON AJAX其實它是一個很古老的技術，IE瀏覽器很早就支持它。後來，Google在其Google Map中應用AJAX實現了讓人驚訝的Web體用體驗，一下子讓AJAX成為炙手可熱的技術。

AJAX的思想其實很簡單：

使用瀏覽器實現的XmlHttpRequest對象在“後臺”向Web服務器發出請求，Web服務器收到請求之後，向瀏覽器發回數據，瀏覽器收到之後更新頁面。

以下是簡化過的完成某次AJAX數據交換功能的示例代碼：

• var myRequest;

• 
  

• //1：依據瀏覽器的類別創建相應的對象

• 
  

• if (window.XMLHttpRequest) {

• 
  

• //非IE瀏覽器

• 
  

• myRequest = new XMLHttpRequest();

• 
  

• } else if (window.ActiveXObject) {

• 
  

• //IE瀏覽器

• 
  

• myRequest = new ActiveXObject("Microsoft.XMLHTTP");

• 
  

• }

• 
  

• // 2: 響應XMLHttpRequest對象的readystatechange事件，為其定義回調代碼：

• 
  

• myRequest.onreadystatechange = function(){

• 
  

• if (myRequest.readyState=== 4) {

• 
  

• //收到的數據放在myRequest.responseText中，接著可使用DOM來更新頁面

• 
  

• ……

• 
  

• }

• 
  

• };

• 
  

• // 發送請求

• 
  

• myRequest.open('GET', 'simple.json', true);

• 
  

• myRequest.send(null);

可以看到，數據取回以後，通常使用DOM來更新頁面。

服務端返回什麼樣格式的數據完全可以由開發者自行決定，現在比較流行的是直接返回JSON格式的數據，一是方便，JavaScript能直接解析它；二是數據緊湊，JSON比XML數據量要小得多，三是跨平臺性好，目前許多手機應用都採用JSON來從服務器上提取數據。

（4）各種JavaScript框架 當前在互聯網上可以找到N種JavaScript框架或庫，各有各的用途，各有各的應用場景。有大量的書籍和資料介紹這些框架，在此就不廢話了。如果你時間有限，並且是初學者，那我建議你只要好好學習jQuery就夠了，這是一個當前應用極為廣泛的成熟的框架，設計得非常出色，你可以舉一反三，再學習其他框架也並不困難。

（5）服務端的JavaScript——Node.js JavaScript最初是一種運行在瀏覽器環境中的腳本語言，但Google推出的了一個名為Node.js的JavaScript運行環境，使用其研發的JavaScript V8引擎，使得JavaScript代碼可以運行在服務端。

Node.js採用事件驅動和異步I/O，高度模塊化，性能表現相當優異，屬於近幾年的技術熱點，有機會時我針對它另寫篇文章向大家介紹。

（6）開發Win8與智能手機應用 當前主流的智能手機操作系統——iOS和Android，其瀏覽器都配備了JavaScript腳本引擎，並且對HTML5特性的支持比較好。因此，現在有許多使用JavaScript開發的移動Web應用，開拓了JavaScript應用的新天地。

順便說一下，使用JavaScript也能在微軟的Windows 8中開發新的Windows 8類型的應用並放到Windows商店上去賣，但目前其前景並不算明朗，感興趣的朋友可以自行鑽研一下。

三、我的JavaScript學習建議

不管你對JavaScript感覺如何，只要你從事互聯網應用開發，JavaScript就是你繞不過去的。因此，本小節就針對初學者談談JavaScript的學習建議。

我總結了一下，JavaScript大致可以分為以下幾個學習階段：

（1）開始起步

這一階段主要是學習與掌握基本語法

比如瞭解JavaScript有哪些關鍵字，有哪些數據類型，變量作用域是如何定義的，分支與循環語句如何編寫等等，這沒什麼好說的，幾乎是學習所有編程語言都要完成的工作。

只要你學過C/Java/C#/C++，掌握JavaScript基本語法用不了兩小時。

（2）深入探索

這一階段主要是把握JavaScript特性，學習典型編程技巧，理解相應內部機理

通常這一階段需要閱讀大量的JavaScript技術書籍，並花費相當的時間編寫各種小的Demo，才能真正掌握好JavaScript編程語言，為下一階段打下基礎。需要重點把握的內容在前文己有介紹。

（3）學以致用

基於各種JavaScript庫（或直接使用JavaScript）編寫實際應用，並進一步地學習JavaScript相關的技術，比如Node.js或進一步學習開發智能手機Web應用等技術。

這就沒什麼好說的啦，依據你的工作與學習需求，選擇相應的內容來學習。不打算成為JavaScript專家的話，大多數人應該都會長期停留在這一階段。

（4）遊刃有餘

處於這一階段的人，己經具備編寫瀏覽器兼容性和可重用可擴展的庫或框架的能力

這部分人精通JavaScript同時又有自己的想法，往往會致力於開發新JavaScript庫及框架，或者是進一步擴充JavaScript的具體應用領域。

（5）開彊拓土

設計全新的腳本編程語言和運行平臺

這活個人英雄主義可能就行不通了，現在通常是由大公司或“大牛人”來做，比如Google推出了V8引擎，還設計了一種JavaScript的替代語言——Dart（https://www.dartlang.org/），意圖彌補JavaScript的缺陷。

而C#的設計者——AndersHejlsberg，就參與了微軟推出的TypeScript（http://www.typescriptlang.org/）腳本編程語言的設計與研發工作。與TypeScript類似的另一種知名的腳本編程語言是CoffeeScript（http://coffeescript.org/），它們都構建了一套“自認為”更合理的語法體系，但並不實現自己的腳本運行引擎，而是把程序代碼“編譯（Complile）”成標準的JavaScript代碼，在現有的JavaScript引擎上運行。

小結

JavaScript雖是一種有著近20年曆史的編程語言，但其生命力卻日見旺盛，伴隨著互聯網的發展，它己經成為21世紀最重要的編程語言之一。

JavaScript技術領域包容相當多的內容，並且還在擴展當中。這篇小文從諸多JavaScript技術書籍和教學資源中選出了一些我覺得比較重要的內容整理並介紹給大家，掛一漏萬，且可能存在著錯誤，只希望能給初學者以一點引導與幫助，吾願足矣！

歡迎在留言區留下你的觀點，一起討論提高。如果今天的文章讓你有新的啟發，學習能力的提升上有新的認識，歡迎轉發分享給更多人。

猜你還想看

阿里、騰訊、百度、華為、京東最新面試題彙集

Nginx是什麼？能幹嘛？看完這篇你就明白了！

聊聊 API 簽名方式，看完這篇就明白了！

我的名片能運行Linux和Python，還能玩2048小遊戲，成本只要20元

關注「程序員小樂」，收看更多精彩內容
嘿，你在看嗎？