Seajs simple documentation provides a simple and ultimate modular development experience_Seajs

Unofficial documents are compiled from the text and examples of our own official documents for quick reference.

Why use Sea.js?

Sea.js pursues a simple and natural way of writing and organizing code, and has the following core features:

Simple and friendly module definition specification: Sea.js follows the CMD specification and can write module code like Node.js.
Natural and intuitive code organization: automatic loading of dependencies and concise and clear configuration allow us to enjoy coding more.
Sea.js also provides commonly used plug-ins, which are very helpful for development, debugging and performance optimization, and have rich extensible interfaces.

Compatibility

Sea.js has complete test cases and is compatible with all major browsers:

Chrome 3+ 
Firefox 2+ 
Safari 3.2+
Opera 10+ 
IE 5.5+ 

Sea.js can run on the mobile side, including Hybrid mode apps. In theory, Sea.js can run on any browser engine.

seajs.configObject

alias Object

Alias ​​configuration, after configuration, you can use require in the module to call require('jquery');

seajs.config({
  alias: { 'jquery': 'jquery/jquery/1.10.1/jquery' }
});

define(function(require, exports, module) {
  //引用jQuery模块
  var $ = require('jquery');
});

paths Object

Set the path to facilitate cross-directory calls. By flexibly setting the path, you can specify a directory without affecting the base.

seajs.config({
  //设置路径
  paths: {
    'gallery': 'https://a.alipayobjects.com/gallery'
  },

  // 设置别名，方便调用
  alias: {
    'underscore': 'gallery/underscore'
  }
});

define(function(require, exports, module) {
  var _ = require('underscore');
   //=> 加载的是 https://a.alipayobjects.com/gallery/underscore.js
});

vars Object

Variable configuration. In some scenarios, the module path can only be determined at runtime. In this case, you can use vars variables to configure it.

vars configures the variable value in the module identifier, and {key} is used to represent the variable in the module identifier.

seajs.config({
  // 变量配置
  vars: {
    'locale': 'zh-cn'
  }
});

define(function(require, exports, module) {
 var lang = require('./i18n/{locale}.js');
   //=> 加载的是 path/to/i18n/zh-cn.js
});

map Array

This configuration can map and modify the module path, and can be used for path conversion, online debugging, etc.

seajs.config({
  map: [
    [ '.js', '-debug.js' ]
  ]
});

define(function(require, exports, module) {
  var a = require('./a');
  //=> 加载的是 path/to/a-debug.js
});

preload Array

Using the preload configuration item, you can load and initialize the specified module in advance before loading the ordinary module.

Empty strings in preload will be ignored.

// 在老浏览器中，提前加载好 ES5 和 json 模块
seajs.config({
  preload: [
    Function.prototype.bind ? '' : 'es5-safe',
    this.JSON ? '' : 'json'
  ]
});

Note: The configuration in preload needs to wait until use before loading. For example:

seajs.config({
  preload: 'a'
});

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

Preload configuration cannot be placed in module files:

seajs.config({
  preload: 'a'
});

define(function(require, exports) {
  // 此处执行时，不能保证模块 a 已经加载并执行好
});

debug Boolean

When the value is true, the loader will not remove dynamically inserted script tags. Plug-ins can also decide the output of log and other information based on debug configuration.

baseString

When Sea.js parses the top-level identifier, it will be parsed relative to the base path.

Note: Generally, please do not configure the base path. It is often simpler and more consistent to place sea.js in the appropriate path.
charsetString | Function

When getting the module file, the charset attribute of the 3f1c4e4b6b16bbbd69b2ee476dc4f83a or 2cdf5bf648cf2f33323966d7f58a7f3f tag. The default is utf-8

charset can also be a function:

seajs.config({
  charset: function(url) {
    // xxx 目录下的文件用 gbk 编码加载
    if (url.indexOf('http://example.com/js/xxx') === 0) {
     return 'gbk';
    }

    // 其他文件用 utf-8 编码
    return 'utf-8';
  }
});

seajs.use Function
Used to load one or more modules in the page. seajs.use(id, callback?)

// 加载一个模块
seajs.use('./a');

// 加载一个模块，在加载完成时，执行回调
seajs.use('./a', function(a) {
 a.doSomething();
});

// 加载多个模块，在加载完成时，执行回调
seajs.use(['./a', './b'], function(a, b) {
 a.doSomething();
 b.doSomething();
});

Note: seajs.use has nothing to do with the DOM ready event. If you want to ensure that certain operations are executed after the DOM is ready, you need to use a class library such as jquery to ensure it. For example

seajs.use(['jquery', './main'], function($, main) {
  $(document).ready(function() {
    main.init();
  });
});

Note: The first parameter of the use method must be present, but it can be null or a variable

var bootstrap = ['bootstrap.css', 'bootstrap-responsive.css', 'bootstrap.js'];

seajs.use(bootstrap, function() {
  //do something
});

seajs.cache Ojbect
Through seajs.cache, you can check all module information in the current module system.

For example, open seajs.org, and then enter seajs.cache in the Console panel of WebKit Developer Tools, you can see:

Object
 > http://seajs.org/docs/assets/main.js: x
 > https://a.alipayobjects.com/jquery/jquery/1.10.1/jquery.js: x
 > __proto__: Object
            

These are the modules used on the homepage of the document. Expand an item to see the specific information of the module. For the meaning, please refer to: CMD module definition specification in the module section.

seajs.reslove Function
Similar to require.resolve, the internal mechanism of the module system will be used to perform path analysis on the incoming string parameters.

seajs.resolve('jquery');
// => http://path/to/jquery.js

seajs.resolve('./a', 'http://example.com/to/b.js');
// => http://example.com/to/a.js

seajs.resolve 方法不光可以用来调试路径解析是否正确，还可以用在插件开发环境中。

seajs.data Object
通过 seajs.data，可以查看 seajs 所有配置以及一些内部变量的值，可用于插件开发。当加载遇到问题时，也可用于调试。

常见问题
关于模块标识

Seajs模块标识主要以小驼峰字符串、.或..

// 在 http://example.com/js/a.js 的 factory 中：
require.resolve('./b');
 // => http://example.com/js/b.js

// 在 http://example.com/js/a.js 的 factory 中：
require.resolve('../c');
 // => http://example.com/c.js

分为 相对 与 顶级 标识。以.或..开头，则为相对标识 。以小驼峰字符串开关，则为顶级标识。

// 假设 base 路径是：http://example.com/assets/

// 在模块代码里：
require.resolve('gallery/jquery/1.9.1/jquery');
 // => http://example.com/assets/gallery/jquery/1.9.1/jquery.js

关于路径

Seajs除了相对与顶级标识之外，还可以使用普通路径来加载模块。

就到当前页面的脚本分析（可以右键查看源码）

//sea.js的路径，即 base 路径，相对于当前页面
<script src="http://yslove.net/actjs/assets/sea-modules/seajs/2.1.1/sj.js"></script>

<script type="text/javascript">
//配置Seajs
seajs.config({
  alias: {
    //顶级标识，基于 base 路径
    'actjs': 'actjs/core/0.0.7/core.js',
      // => http://
    'position': 'actjs/util/0.0.2/position.js'
  }
});

seajs.config({
  alias: {
    //普通路径，相对于当前页面
    'affix': '../../actjs/assets/widget/src/widget-affix.js',

    //相对标识，相对于当前页面
    'init': './src/init.js'
  }
});
</script>

开始的时候会觉得Seajs的路径有点不习惯，由其是Base路径。切记Base路径就是sea.js的那个文件的上级路径，然后所有顶级标识，相对标识都是相对于这个Base来调整。