Analysis of SEAJS module definition and module loading _SEAJS

Seajs is a module-loading framework developed by Yuber that follows the COMMONJS specification and can be easily and cheerfully loaded with arbitrary JavaScript modules and CSS module styles. Seajs is very small, compact is compressed and gzip after volume only 4 K, and the interface and method is very small, seajs on two core: module definition and Module loading and dependency relationship. Seajs is very powerful, SEAJS can load arbitrary JavaScript modules and CSS module styles, SEAJS will ensure that when you use a module, you have already relied on other modules to load into the script run environment. Yuber, Seajs can make you enjoy the fun of writing code without having to worry about loading problems. Are you tired of so many JS and CSS references, I counted the company's website of the personal home page has 39 css and JS Reference, the impact can be imagined:

1. Unfavorable to maintenance, the front end is the same
Too many 2.http requests, of course, this can be solved by merging, but if there is no back-end direct merging, labor costs are very large, even if the back-end merger, maintenance, such a long string, eyes must look at the flowers

Using SEAJS can solve these problems very well.

The definition of a module define

Defining a module is simpler, such as defining a SayHello module and building a sayhello.js document:

Copy Code code as follows:

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 an API that is used to provide modules outside. This is the exports of other modules to access the SayHello method.

Loading use of the module

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

Copy Code code as follows:

Seajs.use ("Sayhello/sayhello", function (say) {
Say.sayhello ("Out", "Hello seajs!");
});

Use here is the method of using the module:

The first parameter is the module said that he is relative to the sea.js relative path to express, sayhello.js after the ". js" suffix can be omitted, of course, this module logo there are many ways to see the official description: http://seajs.com/docs/zh-cn/ Module-identifier.html
The first parameter is a callback function. Say.sayhello () is the Exports.sayhello method of calling the SayHello module, of course, there is a say parameter in the callback function.

Dependencies of modules

The dependency of a module should actually exist when the module is defined. For example, rewrite the SayHello module above, assuming that we already have a common DOM module, such as getting elements, setting styles, and so on, such as a DOM module, written as follows Dom.js

Copy Code code as follows:

Define (function (Require, exports, module) {
var DOM = {
/**
* Get the DOM object with the element id attribute, the argument is a string, or multiple strings
* @id GetByID
* @method GetByID
* @param {String} id the id attribute
* @return {htmlelement | Object} The HtmlElement with the ID, or null if none found.
*/
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 gets the object, can pass in the object or string, if the incoming string person gets the object in document.getElementById ()
* @id Get
* @param {String} el HTML element
* @return {Object} HtmlElement object.
*/
Get:function (EL) {
if (el & amp; amp; amp; & amp; amp; amp; (El.tagname | | el.item)) {
Return el;
}
Return This.getbyid (EL);
}
};
return DOM;
});

So the SayHello module can be written, in order not to affect the original demo page, so I set a new Sayhelloa module, we can write Sayhelloa.js:

Copy Code code as follows:

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 build dependencies on the module, such as the Sayhelloa module above, which relies on the DOM module, because the DOM module's Get method is used.
Notice the Var dom=require here ("Dom/dom"), which assigns the DOM module applied to the Dom;require ("Sayhelloa/sayhello.css") as a direct application sayhello.css CSS module, or file. This will refer to this CSS file on the page.

Recently these days have been churn seajs, the more pounded vault like, thank Yuber! Thank seajs! Of course you might think that a few examples of such a simple need not be done. It is true that if the JS file less small items feel good modular advantages, but more in the JS file or more medium-sized projects This modular advantage is reflected.