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 the modularization and loading by module of JavaScript. 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 usage methods 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. TinyApp's homepage will use, dependency and dependency at the same time.
Traditional development
Using traditional development methods, the code of each js file is as follows:
var module1 = {
run: function() {
return $.merge(['module1'], $.merge((), ()));
}
}
//
var module2 = {
run: function() {
return ['module2'];
}
}
//
var module3 = {
run: function() {
return $.merge(['module3'], ());
}
}
//
var module4 = {
run: function() {
return ['module4'];
}
}
At this time, references and all their underlying dependencies are required (note the order):
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>TinyApp</title>
<script src="./"></script>
<script src="./"></script>
<script src="./"></script>
<script src="./"></script>
<script src="./"></script>
</head>
<body>
<p class="content"></p>
<script>
$('.content').html(());
</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 of all:
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>TinyApp</title>
</head>
<body>
<p class="content"></p>
<script src="./"></script>
<script>
('./init', function(init) {
();
});
</script>
</body>
</html>
You can see that the html page no longer needs to introduce all dependencies js files, but only introduce one, which will process all dependencies and load the corresponding js files. The loading strategy can choose to load all js files at once when rendering the page, or it can be loaded as needed (only load the response js when it is used). The specific loading strategy usage method is discussed below.
The init module is loaded and the page data is initialized using the initPage method of this module. The code details are not discussed here.
Let’s take a look at the following modular JavaScript writing:
define(function(require, exports, module) = {
//Original code...
= $.noConflict(true);
});
//
define(function(require, exports, module) = {
var $ = require('jquery');
var m1 = require('module1');
= function() {
$('.content').html(());
}
});
//
define(function(require, exports, module) = {
var $ = require('jquery');
var m2 = require('module2');
var m3 = require('module3');
= function() {
return $.merge(['module1'], $.merge((), ()));
}
});
//
define(function(require, exports, module) = {
= function() {
return ['module2'];
}
});
//
define(function(require, exports, module) = {
var $ = require('jquery');
var m4 = require('module4');
= function() {
return $.merge(['module3'], ());
}
});
//
define(function(require, exports, module) = {
= 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 one.
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.