Javascript:一個屌絲的逆襲

清風寫遊戲 發佈 2020-01-18T18:34:36+00:00

」Brendan Eich: "......" 老闆: "我們正在和Sun 公司合作, 你聽說過他們剛發明的Java 嗎, 那個運行在瀏覽器中的Applet簡直是酷斃了,Java 肯定是未來的網絡語言。 所以你要搞個新語言出來,要和java 足夠相似, 但是要比java 簡單的多

  • 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向伺服器發送請求,這時候伺服器返回的數據是整個頁面, 而不是頁面中的一個片段, 也就是說整個頁面都得刷新一遍, 哪怕是頁面中只有一個文字的改變。

(碼農翻身註: 《IE為什麼把Chrome和火狐打傷了》這篇文章介紹了HTTP的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(碼農翻身:《Node.js 我只需要一個店小二》這篇文章介紹了Node.js的原理, 可以通過公共號的菜單查看)

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

原來的前端開發現在竟然也可以毫無障礙的寫後端的程序了, 是名副其實的「全棧工程師」 !

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

關鍵字: