您的位置：首页 > Web前端 > JavaScript

seajs 学习笔记

2015-09-23 19:14 691 查看

seajs的作者是玉伯，具体好处优点等详见官方网址

介绍

1 模块定义define

define(function(require,exports,module){
//require 引入需要的模块如jquery等
//var $ = require('./jquery');

//exports可以把方法或属性暴露给外部
exports.name = 'hi';

exports.hi = function(){
alert('hello');
}

//module提供了模块信息
});

　　

2 使用定义好的模块seajs.use

<!doctype html>
<html>
<head>
<title>SeaJs Test</title>
<meta charset="UTF-8">

<script type="text/javascript" src="seajs/sea.js"></script>

<script type="text/javascript">
//第一个参数是模块标识，即要使用模块的路径，这里是t1.js
//第二个参数是一个回调函数
seajs.use('./js/t1',function(t){
t.hi();
});
</script>
</head>
<body>

</body>
</html>

3 加载依赖项require

//名称必须是require，可以理解为一个关键词一样，接收一个参数
var $ = require('./jquery');

4 向外部提供接口exports

define(function(require,exports,module){
//exports可以把方法或属性暴露给外部
exports.name = 'hi';

exports.hi = function(){
alert('hello');
}
});

5 当前模块信息module

　　这里只介绍几个基本的，具体可以参考https://github.com/seajs/seajs/issues/242

　　1 module.id 模块标识

　　2 module.uri 根据模块系统的路径解析规则得到的模块绝对路径

　　3 module.dependencies 表示当前模块的依赖列表，是一个数组

　　4 module.status 当前模块的状态，是一个数值

示例

代码结构

代码文件

index.html

<!doctype html>
<html>
<head>
<title>SeaJs Test</title>
<meta charset="UTF-8">

<script type="text/javascript" src="seajs/sea.js"></script>

<script type="text/javascript">
seajs.use('./js/init',function(init){
init.init();
});

seajs.config({
charset: 'utf-8'
});
</script>
</head>
<body>
<div class="main">
<h1>信息</h1>
<ul>
<li id="s1"></li>
<li id="s2"></li>
<li id="s3"></li>
</ul>
</div>
</body>
</html>

init.js

define(function(require,exports,module){
var man = require('./man');
var css = require('../css/main.css');

var $ = function(id){
return document.getElementById(id);
}

exports.init = function(){
var s1 = $('s1');
var s2 = $('s2');
var s3 = $('s3');

var name = man.getName();
var age = man.getAge();
var msg = man.say();

s1.innerHTML = name;
s2.innerHTML = age;
s3.innerHTML = msg;
}
});

man.js

define(function(require,exports,module){
var msg = require('./msg');

var _name = 'tom';
var _age = '20';

exports.myName = _name;

exports.say = function(){
return msg.getMsg();
}

exports.getName = function(){
return _name;
}

exports.getAge = function(){
return _age;
}
});

msg.js

define(function(require,exports,module){
var _msg = 'not set msg!';

exports.setMsg = function(msg){
_msg = msg;
}

exports.getMsg =function(){
return _msg;
}
});

main.css

*{
font-size: 18px;
font-family: "Tahoma,Arial,Helvetica,sans-serif";
}
.main{
width: 500px;
height: 300px;
margin: 50px auto;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航