seajs学习笔记
seajs配置
seajs.config({ //别名配置 alias:{
'es5-safe':'gallery/es5-safe/0.9.3/es5-safe', 'jquery':'jquery/jquery/1.10.1/jquery', 'json':'gallery/json/1.0.2/json', }, //配置路径 path:{
'gallery':'https://a.alipayobjects.com/gallery'
},
//变量配置
vars:{
'locale':'zh-cn'
},
//映射配置
map:[
['http://example.com/js/app','http://localhost/js/app/']
],
//预加载
preload:[
Function.prototype.bind?'':'es5-safe',
this.JSON?'','json'
],
//调试模式
debug:true,
//seajs的基础路径
base:'http:example.com/path/to/base',
//文件编码
charset:'utf-8'
})
seajs使用
1.当模块标识很长时，可以使用alias来简化。
seajs.config({
alias:{
'jquery':'jquery/jquery/1.10.1/jquery',
'app/biz':'http://path/to/app/biz.js',
}
})
define(function(require,exports,module){
var $=require('jquery');
//加载的是http://path/to/base/jquery/jquery/1.10.1/jquery.js
var biz=require('app/biz');
//加载的是http://path/to/app/biz.js
})
2.当目录比较深，或需要跨目录调用模块时，可以使用paths来简化。
seajs.config({
path:{
'gallery':'https://a.alipayobjects.com/gallery',
'app':'path/to/app',
}
})
define(function(require,exports,module){
var underscore=require('gallery/underscore');
//加载的是https://a.alipayobjects.com/gallery/underscore.js
var biz=require('app/biz');
//加载的是path/to/app/biz.js
})
3.有些场景下，模块路径在运行时才能确定，这时可以使用vars变量来配置
seajs.config({
vars:{
'locale':'zh-cn'
}
})
define(function(require,exports,module){
var lang=requrie('./i18n/{locale}.js')
//加载的是path/to/il8n/zh-cn-js
})
4.map,对模块路径进行映射修改，可用于路径转换，在线调试等。
seajs.config({
map:[
['.js','-debug.js']
]
})
define(function(require,exports,module){
var a=require('./a');
//加载的是path/to/a-debug.js
})
5.使用preload配置项，可以在普通模块加载前，提前加载并初始化好指定模块。
// 在老浏览器中，提前加载好 ES5 和 json 模块 seajs.config({ preload: [ Function.prototype.bind ? '' : 'es5-safe', this.JSON ? '' : 'json' ] });//preload中的空字符串会被忽略
6.定义模块
define('hello', ['jquery'], function(require, exports, module) {
// 模块代码
});
define('hello', ['jquery'], function(require, exports, module) {
// 模块代码
});
7.require 是一个方法，接受 模块标识 作为唯一参数，用来获取其他模块提供的接口。
define(function(require, exports) { // 获取模块 a 的接口 var a = require('./a'); // 调用模块 a 的方法 a.doSomething(); });
8.require.async 方法用来在模块内部异步加载模块，并在加载完成后执行指定回调。callback 参数可选。
define(function(require, exports, module) { // 异步加载一个模块，在加载完成时，执行回调 require.async('./b', function(b) { b.doSomething(); }); // 异步加载多个模块，在加载完成时，执行回调 require.async(['./c', './d'], function(c, d) { c.doSomething(); d.doSomething(); }); });
注意：require是同步往下执行，require.async则是异步回调执行。require.async一般用来加载可延迟异步加载的模块。
9.使用模块系统内部的路径解析机制来解析并返回模块路径。该函数不会加载模块，只返回解析后的绝对路径。
define(function(require, exports) { console.log(require.resolve('./b')); // ==> http://example.com/path/to/b.js });
10.exports 是一个对象，用来向外提供模块接口。
define(function(require, exports) { // 对外提供 foo 属性 exports.foo = 'bar'; // 对外提供 doSomething 方法 exports.doSomething = function() {}; });
//除了给exports对象增加成员，还可以使用return直接向外提供接口。
define(function(require) {
// 通过 return 直接提供接口
return {
foo: 'bar',
doSomething: function() {}
};
});
define(function(require, exports, module) {
module.exports = {
foo: 'bar',
doSomething: function() {}
};
});
11.模块的唯一标识。
define('id', [], function(require, exports, module) {
// 模块代码
});
12.根据模块系统的路径解析规则得到的模块绝对路径。
define(function(require, exports, module) { console.log(module.uri); // ==> http://example.com/path/to/this/file.js 一般情况下（没有在define中手写id参数时），module.id的值就是module.uri，两者完全相同。 });
练习代码
//模块入口
seajs.use('./js/test/test1',function(a){ a.fun1() })
//test1.js define(function(require,exports,module){ var test=require('./test2'); console.log(test.bb)//我safdsafes console.log(require.resolve('./test1'))//http://127.0.0.1:8020/seajs/js/test/test1.js console.log(module.uri)//http://127.0.0.1:8020/seajs/js/test/test1.js console.log(module.dependencies)//['test2'] module.exports={ fun1:function(){console.log("fun1----------"+test.fun1())},//fun1----------fun1---------- fun2:function(){console.log("fun2---------")}, bb:'我是代理商积分' } }) //test2.js define(function(require,exports,module){ module.exports={ fun1:function(){ return "fun1----------"}, fun2:function(){console.log("fun2---------")}, bb:'我safdsafes' } })
