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/ 

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

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

三. 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 ，禁止闲聊，非喜勿进~！