A brief analysis of module definition and module loading of seaJs_Seajs

SeaJS is a module loading framework developed by Yubo that follows the CommonJS specification and can be used to easily and happily load any JavaScript module and CSS module style. SeaJS is very small. The small size lies in the fact that the size after compression and gzip is only 4K, and there are very few interfaces and methods. 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, other modules it depends on have been loaded into the script running environment. According to Uncle Yu, SeaJS allows you to 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 39 css and js references on the personal homepage of our company website. The impact can be imagined:

1. Not conducive to maintenance, the front end and back end are the same
2. There are too many http requests. Of course, this can be solved by merging, but if there is no direct merging of the back end, the labor cost will be very high. Even if the back end is merged, maintenance , such a long string must be confusing to the eyes

SeaJS can solve these problems very well.

Module definition define

It is relatively simple to define a module, for example, define a sayHello module and create a sayHello.js document:

Copy the code The code is 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 first. The exports parameter is used to provide the API of the module to the outside world. That is, other modules can access sayHello through this exports method.

Module loading use

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

Copy code The code is 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 representation, which is represented by the relative path relative to sea.js. The ".js" suffix after sayHello.js can be omitted. Of course, there are many ways to identify this module. Please check the official instructions for details. ：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, there is a say parameter in the callback function.

Module dependencies

Module dependencies should actually exist when the module is defined. For example, let's rewrite the above sayHello module. Suppose we already have a general DOM module, such as some methods of obtaining elements, setting styles, etc. For example, for such a DOM module, write DOM.js as follows

Copy code The code is as follows:

define(function(require, exports, module) {
    var DOM = {
        /**
* Get the DOM object through the id attribute of the element, 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 the object, you can pass in an object or a string, if the string is passed in, the object is obtained by 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;
});

那么sayHello模块可以这样编写，为了不影响原来的demo页面，所以我定一个新的sayHelloA模块，我们可以这样编写sayHelloA.js:

复制代码 代码如下:

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

require 函数就是用来建立模块的依赖关系，比如上面sayHelloA模块，就是依赖于DOM模块，因为用到了DOM模块的get方法。
注意这里的var DOM=require("DOM/DOM")，这句是将应用进来的DOM模块赋值给DOM；require("sayHelloA/sayHello.css")是直接应用sayHello.css css模块或者说文件。这样页面上会引用这个css文件。

最近这几天一直捣腾SeaJS，越捣腾越喜欢，感谢玉伯！感谢SeaJS！当然你可能觉得这么简单的几个实例没必要这么做。确实如果js文件少的小项目感觉不错模块化的优势，但是，更多的在js文件多或着中型以上项目这个模块化的优势就体现出来了。