我们都知道seajs是一个模块加载器,Sea.js 是遵循 CMD 规范的,Sea.js 追求简单、自然的代码书写和组织方式。详细可以看官网:http://seajs.org/docs/。
那么如何去使用seajs呢?下面是本人学习seajs时的简单记录。
例子简单目录如下:
myapp/
|– js/
   |– lib          //存放 seajs、jquery 等文件
       |–seajs
       |–jquery
   |– mod          //存放各个页面的 js模块文件
       |–slide.js  //滑动插件
       |–list.js
       |–content.js
   |– common      //共用js入口文件
|– index.html 
|– list.html  
|– content.html     
 
一、引入seajs
1、首先去官网下载seajs:http://seajs.org/docs/#downloads

2、在页面(比如index.html)页尾,通过 script 引入 sea.js(<script src=”js/lib/sea.js”></script>

二、在页面中配置和加载模块
在上述index.html页面引入好seajs后,我们需要在引入的script后面,简单配置有一段代码,即可使用了。如下
seajs.config({
    base: "./js/",
    alias: {
        "jquery": "lib/jquery-2.2.0.min"
    },
    vars:{
        paths:'./js/'  //路径配置(用变量表示路径)
    }
})
seajs.use("{paths}common") //共用js入口文件
1、关于配置
 具体可以查看:https://github.com/seajs/seajs/issues/262
2、关于路径的问题
 可以查看如下内容:
 模块的加载启动:https://github.com/seajs/seajs/issues/260
 关于sea.js里各种路径的解析:https://github.com/seajs/seajs/issues/689
三、模块的定义
// 所有模块都通过 define 来定义
define(function(require, exports, module) {
	// 通过 require 引入依赖
	var $ = require('jquery');
	var slide = require('./slide');

	// 对外提供 foo 属性
	exports.foo = 'bar';

	// 对外提供 doSomething 方法
	exports.doSomething = function() {};

	// 或者通过 module.exports 提供整个接口
	module.exports = ...
});
具体模块定义请查看:https://github.com/seajs/seajs/issues/242

1、插件的使用(本例子中,slide为插件)

define(function(require, exports, module) {
    // slide插件代码
    /**
     * @authors laoyuan
     * @version 1.0
     */
    ;(function($){
        $.fn.slide=function(options){
    })(jQuery)
});
2、jQuery的使用。
   在开始学习之中,发现引入jQuery总是 $ is not defined,
   后来用如下代码封装一下就可以了。(本例子jquery是2.2.0版本)。
define(function(){
    //jquery源代码
    return $.noConflict();
});
四、模块的加载启动
    1、页面中加载模块和启动
    seajs.use Function:它是用来在页面中加载模块的。我们通过 use 方法,可以在页面中加载任意模块:
    如我们第一步写的seajs.use(“{paths}common”) ,是不带回调函数的加载。
    有回调函数和加载多个模块:
// 加载模块 list,并在加载完成时,执行指定回调
seajs.use('mod/list', function(list) {
    list.init();
});

// 一次和加载多个模块:并发加载模块 a 和模块 b,并在都加载完成时,执行指定回调
seajs.use(['./a', './b'], function(a, b) {
	a.init();
	b.init();
}); 

   具体详情可移步:https://github.com/seajs/seajs/issues/260(模块的加载启动)

   2、模块内部的加载
   可以使用require require(id)和require.async require.async(id, callback?)。
   require 是一个方法,接受 模块标识 作为唯一参数,用来获取其他模块提供的接口。
   require.async 方法用来在模块内部异步加载模块,并在加载完成后执行指定回调。callback 参数可选。
   简单的加载如下(以本例的common为例子):

define(function(require, exports) {
	var $ = require('jquery'); //加载jquery
	require("mod/slide");     //加载slide
});
define(function(require, exports) {
	// 异步加载一个模块,在加载完成时,执行回调
	require.async('./b', function(b) {
		b.doSomething();
	});
});
   关于更多require加载的详情请查看
   https://github.com/seajs/seajs/issues/242

五、本例子代码

index.html:

<script type="text/javascript" src="js/lib/sea.js"></script>
<script type="text/javascript">
    seajs.config({
        base: "./js/",
        alias: {
            "jquery": "lib/jquery-2.2.0.min"
        },
        vars:{
            paths:'./js/'  //路径配置(用变量表示路径)
        }
    })
    seajs.use("{paths}common")
</script>
common.js:
//所有模块都通过 define 来定义
define(function(require, exports, module) {
    var $ = require('jquery');
    $(function(){
		//返回顶部代码
		...
	    //导航条
	    ...
	    //整站通用代码
	    ...
    })   
    require("mod/slide");
    $(function(){
        $(".slide-box").slide({
            "affect":'translate3d',
            "space":3500,
            "addStag":false
        });
    })  
});
list.html
<script type="text/javascript" src="js/lib/sea.js"></script>
<script type="text/javascript">
    seajs.config({
        base: "./js/",
        alias: {
            "jquery": "lib/jquery-2.2.0.min"
        },
        vars:{
            paths:'./js/'  //路径配置(用变量表示路径)
        }
    })
    seajs.use(["{paths}common","{paths}/mod/list"]);
</script>
同理content.html跟list.html类似。以上就是自己学习seajs的简单记录,可以快速上手seajs。