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'
    }
})