Javascript：一個屌絲的逆襲

碼農翻身發表於2017-08-26
JavaScript

是的， 我就是鼎鼎大名的Javascript, 典型的高富帥，前端程式設計之王，數以百萬計的程式設計師使用我來程式設計。 如果你沒有用過我就太out了。
不過當我是一個屌絲時， 真的沒有想到能發展到如今的地位......

　第一章：出世

　　我出生在上古時代的瀏覽器Netscape中， 那個時候的網頁真是乏善可陳， 你可能都想象不到， 主要是些醜陋的靜態文字和簡單的圖片， 和現在美輪美奐的頁面相比，差的實在太遠了， 不信你請看著名的Yahoo 網站：

　　那個時候人們還在用Modem（調變解調器）通過電話線撥號上網， 每次撥號都有種吱吱啦啦聲音， 就像一個鐵片努力的刮一個鍋底，讓無數人抓狂不已。

　　這還不算什麼， 網速只有28.8kbit /s , 下載一個網頁都得耐心的等待半天。

　　我的主人Brendan Eich 有一回用公司的Netscape上網購物的時候， 需要註冊使用者， 填了一個表單， 點選了提交按鈕， 等待了38秒， 然後伺服器告訴他：“對不起， 您忘了選擇性別了”

　　他幾乎要崩潰：“靠，怎麼能夠這樣！ 這麼簡單的問題瀏覽器怎麼不告訴我， 還得讓我把資料提交到幾千公里外的伺服器網站， 然後在那裡檢查才能發現問題嗎！”

　　對瀏覽器進行改革勢在必行！

　　Brendan Eich 於是去找老闆： “我實在是受不了了， 我需要一種指令碼語言執行在瀏覽器中， 幫助我完成這些本來就應該在瀏覽器中完成的任務“

　　老闆： “我們Netscape公司也早有此意， 要不你來設計一個吧”

　　Brendan Eich： “好啊， 你聽說過LISP（確切的說是Scheme）嗎， 當今最牛的程式語言，我們公司何不把Scheme 執行在瀏覽器中呢？ “

　　老闆： "LISP有誰會用啊？ ”

　　Brendan Eich： "......"

　　老闆： "我們正在和Sun 公司合作， 你聽說過他們剛發明的Java 嗎， 那個執行在瀏覽器中的Applet簡直是酷斃了，Java 肯定是未來的網路語言。 所以你要搞個新語言出來，要和java 足夠相似， 但是要比java 簡單的多的多， 這樣那些網頁開發人員就可以用了。 ”

　　我的主人Brendan Eich很鬱悶， 但是也沒有辦法， 他對java 毫無興趣， 為了應付公司的任務， 他只花了10天就把我設計了出來， 對了， 我本來叫LiveScript， 但是為了向“萬惡”的Java示好， 我竟然被改成了 Javascript !

　　由於設計時間太短，我的一些細節考慮得不夠嚴謹，導致後來很長一段時間，Javascript寫出來的程式混亂不堪。如果主人預見到，未來這種語言會成為網際網路第一大語言，全世界有成千上萬的學習者，他會不會多花一點時間呢?

　第二章：成長

　　Java 是當時的明星語言， 年輕，活力四射 ， 他經常嘲笑我： 你小子到底是個計算機語言嗎？

　　我說“是啊， 我的語法和你差不多呢”

　　Java： "你為什麼只能在瀏覽器中執行啊？ 你能寫個程式單獨執行嗎, 哎對了你能讀取一個檔案嗎 ?"

　　我當然讀取不了檔案，我生活在瀏覽器裡， 用我寫的程式只能嵌入在html網頁中， 由瀏覽器中來執行。他們給這個執行模組起了一個很有動感的名字: javascript 引擎

　　我於是反擊Java : “我有個引擎你知道嗎？”

　　但是Java 輕鬆就把我打翻在地： “我還有個虛擬機器呢”

　　年長的C也問我：你怎麼不編譯執行啊， 你看我編譯以後，執行的多快。

　　我說： 省省吧， 要是每個頁面開啟後都先編譯javascript ,那多慢啊。

　　不僅僅是Java 和C , 包括VB， Delphi等當時流行的語言都瞧不起我，背地裡叫我屌絲。

　　也是， 我沒法獨立執行， 也不能像VB,Delphi他們畫出漂亮的介面， 我能做的就是操作HTML 的DOM 和瀏覽器。

　　你可能不知道DOM是什麼東西， 這麼說吧， 瀏覽器從伺服器取到HTML網頁以後， 會展示成頁面讓你看， 但是他的內部其實會把HTML組織成一個樹給我，

　　這個樹可以稱為DOM。 例如這個頁面：

＜html>
 <head>
   <title>Sample Page</title>
 </head>
 <body>
   <p>hello world!</p>
 </body>
</html>

　　DOM樹會長成這樣：

　　有了這棵樹， 我就能大展身手，我可以定位到DOM樹中任意一個節點， 然後對這個節點進行操作， 例如隱藏節點、顯示節點、改變顏色、獲得文字的值， 改變文字的值 ，新增一個響應點選事件的函式 等等等等， 幾乎可以為所欲為了。

　　更重要的是， 這些操作可以立刻展示出效果來， 你完全不用重新整理網頁。

　　注意這些操作完全是內部進行的， html原始碼並不會改變， 所以有時候你開啟html原始碼，會發現這些原始碼和你在瀏覽器中看的效果並不一致， 那就是我在背後改變了這個DOM樹了。

　　我的主人Brendan Eich最初遇到的問題簡直就是小菜一碟了， 做個簡單的表單驗證，太簡單了。

　　不只是操作DOM， 我還能控制瀏覽器， 比如開啟視窗， 在一個視窗內前進，後退， 獲得瀏覽器的名稱， 版本 等等。
你可能要問了， 為啥還要獲得瀏覽器的名稱和版本呢？

　　說起來慚愧， 在Netscape 和IE 進行瀏覽器之戰的期間， 他們都爭相在自己的瀏覽器中支援Javascript, 並且為了鎖定程式設計師， 還開發了很多自己瀏覽器的獨特功能， 有些功能只能在IE用， 有些只能在Netscape 用， 所以必須的判斷是什麼瀏覽器， 這樣才能特殊處理。

　　不管怎麼說， 我的這些本事讓瀏覽器中的網頁變的更加動態了， 更加有趣好玩了。

　　但僅限於此， 我被困在瀏覽器和網頁上， 別的什麼也幹不了。

　　用Java 的話來說： 這些都是雕蟲小技，奇技淫巧， 只是一個打著我的羊頭賣狗肉的屌絲而已。

　第三章： 第一桶金　

　　網際網路的發展超出了所有人的預料， 我被應用在幾乎每一個網站上， 但我一直很苦悶： 我作為一門語言，在瀏覽器中執行， 沒法像java 那樣訪問網路， 也就沒有辦法呼叫伺服器端的介面來獲取資料。

　　使用者只能通過GET或者POST向伺服器傳送請求，這時候伺服器返回的資料是整個頁面， 而不是頁面中的一個片段， 也就是說整個頁面都得重新整理一遍， 哪怕是頁面中只有一個文字的改變。

　　1998年的時候 ，我和積極進取的IE5做了一次會談， 雙方就共同關心的話題深入的交換了意見， 最後一致同意， 在IE5中引入一個新的功能：XMLHttpRequest ， 這個新功能將允許我直接向伺服器發出介面呼叫！

　　每當發起呼叫時， IE5通常會這麼說：

　　"小JS啊， 來， 你拿這個使用者名稱和密碼訪問一下伺服器端處理登陸的介面 ， 這個過程很費時間，我就不等你了， 先幹別的事兒去了， 你得到伺服器端的返回資料以後， 一定要記著呼叫下我給你的這個函式啊。 "

　　我知道這其實叫做非同步呼叫， 於是就乖乖的通過XMLHttpRequest 訪問那個登入的url, 耐心的等待伺服器幹完活，把資料傳輸回來， 然後我就去呼叫那個函式， 基本是就是把DOM樹的某個節點更新一下， 例如讓那個包含使用者名稱和密碼登陸框消失， 再加一個提示訊息：登入成功 ， 這事兒我很擅長。

　　如果伺服器處理和網路速度都足夠快的話， 使用者就會發現： 咦， 我沒有重新整理整個頁面， 竟然已經登入了啊。

　　我和IE都沒有料到，這個功能帶來了一場革命： 這種方式可以使得網頁區域性重新整理， 讓使用者瀏覽網頁的體驗極佳， 尤其是Google 地圖， Gmail 等應用讓網際網路應用火了起來。

　　其他瀏覽器也迅速跟進，實現了類似功能， 各種各樣互動性極佳的網站如雨後春筍般出現。

　　VB和Delphi 慢慢的不再嘲笑我了， 因為他們絕望的發現， 他們擅長的桌面應用慢慢的都被搬到了網際網路上， 沒人再喜歡他們了。

　　我， Javascript， 挖到了第一桶金，開始走向人生巔峰。

　第四章： 發明JSON

　　後來有個好事之徒把上面的那種處理方式稱為AJAX即“Asynchronous Javascript And XML”（非同步JavaScript和XML）， 其實非同步挺好， 但是XML就很不爽了。

　　比如說伺服器返回了下面這段xml ：

<book>
    <isbn>978-7-229-03093-3</isbn>
    <name>三體</name>
    <author>劉慈欣</author>
   <introduction>中國最牛的科幻書</introduction>
   <price>38.00</price>
</book>

　　真正的資料很少， 標籤（像<name>這樣的）反而佔了大頭， 把資料都給淹沒了。

　　我對XML說： “你是不是太臃腫了， 傳輸起來多費勁啊。”

　　XML說：“切，你這就不懂了，這樣很優雅啊，格式化良好， 人可以讀，　程式也可以讀啊。”

　　"優雅個啥啊， 無用的資料這麼多， 再說我還得用XML解析器來解析你， 費了勁了！"

　　"你真是屌絲啊，連個解析都搞不定， 你看人家Java， 用我用的多Happy , Spring, Struts, Hibernate, 幾乎所有配置檔案都是我。"

　　Java 也在一旁幫腔： 是啊， 我解析的時候還用DTD 做校驗呢， 看看XML資料合法不合法。

　　我無語。

　　記得CPU阿甘說過：既然改變不了別人， 那就改變一下自己吧。

　　我看了看我的語法， 裡邊有個叫物件的東西, 它有一個花括號， 在括號內部，物件的屬性以名稱和值對的形式 (name : value) 來定義， 屬性由逗號分隔， 像這樣：

var book = { 
"isbn": "978-7-229-03093-3", 
"name": "三體",  
 "author": "劉慈欣",
"introduction": "中國最牛的科幻書",
"price": "38.00"
 }

　　這種結構完全可以表達上面的xml 內容啊！

　　我的語法還支援陣列，這樣表達多個物件也不在話下啊：

var books = [
 { 
"isbn": "978-7-229-03093-3", 
"name": "三體",   
"author": "劉慈欣",
"introduction": "中國最牛的科幻書",
"price": "38.00"
 },
 { 
"isbn": "978-7-229-03094-1", 
"name": "我是一個執行緒",   
"author": "劉欣",
"introduction": "一個執行緒的自述",
"price": "0.0"
 }
]

　　陣列和物件都支援巢狀， 任何複雜的結構都可以儲存！

　　更重要的是， 如果採用這種結構， 我根本不用什麼XML解析器去解析了，它就是我語言的一部分。 直接拿來用即可。

　　books[0].name -->返回“三體”

　　books[1].introduction --> 返回“一個執行緒的自述”

　　生活不要太爽啊 :-)

　　我把這種簡潔的格式叫做JSON, 並且和伺服器約定， 我們以後都用JSON來傳輸資料。

　　至於XML, 還是讓Java 這樣的老學究去用吧。

　　第五章：人生巔峰

　　HTML負責結構， CSS負責展示， 而我（加上AJAX, JSON） 負責邏輯。

　　於是前端程式設計三劍客形成了。

　　ExtJS, prototype, JQuery 這些框架把前端程式設計推向另外一個高峰。

　　甚至出現了AngularJS 這樣的奇葩，實現了SPA(單一頁面應用程式)， 實在是難於想象。

　　我給Java 說： Java 兄， 現在我完全可以在瀏覽器端實現MVC了， 你只需要在伺服器端通過介面給我提供資料就行了。

　　但是Java 還是給我潑冷水： 別得意忘形了， 伺服器端才是核心， 要不你到伺服器端試試？

　　我很詫異：“伺服器端？ 我還真沒有想過， 住在64G記憶體， 32核的CPU 這種擁有幾乎無限資源的機器上是什麼感覺？ ”

　　"感覺沒你想象的好 " Java 沒聲好氣的說 “多執行緒程式設計， 很多東西都要加鎖， 一不留神就掉到坑裡。 我這裡基本一個請求就是一執行緒來處理， 遇到資料庫操作， 雖然慢的要死，執行緒也得等待。 ”

　　"那不能改成非同步操作嗎？像我的AJAX一樣， 資料來了再通知我 " 我問Java。

　　"不行， 一開始就是這樣， 現在改不了"

　　把Javascript 放到伺服器端執行怎麼樣? 這個想法夠瘋狂的。

　　首先得把瀏覽器端的執行環境， 就是javascript引擎移到伺服器端， 這個引擎執行javasript 得足夠快，要不Java 還不得笑死我。

　　原來的引擎一直不合格， 直到Chrome V8的出現， 才解決問題。

　　其次得繞開java 伺服器的問題： 執行緒遇到IO/資料庫/網路 這樣的耗時操作， 不能等待， 得搞成非同步處理。

　　但的確有人這麼做了， 在我的創始人Brendan Eich 發明了我10幾年以後 ， 又一位大牛Ryan Dahl於2009年真的把我放到了伺服器端。這就是node.js

　　這下Java無話可說了， 雖然他還是對我在伺服器端執行持懷疑態度， 但越來越多使用node.js的網站證明， javascript的確可以在伺服器端立足， 並且有一個巨大的優勢：前端和後端都用同樣的開發語言：那就是我 javascript

　　原來的前端開發現在竟然也可以毫無障礙的寫後端的程式了， 是名副其實的“全棧工程師” ！

　　這就是我，一個屌絲的逆襲， 我的創始人絕對想不到10幾年後我能成為這麼一個高富帥， 我估計他夜裡經常會想： "唉，當年太倉促了， 我要是把javascript 設計的更好一點就好了。

相關文章