Introduction to SeaJS in the SeaJS introductory tutorial series (1)_Seajs

Foreword
SeaJS is a JavaScript module loading framework that follows the CommonJS specification and can realize modular development and loading mechanism of JavaScript. Unlike JavaScript frameworks such as jQuery, SeaJS does not extend the encapsulated language features, but only implements JavaScript modularization and module loading. The main purpose of SeaJS is to make JavaScript development modular and easy to load, freeing front-end engineers from the heavy processing of JavaScript files and object dependencies, so they can focus on the logic of the code itself. SeaJS can be perfectly integrated with frameworks such as jQuery. Using SeaJS can improve the readability and clarity of JavaScript code, solve common problems such as dependency confusion and code entanglement in current JavaScript programming, and facilitate code writing and maintenance.
The author of SeaJS is Taobao front-end engineer Yu Bo.
SeaJS itself is developed following the KISS (Keep It Simple, Stupid) concept. 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 - only do one thing and do one thing well.
This article first visually compares traditional JavaScript programming and modular JavaScript programming using SeaJS through an example, then discusses the use of SeaJS in detail, and finally gives some information related to SeaJS.

Traditional mode vs SeaJS modular
Suppose we are developing a web application TinyApp now, and we decide to use jQuery framework in TinyApp. The homepage of TinyApp will use module1.js, module1.js depends on module2.js and module3.js, and module3.js depends on module4.js.
Traditional development
Using traditional development methods, the code of each js file is as follows:

Copy code The code is as follows:

//module1.js
var module1 = {
run: function() {
return $.merge(['module1'], $.merge( module2.run(), module3.run()));
}
}

//module2.js
var module2 = {
run: function() {
                                                 . merge(['module3'], module4.run());
}
}

//module4.js
var module4 = {
run: function() {
           return ['module4'];


Copy code


The code is as follows:

   ;/head> 

  <script><div class="codebody" id="code91210">   $('.content').html(module1 .run());<br> </script>



As the project progresses, there will be more and more js files. Dependencies will also become more and more complex, making the script list in js code and html often difficult to maintain.

SeaJS modular development

Let’s see how to use SeaJS to achieve the same function.
First is index.html:




Copy the code

The code is as follows:
< ;title>TinyApp

 

 



You can see that the html page no longer needs to introduce all dependent js files, but only Introduce a sea.js, sea.js will handle 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 load on demand (load the response js only when used). The specific usage of loading strategies 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 how JavaScript is written after modularization:




Copy the code

The code is as follows:

// jquery.js

define(function(require, exports, module) = { //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 changing. It’s complicated because this example is too simple. If it is a large project, the advantages of SeaJS code will become apparent. However, we can still get a glimpse of some features of SeaJS from here:
First, the HTML page no longer needs to maintain a lengthy list of script tags, just introduce a sea.js.
Second, the js code is organized in modules. Each module introduces its dependent modules 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.