SeaJS+Less+jQuery写代码小记

这两天在使用Less来写了一个小程序。后来又把SeaJS加入，使用SeaJS来模块化，在这个过程中碰到过不少的问题。特别是在使用SeaJS时。

1、从http://seajs.org/下载最新的SeaJS1.2。解压到我们自己的项目目录下，下面是我使用的目录结构，并且单独给它一个目录，如：seajs目录。

2、将之前我们使用的Less先使用SeaJS来封装一下，我就吃亏在这里，没有对Less进行封装，导致就是无法正常的使用Less。

(function(factory) {

  if (typeof define === 'function') {
    define('less', [], factory);
  }
  else {
    factory();
  }
})(
function() {
// Less的源代码
return less;
});

将修改后的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

define(function(require, exports) {
    var $ = require('./jquery');
    
    require('./combox');
    
    $('#search').combox({
        data : ['曲阜', '淄博'],
        height : 170
    });
    
    $('#more').click(function() { alert($('#search').val()); });
    
});

这个文件与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，我没做浏览器兼容处理。

 

源代码下载地址：http://115.com/file/an8s90rr#GMailUI.rar