Introduction to SeaJS (part 1)

  • 2020-03-30 02:11:16
  • OfStack

preface
SeaJS is a JavaScript module loading framework following the CommonJS specification, which can realize the modular development and loading mechanism of JavaScript. Unlike JavaScript frameworks such as jQuery, SeaJS does not extend the encapsulation language features, but simply modularize and load JavaScript by module. The main purpose of SeaJS is to make JavaScript development modular and easy to load, freeing front-end engineers from heavy JavaScript files and object dependencies to focus on the logic of the code itself. SeaJS is perfectly integrated with frameworks like jQuery. The use of SeaJS can improve the readability and clarity of JavaScript code, solve the problems of common dependency confusion and code entanglement in JavaScript programming, and facilitate the writing and maintenance of code.
SeaJS is written by yu bo, a taobao front-end engineer.
SeaJS itself was developed under the KISS (Keep It Simple, Stupid) philosophy and has only a single digit API, so there is no pressure to learn. In the process of learning SeaJS, I can feel the essence of KISS principle everywhere -- do one thing, do one thing well.
This article first compares traditional JavaScript programming with modular JavaScript programming using SeaJS visually through an example, 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 decide to use the jQuery framework in TinyApp. The first page of TinyApp will use module1.js, module1.js relies on module2.js and module3.js, while module3.js relies on module4.js.
Traditional development
Using the traditional development method, each js file code is 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 point, index.html needs to refer to module1.js and all its underlying dependencies (note the order) :
<!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 class="content"></p>
    <script>
        $('.content').html(module1.run());
    </script>
</body>
</html>

As the project progresses, there will be more and more js files and more and more complex dependencies, making it difficult to maintain script lists in js code and HTML.
SeaJS modular development
Let's see how you can use SeaJS to achieve the same functionality.
The first is index.html:
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>TinyApp</title>
</head>
<body>
    <p class="content"></p>
    <script src="./sea.js"></script>
    <script>
        seajs.use('./init', function(init) {
            init.initPage();
        });
    </script>
</body>
</html>

Can see the HTML page is no longer need to introduce all rely on js file, but simply to introduce a sea, js, sea, js, will handle all depend on load corresponding js file, load strategy can choose one-time loading all js files when rendering the page, can load as needed (js) use it to load response, loading strategy use methods discussed below.
Index.html loads the init module and initializes the page data using the initPage method of the module, without going into code details here.
Here's how to write JavaScript after modularization:
//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 volatile and complex, because this example is too simple, and if it is a large project, the advantages of SeaJS code become apparent. But here's a peek at some of SeaJS's features:
One is that HTML pages do not need to maintain a long list of script tags, as long as the introduction of a sea. Js.
Second, js code is organized by modules. Each module introduces its dependent modules by requiring, which makes the code clear and clear.
Through this example, friends should have an intuitive impression of SeaJS, the following article discusses the use of SeaJS in detail.


Related articles: