之前看到同事在使用coffeescript寫js,當我看到那簡介的coffee文件,就深深的被coffescript吸引了,簡潔的語法,熟練之后會大大提升javascript的開發速度,寫腳本也能像飛一樣。
學習資料:
推薦資料:
CoffeeScript 詳解 https://ruby-china.org/topics/4789
會ruby語言的同學輕松上手,不過coffeescript的語法是相當簡單的,看一遍官網,你絕對會有想要試試的沖動,請不要抑制這股沖動,放手去寫個demo吧,只有親自體會過后你會更加喜歡coffeescript
前人已經介紹了很多coffeescript語法,我這里就不再贅述了,下面說一下自己寫完一個demo的感覺。
我用coffeescript寫了一個懸浮選擇顏色標簽的jQuery插件,代碼很簡單,目的是練習嘛。
demo代碼參考:
http://runjs.cn/code/v0rmoroh
1.函數返回語句
coffeescript生成的js中,會對每個方法生成returen語句,默認返回函數的最后一行,考慮有的時候並不是每個函數都必須返回,所以這一點有點不習慣,所以我在對不需要返回的函數末行都寫了false.
其實返回this最好,但要注意this在上下文的含義,我在寫demo時遇到的問題是,為元素綁定點擊事件,就是因為 $.each() 返回的是this結果導致事件被觸發了多次,最后修正還是返回false踏實一些。
2.函數調用
對於調用有參數的函數還好,直接 functionName arg1,agr2 。 如果是無參數函數,還是需要顯示調用,就是加上小括號: functionName()
還有就是嵌套調用,這個也是需要自己顯示的加上括號以及傳遞參數。
例如: offset.top += (parseInt ele.css 'height' )+5
--->
offset.top += (parseInt(ele.css('height'))) + 5;
鏈式調用時使用 '.' 點號來進行連接,跟一般鏈式沒有區別
3. 記得編譯時加入-w參數
-w 參數的意義在於,你在開發階段,沒保存一次coffee文件就被自動編譯成.js文件。
4.注釋
coffeescript中的注釋是# 如果使用// 或者/**/ 在編譯時會報錯的
遺憾是,在coffee文件中的注釋在編譯好的js中注釋都被去掉了,所以在閱讀js時沒有注視的感覺,唉~
coffeescript 注釋方式:
###
這里是注釋
###
另外一點,塊注釋一定要緊緊放在被注釋的代碼上面,否則會編譯出錯,千萬不要如下圖:
--補
感謝 @
枉然不供 提供的注釋方式.
目前就這么多,后續有問題在更新上來,繼續學習coffee語法。
我相信熟練使用coffeescript后在配合vim 寫javascript飛一樣的感覺是不會遠了。