Preface
SeaJS is a JavaScript module loading framework that follows the CommonJS specification, which can implement the modular development and loading mechanism of JavaScript. Using SeaJS can improve the readability and clarity of JavaScript code, solve the problems of dependency confusion and code entanglement that are common in JavaScript programming, and facilitate the writing and maintenance of code.
SeaJS itself follows the KISS (Keep it Simple, Stupid) concept for development, and the subsequent version updates are also clamoring for this direction.
How to use SeaJS
The download and installation will not be detailed here. If you don’t know, please check the official website.
Basic development principles
• Everything is a module: The concept of modules in SeaJS is somewhat similar to the class in object-oriented - modules can have data and methods, data and methods can be defined as public or private, and public data and methods can be called by other modules.
• Each module should be defined in a separate js file, that is, one corresponds to a module.
Definition and writing of modules
Module definition function define
In SeaJS, define a module using the define function. define can receive three parameters:
/**
* Defines a module.
* @param {string=} id The module id.
* @param {Array.|string=} deps The module dependencies.
* @param {function()|Object} factory The module factory function.
*/
= function(id, deps, factory) {
//code of function…
}
The parameters that define can receive are module IDs, dependent module arrays and factory functions.
•If there is only one parameter, then assign the value to factory
•If there are two parameters, the second one is assigned to factory, and the first one is assigned to deps if it is an array, otherwise the value is assigned to id
•If there are three parameters, then the values are assigned separately
However, almost all places where define are used, including the SeaJS official website example, only one factory function is passed in, similar to the following code:
define(function(require,exports,module){
//code of the module
})
I personally recommend that you follow the standards of SeaJS official examples and define the module with a parameter definition. So what will be done with id and deps?
ID is a module's identification string. When define has only one parameter, id will be assigned to the absolute path of this js file by default. In the following file, use define to define the module, the ID of this module will be assigned as/, there is no special need to recommend not passing in id. Deps generally does not need to be passed in, and the modules needed can be loaded with require.
Factory function factory analysis
Factory functions are the main body and focus of the module. Its three parameters are:
•require: module loading function, used to record dependent modules
•exports: Interface point, to define data or method on it, expose it to external calls
•module: the metadata of the module
These three parameters can be selected as needed to display the specification.
A module is an object that stores the meta information of the module, as follows:
•: The module ID
•: An array that stores the ID list of all modules that this module depends on.
•: Point to the same object as exports
Three modes for writing modules
The first is a exports-based model:
define(function(require,exports,module){
var a=require('a');
var b=require('b'); //Introduce module var data1=1; //Private data var fun1=function(){//Private method return (data1);
}
exports.data2=2; //Public data exports.fun2=function(){
return 'hello';
}
})
The above is a relatively "authentic" module definition model. In addition to appending public data and methods to exports, you can also directly return an object to represent the module, such as the following code has the same function as the above code:
define(function(require){
var a=require('a');
var b=require('b'); //Introduce module var data1=1;
var fun1=function(){
return (data1);
}
return{
data2:2,
fun2:function(){
return 'hello';
}
}
})
If the module definition has no other code and only returns one object, you can also have the following simplified writing method:
define({
data2:2,
fun2:function(){
return 'hello';
}
})
The third writing method is very suitable for modules that define pure JSON data.
According to different application scenarios, SeaJS provides three APIs for loading modules, namely:,re and.
Mainly used to load the entry module. The entry module is equivalent to the main function of C language, and is also the root of the entire module dependency tree.
The usage is as follows:
//First mode('./a');
//Callback mode('./a',function(a){
();
})
//Multi-module mode(['./a','./b'],function(a,b){
();
();
})
The usage of multiple modules is similar to the module loading method in KISSY. It’s not bad that it was written by one person!
Generally, it 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 also omit it by adding the "data-main" attribute to the script tag that introduces seajs. For example, the following writing method:
<!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>TinyApp</title> </head> <body> <p class="content"></p> <script src="./" data-main="./init"></script> </body> </html> require
require is the main module loading method of seajs. When other modules are needed in one module, it is generally loaded with require:
var m=require('./a');
As mentioned above, seajs will record all required js files at once through static analysis when the html page is opened. If you want a js file to be loaded only when it is used, you can use it.
In this way, only when this module is used, the corresponding js file will be downloaded, which realizes the on-demand loading of JavaScript code.
Global configuration of SeaJS
Seajs provides a method to set up a global configuration and receive a configuration object representing the global configuration. The specific method is as follows:
({
base:'path',
alias:{
'app':'path/app/'
},
charset:'utf-8',
timeout:20000,
debug:false
})
in,
•base represents the base address path
•alias can set abbreviation for longer common paths
•charset represents the charset attribute of the script tag when downloading js.
•timeout represents the maximum time to download the file, in milliseconds.
How to use Seajs with existing JS libraries
To use an existing JS library with seajs, simply encapsulate the existing library according to the module definition rules of seajs. For example, the following is the encapsulation method for jQuery:
define(function(){
/*
Here is the jquery source code
*/
})
A complete example:
I have said so much above, and the knowledge points are relatively scattered, so in the end I plan to use a complete SeaJS example to string these knowledge points together for your friends to summarize and review. This example contains the following files:
• Main page
•
•
• init module, entrance module, rely on data, jquery, style, and the main page is loaded
• data module, pure json data module
• css style sheet
html：
<!DOCTYPE HTML>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div >
<p class="author"></p>
<p class="blog"><a href="#">Blog</a></p>
</div>
<script src=""></script>
<script>
('init');
</script>
</body>
</html>
javascript:
//
define(function(require, exports, module) {
var $ = require('./jquery');
var data = require('./data');
var css = require('./');
$('.author').html();
$('.blog').attr('href', );
});
//
define({
author: 'ZhangYang',
blog: ''
});
css:
.author{color:red;font-size:10pt;}
.blog{font-size:10pt;}
Please note:
1. Please say that the source code file is included in the seajs module loading code;
2. CSS files can be loaded before < 2.3.0. This feature is removed in the new version. For compatibility considerations, the loading of CSS function will exist as a plug-in.
How to use
• This plugin can be introduced after the tag to use
• You can also mix plugin code into it
•Difference from seajs-style •seajs-css enables loading a css file, just like the link tag
•seajs-style refers to providing a method to load a css string
The above content is the JavaScript modular development SeaJS shared by the editor with you. I hope it will be helpful for everyone to learn JavaScript modular development. Thank you for your support for my website all the time. !