Module definition and module loading of seaJs

SeaJS is a CommonJS compliant module loading framework developed by yubo to easily and happily load arbitrary JavaScript module and CSS module styles. SeaJS is very small, small is only 4K after compression and gzip, and very few interfaces and methods, SeaJS on two core: module definition and module load and dependency. SeaJS is very powerful, SeaJS can load any JavaScript module and CSS module style, SeaJS will ensure that when you use a module, the other modules you depend on have been loaded into the script runtime environment. According to yubo, SeaJS allows you to enjoy writing code without having to deal with the loading issues. Are you tired of so many js and CSS references? I counted 39 CSS and js references on the homepage of our company's website.

1. Bad for maintenance, the front and back ends are all the same
2. Too many HTTP requests. Of course, this can be solved by merging, but if there is no back-end merging directly, the labor cost is very large

SeaJS is a great way to solve these problems.

Define the module

It is relatively simple to define a module. For example, define a sayHello module and build a sayhello.js document:

define(function(require,exports,module){
 exports.sayHello = function(eleID,text) {
  document.getElementById(eleID).innerHTML=text;
 };
});

Let's take a look at the exports parameter. The exports parameter is the API that provides the module to the outside.

Module load use

For example, we have an element on our page with the id "out" to output "Hello SeaJS!" .
So we can introduce sea. Js first
Then use the sayHello module:

seajs.use("sayHello/sayHello",function(say){
 say.sayHello("out","Hello SeaJS!");
});

The use here is the way to use the module:

The first parameter is the module, it is relative to the sea. Js relative path to express, sayhello.js after the ". Js "suffix can be omitted, of course, there are many ways to identify the module, specific view: http://seajs.com/docs/zh-cn/module-identifier.html
The first parameter is a callback function. Say.sayhello () calls the exports. SayHello method of the sayHello module, which of course has a say parameter in the callback function.

Module dependencies

Module dependencies should exist at the time of module definition. For example, to rewrite the sayHello module above, suppose we already have a common DOM module, such as some methods to get elements and set styles, such as such a DOM module, as follows

define(function(require, exports, module) {
    var DOM = {
        
        getById: function() {
            var els = [];
            for (var i = 0; i < arguments.length; i++) {
                var el = arguments[i];
                if (typeof el == "string") {
                    el = document.getElementById(el);
                }
                if (arguments.length == 1) {
                    return el;
                }
                els.push(el);
            }
            return els;
        },
        
        get: function(el) {
            if (el & amp; amp; amp; & amp; amp; amp; (el.tagName || el.item)) {
                return el;
            }
            return this.getById(el);
        }
    };
    return DOM;
});

Then sayHello module can be written like this. In order not to affect the original demo page, I will order a new sayHelloA module. We can write sayhelloa.js like this:

define(function(require, exports, module) {
    var DOM = require("DOM/DOM");
    require("sayHelloA/sayHello.css");
    exports.sayHello = function(eleID, text) {
        DOM.get(eleID).innerHTML = text;
    };
});

The require function is used to establish the dependency of the module, such as the sayHelloA module above, which is dependent on the DOM module because it USES the DOM module's get method.
Notice that var DOM=require("DOM/DOM"), which assigns the DOM module to the DOM. Require ("sayHelloA/ sayhello.css ") is a direct application of the sayhello.css CSS module or file. The CSS file will be referenced on the page.

The last few days have been making SeaJS, the more the more like, thanks to yu bo! Thank you so much for SeaJS. Of course, you might not think it necessary to do so for such a few simple examples. It is true that small projects with fewer js files feel good about the advantages of modularity, but more of the advantages of modularity are reflected in more js files or medium-sized and above projects.