标签：
头顶 美工、切图仔 头衔的我 出去面试时面试官必问的一题： 用过 seajs、requirejs 么？
答案当然是否定的，然后面试官就是鲁迅先生的前半句诗"横眉冷对千夫指 "看我。
所以就看看看了看API
玉伯 : http://weibo.com/lifesinger?noscale_head=1#_0
说这两个JS 必须提到AMD、commonjs两种不同的规范：
奇舞团：http://www.75team.com/archives/882
知乎：http://www.zhihu.com/question/20342350 (ps:知乎底下的评论总让我有种 华山论剑 ，小屌丝围观 赶脚，套用现在微博上的话就是 “城里人真会玩”；)
我个人的理解其实就是 AMD就是要加载的JS文件 都提前一数组的形式提前加载完的、commonjs是你想用到哪就直接加载的
demo页面：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 </head> 7 <body> 8 <!-- 头部 --> 9 <div class="content"> 10 <div class="nav-main"> 11 <ul id="nav" class="nav cfx"> 12 <li> 13 <a href="#" title="首页">首页</a> 14 </li> 15 <li> 16 <a href="#" title="联系我们">联系我们</a> 17 </li> 18 <li> 19 <a href="#" title="关于我们">关于我们</a> 20 </li> 21 <li> 22 <a href="#" title="友情链接">友情链接</a> 23 </li> 24 </ul> 25 </div> 26 </div> 27 28 <!-- 主体 --> 29 <div class="content"> 30 <div class="index-main"> 31 32 </div> 33 </div> 34 35 <!-- 底部 --> 36 <div id="help" class="help"> 37 <ul class="help_list"> 38 <li> 39 <dl> 40 <dt>新手上路</dt> 41 <dd><a href="#">购物前的准备</a><br> 42 <a href="#">购物流程</a><br> 43 <a href="#">分期指南</a><br> 44 <a href="#">常见问题</a></dd> 45 </dl> 46 </li> 47 <li> 48 <dl> 49 <dt>安全支付</dt> 50 <dd><a href="#">口令卡\U盾\密码器</a><br> 51 <a href="#">手机短信认证</a><br> 52 <a href="#">支付安全宝典</a><br> 53 <a href="#">安全专区</a></dd> 54 </dl> 55 </li> 56 <li> 57 <dl> 58 <dt>客户服务</dt> 59 <dd><a href="#">客服电话</a><br> 60 <a href="#">订单查询</a><br> 61 <a href="#">加盟须知</a><br></dd> 62 </dl> 63 </li> 64 <li> 65 <dl> 66 <dt>关于我们</dt> 67 <dd><a href="#">商城简介</a><br> 68 <a href="#">商城声明</a><br> 69 <a href="#">合作伙伴</a><br> 70 <a href="#">联系我们</a></dd> 71 </dl> 72 </li> 73 </ul> 74 </div> 75 </body> 76 <script src="js/sea.js" id="main"></script> 77 <script src="js/main.js"></script> 78 </html>
main.js：
1 //Sea.js 进行配置 2 seajs.config({ 3 4 // 别名配置 5 alias: { 6 ‘base-css‘ : ‘./css/base.css‘, 7 ‘jquery‘ : ‘jquery-1.8.3.min.js‘ 8 }, 9 10 // 路径配置 11 paths: { 12 ‘css‘ : ‘../css/‘, 13 ‘logo‘: ‘./logo/‘ 14 }, 15 16 // 变量配置 17 vars: { 18 ‘com‘: ‘common‘ 19 }, 20 21 // 映射配置 22 map: [ 23 [‘index.js‘, ‘index-debug.js‘] 24 ], 25 26 // 预加载项 预先加载jquery.js 27 preload:[ 28 ‘jquery‘ 29 ], 30 31 // 调试模式 32 debug: true, 33 34 // Sea.js 的基础路径 35 // base: ‘http://example.com/path/to/base/‘, 36 37 // 文件编码 38 charset: ‘utf-8‘ 39 }); 40 41 42 // 启动加载模块 43 seajs.use([‘head.js‘,‘footer.js‘,‘index.js‘],function(){ 44 45 alert(‘加载完喽~‘); // 加载完模块，执行回调 46 47 });
推荐： 予舍 ： http://yslove.net/seajs/ 写的API 个人感觉比官方那个更好懂一些。。。。
展示一个head.js:
1 define(function(require, exports, module) { 2 3 require(‘../css/base.css‘); //获取指定模块 4 require(‘../css/head.css‘); //获取指定模块 5 require(‘fixed-head.js‘); //获取指定模块 6 console.log(seajs.cache); //加载的所有信息 7 console.log(seajs.data); //所有配置信息; 8 var paths = seajs.resolve(‘../css/global.css‘); //解析路径; 9 console.log( paths ); 10 11 require.async(‘logo/logo.js‘,function(logo){ //异步加载 12 logo.show(); //异步加载回调 13 }); 14 var hover = require(‘hover-show.js‘); 15 16 var $nav = $(‘#nav‘), 17 $navAs = $nav.find(‘a‘); 18 19 $(‘#nav‘).fixedHead(); //jQuery1.7版本以上的就已经把jQuery模块化; 20 21 $navAs.mouseover(function(){ 22 23 var txt = $(this).text(); 24 hover.show(txt); 25 26 }); 27 28 });
说明：
1 //a.js 2 define(function(require, exports, module) { 3 //require 获取指定模块的接口; 4 //exports 模块内部对外提供接口; 5 //module 当前模块的一些属性和方法，比如 exxports其实就是module地下的一个接口; 6 7 // 当前模块对外的一个 show方法; 8 module.exports = { 9 ‘show‘ : function( txt ){ 10 console.log( txt ); 11 } 12 } 13 14 }); 15 16 //b.js 17 define(function(require, exports, module) { 18 19 require(‘../css/base.css‘); //还可以加载css样式(Sea.js < 2.3.0版本之前是可以加载css文件的，新版本中此功能移除)所以就得在引入插件; 20 var hover = require(‘a.js‘); //获取指定模块的接口; 21 hover.show(txt);//调用a.js里的show方法; 22 23 require.async(‘logo/logo.js‘,function(logo){ //异步加载; 24 logo.show(); //异步加载回调; 25 }); 26 27 console.log(seajs.cache); //加载的所有信息; 28 console.log(seajs.data); //所有配置信息; 29 var paths = seajs.resolve(‘../css/global.css‘); //解析路径; 30 console.log( paths ); 31 32 //主要的部分的功能也就这样更细的API用到在看官方的文档，不过特别注意的其实是路径问题; 33 //define(‘id‘, [], function(require, exports, module) {}); id是这个模块的名，[]是依赖的模块,不过一般这两个都是配合Gruntjs/gulp使用; 34 35 });
标签：
原文地址：http://www.cnblogs.com/auok/p/4551937.html
