編輯推薦
作為所有主流瀏覽器都支持的腳本語言,JavaScript儼然已成為Web開發領域極具號召力的語言,但它的種種語言怪癖以及在各種瀏覽器間實現不一緻等問題也為開發人員所詬病。2009年底,CoffeeScript橫空齣世。它吸收瞭JavaScript語言的精華,並添加瞭很多現代語言腳本的特性,很快便得到瞭大量Web開發人員的青睞。 《深入淺齣CoffeeScript》由CoffeeScript重要貢獻者Trevor Burnham操刀,從基礎知識入手,全麵詳盡地介紹瞭CoffeeScript這門新語言。通過一個5×5拼字遊戲,作者將CoffeeScript各方麵的知識融入其中,通俗易懂地講解瞭CoffeeScript如何與jQuery等非常流行的類庫完美集成,如何遊刃有餘地結閤Socket.IO實現Node.js雙通道異步通信。每章結尾都有精心設計的習題,有助於讀者鞏固所學的CoffeeScript知識並更上一層樓。 掌握CoffeeScript,Web開發之旅將更輕鬆、快捷和優雅!
內容簡介
《圖靈程序設計叢書:深入淺齣CoffeeScript》是一門新語言,是JavaScript預編譯器。由它生成的JavaScript代碼能兼容所有瀏覽器環境,可讀性更強、更優雅。《深入淺齣CoffeeScript》通過一個貫穿全書的小遊戲,從基礎知識講起,全麵透徹地介紹瞭CoffeeScript,並展示瞭它與jQuery與Node如何搭配運行。
《深入淺齣CoffeeScript》適閤Web 開發人員及對CoffeeScript感興趣的讀者。
作者簡介
Trevor Burnham,全棧式Web框架開發專傢,DataBraid創始人,開源擁躉,技術布道師。
寸誌,2011年7月畢業於同濟大學信息安全專業,在校期間,曾榮獲微軟精英大挑戰優勝奬,第三屆三葉草軟件競賽三等奬等。現任大眾點評網前端工程師。熱愛互聯網,熱衷研究新技術,崇尚開源精神,喜歡運動和閱讀。
內頁插圖
精彩書評
“學習CoffeeScript有助於讀者成為更優秀的JavaScript開發人員。而且,本書讀來酣暢淋灕,對於準備學習CoffeeScript的新手,這種體會尤為深刻。”
——Brendan Eich,JavaScript之父
“很難想象現如今會有哪個Web程序沒有大量使用JavaScript。如果你用慣瞭Ruby之類的語言,再使用JavaScript就會明顯感覺在退步,這可不是什麼愉快的事兒。來看看CoffeeScript吧:它是一個JavaScript預編譯器,移除瞭JavaScript中不必要的冗餘,讓代碼編寫和源碼閱讀變成一件樂事。來,嚮著Coffee前進吧!這是一本很棒的CoffeeScript入門書。”
——David Heinemeier Hansson,Ruby on Rails之父
“CoffeeScript是編程語言領域極有意思的進展之一,它吸納Ruby和Python等語言之精華,是一個極富錶現力的語言。本書將指引你進入CoffeeScript的世界;對於那些有誌於提高JavaScript開發效率的開發者,本書同樣必不可少!”
——Travis Swicegood,《版本控製之道——使用Git》作者
目錄
第1章 入門指南
1.1 安裝CoffeeScript
1.2 CoffeeScript編輯器
1.3 “邂逅”coffee
1.3.1 編譯為JavaScript
1.3.2 REPL
1.4 調試CoffeeScript
1.5 預備
第2章 函數、作用域和上下文
2.1 函數基礎知識
2.1.1 訪問arguments對象
2.1.2 條件錶達式和異常
2.2 作用域:你在哪裏看到它們
2.3 上下文
2.4 屬性參數(@arg)
2.5 默認參數(arg=)
2.6 參數列(...)
2.7 項目:5×5遊戲輸入分析器
2.8 做得好,年輕的學徒
2.9 練習
第3章 集閤與迭代
3.1 作為哈希錶的對象
3.1.1 JavaScript基礎知識:一節JavaScript補習課
3.1.2 精簡的JSON
3.1.3 同名鍵值對
3.1.4 吸收操作符:'a?.b'
3.2 數組
3.2.1 區間
3.2.2 切分和剪接
3.3 集閤的迭代
3.4 條件迭代
3.5 列錶解析
3.6 模式匹配(或解構賦值)
3.7 項目:5×5單人遊戲
3.8 進階
3.9 練習
第4章 模塊與類
4.1 模塊:解構程序
4.2 原型的威力
4.3 類:原型函數
4.4 使用extends來繼承
4.5 項目:重構5×5遊戲
4.5.1 Dictionary類
4.5.2 Grid類
4.5.3 Player類
4.5.4 Console.Coffee接口
4.6 就如“一勺糖”
4.7 練習
第5章 jQuery Web交互開發
5.1 jQuery之道
5.2 操作DOM
5.3 學會選擇
5.4 響應事件
5.5 項目:基於瀏覽器的5×5遊戲
5.5.1 index.html
5.5.2 style.css
5.5.3 jq5×5.coffee
5.6 未來是jQuery化的
5.7 練習
第6章 Node.js服務器端程序
6.1 什麼是Node.js
6.2 使用exports和require構建模塊化代碼
6.3 異步思想
6.4 項目:多人5×5遊戲
6.4.1 5×5server.coffee
6.4.2 5×5client.coffee
6.4.3 都結束瞭
6.5 客戶端、服務器端--有何不同
6.6 練習
附錄A 練習答案
附錄B 運行CoffeeScript的幾種方法
附錄C JavaScript開發者備忘錄
精彩書摘
入門指南
如果你讀過前言,那麼現在應該已經瞭解瞭CoffeeScript是什麼,它從何而來,以及它為什麼是繼Herman Miller牌辦公椅之後,對程序員來說最棒的東西瞭。但是實際上你還沒寫過一行代碼,等不及瞭是吧?
好,深呼吸下,時候到瞭。在本章中,我們將在你的操作係統中安裝CoffeeScript,配置好編輯器,最後再運行一些代碼!
1.1 安裝CoffeeScript
CoffeeScript編譯器是用CoffeeScript寫成的,這就産生瞭一個先有雞還是先有蛋的問題:我們是如何在一個還沒裝CoffeeScript編譯器的係統上運行編譯器的呢?如果能找到某種方法,在機器上瀏覽器之外運行JavaScript代碼,且允許這些代碼訪問本地文件係統就好瞭……
對,其實我們有Node.js!大傢把Node當成一個JavaScript的Web服務器(詳見6.1節),但是它可不止這個功能。從根本上講,它是JavaScript代碼和操作係統之間的一個橋梁。Node也有一個名為npm的很棒的工具,即Node包管理器(Node Package Manager) 。如果你是Ruby程序員,可以將其想象為Node版的RubyGems 。npm已經成為安裝管理Node程序和類庫約定俗成的標準瞭。
本節的剩餘內容講述Node和npm的安裝,有瞭它們,我們就能夠使用CoffeeScript標準的coffee編譯器瞭(我們在第6章同樣需要使用Node和npm)。如果你迫不及待地想要實踐一下的話,可以訪問http://coffeescript.org/,點擊“Try CoffeeScript”按鈕,然後直接跳到下一章去(要在瀏覽器中顯示console輸齣,需要某些工具,比如說Fire Lite )。
準備好瞭?那我們就開始吧。
使用Node.js和npm安裝CoffeeScript
盡管有很多不藉助Node來運行CoffeeScript代碼的方法(附錄2會談到其中幾種),然而我還是假定你在全書中用的是標準的coffee命令,專門運行在Node上的。但是隻有在第6章纔會明確需要使用Node和npm。
請注意,使用Windows係統的用戶,在繼續之前你需要先安裝Cygwin 。Cygwin基本上相當於一個Linux模擬器。雖然Node.js在0.6版本的藍圖中計劃直接支持Windows,但是在寫作本書之時,使用Cygwin是現有的最可靠的方法。
Mac用戶需要安裝Xcode ,重點並不在於這個程序,而在於那些隨它一起安裝的命令行開發工具。嘗試運行命令gcc(GNU編譯器集閤)來檢測係統中是否已經安裝瞭這些工具:
如果輸齣如上所示,那就說明準備就緒瞭。如果沒有的話,那麼就請安裝Xcode(Mac用戶),或者直接安裝標準創建工具(Linux或者Cygwin環境下)。
無論是什麼係統(Linux/Unix/Mac),現在都配置好標準創建工具瞭吧?太棒瞭!現在去訪問http://gist.github.com/579814,此處列齣的安裝方法之多會讓你眼花繚亂,它們都齣自npm的創建者Isaac Schlueter。對於所有Mac用戶,我推薦使用Homebrew 方法(先安裝Homebrew)。對於其他係統的用戶,列錶中的第一個選擇則最為直接,也是最好的方式。Node是個很大的程序包,安裝它需要花幾分鍾。
安裝好Node之後,運行最新的npm遠程安裝腳本:
如果你碰到權限錯誤,可以使用chown 改變Node安裝目錄的屬權(該方法可以減少很多麻煩),也可用sudo sh 替換普通sh。
無論選擇哪種方法,都要測試一下node和npm是否已經存在於係統的環境變量PATH中瞭:
(簡單的提一下與版本相關的事情:Node的版本號為偶數時API保持穩定。因此,本書的例子在最新的0.4.x版本下應該運行正常。但是Node 0.5.x版則會以API的變化為重點,而這些變化將會包含到0.6.x穩定版中。說到npm,本書中假定你使用的是npm 1.x。因此,如果你還在使用npm 0.x,是時候升級瞭。)
現在抓取最新發布的CoffeeScript:
參數-g是--global的縮寫,它使已安裝好的庫在全局係統中都可用(默認情況下,npm install [package]把指定的程序包安裝到當前的子目錄node_module中,這樣便於安裝隻適用於特定項目的類庫)。隻要是安裝那些包含二進製可執行程序的程序包,我都推薦使用-g參數。
npm install命令的輸齣結果告訴我們,作為安裝包的一部分,兩個二進製可執行程序cake和coffee已安裝好瞭。讓我們測試下coffee是否已經在係統的PATH 中瞭:
如果這樣不行,那就看一下npm install輸齣結果中->符號之前的路徑(例如/usr/local/bin),然後把它添加到係統的PATH中去。如果使用的是Mac默認bash終端的話,在你的~/.profile文件中添加下麵這行代碼即可:
注意不要遺漏:$PATH這部分,否則/usr/local/bin會直接替換掉係統的PATH變量,而不是將自己添加到裏麵!要讓這行代碼生效,需要保存好文件並且開啓一個新的會話終端(比方說,把老的終端關掉打開一個新的)。
如果使用的是其他係統或終端,步驟可能會略有不同,可以輸入echo $SHELL搞清楚你使用的是哪個終端。不要忘瞭在修改完文件之後重新打開會話終端,以便修改生效。
最後一步:就像要想在任何地方都能夠使用二進製程序就必須把它們放到PATH中一樣,npm安裝的Node類庫也必須添加到NODE_PATH中。可以輸入如下命令查看Node安裝類庫的位置:
(該命令同時還列齣瞭npm全局安裝的所有類庫。去掉-g就可以看到安裝在當前目錄下的所有類庫。)我們需要把該路徑下的子目錄node_module添加到NODE_PATH中。在筆者的係統中,就是將如下內容添加到~/.profile文件中:
同樣,你的係統上需要采取的操作步驟可能會有所不同。要測試NODE_PATH是否有效,打開一個新的會話終端輸入命令node,即可打開Node.js的REPL ——一個交互式命令運行環境。接著輸入:
我保證,這是本書中唯一一行你需要輸入的JavaScript代碼!
如果NODE_PATH設置得不正確,會看到一個Error: Cannot find module ‘coffee-script’的錯誤提示。如果隻是看到一段很長的對象描述,那就沒有問題瞭。完成後,可以輸入process.exit()或者使用 – 來退齣Node的REPL。
順便說一下,coffee-script庫已經超齣瞭本書的範圍;我能說的就是,在CoffeeScript或JavaScript程序中,它能讓你把CoffeeScript編譯成JavaScript。你可以基於此做一些非常酷的事情,比方說你可以自己寫一個包含自定義後期處理的編譯器,或者可以寫一個像Cakefile 那樣的打包腳本。
嘿!我知道安裝過程似乎花瞭很多時間,不過請相信我,既然我們獲得瞭為自己所用的Node和npm的全部能力,那付齣終將獲得迴報。現在讓我們來配置下編輯環境吧。
在刀鋒上起舞
如果你一定要用最新的CoffeeScript,這實際上也非常容易。隻需要使用git 把CoffeeScript的代碼倉庫剋隆下來,然後使用npm從本地目錄中安裝它即可:
這將安裝CoffeeScript當前的master分支,它多少有點不穩定。可以運行如下命令來還原到特定版本的CoffeeScript(比如說1.1.1):
1.2 CoffeeScript編輯器
在https://github.com/jashkenas/coffee-script/wiki/Text-editor-plugins上可以找到一份最新的支持CoffeeScript的編輯器列錶。如果你使用的是Mac係統,那我推薦使用由Jeremy Ashkenas維護的TextMate插件 。在撰寫本書時,Vim、Emacs、gedit、jEdit以及IntelliJ IDEA也分彆有插件提供瞭對CoffeeScript的支持。
最近,使用基於Web的編輯器編寫代碼已成為可能,這些編輯器支持實時協作,不依賴於任何特殊的設備。目前對CoffeeScript支持得最好的Web編輯器是安裝瞭Cloud9 Live CoffeeScript Extension 的Could9。
當然,你可以使用任何自己喜歡的編輯器,但是支持CoffeeScript的編輯器會給你帶來3大優勢——語法高亮、自動縮進以及內置的編譯快捷方式。前兩個優點理解起來很容易,但是第三個優點是很多程序員沒有好好利用的部分。
在TextMate中,可以使用 R(運行)來運行CoffeeScript文件,或者隻用 B(生成)來查看編譯後的JavaScript。編譯隻需幾毫秒,因此如果對於一個CoffeeScript錶達式如何轉化為JavaScript不是很確定,那麼快速編譯就是搞清楚這一過程的最快方法。如果有被選中的文本,則這些命令僅僅運行選中部分的代碼而不是整個文件,這就讓測試小塊代碼以及定位語法錯誤變得容易多瞭。如圖2所示
圖2 直接在TextMate中運行選擇的代碼
稍微注意下,一些編輯器(包括TextMate)不會默認采用PATH值,這就意味著在你試圖運行coffee命令時可能會齣現類似於command not found的錯誤。如果遇到這種問題,打開編輯器的配置(可能在Shell Variables下麵)設置PATH,以匹配在終端中運行echo $PATH命令時得到的輸齣值。你願意的話也可以順便設置下NODE_PATH。
1.3 “邂逅”coffee
既然你已經把編輯器設置好瞭,那就是時候介紹標準命令行編譯器coffee瞭。讓我們從必修的“Hello world!”程序開始。打開編輯器,創建一個名為hello.coffee的文件,添加如下內容:
直接運行它:
有幾件事情你可能會感到奇怪:首先,console.log函數是從哪裏冒齣來的?(答案:它是一個Node.js的全局函數。)其次,JavaScript在哪裏呢,不是說CoffeeScript會編譯為JavaScript嗎?
事實上coffee會將hello.coffee隱式地編譯為JavaScript,然後將輸齣結果直接傳遞給Node,以使其立即執行。如果這不能滿足你的需求,可以使用coffee眾多選項中的一個或多個,使用coffee -h命令可以查看這些選項:
如果想查看剛纔編譯器隱藏的JavaScript,可以運行:
可以查看1.3.1節“包裹中的JavaScript”專題對多餘兩行代碼的解釋。
1.3.1 編譯為JavaScript
-c(編譯)可能是最常用的參數,它可以把輸齣的JavaScript保存到文件中。除瞭使用.js擴展名代替.coffee之外,新文件的文件名與原始文件的相同。讓我們繼續使用咖啡因飲料的主題:
編譯輸齣到相同路徑下的一個名為mochaccino.js的文件中。使用-o(輸齣)參數並讓目標目錄名稱緊跟其後,就可以把輸齣保存在其他地方:
該示例讀取source目錄(包含其子目錄)下的所有.coffee並把對應的.js文件寫入output。注意-co是-c-o的縮寫。其順序很重要:輸齣目錄名必須緊接在-o之後。
另外一個比較常用的參數是-w(監聽),它可以讓coffee命令在後颱持續運行。結閤-c,它在每次開發者作齣改變之後重新編譯代碼。它甚至能在多目錄下工作且能保持嵌套的目錄文件結構不變。因此,如果運行下麵的命令, coffee目錄下的所有文件都會不斷地被重新編譯到js目錄中:
它會持續運行直到使用 – 來終止編譯器。
包裹中的JavaScript
你可能想知道為什麼CoffeeScript編譯後的代碼會被包裹在一個函數內?原因用一個詞來說就是命名空間。如果將一堆JavaScript文件上載到一個瀏覽器程序中,它們會被當做一個大的代碼塊,這容易産生不可預料的結果:
寫第一個文件的人,對代碼可能造成的破壞一無所知!為避免發生災難可以把每個文件用一個匿名函數包裹起來,這樣就隔開瞭兩個declareNuclearWar聲明(參見2.2節),這種方式叫做模塊模式。
為瞭讓模塊之間可以互相通信,必須“輸齣”一些變量(我們會在4.1節詳細介紹)。
如果一定要除去包裹函數,使用-b(暴露)參數來運行coffee命令即可。
1.3.2 REPL
不帶任何參數直接運行coffee會進入編程老手所說的REPL,即Read-Eval-Print L
圖靈程序設計叢書:深入淺齣CoffeeScript 下載 mobi epub pdf txt 電子書