sea.js

sea.js

[TOC]

代表sea.js

一、CMD规范：

1、申明

一个模块就是一个文件，申明自己的文件js的时候，使用require(function(){})或者是require(factory)

2、 定义define

define是一个全局函数，用来定义模块的，就像是上边的申明一样

1. 当参数是一个对象的时候，返回的就是json模版，或者是字符串模版

   define({name:'baipu'}) 又或者是define（"my name is {{name}}"）

2. 参数是方法的时候，表示模块的构造方法

   define(function(){
   
    //这里是模块的代码
   
   })
   

3. 多个参数时候，define(id?,deps?,factory); id表示标识符，deps表示依赖，注意：这里的参数不属于cmd范畴，而是modules/transport规范

3、factory函数

3.1、require

​ require是facatory的第一个参数，表示一个方法，用来引用其他的参数

    define(function(require,exports,module){
    //一、直接加载
        var a = require("./a");//这里引用js模块
    //二、异步加载模块
         var b= require.async(["./b,./c"],function(){
             c.doSomeThing();
             b.doSomeThine();
         })；
    //三、使用模块系统内部的路径解析机制来解析并返回模块路径。该函数不会加载模块，只返回解析后的绝对路径。
        console.log(require("./d"));//http://example.com/path/to/d.js
        //这里是模块的代码
    });

3.2 exports

1. 是一个对象，用来对外提供接口

   define(function(require,exports,module){
    //对外提供了foo变量
    exports.foo = "123";
       exports.dosomething = function(){};
       
   });
   

   ​

2. 通过return提供接口

   define(function(require,exports,module){
    //对外提供了foo变量
    //inner code
    return {
           foo:"123",
           dosomething:function(){}
    }
   });
   //可以简化
    define({
           foo:"123",
           dosomething:function(){}
    })
   //注意以下为错误方法：
   
   define(function(require,exports,module){
    //对外提供了foo变量
    //inner code
    exports =  {
           foo:"123",
           dosomething:function(){}
    }
   });
   

   ​

3. module.exports

   //modules.export.define(function(require,exports,module){
    //对外提供了foo变量
    //inner code
    module.exports =  {
           foo:"123",
           dosomething:function(){}
    }
   });
   

3.3 module

是一个对象，上面存储了与当前模块相关联的一些属性和方法。

1. Module.id //模块的唯一标示
2. module.uri//模块地址的绝对路径
3. module.dependencie//当前模块的依赖
4. module.exports对外提供的接口// 的赋值需要同步执行，不能放在回调函数
5. module.constructor、给所有module` 参数对象添加一些公用属性或方法

二、sea.js 规范

1、require

正确拼写require用require不更换名字如req 也不赋值如：var req = require;然后以后用req 也不覆盖 也就是require = function(){}

2、 use

直接加载启动

seajs.use('./main', function(main) {
  main.init();
});

也可以批量加载

seajs.use(['./a', './b'], function(a, b) {
  a.init();
  b.init();
});

3、config

seajs.config({

  // 别名配置
  alias: {
    'es5-safe': 'gallery/es5-safe/0.9.3/es5-safe',
    'json': 'gallery/json/1.0.2/json',
    'jquery': 'jquery/jquery/1.10.1/jquery'
  },

  // 路径配置
  paths: {
    '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,

  // Sea.js 的基础路径
  base: 'http://example.com/path/to/base/',

  // 文件编码
  charset: 'utf-8'
});

1. alias 当模块标识很长时，可以使用 alias 来简化。 这样引用的时候就方便多了 var $ = require('jquery');

2. paths 当目录比较深，或需要跨目录调用模块时，可以使用 paths 来简化书写。

   seajs.config({
     paths: {
       '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 模块路径在运行时才能确定，这时可以使用 vars 变量来配置。

   seajs.config({
     vars: {
       'locale': 'zh-cn'
     }
   });
   

   
   define(function(require, exports, module) {
   
     var lang = require('./i18n/{locale}.js');
        //=> 加载的是 path/to/i18n/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'
     ]
   });
   

   seajs.config({
     preload: 'a'
   });
   
   // 在加载 b 之前，会确保模块 a 已经加载并执行好
   seajs.use('./b');
   

6. Debug. 值为 true 时，加载器不会删除动态插入的 script 标签。插件也可以根据 debug 配置，来决策 log 等信息的输出。

7. Base 设置基础路径

8. Charset获取模块文件时，<script> 或 <link> 标签的 charset 属性。 默认是 utf-8也可以是一个函数，看返回值