SeaJS is a module loading framework developed by Yubo that follows the CommonJS specification, which can be used to easily and happily load any JavaScript module and css module styles. SeaJS is very small, because the volume after compression and gzip is only 4K, and the interfaces and methods are also very small. SeaJS has two cores: module definition and module loading and dependencies. SeaJS is very powerful. SeaJS can load any JavaScript module and css module style. SeaJS will ensure that when you use a module, you have loaded other modules you depend on into the script running environment. Yu Bo said that SeaJS can allow you to enjoy the fun of writing code without worrying about loading issues. Are you tired of so many js and css references? I counted the 39 css and js references on the homepage of our company website. The impact it has can be imagined:
1. Not conducive to maintenance, front-end and back-end are the same
2. There are too many http requests. Of course, this can be solved through merge, but if there is no backend directly merge, the labor cost is very high. Even if the backend merges and maintains it, such a long string will definitely look at it.
Using SeaJS can solve these problems very well.
Definition of module
Defining a module is simpler. For example, defining a sayHello module and creating a sayHello.js document:
The code copy is as follows:
define(function(require,exports,module){
exports.sayHello = function(eleID,text) {
document.getElementById(eleID).innerHTML=text;
};
});
Let’s first look at the exports parameter. The exports parameter is used to provide the module API. That is, other modules of this exports can access the sayHello method.
Module loading use
For example, there is an element on our page with id "out" and we want to output "Hello SeaJS!",
Then we can introduce sea.js first
Then use the sayHello module:
The code copy is as follows:
seajs.use("sayHello/sayHello",function(say){
say.sayHello("out","Hello SeaJS!");
});
Here the use is the method of using modules:
The first parameter is the module representation, which is represented by the relative path relative to sea.js. The ".js" suffix after saysHello.js can be omitted. Of course, there are many methods for identifying this module. For details, please check the official description: 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. Of course, there is a say parameter in this callback function.
Module dependencies
Module dependencies should actually exist when modules are defined. For example, rewrite the sayHello module above. Suppose we already have a general DOM module, such as some methods such as obtaining elements, setting styles, etc., such as such a DOM module, write DOM.js as follows
The code copy is as follows:
define(function(require, exports, module) {
var DOM = {
/**
* Get the DOM object through the id attribute of the element, the parameters are strings, 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, you can pass in an object or a string. If the string is passed in, the object is obtained in the form of document.getElementById()
* @id get
* @param {String} el html element
* @return {Object} HTMLElement object.
*/
get: function(el) {
if (el & amp; amp; & amp; amp; (el.tagName || el.item)) {
return el;
}
return this.getById(el);
}
};
return DOM;
});
Then the sayHello module can be written like this. In order not to affect the original demo page, I set a new sayHelloA module. We can write sayHelloA.js like this:
The code copy is 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 establish the dependencies of the module. For example, the sayHelloA module above depends on the DOM module because the get method of the DOM module is used.
Note that var DOM=require("DOM/DOM") here, this sentence assigns the applied DOM module to the DOM; require("sayHelloA/sayHello.css") directly applies the sayHello.css css module or file. This will refer to the css file on the page.
I have been making trouble with SeaJS in recent days. The more I make trouble with it, the more I like it. Thank you Yu Bo! Thanks SeaJS! Of course you may think that there is no need to do this with such a simple example. Indeed, if small projects with fewer js files feel good about modular advantages, but more modular advantages are reflected in the number of js files or medium or above projects.