这两天在使用Less来写了一个小程序。后来又把SeaJS加入，使用SeaJS来模块化，在这个过程中碰到过不少的问题。特别是在使用SeaJS时。
1、从http://seajs.org/下载最新的SeaJS1.2。解压到我们自己的项目目录下，下面是我使用的目录结构，并且单独给它一个目录，如：seajs目录。
2、将之前我们使用的Less先使用SeaJS来封装一下，我就吃亏在这里，没有对Less进行封装，导致就是无法正常的使用Less。
1 (function(factory) { 2 3 if (typeof define === 'function') { 4 define('less', [], factory); 5 } 6 else { 7 factory(); 8 } 9 })( 10 function() { 11 // Less的源代码 12 return less; 13 });
将修改后的less.js放到seajs目录下。如果不把less.js与seajs放在一个目录下，那么就要修改seajs/plugin-less.js才能正常的加载less文件。比如说我们要将less.js与我们写的js都放在resources/js/目录下，那么plugin-less.js文件就经如下修改。
为了方便推荐还是跟seajs放在一个目录下。
3、封装下jquery。
define(function(require, exports) { // jquery原始代码 return $.noConflict(); });
4、引入lesss样式表。以下是节选至combox.js
define(function(require, exports) { require('../css/default.less'); var $ = require('./jquery'); // 省略N行代码 });
js文件可以不写后缀，而样式文件由于是.less，要加上后缀名。
由于.less文件存放在/resources/css/default.less目录下，与我们的combox.js文件不在一个目录下，因此引入的时候要加上级目录结构。即：../css/。引入jquery时最好使用./来引用，用来标识jquery与combox在一个目录下，对于sea.js与我们的代码不在一个目录结构下很有必要，否则seajs会认为jquery与seajs在一个目录，从而导致找不到jquery.js文件。
5、书写我们自己的主入口init.js
1 define(function(require, exports) { 2 var $ = require('./jquery'); 3 4 require('./combox'); 5 6 $('#search').combox({ 7 data : ['曲阜', '淄博'], 8 height : 170 9 }); 10 11 $('#more').click(function() { alert($('#search').val()); }); 12 13 });
这个文件与combox.js文件没有太大的差别。
6、在html中引入seajs，并且指定入口。
直接在script标签中指定入口。
<script type="text/javascript" src="resources/seajs/sea.js" data-main="./resources/js/init"></script>
直接在script标签中指定入口文件的方式适合不需要预加载文件的情况下。如果需要预加载插件就需要在seajs.config中指定预加载的插件，在我们的这个程序中正好也需要预载入plugin-less插件。
<script type="text/javascript" src="resources/seajs/sea.js"></script> <script type="text/javascript"> seajs.config({ preload: ['plugin-less'] }).use('./resources/js/init'); </script>
PS：在从seajs官方下载回来的zip包中的示例文件是写在js文件中的，但在1.2中是不可以的。
以下是我写的一段小代码的截图，有兴趣的可以看下。如果要运行请基于站点来运行，并且使用firefox，我没做浏览器兼容处理。
