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 ,禁止闲聊,非喜勿进~!

 

posted @ 2014-12-02 10:58 豪情 阅读(...) 评论(...) 编辑 收藏