Preface
SeaJS is a JavaScript module loading framework that follows the CommonJS specification, which can implement the modular development and loading mechanism of JavaScript. Unlike JavaScript frameworks such as jQuery, SeaJS does not extend the encapsulation language features, but only implements modularization and loading by module. The main purpose of SeaJS is to make JavaScript development modular and load easily and happily, free front-end engineers from the heavy JavaScript file and object dependency processing, and can focus on the logic of the code itself. SeaJS can be perfectly integrated with frameworks like jQuery. 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.
The author of SeaJS is Yu Bo, a Taobao front-end engineer.
SeaJS itself follows the KISS (Keep It Simple, Stupid) concept for development. It only has a single-digit API, so there is no pressure to learn. In the process of learning SeaJS, you can feel the essence of the KISS principle everywhere - do only one thing and do one thing well.
This article first uses an example to intuitively compare traditional JavaScript programming and modular JavaScript programming using SeaJS, and then discusses the use of SeaJS in detail, and finally gives some information related to SeaJS.
Traditional mode vs SeaJS modularity
Suppose we are now developing a web application TinyApp, and we decided to use the jQuery framework in TinyApp. The homepage of TinyApp will use module1.js, which depends on module2.js and module3.js, and module3.js. At the same time, module3.js depends on module4.js.
Traditional development
Using traditional development methods, the code of each js file is as follows:
Copy the code as follows://module1.js
var module1 = {
run: function() {
return $.merge(['module1'], $.merge(module2.run(), module3.run()));
}
}
//module2.js
var module2 = {
run: function() {
return ['module2'];
}
}
//module3.js
var module3 = {
run: function() {
return $.merge(['module3'], module4.run());
}
}
//module4.js
var module4 = {
run: function() {
return ['module4'];
}
}
At this time, index.html needs to reference module1.js and all its underlying dependencies (note the order):
Copy the code as follows: <!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>TinyApp</title>
<script src="./jquery-min.js"></script>
<script src="./module4.js"></script>
<script src="./module2.js"></script>
<script src="./module3.js"></script>
<script src="./module1.js"></script>
</head>
<body>
<p></p>
<script>
$('.content').html(module1.run());
</script>
</body>
</html>
As the project progresses, there will be more and more js files and dependencies will become more and more complex, making the js code and script lists in html often difficult to maintain.
SeaJS modular development
Let's take a look at how to implement the same functionality using SeaJS.
First is index.html:
Copy the code as follows: <!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>TinyApp</title>
</head>
<body>
<p></p>
<script src="./sea.js"></script>
<script>
seajs.use('./init', function(init) {
init.initPage();
});
</script>
</body>
</html>
You can see that the html page no longer needs to introduce all dependencies js files, but only introduces a sea.js. sea.js will handle all dependencies and load the corresponding js files. The loading strategy can choose to load all js at once when rendering the page. Files can also be loaded as needed (response js is loaded only when used). The specific loading strategy usage method is discussed below.
index.html loads the init module and uses the initPage method of this module to initialize the page data. The code details will not be discussed here.
Let’s take a look at the following modular JavaScript writing:
Copy the code as follows://jquery.js
define(function(require, exports, module) = {
//The original jquery.js code...
module.exports = $.noConflict(true);
});
//init.js
define(function(require, exports, module) = {
var $ = require('jquery');
var m1 = require('module1');
exports.initPage = function() {
$('.content').html(m1.run());
}
});
//module1.js
define(function(require, exports, module) = {
var $ = require('jquery');
var m2 = require('module2');
var m3 = require('module3');
exports.run = function() {
return $.merge(['module1'], $.merge(m2.run(), m3.run()));
}
});
//module2.js
define(function(require, exports, module) = {
exports.run = function() {
return ['module2'];
}
});
//module3.js
define(function(require, exports, module) = {
var $ = require('jquery');
var m4 = require('module4');
exports.run = function() {
return $.merge(['module3'], m4.run());
}
});
//module4.js
define(function(require, exports, module) = {
exports.run = function() {
return ['module4'];
}
});
At first glance, the code seems to be more complicated, because this example is too simple. If it is a large project, the advantages of SeaJS code will appear. However, from this we can still see some features of SeaJS:
First, the html page does not need to maintain a long list of script tags, just introduce a sea.js.
The second is that the js code is organized as modules. Each module introduces its own dependencies through require, and the code is clear and clear.
Through this example, friends should have an intuitive impression of SeaJS. The following article discusses the use of SeaJS in detail.