SEAJS: A module loader for Web browser-side

What is SEAJS?
The SEAJS is a module loader for Web browsers, which is also compatible with node. In the Seajs world, a file is a module, and all modules follow the cmd (Common module Definition) specification. Seajs itself follows (Keep it simple, Stupid) concept development, with only a few APIs.

Why use Seajs?
If we were to develop a web app, we would need to use the jquery framework in this application. The app's home page index.html uses Module1.js,module1.js to rely on Module2.js and module3.js, while Module3.js relies on module4.js. In the traditional way, index.html needs to introduce module1.js and all its underlying dependencies (the order cannot be wrong). As the project progresses, the JS file becomes more and more complex, making the JavaScript code and the script list in HTML difficult to maintain.
and using seajs,index.html no longer need to introduce all the dependent JS files, just to introduce a sea.js,sea.js will handle all dependencies, load the corresponding JS file.

Seajs characteristics
1, HTML pages do not need to maintain a lengthy list of script tags, as long as the introduction of a sea.js.
2, JS code to organize modules, each module through the require to introduce their own modules, the code is clear.

Basic principles
1, in Sea.js, using the Define (Factory function Factory) function to define the module, the module is a function, in the cmd (Common module definition) module definition specification, a module is a JS file.
2, the implementation of the module, it must be dependent on the module is ready to execute smoothly.
3, in Sea.js, the concept of the module is similar to the object-oriented class, the module has its own data and methods, the data and methods can be public or private, the public can be used for other modules to call.

Three API for loading modules
Seajs.use is mainly used to load the Ingress module, but also the root of the entire module dependency tree. It is generally used only in the page loading portal module, which is used to load one or more modules in the page. If there is only one entry module, you can also omit seajs.use by adding the "Data-main" = "./main" property using the Sea.js script tag.
Require main module loading method, the introduction of dependency, specify the interface of the module, when a module needs another module to be loaded with require. Require only accepts string literals as arguments.
Require.async is used to asynchronously load one or more modules inside a module. SEAJS will load the required JS file at one time by static analysis when the HTML page opens, use this method if you want a JS file to load when it is used.
Respectively: Require is synchronous down, Require.async is asynchronous callback execution, and is typically used to load modules that can delay asynchronous loading.

The foreground JS should use the cache as far as possible, config.js in the map:[] in the code removed. Can see the effect in the Firebug, remove after the request after the connection did not have? d= ..., that is, the time stamp is removed, the next access will use the cache.

How to use?
STEP1:
Introduce sea.js on the page. In order for the sea.js to get its own path quickly, it is recommended to manually add the id attribute:
<script src= "Http://path/to/seajs/1.2.0/sea.js" id= "Seajsnode" ></script>
STEP2: Use Seajs.use to load module files:

<script>    seajs.use ('./hello ')//  can take Callbackseajs.use ('./hello ', function (hello) { Hello.api ()})//can also load multiple modules simultaneously (sequentially)        seajs.use (['./hello ', './world '],function (hello,world) {Hello.api () World.api () })</script>

You should have noticed that the loaded module file has no suffix, because seajs defaults to automatically fill in the. js suffix without the specified suffix. However, there are two cases that are not automatically added, one is the path to the number # # end, and the second is the path contains a question mark?

SEAJS Global configuration parameters

Static/my/js/sea/config.js

Base: Represents the base address when addressing the base address path, if set base:www.baidu.com/, when var model = require ("jquery"), will be loaded www.baidu.com/jquery.js;

Alias: Can let the real path of the file and call identity separate, the longer common path set abbreviations, conducive to unified maintenance;

CharSet: Indicates the charset attribute of script tag when downloading JS;

Timeout: Indicates the maximum length of time to load a file, in milliseconds;

Debug: Indicates whether the operation is in debug mode.

seajs.config ({paths: {' gallery ': ' Https://a.alipayobjects.com/gallery ',' app ': ' Path/to/app '  ,}});d Efine (function(require, exports, module) {var underscore =require (' gallery/ Underscore '); // = = Loaded is the Https://a.alipayobjects.com/gallery/underscore.jsvar Biz =require (' app/biz '); // = = Loaded is the Path/to/app/biz.js });

Paths: You can use paths to simplify writing when the directory is deep, or when you need to call a module across directories, or you can use it in conjunction with the alias configuration to make module references easier.

Seajs.config ({vars: {' locale ': ' ZH-CN '}});d Efine (function(require, exports, module) {var lang =require ('./i18n/{locale}.js '); // = = Loaded is the Path/to/i18n/zh-cn.js });

Seajs Sample Demo

Refer to the Main.js file in the page:

Main.js file dependent view.js file:

Schema of the View.js file, dependent on Model.js and rm.js:

Three parameters

Factory Function Factory parsing:

The factory function is the main body and focus of the module, when passing only one parameter to define, this parameter is the factory function, when the factory function has three parameters.

Require: Used to specify the interface of the module, to introduce dependencies, to obtain the interface provided by other modules; Note: Require only accepts strings directly as arguments.
Exports: Used to provide an external interface within the module, and the data or method is defined on it to expose it to external calls.
Module: meta-data for modules that store some of the properties and methods associated with the current module.

SEAJS: A module loader for Web browser-side