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

随着前端技术的蓬勃发展， 各种新技术随着生产力的需要不断的涌入我们的视野， 那今天探讨的话题是这些新时代的前端兵器谱： 

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

1. 先说emmet，这玩艺是俄罗斯人搞出来的，原本叫zencoding后来改成emmet了，  

这个功能简单粗暴观看里边的watch demo基本都能了解一二。 

值得一提的是有两个编辑器对这个技术的支持：  sublime text 是所有编辑器里边支持emmet比较好的的唯一一款。  webstorm是所有编辑器里边唯一内置emmet的一款，并且将emmet的精神往前推动的一款。   phpstorm，idea包括所有webstorm的功能。只是phpstorm是针对phper的，idea是针对javaer，webstorm针对前端er。   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，消除文件级别的重复  都可脱离平台单独应用，脱离平台后，功能会受一些限制。  参考自： 

二.  less跟sass的比较： 

他们都是CSS相关的技术，业界的统称：CSS 预处理器，css预处理技术等等的叫法。 

这个处理器使原本静态的css具备基础编程语言的处理能力，比如使用变量，简单的代码逻辑，函数等等编程语言中的基本技巧。  sass和less使用的是标准的css语法。

sass相比less功能更强大，   大漠老师是sass的高人或国内这方面的领军人物，  除了之外，还运营另外一个站  堪称是sasser的福音。  less可以引入一个js文件就可以干起来了，sass需要依赖ruby环境，  那么stylus就需要依赖nodejs  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等等。

参考自：  四. 

关于seajs,requirejs 

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

 

 

总结：除了来自于自身的阻力之外，其它的都可以承受。 

主要的客观阻力在于平台的依赖性，虽然这个因素不是主要的，  但是相应的平台下面可能更符合当时设计的哲学。  比如有ruby,python基础可以使用sass,coffeescript，如果是nodejs则使用stylus,Jade等。 

本文转自豪情博客园博客，原文链接：http://www.cnblogs.com/jikey/p/4136908.html，如需转载请自行联系原作者