Unofficial documents, organize the text and examples of your own official documents for quick search.
Why use Sea.js?
Sea.js pursues simple and natural code writing and organization methods, with 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: the automatic loading of dependencies and the concise and clear configuration allow us to enjoy more coding.
Sea.js also provides common plugins, 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 mainstream browsers:
Chrome 3+
Firefox 2+
Safari 3.2+
Opera 10+
IE 5.5+
Sea.js can run on the Mobile side, including the Hybrid mode app. In theory, Sea.js can run on any browser engine.
seajs.configObject
alias Object
Alias configuration, after configuration, you can use require to 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 Object
Set paths to facilitate cross-directory calls. By flexibly setting the path, you can specify to a certain directory without affecting the base.
seajs.config({ //Set path paths: { 'gallery': 'https://a.alipayobjects.com/gallery' }, //Set aliases to facilitate calls to alias: { 'underscore': 'gallery/underscore' }}); define(function(require, exports, module) { var _ = require('underscore'); //=> The loaded is https://a.alipayobjects.com/gallery/underscore.js});vars Object
Variable configuration. In some scenarios, the module path can only be determined during runtime, and the vars variable can be used to configure it.
vars is configured with the variable value in the module identifier, and the variable is represented by {key} in the module identifier.
seajs.config({ // Variable configuration vars: { 'locale': 'zh-cn' }}); define(function(require, exports, module) { var lang = require('./i18n/{locale}.js'); //=> The loaded is path/to/i18n/zh-cn.js});map Array
This configuration can map and modify the module paths, 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'); //=> The loaded is 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 normal module.
The empty string in the preload will be ignored.
// In old browsers, load the ES5 and json modules seajs.config({ preload: [ Function.prototype.bind ? '' : 'es5-safe', this.JSON ? '' : 'json' ]});Note: The configuration in preload needs to be loaded until use. for example:
seajs.config({ preload: 'a'});// Before loading b, it will ensure that module a has loaded and executed seajs.use('./b');The preload configuration cannot be placed in the module file:
seajs.config({ preload: 'a'}); define(function(require, exports) { // When executing here, it cannot be guaranteed that module a has been loaded and executed });debug Boolean
When the value is true, the loader does not delete the dynamically inserted script tag. The plug-in can also decide the output of log and other information based on debug configuration.
base String
Sea.js will parse the top-level identifier relative to the base path.
Note: Generally, please do not configure the base path. Putting sea.js in the appropriate path is often simpler and more consistent.
charsetString | Function
The charset attribute of the <script> or <link> tag when obtaining the module file. The default is utf-8
charset can also be a function:
seajs.config({ charset: function(url) { // The files in the xxx directory are loaded in gbk encoding if (url.indexOf('http://example.com/js/xxx') === 0) { return 'gbk'; } // Other files are encoded in utf-8 return 'utf-8'; }});seajs.use Function
Used to load one or more modules in a page. seajs.use(id, callback?)
// Load a module seajs.use('./a');// Load a module, execute callback seajs.use('./a', function(a) { a.doSomething();});// Load multiple modules, execute callback seajs.use(['./a', './b'], function(a, b) { a.doSomething(); b.doSomething();});Note: seajs.use has nothing to do with the DOM ready event. If certain operations are to be executed after DOM ready, you need to use class libraries such as jquery to ensure that. 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, and 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 home page of the document. Expand an item to see the specific information of the module. The meaning can be found in the module section of the CMD module definition specification.
seajs.reslove Function
Similar to require.resolve, the internal mechanism of the module system will use the path resolution of the incoming string parameters.
seajs.resolve('jquery');// => http://path/to/jquery.jsseajs.resolve('./a', 'http://example.com/to/b.js');// => http://example.com/to/a.jsThe seajs.resolve method can not only be used to debug whether the path resolution is correct, but also in the plug-in development environment.
seajs.data Object
Through seajs.data, you can view all seajs configurations and the values of some internal variables, which can be used for plug-in development. It can also be used for debugging when loading problems occur.
Frequently Asked Questions
About module identification
Seajs module identifiers are mainly small camel strings, . 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.jsIt is divided into relative and top-level logos. If it starts with . or ., it is a relative identifier. The small camel string switch is the top-level identifier.
// Suppose the base path is: http://example.com/assets/// In the module code: require.resolve('gallery/jquery/1.9.1/jquery'); // => http://example.com/assets/gallery/jquery/1.9.1/jquery.jsAbout the path
In addition to being relatively high-level identification, Seajs can also use normal paths to load modules.
Let’s go to the script analysis of the current page (you can right-click to view the source code)
//The path of sea.js, that is, the base path, is relative to the current page <script src="http://yslove.net/actjs/assets/sea-modules/seajs/2.1.1/sj.js"></script><script type="text/javascript">//Configure Seajsseajs.config({ alias: { //Top-level identification, based on 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 identifier, relative to the current page 'init': './src/init.js' }});</script>At the beginning, I feel that the Seajs path is a bit unaccustomed to it, because it is the Base path. Remember that the Base path is the upper path of the file in sea.js, and then all top-level identifiers and relative identifiers are adjusted relative to this Base.