头顶 美工、切图仔 头衔的我 出去面试时面试官必问的一题： 用过 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 });
时间： 2024-10-10 21:51:11