Seajs Common API Easy Document

At present, more and more companies use sea.js, such as friends Net, Alibaba, Taobao, people net, pay treasure, Youdao Cloud notes. Modular JavaScript Development brings maintainability and scalability, especially if you don't have to worry about file dependencies and function naming conflicts in many collaborative development situations, here's a list of Seajs's common APIs and code examples

• Seajs.config
• Seajs.use
• Seajs.cache
• Seajs.reslove
• Seajs.data
• Problems
• About module identification
• About paths

Seajs.config

Alias

Alias configuration, after configuration can be used in the module require call require (' jquery ');

Seajs.config ({
    alias: {' jquery ': ' Jquery/jquery/1.10.1/jquery '} 
});
Define (function (Require, exports, module) {
    //reference jquery module
    var $ = require (' jquery ');
});

Paths sets the path to facilitate cross directory invocation. Path can be specified to a directory without impacting base with flexible settings.

Seajs.config ({
    //set path
    paths: {
        ' gallery ': ' Https://a.alipayobjects.com/gallery '
    },
    //Set alias, Easy to invoke
    alias: {
        ' underscore ': ' Gallery/underscore '
    }
});

VARs

Variable configuration. In some scenarios, the module path is not determined at run time, and can be configured using the VARs variable.
VARs is configured with the value of the variable in the module ID, which is represented by {key} in the module ID.

Seajs.config ({
    //variable configuration
    vars: {
        ' locale ': ' ZH-CN '
    }
});
Define (function (Require, exports, module) {
  var lang = require ('./i18n/{locale}.js ');
     => loading is path/to/i18n/zh-cn.js
});

Map

This configuration can be used to map and modify the module path, and can be applied to path conversion, online debugging and so on.

Seajs.config ({
    map: [
        ['. js ', '-debug.js ']
    ]
});
Define (function (Require, exports, module) {
    var a = require ('. a ');
    => loading is path/to/a-debug.js
});

Preload

With the preload configuration item, you can load and initialize the specified module ahead of normal module loading.
The empty string in the preload is ignored.

In the old browser, the ES5 and JSON module
seajs.config ({
    preload: [
        Function.prototype.bind?) are loaded ahead of time. ': ' Es5-safe ', this
        . Json? ': ' JSON '
    ]
};

Note: The configuration in preload needs to wait until use to load. Like what:

Seajs.config ({
    preload: ' A '
});
Before loading B, make sure that module A is loaded and performing good
seajs.use ('. B ');

Debug

True, the loader does not delete the dynamically inserted script label. Plug-ins can also be based on the debug configuration, to make the decision log information output.

Base

sea.js resolves the top-level identity relative to the base path.

Note: Generally, do not configure the base path, it is often simpler to put sea.js on the right path.

Charse

Gets the CharSet property of the,<script> or <link> label when the module file is obtained. The default is Utf-8 CharSet can also be a function:

Seajs.config ({
    charset:function (URL) {
        //xxx directory files are loaded with GBK encoding
        if (Url.indexof (' http://example.com/js/ xxx ') = = 0) {return
          ' GBK ';
        }
        Other files with Utf-8 code return
        ' Utf-8 ';
    }
);

Seajs.use
Used to load one or more modules in a page. Seajs.use (ID, callback?)

Load a module
seajs.use ('. a ');
Loads a module that executes a callback
Seajs.use ('. A ', function (a) {
  a.dosomething ();
}) when
the load completes; Loads multiple modules and executes
a callback Seajs.use (['. a ', './b '], function (A, B.) {
  a.dosomething () when the load completes;
  B.dosomething ();
});

Note: Seajs.use is not related to the DOM ready event. If certain actions are to be performed after DOM ready, you need to use class libraries such as jquery to ensure that. Like what

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

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

var bootstrap = [' bootstrap.css ', ' bootstrap-responsive.css ', ' bootstrap.js '];
Seajs.use (bootstrap, function () {
    //do something
});

Seajs.cache

With Seajs.cache, you can review 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 to 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 for the first page of the document. Expand an item to see the specific information of the module, the meaning can refer to: CMD module definition specification in the module section.

Seajs.reslove

Similar to Require.resolve, the incoming string parameters are parsed using the internal mechanism of the module system.

Seajs.resolve (' jquery ');
=> http://path/to/jquery.js
seajs.resolve ('. A ', ' http://example.com/to/b.js ');
=> Http://example.com/to/a.js

The Seajs.resolve method can be used not only to debug the correct path resolution, but also to use in the plug-in development environment.

Seajs.data

With Seajs.data, you can view the values of all SEAJS configurations and some internal variables that can be used for plug-in development. can also be used for debugging when a problem is encountered with the load.

Problems

About module identification

The Seajs module is identified primarily with a small hump string,. Or.

In the factory of Http://example.com/js/a.js:

Require.resolve ('./b ');
  => http://example.com/js/b.js
//In the factory of Http://example.com/js/a.js:
require.resolve ('. /C ');
  => Http://example.com/c.js

is divided into relative and top-level identities. In the same order as. Or. , the relative identity is the beginning. To a small hump string switch, the top-level identification.

Suppose the base path is: http://www.aseoe.com/assets/

In the module code:
require.resolve (' gallery/jquery/1.9.1/jquery ');
  => Http://www.aseoe.com/assets/gallery/jquery/1.9.1/jquery.js

The sea.js path, which is the base path, <script src= relative to the current page
. /actjs/assets/sea-modules/seajs/2.1.1/sj.js "></script>
<script type=" Text/javascript ">
/ /Configure Seajs
seajs.config ({
    alias: {
        //top-level identity, base path
        ' Actjs ': ' actjs/core/0.0.7/core.js ',
            //= > http://'
        position ': ' Actjs/util/0.0.2/position.js '
    }
});
Seajs.config ({
    alias: {
        //normal path, relative to the current page
        ' affix ': ' ...) /.. /actjs/assets/widget/src/widget-affix.js ',
        //relative identity, relative to current page
        ' init ': './src/init.js '
    }
};
</script>

About paths

Seajs you can use normal paths to load modules in addition to the top-level identities.

Script analysis to the current page

At first you will find that the path of SEAJS is a bit unaccustomed, by which it is the base path. Remember that the base path is the parent path of the Sea.js file, and then all top-level IDs, relative identities, are adjusted relative to this base.