Analysis on seaJs module definition and module loading _ Seajs

This article mainly introduces the module definition and module Loading Analysis of seaJs, as well as the dependencies between modules, for more information, see SeaJS, a module loading framework developed by yuber that complies with CommonJS specifications. It can be used to easily load arbitrary JavaScript modules and css module styles. SeaJS is very small and small. It is only 4 kb after compression and gzip, and there are very few interfaces and Methods. SeaJS has two cores: module definition and module loading and dependency. SeaJS is very powerful. SeaJS can load arbitrary JavaScript modules and css module styles. SeaJS will ensure that you have loaded other dependent modules into the script runtime environment when using a module. According to YU Bo, SeaJS allows you to enjoy the fun of writing code without worrying about loading problems. Do you get tired of so many js and css references? I have counted 39 css and js references on the homepage of my company website, and the impact can be imagined:

1. It is not conducive to maintenance, and the frontend and backend are all the same
2. there are too many http requests. Of course, this can be solved through merging. However, if no backend is directly merged, the labor cost is very high. Even if the backend is merged and maintained, such a long string will definitely be worth your attention.

Using SeaJS can solve these problems very well.

Module definition define

Defining a module is relatively simple. For example, defining a sayHello module and creating a sayHello. js document:

The Code is as follows:

Define (function (require, exports, module ){
Exports. sayHello = function (eleID, text ){
Document. getElementById (eleID). innerHTML = text;
};
});

Here, let's take a look at the exports parameter. The exports parameter is used to provide the API of the external module, that is, the sayHello method can be accessed through other modules of this exports.

Module loading use

For example, if there is an element with the id "out" on our page, we need to output "Hello SeaJS !",
Then we can first introduce sea. js
Then use the sayHello module:

The Code is as follows:

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

Here, use is the method of using the module:

The first parameter is the module representation, which is relative to the sea. the relative path of js, sayHello. ". js "suffix can be omitted, of course, there are many methods to identify this module, see the official instructions: http://seajs.com/docs/zh-cn/module-identifier.html
The first parameter is a callback function. Say. sayHello () is to call the exports. sayHello method of the sayHello module. Of course, this callback function has a say parameter.

Module dependency

The module dependency should actually exist when the module is defined. For example, rewrite the above sayHello module. Suppose we already have a common DOM module, such as some methods for getting elements and setting styles. For example, write the DOM as follows for such a DOM module. js

The Code is as follows:

Define (function (require, exports, module ){
Var DOM = {
/**
* Get the DOM object using the element id attribute. The parameter 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 an object. You can pass in an object or a string. If the string is passed in, the object is obtained using document. getElementById ().
* @ Id get
* @ Param {String} el html element
* @ Return {Object} HTMLElement object.
*/
Get: function (el ){
If (el & amp; (el. tagName | el. item )){
Return el;
}
Return this. getById (el );
}
};
Return DOM;
});

The sayHello module can be written in this way. In order not to affect the original demo page, I have set a new sayHelloA module. We can write sayHelloA. js as follows:

The Code is as follows:

Define (function (require, exports, module ){
Var DOM = require ("DOM/DOM ");
Require ("sayHelloA/sayHello.css? 1.1.9 ");
Exports. sayHello = function (eleID, text ){
DOM. get (eleID). innerHTML = text;
};
});

The require function is used to establish the dependency between modules. For example, the preceding sayHelloA module depends on the DOM module because the get method of the DOM module is used.
Note the var DOM = require ("DOM/DOM") Here. This sentence assigns the applied DOM module to DOM; require ("sayHelloA/sayHello.css? 1.1.9 "outputs is a direct application of the sayhello.css module or file. In this way, the css file will be referenced on the page.

I have been playing SeaJS for the past few days. I like it more and more. Thank you! Thank you SeaJS! Of course, you may think that this is not necessary for a few simple instances. It is true that if there are few js files for small projects, the modular advantage is good. However, the modular advantage of many js files or medium-sized projects is shown.