seajs笔记
16 Dec 2014简单记录下自己学习seajs的笔记，方便以后能快速使用。
PS：seajs使用要在服务器环境下
####简单快速开始
1、下载seajs，了解各个目录里文件，点击这里下载
NOTE：
- dist – sea.js 等压缩好的文件，直接可用
- docs – 使用文档
- lib – 给 Node.js 用的版本
- src – 源码
- tests – 测试集
- Makefile – 可执行构建、测试等命令
2、seajs简单使用
// seajs 的简单配置
seajs.config({
base: "../sea-modules/",
alias: {
"jquery": "jquery/jquery/1.10.1/jquery.js"
}
})
// 加载入口模块
seajs.use("../static/hello/src/main")
加载一段模块代码示例
//main.js
// 所有模块都通过 define 来定义
define(function(require, exports, module) {
// 通过 require 引入依赖
var $ = require('jquery');
var Spinning = require('./spinning');
// 通过 exports 对外提供接口
exports.doSomething = ...
// 或者通过 module.exports 提供整个接口
module.exports = ...
});
更多详细的使用参考官网
####下面整理下自己测试时的问题和代码
1、如何使用模块和加载其他模块依赖方法
正常开发一个模块代码，如果我们想使用该模块直接seajs.use就可以了，代码如下
//模块person.js
define(function(require, exports, module){
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype.say = function(){
console.log('hello my name is '+this.name+', my age is '+this.age);
}
//向外暴露person接口
exports.person = Person;
});
//使用
seajs.use('./js/person.js',function(exports){
var Person = exports.person;
var p1 = new Person('blue',23);
p1.say();
});
会看到在控制台中输出 hello my name is blue,my age is 23 ，如果一个模块依赖另一个模块时，可分为两种情况，第一种为普通的js代码如jquery或另外一个人写的普通js代码，第二种为另外的seajs的模块依赖：
//模块model1.js
define(function(require, exports, module){
//引入外部的js,第一种
require('jquery');
//引入seajs模块 person.js，第二种
var Person = require('person').person;
$('#btn').click(function() {
var p = new Person('Tom',25);
p.say();
});
//继续向外暴露接口
exports.main = main;
});
如果想在grunt中方便构建，实现前端自动化等可以在前面加入模块依赖的标志数组，注意模块中有几个require，数组要对应几个，如下：
//模块modle1.js,依赖jquery和person.js
define(['jquery.js','person.js'],function(require, exports, module){
//由于person中暴露的接口不能直接使用所以需要重新require
var Person = require('person').person;
$('#btn').click(function() {
var p = new Person('Tom',25);
p.say();
});
exports.main = main;
})
这样控制台就输出Tom 25了。
2、示例代码 代码示例如下：
######require.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>require</title>
</head>
<script src="sea/sea.js"></script>
<body>
<button id="btn">click</button>
</body>
<script>
seajs.config({
alias: {
'jquery': 'sea-plugins/jquery.min',
'person': '../js/person.js'
}
});
seajs.use('./js/module1.js');
</script>
</html>
######module1.js
define(['jquery','person'],function(require,exports,module){
var Person = require('person').person;
$('#btn').click(function() {
var p = new Person('Tom',25);
p.say();
});
});
######目录结构
.
├── exports.html
├── js
│ ├── module1.js
│ └── person.js
├── require.html
└── sea
├── sea.js
└── sea-plugins
├── jquery.min.js
└── underscore.min.js
3 directories, 7 files
3.加载一些模板文件配合underscore生成前端页面，要注意模板使用要配合seajs的插件sea-text.js,下载请点击这里,另外,需要注意只能在页面中的script 标签中加载，模板文件如果要使用[],参数表明依赖方便grunt的话要单独写路径,代码如下：
######module1.js
//model1.js
define(function(require,exports,module){
require('jquery');
require('underscore');
var Person = require('person').person;
var tpl = require('../template/tmp.tpl');
var json = {
title : 'Sea',
content: 'Hello, this is a sea + underscore file'
};
$('#btn').click(function() {
var p = new Person('Tom',25);
p.say();
$('#box').html(_.template(tpl)(json));
});
});
//或者添加依赖标志
define(['jquery','person','underscore','../template/tmp.tpl'],function(require,exports,module){
var Person = require('person').person;
var tpl = require('../template/tmp.tpl');
var json = {
title : 'Sea',
content: 'Hello, this is a sea + underscore file'
};
$('#btn').click(function() {
var p = new Person('Tom',25);
p.say();
$('#box').html(_.template(tpl)(json));
});
});
######require.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>require</title>
</head>
<script src="sea/sea.js"></script>
<script src="sea/sea-plugins/seajs-text.js"></script>
<body>
<button id="btn">click</button>
<div id="box"></div>
</body>
<script>
seajs.config({
// 配置路径
alias: {
'jquery': 'sea-plugins/jquery.min',
'person': '../js/person.js',
'underscore':'sea-plugins/underscore.min'
},
// 调试,防止缓存
map:[
['.js','.js?'+Date.now()]
]
});
seajs.use('./js/module1.js');
</script>
</html>
######tmp.tpl
<h1><%= title %></h1>
<p><%= content %></p>
######全部目录结构
.
├── exports.html
├── js
│ ├── module1.js
│ └── person.js
├── require.html
├── sea
│ ├── sea.js
│ └── sea-plugins
│ ├── jquery.min.js
│ ├── seajs-text.js
│ └── underscore.min.js
└── template
└── tmp.tpl
4 directories, 9 files
4、seajs-combo减少请求插件，一般配合seajs-flush插件一起使用，使用方法查看这里，seaj-flush使用点这里，目前本人测试seajs-combo，起作用了，但会导致页面出现语法错误，原因不详。