seaJS 使用随笔
为什么使用 SeaJS
-
简单友好的模块定义规范:SeaJS 遵循CMD规范,可以像Node.js一般书写模块代码。
-
自然直观的代码组织方式:依赖的自动加载、配置的简洁清晰,可以让我们更多地享受编码的乐趣。
兼容性
Firefox 2+ ✔
Safari 3.2+ ✔
Opera 10+ ✔
IE 5.5+ ✔
下载
解压后,目录说明如下:
docs -- 使用文档
lib -- 给 Node.js 用的版本
src -- 源码
tests -- 测试集
tools -- 压缩等工具,可查看 build.xml 得到源码合并顺序
Makefile -- 可执行构建、测试等命令
使用
注:如上内容引用自:http://baike.baidu.com/
一 . seaJs 相关配置
配置语法请查考:http://yslove.net/seajs/
二. 示例学习
目录结构图:
1. 导入Seajs库
<script type="text/javascript" src="lib/sea.js"></script>
2. 路径及jquery 库配置
seajs.config({
//设置路径,方便跨目录调用。通过灵活的设置path可以在不影响base
的情况下指定到某个目录
paths: {
'javascript': 'http://10.33.23.4:8087/javascripts'
},
alias:{
'jquery': 'javascript/jquery-1.8.2.min.js',
charset:'utf-8'
},
//map Array
//该配置可对模块路径进行映射修改,可用于路径转换、在线调试等。
//原始路基等相关配置可 不用改动
//路径转换(切换)
//在javascripts 同级目录下创建文件夹js_src,并把对应会映射到达js未加密文件放置在该目录下
map: [
['http://192.168.1.100:8087/javascripts', 'http://192.168.1.100:8087/js_src']
//配置后,原本应访问的路径: http://192.168.1.100:8087/javascripts/init.js 将变成配置映射的路径:
//http://192.168.1.100:8087/js_src/init.js
]
//调试切换
//map:[
// ['.js','-debug.js']
// 配置后原本应访问的文件:http://192.168.1.100:8087/javascripts/init.js 将变为配置映射后的路径
//http://192.168.1.100:8087/javascripts/init-debug.js
// ]
});
注:
(1)默认下载的jquery库并不遵循seajs CMD规范, 索引引入jquery时会返回null/undefinde。
可以通过如下方式解决:
define(function () {
//jquery源代码
return $.noConflict();
});
3. 在页面中引入主库或模块
seajs.use('./javascripts/init', function (init) {
init.init();
});
或者:
seajs.use('./javascripts/init');
4. 自定义模块
init.js :
//seajs 通过define 语法定义模块
//工厂函数是模块的主体和重点。在只传递一个参数给define时(推荐写法),这个参数就是工厂函数,此时工厂函数的三个参数分别是:
//1.require——模块加载函数,用于记载依赖模块。
//2.exports——接口点,将数据或方法定义在其上则将其暴露给外部调用。
//3.module——模块的元数据。
//这三个参数可以根据需要选择是否需要显示指定。
//下面说一下module。module是一个对象,存储了模块的元信息,具体如下:
//1.module.id——模块的ID。
//2.module.dependencies——一个数组,存储了此模块依赖的所有模块的ID列表。
//3.module.exports——与exports指向同一个对象。
//3个参数名不能修改,也不能被重新定义。否则的话会影响错误加载的
define(function (require, exports, module) {
// 通过require 来引入符合cmd规范的第三方或自定义依赖模块
var doSome = require('/javascripts/doSome');
var $ = require('/javascripts/jquery-1.8.2.min');
doSome && doSome.show();
$ && console.log("$"+$("a").html());
//通过exports 向全局或指定作用域暴露方法(接口)或对象
exports.init = function(){
alert("特么,终于成功了....");
}
});
doSome.js
define(function (require, exports, module) {
exports.show = function () {
console.log("引用seajs ok!");
}
});
5. 页面完整代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="lib/sea.js"></script>
<script type="text/javascript">
seajs.config({
//设置路径
paths: {
'javascript': 'http://10.33.23.4:8087/javascripts'
},
alias:{
'jquery': 'javascript/jquery-1.8.2.min.js',
charset:'utf-8'
}
});
seajs.use('./javascripts/init', function (init) {
init.init();
});
</script>
</head>
<body>
<a href="javascript:">点击</a>
</body>
</html>
待续........