用 SeaJS 玩转 CoffeeScript 跟 LESS-JavaSript-爱易网页

用 SeaJS 玩转 CoffeeScript 跟 LESS

日期：2014-05-16　浏览次数：20399 次

用 SeaJS 玩转 CoffeeScript 和 LESS
CoffeeScript 是一门可以编译成 JavaScript 的语言，语法轻巧优雅，社区非常活跃，是目前玩家最多、最有可能将 JavaScript 变成编译目标语言的新语言。可参考：JavaScript 的死与生

LESS 是一门可以编译成 CSS 的动态样式语言。CSS 设计之初是给设计师用的，是一门语法非常简洁优雅的声明式语言。但随着应用场景的复杂化，越来越多的 CSS 工作已经交由专业程序员来负责。在这种大背景下，LESS 等动态样式语言应运而生，为 CSS 的编写提供了变量、混合、计算和函数等功能。

目前 CoffeeScript 和 LESS 在 NodeJS 端有良好的开发体验，但在浏览器端的开发方式并不是很舒适。通过 SeaJS 的插件，可以让你在浏览器端的开发体验得到很大提升。

例子：CoffeeScript and LESS in SeaJS

中文文档：CoffeeScript 插件, LESS 插件

结合 SeaJS 的 map 功能，还可快速实现跨域调试，可参考文本插件的说明。

欢迎使用，欢迎交流反馈。

1 楼 hizhengfu 2011-10-28

借个地方留言了。代码中

    // When src is "http://test.com/libs/seajs/1.0.0/sea.js", redirect base
    // to "http://test.com/libs/"
    var match = base.match(/^(.+\/)seajs\/[\d\.]+\/$/);

中match改为var match = base.match(/^(.+\/)seajs\/$/);是不是更好。这样以后如果
js文件夹-seajs
-jquery
-json
直接require('jquery/1.6.4/jquery-debug')这样就可以引入脚本了。而且目前模块化的代码中 define('#jquery/1.6.4/jquery-debug', [], factory);这样的也就不用修改了，这样改应该没有其它副总用吧。

2 楼 lifesinger 2011-10-28

这个是用来重新定位 base 的，和 require 解析 id 的逻辑关系不是很大

modules 项目中，在 #jquery/1.6.4/jquery 前面的 #, 是表示该 id 不需要parse alias

一般，我们需要会在项目中配置：

seajs.config({
alias: {
jquery: 'jquery/1.6.4/jquery'
}
]);

如果在 jquery.js 中写成 define('jquery/1.6.4/jquery', ...)

其实上会被解析成：jquery/1.6.4/jquery/1.6.4/jquery
这样就不对了

因此给 id 添加了 # 约定，凡是以 # 开头的 id，表示不需要解析 alias
这和添加后缀的规则是一致的，require('./a') 默认情况下，会自动添加 .js 后缀，等同 require('./a.js')
如果写上 require('./a#') 的话，就不会添加默认后缀

＃在 seajs 里表示“停止”，表示不需要进行多余操作，理解了就很容易把握了

^o^

3 楼 hizhengfu 2011-10-28

lifesinger 写道

这个是用来重新定位 base 的，和 require 解析 id 的逻辑关系不是很大。。。。。。

谢谢玉伯回复。看了文档，不清楚的地方也看了代码，上述意思是明白的。因为实际部署的时候文件夹一般都是在seajs外部的，估计更可能的是
   libs┬jquery/1.6.4/
       ├json/
       ├seajs/
这样的方式存放模块。如果没有引入seajs版本号的话那么base就是http://test.com/libs/seajs/了，这时候要require其它js的话地址写起来还比较麻烦。否则就要放在seajs文件夹下面。如果写版本号的话，如果引入seajs比较分散的话，修改也比较麻烦，当然这是不引入自动工具的前提下。如果去掉正则数字验证部分，那么base地址就是http://test.com/libs/这时候require就不用考虑路径问题了直接就是require('jquery/1.6.4/jquery');此时从你修改好的模块中下载下来的文件就可以直接使用了。所以建议这么修改。

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

用 SeaJS 玩转 CoffeeScript 跟 LESS

相关资料更多>

推荐阅读更多>