JavaScript模块加载框架sea.js 学习一

简单总结sea.js 学习

文件目录结构

  /sea/sea.js      下载地址  http://seajs.org/docs/#downloads

  /sea/jquery-sea.js   下载地址 http://jquery.com/download/

  /sea/sea_config.js

  /sea/home.jsdata.js

  /sea/data.js

1.html页面代码文件

<style>
 .ch{height:200px;width:200px;background:#ccc;}
</style>
<div class="cl"></div>

<!-- 引入sea.js文件 -->
<script src="/sea/sea.js"></script>

<!-- 引入sea_config.js配置文件 -->
<script src="/sea/sea_config.js"></script>   

<script type="text/javascript">
 seajs.use(['jquery','home'],function(a,b){    //
	alert(b.foo);  //调用home中的foo属性
    b.init();      //调用home中的init接口
	b.all();       //调用home中的all接口
 })
 </script>

2.sea_config.js配置文件

seajs.config({

  // 别名配置
  alias: {
    'jquery': '/sea/jquery-sea',
    'home': '/sea/home',
	'data': '/sea/data'
  },

  // 路径配置
  //paths: {
  //  'gallery': 'https://a.alipayobjects.com/gallery'
  //},

  // 变量配置
  //vars: {
  //  'locale': 'zh-cn'
  //},

  // 映射配置
  //map: [
  //  ['http://example.com/js/app/', 'http://localhost/js/app/']
  //],

  // 预加载项
 //preload: ['jquery','home'],

  // 调试模式
  debug: true,

  // Sea.js 的基础路径
  //base: 'http://example.com/path/to/base/',

  // 文件编码
  charset: 'utf-8'
});

3.home.js模块文件

define(function(require, exports, module){
 var data = require('data');  // 加载data模块 data.js
 function wo(){       //内部函数，init中调用
   alert("load $");
 };  
 alert(data.blog);   //直接执行函数
 module.exports = {             //当前模块对外提供的接口
	    foo:'hello',  //属性  
        init : function(){      //接口init
			wo();    //执行内部函数
        	$(".cl").addClass("ch");
        },
	    all : function(){       //接口all
		  alert(data.author);
		}	    
    };
console.log(require.resolve('jquery'));  //require.resolve返回别名文件 解析后的绝对路径

});

4.data.js模块文件

define({
    author: 'ZhangYanpo',
    blog: 'http://www.ktuo.cn'
});