说这两个JS 必须提到AMD、commonjs两种不同的规范：
奇舞团：http://www.75team.com/archives/882
知乎：http://www.zhihu.com/question/20342350
个人的理解其实就是 AMD就是要加载的JS文件 都提前一数组的形式提前加载完的、commonjs是你想用到哪就直接加载的
demo页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<!-- 头部 -->
<div class="content">
<div class="nav-main">
<ul id="nav" class="nav cfx">
<li>
<a href="#" title="首页">首页</a>
</li>
<li>
<a href="#" title="联系我们">联系我们</a>
</li>
<li>
<a href="#" title="关于我们">关于我们</a>
</li>
<li>
<a href="#" title="友情链接">友情链接</a>
</li>
</ul>
</div>
</div> <!-- 主体 -->
<div class="content">
<div class="index-main"> </div>
</div> <!-- 底部 -->
<div id="help" class="help">
<ul class="help_list">
<li>
<dl>
<dt>新手上路</dt>
<dd><a href="#">购物前的准备</a><br>
<a href="#">购物流程</a><br>
<a href="#">分期指南</a><br>
<a href="#">常见问题</a></dd>
</dl>
</li>
<li>
<dl>
<dt>安全支付</dt>
<dd><a href="#">口令卡\U盾\密码器</a><br>
<a href="#">手机短信认证</a><br>
<a href="#">支付安全宝典</a><br>
<a href="#">安全专区</a></dd>
</dl>
</li>
<li>
<dl>
<dt>客户服务</dt>
<dd><a href="#">客服电话</a><br>
<a href="#">订单查询</a><br>
<a href="#">加盟须知</a><br></dd>
</dl>
</li>
<li>
<dl>
<dt>关于我们</dt>
<dd><a href="#">商城简介</a><br>
<a href="#">商城声明</a><br>
<a href="#">合作伙伴</a><br>
<a href="#">联系我们</a></dd>
</dl>
</li>
</ul>
</div>
</body>
<script src="js/sea.js" id="main"></script>
<script src="js/main.js"></script>
</html>
main.js：
//Sea.js 进行配置
seajs.config({ // 别名配置
alias: {
'base-css' : './css/base.css',
'jquery' : 'jquery-1.8.3.min.js'
}, // 路径配置
paths: {
'css' : '../css/',
'logo': './logo/'
}, // 变量配置
vars: {
'com': 'common'
}, // 映射配置
map: [
['index.js', 'index-debug.js']
], // 预加载项 预先加载jquery.js
preload:[
'jquery'
], // 调试模式
debug: true, // Sea.js 的基础路径
// base: 'http://example.com/path/to/base/', // 文件编码
charset: 'utf-8'
}); // 启动加载模块
seajs.use(['head.js','footer.js','index.js'],function(){ alert('加载完喽~'); // 加载完模块，执行回调 });
推荐： 予舍 ： http://yslove.net/seajs/ 写的API 个人感觉比官方那个更好懂一些。。。。
展示一个head.js:
define(function(require, exports, module) {
require('../css/base.css'); //获取指定模块
require('../css/head.css'); //获取指定模块
require('fixed-head.js'); //获取指定模块
console.log(seajs.cache); //加载的所有信息
console.log(seajs.data); //所有配置信息;
var paths = seajs.resolve('../css/global.css'); //解析路径;
console.log( paths );
require.async('logo/logo.js',function(logo){ //异步加载
logo.show(); //异步加载回调
});
var hover = require('hover-show.js');
var $nav = $('#nav'),
$navAs = $nav.find('a');
$('#nav').fixedHead(); //jQuery1.7版本以上的就已经把jQuery模块化;
$navAs.mouseover(function(){
var txt = $(this).text();
hover.show(txt);
});
});
说明：
//a.js
define(function(require, exports, module) {
//require 获取指定模块的接口;
//exports 模块内部对外提供接口;
//module 当前模块的一些属性和方法，比如 exxports其实就是module地下的一个接口; // 当前模块对外的一个 show方法;
module.exports = {
'show' : function( txt ){
console.log( txt );
}
} }); //b.js
define(function(require, exports, module) { require('../css/base.css'); //还可以加载css样式(Sea.js < 2.3.0版本之前是可以加载css文件的，新版本中此功能移除)所以就得在引入插件;
var hover = require('a.js'); //获取指定模块的接口;
hover.show(txt);//调用a.js里的show方法; require.async('logo/logo.js',function(logo){ //异步加载;
logo.show(); //异步加载回调;
}); console.log(seajs.cache); //加载的所有信息;
console.log(seajs.data); //所有配置信息;
var paths = seajs.resolve('../css/global.css'); //解析路径;
console.log( paths ); //主要的部分的功能也就这样更细的API用到在看官方的文档，不过特别注意的其实是路径问题;
//define('id', [], function(require, exports, module) {}); id是这个模块的名，[]是依赖的模块,不过一般这两个都是配合Gruntjs/gulp使用; });