emmet,jade,haml, slim,less,sass,coffeescript等的实战优缺点

摘要: 文章背景，来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动。

随着前端技术的蓬勃发展， 各种新技术随着生产力的需要不断的涌入我们的视野， 那今天探讨的话题是这些新时代的前端兵器谱： 
一. html : Emmet,jade,haml,slim 
http://www.ruanyifeng.com/blog/2013/06/emmet_and_haml.html 
二. css : less,sass,stylus 
http://www.zhihu.com/question/20300388 
三. js : coffeescript 
http://www.zhihu.com/question/19943552 
四. 模块化： seajs, requirejs 
http://seajs.org/docs/#docs 
http://www.vipaq.com/rtfm/JavaScript/RequireJs/zh-cn/2.1.9/api.html 

只是以第三方使用者的心态，讨论各个技术的优缺点或填坑经验， 
或现有手头现成资源的分享。禁止针对某人的人格评论或人身攻击， 
一切以和谐，共赢，团结一心的前提下参与讨论。 
今天的话题主持人：[才子]，他本人熟悉这些技术中的大部分并已经用于实战， 
由他来引导或分享总结此次讨论。 
这样会产生一个临时管理，主要负责本周讨论细节。 

一. 

1. 先说emmet，这玩艺是俄罗斯人搞出来的，原本叫zencoding后来改成emmet了， http://docs.emmet.io/ 
这个功能简单粗暴观看里边的watch demo基本都能了解一二。 

值得一提的是有两个编辑器对这个技术的支持： 
sublime text 是所有编辑器里边支持emmet比较好的的唯一一款。 
webstorm是所有编辑器里边唯一内置emmet的一款，并且将emmet的精神往前推动的一款。 
http://www.cnblogs.com/jikey/archive/2012/03/28/2420704.html 
phpstorm，idea包括所有webstorm的功能。只是phpstorm是针对phper的，idea是针对javaer，webstorm针对前端er。 
http://www.cnblogs.com/jikey/p/3607133.html 

emmet与下面几种技术的区别，他是一种思路或哲学，webstorm将这个哲学广度化， 
除了可以扩展css,html之外，还可以扩展js,php,sql,java and so on. 
不需要任何的框架，只需要一个编辑器。 

2. 

Haml：代替erb，用在Rails上一种模板语言 
Jade：Node上的Haml 
Slim：跟Haml一样，也用在Rails 

这三个模板语言语言都有一下几个特点： 
层次清晰，采用缩进来表示层次和tag的闭合。 
简化tag编写，直接使用#id的形式去生成一个带id的div。 
依附于各自的平台（Rails和Node），可以很方便使用include和mixin，消除文件级别的重复 
都可脱离平台单独应用，脱离平台后，功能会受一些限制。 
参考自：http://lishoubo.github.io/2013/03/02/jade-haml-and-slim/ 

二. 
less跟sass的比较： 

他们都是CSS相关的技术，业界的统称：CSS 预处理器，css预处理技术等等的叫法。
这个处理器使原本静态的css具备基础编程语言的处理能力，比如使用变量，简单的代码逻辑，函数等等编程语言中的基本技巧。
sass和less使用的是标准的css语法。

sass相比less功能更强大， 
http://www.oschina.net/question/12_44255 
大漠老师是sass的高人或国内这方面的领军人物， 
除了http://www.w3cplus.com之外，还运营另外一个站http://www.cn-sass.com/ 
堪称是sasser的福音。 

less可以引入一个js文件就可以干起来了，sass需要依赖ruby环境， 
那么stylus就需要依赖nodejs 
Stylus: 
http://www.zhangxinxu.com/jq/stylus/ 

下面是[才子兄]的分享： 

1、我们第一次使用这个组合是有人搭了个框架，我第一次用时有点反感，疑问，
这个东西能提高效率么？跟大多数人的想法一致。
2、对新生事物总是持有怀疑态度，我想这是大部分人都有的
在webstorm可以实时把sass的文件编译成CSS
3、因为我们习惯拿固有思维来看待新事物，这是人的惰性使然，不愿意接受新事物。
4、使用了之后的第一反应是，coffee编译生成的js执行不了怎么办
5、因为coffee，特别是拿它来写服务端node，要调试很麻烦，总是直接console.dir xx
6、前端的coffee jade stylus就好办得多，我们从页面请求一条node路由，然后node实时编译成对应目标代码 js html css
7、然后启动node服务，在浏览器刷新就可以看到执行结果了，但这里面存在一个难点，怎么实时编译呢？
8、原来是调用对应的node模块，把前端请求的rest实时编译成js html css之后，插入页面对应的提放。比如js插入body结束之前
9、这样的好处是开发的时候，你就直接写coffee jade stylus实时刷新页面就可以看结果。当你要部署到生产环境是使用 grunt编译、合并、压缩成css、js。
10、上面就是我们的实践了，目前运用于一个电商网站。
11、那么coffee要注意什么呢？
12、coffee把（） {} ； 这些C语言系的代表语法消灭了90%
13、它使用空格+换行来表示这些包含和代码块
14、coffee的好处是什么 当你使用异步回调时 例如 http.get(function(err, res){}); 类似这样的，嵌套很多很烦
15、coffee只要简单地换行
　　http.get (err, res)
　　　　#your handle code here
　　http.get (err, res) ->
　　　　#your handle code here
16、这个可以说是革命性的创新，因为http请求本身异步的特性，嵌套很多层。
17、然后coffee会自动在函数末尾返回return，所以平时我们写的func = ( ) { var a=1; return a;} coffee可以简单写成
　　func=() ->
　　　　a=1
18、或者 更简洁的当函数没有入参时更简便
　　func = ->
　　　　a=1
19、用coffee时若你配合angular使用要注意了，当你使用angular.element 选择元素和操作元素时，而这一行恰巧在函数的最后一行，那么就会报错。
20、因为coffee会自动把这一行return，而angular是不允许返回dom的。因此你需要在这一行之后显示地加一行
angular.element
return
21、coffee这种就是消灭了这些无谓的 （） {} ；这些符号，简便的函数表达式。 使得效率会提高30%。
22、stylus使用的心得是，它帮助我们实现很多兼容问题
23、比如我们常用的 -ms -moz -web-kit这些css3前缀，那么stylus里不用了
24、它会帮助我们加上
25、stylus里面复杂的运算那些项目中实际很少用到，最实用的是extends 继承
26、当你多个地方的样式都复用一段代码时，用它可以很省事
27、还有我们 display:inline-block;在ie6里我们用_display:inline,ie7用 *display:inline，而stylus里，我们用display()就可以了
28、下面说一下jade的好处吧
29、刚才一定有人问，为什么不用sass而用stylus
30、是这样的，使用sass很麻烦的地方就是，它需要安装ruby环境，同时它还保留着css的花括号等，比较丑陋。
31、所谓大道至简，加上jade配合stylus这两个都是以css类来编写的，也就是用可用同样的层级显示。
32、层级缩进语法的好处可以直观的表述dom
33、stylus还有比如图片的自适应，上图的截图就是
34、jade的好处是，它的动态部分不会侵入dom，不像angular一样注入dom的属性
35、jade还有诸如include可以包含其它文件，minxin可以封装一份dom，可以把它当函数看。
36、好了，以上是我的分享，你肯定希望我多多贴上代码，可是我认为真正要做好一个事情只有“绝知此事要躬行”，不要听别人说这个好，那个好的。
37、除了上面3项技术，未来还可能有新的技术出现
38、缺点就是，你不会的时候，觉得它很难
39、而实际上，我用这三个工具，很顺心，并没有说是优点。
40、你想到什么，你就描述一下，不用想我漏了括号呀这些，这种缩进语法，就是比如你打草稿时那样随心所欲
41、coffee只是我们编写的时候，最终到生产环境是要用grunt来合并压缩、语法检查等等并生成js的，我上面已经写了前提。
42、我之前也做过比喻，当你用手动挡的时候，你总觉得自动挡不靠谱，会不会弄错。而挡你习惯自动挡之后，你就可以省心了
43、具体的语法细节，你们自己去实践吧，又想用，又不愿意花时间学习，而把时间放在 微博、朋友圈、论坛这些娱乐信息上。而真心想去学习时又感觉到技术难懂，很艰苦。而像这些缩进语法则让你写起来产生愉悦感。
44、实际上回调嵌套这些，有async库，这个可以解决嵌套的麻烦。
缩进语法是一种潮流，它解放了人的双手，一行代码少打5个字符，让你的脑袋可以更深入想代码的质量和可靠性
其实我觉得很重要的一点，对于大多数人而已这些技术没有从根本上提升技术等级，只是加快了开发进度，但这却又还没到他们关心的事情
如果团队中使用coffeescript，sass,jade，新手大概培训多久就可以入手？
45、如果有基础7天
45、实际上要写好代码跟上面的工具是没有关系的，是跟你的修养有关。
46、这些工具是在你有了一定的基础和修养的情况下，可以让你更加愉快地完成任务。
聊技术扯技术就是从纯技术的角度看了，试着了解一下，普及一下，然后有兴趣的去自己动手，没兴趣的只当见识一个新名词，下次听起来也不陌生。
47、新手也可以发言，只要老板要求你在很短的时间完成任务，然后别人都撑不下去了，而你却战胜了心里的挣扎，不抱怨，并找到方法论。那么你就可以发言。
48、成长总是痛苦的，总是会付出艰辛的。

三. coffeescript 

coffeescript的语法借鉴于python或ruby，从这些语言上借鉴了优秀的一些思想，
比如缩进代码大括号，行尾不需要分号，
不用特别写return等等。

参考自：http://www.cnblogs.com/lavso/archive/2012/11/03/2752908.html 

四. 

关于seajs,requirejs 
http://www.zhihu.com/question/20342350 
这个回答基本能够解决基础的疑问。 

两个遵循的标准不一样而已，一个cmd,一个amd，然后，cmd在前，amd在后，amd里边有requirejs，cmd里边有seajs 
但这对我们又提出了新的要求，在写公共的东西的时候不得不提供两个标准的支持。 

(function(root, factory){
    if(typeof define === 'function' && define.amd){
        define(['jquery', 'exports'], function($, exports){
            root.Dog = factory(root, exports, $);
        });
    } else if (typeof define === "function" && define.cmd) {
        define('Dog', function(require, exports, module){
            var $ = require('jquery');
            module.export = factory(root, exports, $);
        });
    } else {
        root.Dog = factory(root, {}, (root.jQuery || root.$));
    }

}(this, function(root, Dog, $){
    $.extend(Dog, {
       init : function(){
           alert(111);
       }
    });

    return Dog;
}));

 

 

总结：除了来自于自身的阻力之外，其它的都可以承受。 
主要的客观阻力在于平台的依赖性，虽然这个因素不是主要的， 
但是相应的平台下面可能更符合当时设计的哲学。 
比如有ruby,python基础可以使用sass,coffeescript，如果是nodejs则使用stylus,Jade等。 

 

---

前端开发qq群：348090425 ，禁止闲聊，非喜勿进~！