sea.js 个人入门

 玉伯 : http://seajs.org/docs/

说这两个JS 必须提到AMD、commonjs两种不同的规范：

奇舞团：http://www.75team.com/archives/882 

知乎：http://www.zhihu.com/question/20342350 

个人的理解其实就是 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>
View Code

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 });
View Code

推荐： 予舍 ： 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 });
View Code

说明：

 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 });

 

posted @ 2015-12-11 17:52  uustoboy  阅读(364)  评论(0)  编辑  收藏  举报