SeaJS introductory tutorial series: Using SeaJS (2)_Seajs

Download and install

To use SeaJS in your project, all you need to do is download sea.js and put it somewhere in your project. The SeaJS project is currently hosted on GitHub, and the homepage is https://github.com/seajs/seajs/. You can download sea.js (compressed) or sea-debug.js (uncompressed) from the build directory of its git library. After downloading, place it in the corresponding location of the project, and then introduce it through the tag in the page, and you can use SeaJS.

Basic Development Principles of SeaJS

Before discussing the specific use of SeaJS, let’s first introduce the modular concept and development principles of SeaJS. The basic principle of using SeaJS to develop JavaScript is: everything is a module. After the introduction of SeaJS, writing JavaScript code becomes writing modules one after another. The concept of modules in SeaJS is somewhat similar to classes in object-oriented - modules can have data and methods, and 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, one corresponds to one module. The following describes the writing and calling of modules.

Definition and writing of modules

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

Copy code 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 what I extracted from the SeaJS source code. The parameters that define can receive are module ID, dependent module array and factory function. After reading the source code, I found that define's parsing rules for different numbers of parameters are as follows: If there is only one parameter, assign it to factory. If there are two parameters, the second one is assigned to factory; if the first one is an array, it is assigned to deps, otherwise it is assigned to id. If there are three parameters, assign them to id, deps and factory respectively. However, almost all places where define is used, including the official examples of SeaJS, only pass a factory function into it, similar to the following code:

Copy code The code is as follows: define(function(require, exports, module) { //code of the module... }); Personally, it is recommended to follow the standard of SeaJS official example and define the module with a parameter define. So what will happen to ids and deps? id is the identification string of a module. When define has only one parameter, id will be assigned the absolute path of this js file by default. If define is used to define a module in the a.js file under example.com, the ID of this module will be assigned to http://example.com/a.js. It is recommended not to pass in the ID unless there is any special need. Generally, deps does not need to be passed in. The modules that need to be used can be loaded with require.

Factory function factory analysis

The factory function is the main body and focus of the module. When only one parameter is passed to define (recommended writing method), 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 dependent modules. 2.exports - interface point, defining data or methods on it will expose it to external calls. 3.module——Module metadata. These three parameters can be displayed and specified as needed. Let’s talk about modules. Module is an object that stores the meta-information of the module, as follows: 1.module.id - the ID of the module. 2.module.dependencies - an array that stores a list of IDs of all modules that this module depends on. 3.module.exports - points to the same object as exports.

Three modes of writing modules

The first mode of defining modules is based on exports:

Copy code The code is as follows: define(function(require, exports, module) { var a = require('a'); //Introduce a module var b = require('b'); // Introduce b module

var data1 = 1; //Private data

var func1 = function() { //Private method

exports.data2 = 2; //Public data

exports.func2 = function() { //Public method return 'hello'; } } );

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

Copy code The code is as follows: define(function(require) { var a = require('a'); //Introduce a module var b = require(' b'); //Introduce b module

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 and only returns an object, it can also be simplified as follows:

Copy the code The code is as follows : define({ data: 1, func: function() { return 'hello'; } }); The third method is very suitable for modules that define pure JSON data. Module loading and reference

Module addressing algorithm As mentioned above, a module corresponds to a js file, and when loading a module, a string parameter is generally provided to tell the loading function the module required, so It is necessary to have a parsing algorithm from the string identifier to the file path where the actual module is located. SeaJS supports the following identifiers: Absolute address - gives the absolute path to the js file.

For example:

Copy code The code is as follows: require("http://example/js /a"); means loading http://example/js/a.js. Relative address - Use relative calling to find the module using the relative address of the js file where the loading function is located. For example, load

in http://example/js/b.js Copy the code The code is as follows: require("./c"); loads http://example/js/c.js. Base address - If the loading string identifier is neither an absolute path nor starting with "./", it will be addressed relative to the "base" in the SeaJS global configuration. This method will be discussed later. Note that there is no need to pass the suffix ".js" when loading the module above, SeaJS will automatically add ".js". However, it will not be added in the following three situations: When loading css, such as:

Copy code The code is as follows: require("./module1-style.css"); When the path contains "?", such as:

Copy Code The code is as follows: require( http://example /js/a.json?cb=func ); When the path ends with "#", such as:

Copy code The code is as follows: require("http://example/js/a.json#"); Depending on different application scenarios, SeaJS provides three APIs for loading modules, namely seajs.use, require and require.async, which are introduced below. seajs.use

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

Copy code The code is as follows: //Single mode seajs.use('./a');

//Callback mode seajs.use('./a', function(a) { a.run(); });

//Multi-module mode seajs.use(['./a', './b'], function(a, b) { a.run (); b.run(); }); Generally seajs.use is only used to load the entry module on the page, SeaJS will parse all dependent modules along the entry module and load them. If there is only one entry module, you can omit seajs.use by adding the "data-main" attribute to the script tag that introduces sea.js. For example, the index.html of TinyApp above can also be changed to the following writing: Copy code The code is as follows: TinyApp &lt ;body>

This way of writing will make html more concise. require

require is the main module loading method of SeaJS. When other modules are needed in a module, require is generally used to load:

Copy code The code is as follows: var m = require('/path/to/module/file'); Here is a brief introduction to the automatic loading mechanism of SeaJS. As mentioned above, after using SeaJS, the html only needs to contain sea.js. So how are other js files loaded? SeaJS will first download the entry module, then use regular expressions along the entry module to match all the requirements in the code, then download the corresponding js file according to the file path identifier in the require, and then iterate and perform similar operations on the downloaded js file. The whole process is similar to a graph traversal operation (because there may be cross-cyclic dependencies, the entire dependency data structure is a graph rather than a tree). After understanding the above point, the following rules are easy to understand: The path identifier passed to require must be a string literal, not an expression. For example, the following method of using require is wrong: Copy code The code is as follows: require('module' '1'); require(' Module'.toLowerCase()); This will cause SeaJS to be unable to perform correct regular matching to download the corresponding js file. require.async

As mentioned above, SeaJS will record all the required js files at once through static analysis when the html page is opened. If you want a certain js file to be downloaded only when it is used, you can use require.async:

Copy code The code is as follows: require.async('/path/to/module/file', function(m) { //code of callback... }); In this way, only when this module is used, the corresponding js file will be downloaded, thus realizing the pressing of JavaScript code Needs to be loaded. Global configuration of SeaJS SeaJS provides a seajs.config method to set global configuration and receive a configuration object representing the global configuration. The specific usage is as follows:

Copy code The code is as follows: seajs.config({ base: 'path/to/jslib/', alias: { 'app': 'path/to/app/' }, charset: 'utf-8', timeout : 20000, debug: false }); Where base represents the base address path when base addressing. For example, base is set to http://example.com/js/3-party/, then: Copy code The code is as follows: var $ = require('jquery'); will load http://example.com/js/3-party/jquery.js. alias can set abbreviations for long common paths. charset represents the charset attribute of the script tag when downloading js. timeout indicates the maximum time for downloading files, in milliseconds. debug indicates whether to work in debug mode. How SeaJS works with existing JS libraries

To use an existing JS library such as jQuery with SeaJS, you only need to encapsulate the existing library according to the module definition rules of SeaJS. For example, the following is the encapsulation method of jQuery:

Copy the code The code is as follows: define(function() {

//{{{jQuery original code starts /*! * jQuery JavaScript Library v1.6.1 * http://jquery.com/ * * Copyright 2011, John Resig * Dual licensed under the MIT or GPL Version 2 licenses. * http://jquery.org/license * * Includes Sizzle.js * http://sizzlejs.com/ * Copyright 2011, The Dojo Foundation * Released under the MIT, BSD, and GPL Licenses. * * Date: Thu May 12 15: 04:36 2011 -0400 */ //... //}}}jQuery original code ends

return $.noConflict(); }) ; Packaging and deployment of SeaJS project

SeaJS originally integrated a packaging and deployment tool spm. Later, in order to be more KISS, the author separated spm out of SeaJS and turned it into a separate project. The core idea of spm is to merge and compress the codes of all modules and merge them into the entry module. Due to the characteristics of SeaJS itself, the HTML can be easily switched between the development environment and the production environment without any changes. However, since spm has not released an official version yet, this article does not intend to introduce it in detail. Interested friends can refer to its github project homepage https://github.com/seajs/spm/. In fact, since the JS merging and compression tools used by each project are different, spm may not be completely suitable for every project. After understanding the principles of SeaJS, you can write a merge and package script that meets the characteristics of your own project.