SeaJS getting started tutorial series using SeaJS (ii) _ Seajs

This article mainly introduces SeaJS, a series of getting started tutorials, focuses on the use of SeaJS and the use of key methods. For more information, see Download and install

To use SeaJS in a project, all you need to do is download sea. js and place it in a certain position of your project.
The SeaJS project is currently hosted on GitHub and the home page is https://github.com/seajs/seajs. You can download sea. js (Compressed) or sea-debug.js (uncompressed) under the build directory of its git repository ).
After the download is complete, place it in the corresponding position of the project, and then introduce it through the script tag on the page, you can use SeaJS.

SeaJS basic development principles

Before discussing the specific use of SeaJS, we will first introduce SeaJS's modular concept and development principles.
The basic principle for developing JavaScript using SeaJS is: Everything is a module. After SeaJS is introduced, writing JavaScript code becomes a compilation of one module after another. The concept of modules in SeaJS is somewhat similar to that in object-oriented classes. modules can have data and methods, data and methods can be defined as public or private. Public data and methods can be called by other modules.
In addition, each module should be defined in a separate js file, that is, a corresponding module.
The following describes how to write and call modules.

Module definition and writing

Module definition function define
Use the "define" function in SeaJS to define a module. Because the SeaJS documentation does not have a complete reference for define, I read the SeaJS source code and found that define can receive three parameters:

The Code is as follows:

/**
* Defines a module.
* @ Param {string =} id The module id.
* @ Param {Array. | string =} deps The module dependencies.
* @ Param {function () | Object} factory The module factory function.
*/
Fn. define = function (id, deps, factory ){
// Code of function...
}

The above is extracted from the SeaJS source code. The parameters that define can receive are module IDs, dependent module arrays, and factory functions. After reading the source code, I found that define's resolution rules for the number of different parameters are as follows:
If there is only one parameter, it is assigned to factory.
If there are two parameters, the second value is assigned to the factory; the first value is assigned to the deps if it is an array; otherwise, the second value is assigned to the id.
If there are three parameters, they are assigned to id, deps, and factory respectively.
However, almost all the places that use define, including the official example of SeaJS, only one factory function is passed in, similar to the following code:

The Code is as follows:

Define (function (require, exports, module ){
// Code of the module...
});

Personally, we recommend that you follow the standard of the official SeaJS example and use a define parameter to define the module. What will id and deps do?
Id is the identifier string of a module. If define has only one parameter, the id is assigned the absolute path of the js file by default. For example, in the. js file under example.com, use define to define the module, the ID of this module will be assigned to the http://example.com/a.js, there is no special need to do not input the id. Deps generally does not need to be passed in. You can use require to load the required modules.

Factory function Parsing

Factory functions are the main body and focus of the module. When only one parameter is passed to define (recommended), this parameter is the factory function. At this time, the three parameters of the factory function are:
1. require-module Loading Function, used to record the dependency module.
2. exports -- interface point: expose data or method definitions to external calls.
3. module -- metadata of the module.
You can select whether to display the specified parameters as needed.
Let's talk about the module. A module is an object that stores the metadata of a module as follows:
1. module. id -- ID of the module.
2. module. dependencies -- an array that stores the IDs of all modules that this module depends on.
3. module. exports -- and exports point to the same object.

Three Writing module Modes

The first mode of defining the module is based on the exports mode:

The Code is as follows:

Define (function (require, exports, module ){
Var a = require ('A'); // introduce module
Var B = require ('B'); // introduce Module B

Var data1 = 1; // Private Data

Var func1 = function () {// Private Method
Return a. run (data1 );
}

Exports. data2 = 2; // Public Data

Exports. func2 = function () {// public Method
Return 'hello ';
}
});

The above is a more "authentic" module definition mode. In addition to attaching public data and methods to exports, you can also directly return an object representation module. The following code has the same function as the above Code:

The Code is as follows:

Define (function (require ){
Var a = require ('A'); // introduce module
Var B = require ('B'); // introduce Module B

Var data1 = 1; // Private Data

Var func1 = function () {// Private Method
Return a. run (data1 );
}

Return {
Data2: 2,
Func2: function (){
Return 'hello ';
}
};
});

If the module definition has no other code, only one object is returned. You can also simplify the writing as follows:

The Code is as follows:

Define ({
Data: 1,
Func: function (){
Return 'hello ';
}
});

The third method is suitable for the module defining pure JSON data.

Module loading and reference

Module addressing Algorithm
As mentioned above, a module corresponds to a js file. When loading a module, a string parameter is generally provided to indicate the module required by the loading function, therefore, we need a set of parsing algorithms from string identification to the path of the file where the actual module is located. SeaJS supports the following identifiers:
Absolute address: returns the absolute path of the js file.

For example:

The Code is as follows:

Require ("http: // example/js/");

Load http: // example/js/a. js.
Relative address: Use the relative address of the js file where the load function is called to find the module.
For example, load

The Code is as follows:

Require ("./c ");

Load http: // example/js/c. js.
Base Address: If the loaded string identifier is neither an absolute path nor begins with "./", it is addressed relative to "base" in the global configuration of SeaJS. This method will be discussed later.
Note that the extension ". js" is not required when loading the module. SeaJS will automatically add ". js ". However, it is not added in the following three cases:
When loading css, for example:

The Code is as follows:

Require ("./module1-style.css? 6.1.3 ");

Path contains "?" Such:

The Code is as follows:

Require (http: // example/js/a. json? Cb = func );

When the path ends with "#", for example:

The Code is as follows:

Require ("http: // example/js/a. json #");

Based on different application scenarios, SeaJS provides three loading module APIs: seajs. use, require, and require. async, which are described below.

Seajs. use

Seajs. use is mainly used to load the entry module. The entry module is equivalent to the main function of the C program and also the root of the entire module dependency tree. In the small example of TinyApp above, init is the entry module. The usage of seajs. use is as follows:

The Code is as follows:

// Single Mode
Seajs. use ('./');

// Callback Mode
Seajs. use ('./A', function (){
A. run ();
});

// Multi-module Mode
Seajs. use (['./A','./B '], function (a, B ){
A. run ();
B. run ();
});

Generally, seajs. use Only loads the entry module on the page. SeaJS parses all the dependency modules along the entry module and loads them. You can also write the statement as follows:

The Code is as follows:

TinyApp