今天从零折腾CoffeeScript的经历
说出来不怕你们笑话,我对着满屏的花括号看了三年,昨天终于被JavaScript搞崩溃了。大半夜翻仓库时突然看见CoffeeScript这名字,寻思反正也睡不着,干脆爬起来装环境。
结果刚打开官网就傻眼了——这语法长得跟Python似的!直接打开命令行敲了个:npm install -g coffee-script 等进度条跑完,手抖着新建了个文件。
上来就踩坑:照着教程写* "你好世界"保存运行,终端死活不认命令。折腾半小时才发现得用coffee -c *编译成js,再node * 才看到输出。气得我灌了半杯凉水才冷静下来。
五个让我活过来的语法糖
折腾到天亮总算搞明白这五个救命技巧:
- 箭头函数原地消失术 - 以前写setTimeout(function(){ ... },1000) 现在写成setTimeout -> ... ,1000 ,少打十个字符!
- 花括号灭绝计划 - 纯靠缩进控制代码块,刚开始手滑多按个空格就报错,现在反而治好了我写代码不缩进的臭毛病
- 变量不用var宣言自由 - 直接写name = "咖啡脚本" 自动变成局部变量,有次手快写成name="咖啡"忘了逗号,整个文件崩得妈都不认识
- 判空合并大法 - level = user?.level ? 1 这种操作简直是为我这种懒人定制的,以前得写三行判空现在一行搞定
- 字符串插值真香 - 用"#{name}学起来真带劲"替换字符串拼接,终于不用在加号和引号之间精神分裂了
实践出真知的血泪史
下午拿公司废弃登录页做实验,结果栽在大括号上:原JS的if (* === 200 && *) 被我改成if * is 200 and * 看着挺美,编译完发现自动生成的前面多出个分号!查文档才知道要用then关键字分割条件:if * is 200 then ...
更搞笑的是尝试for in循环:写了个for item, index in list想打印索引,结果控制台连续蹦出十几个undefined。原来CoffeeScript里索引变量要显式声明!改成for item, index in list才正常。晚上复盘时发现文档第三行就写了这规则,我偏不信邪非要头铁实践。
现在看着编译后的JS文件陷入沉思:三千行JS被压缩成八百行CoffeeScript,可读性反而上去了。就是这玩意调试起来真要命,报错位置永远对不上源码,只能靠//# sourceMappingURL映射文件救命。建议新手用coffee --map --watch实时编译,不然像我这样在电脑前面发呆十分钟还找不到bug太傻了。
明天准备把项目里的工具函数全转成.coffee后缀,被同事打的话就说博主教的——反正我工位离消防通道最近,跑路比较快。