ModuleJS

Introduction

ModuleJS is a js module management compatible with CMD, AMD, UMD specifications.

File size

File name	File size	File description
module.min.js.zip	1.15k	js code compression + zip compression for production and operation environments with higher network requirements
module.min.js	2.4k	js code compression, used in production operations
module.js	7.3k	js source code, used for development and testing

define module

Define the module

define(function(){
    ...
})

Define the alias module

define("myModule.js",[],function(){
    ...
})

Export module

Return export module

define(function(){
    return ... //Return modules of any data type
})

exports export module

-Depends on exports export module by default

define(function(require, exports, module){
    exports.sayHello = ...
})

-Specify dependent exports to export modules

define(["exports"], function(exports){
    exports.sayHello = ...
})

module.exports export module

-The default export module depends on module.exports

define(function(require, exports, module){
    module.exports = ...
})

-Specify the dependent module.exports to export the module

define(["exports"], function(exports){
    module.exports = ...
})

Global variable export module

(
    (typeof window == "object" && window) ||
    (typeof global == "object" && global)
).myModule = ... //Export modules of any data type

Import module

Import modules synchronously

-Import a single module simultaneously

var myModule = require("myModule.js");

var myModule = require("myModule.js", false);

-Import multiple modules simultaneously

var myModule1 = require("myModule1.js");
var myModule2 = require("myModule2.js");

var myModule1 = require("myModule1.js", false);
var myModule2 = require("myModule2.js", false);

Import modules asynchronously

-Import a single module asynchronously

require("myModule.js", function(myModule){
    ...
})

var myModulePromise = require("myModule.js", true);
myModulePromise.then(function(myModule){
    ...
})

-Import multiple modules asynchronously

require(["myModule1.js"...], function(myModule1...){
    ...
})

var myModulesPromise = require(["myModule1.js"...], true);
myModulesPromise.then(function(modules){
    var myModule1 = modules[0];
    ...
})

Dependent module

Import dependent modules in advance

define(["dependentModule1.js"...], function(dependentModule1...){
    var mainModule = {
        subMudle1: dependentModule1
    };
    
    return mainModule;
})

Import the synchronization dependency module after the push

define(function(){
    var mainModule = {
        subMudle1: require("dependentModule1.js")
    };

    return mainModule;
})

Import asynchronous dependent modules after the push

define(function(){
    var mainModule = {};

    return require(["dependentModule1.js"...], function(dependentModule1...){
        mainModule.dependentModule1 = dependentModule1;
        return mainModule;
    })
})

AMD specification example

AMD specification refers to the asynchronous module definition (Asynchronous Module Definition), that is, the module is loaded asynchronously

AMD specification defines modules:

define(function(){

    return function(text){
        setTimeout(function(){
            document.body.innerText = text;
        }, 100);
    }

})

Code file: /example/print-amd-module.js

define(["print-amd-module.js"], function(print){

    return {
        sayHello:function()
        {
            print("Hi, the module defined by my AMD specification");
        }
    }

})

Code file: /example/hello-amd-module.js

Asynchronously load the modules defined by the AMD specification:

<html>
    <head>
        <script>
            require(["hello-amd-module.js"], function(helloAmdModule){
                helloAmdModule.sayHello();
            })
        </script>
    </head>
    <body>
        Loading asynchronous module...
    </body>
</html>

Code file: /example/async-load-amd-module-exmaple.html

CMD specification example

CMD specification refers to the Common Module Definition, that is, the module is loaded in a synchronous manner

CMD specification definition module:

define(function(require, exports, module){

    module.exports = function(text){
        setTimeout(function(){
            document.body.innerText = text;
        }, 100);
    }

})

Code file: /example/print-cmd-module.js

define(function(require, exports, module){
    
    exports.sayHello = function(){
        var print = require("print-cmd-module.js");
        print("Hi, the module defined by my CMD specification");
    }

})

Code file: /example/hello-cmd-module.js

Synchronously load the modules defined by the CMD specification:

<html>
    <head>
        <script>
            var helloAmdModule = require(["hello-cmd-module.js"]);
            helloAmdModule.sayHello();
        </script>
    </head>
    <body>
        Loading asynchronous module...
    </body>
</html>

Code file: /example/sync-load-cmd-module-exmaple.html

CMD specification example

((root, factory) => {
    if (typeof define === "function" && define.amd) {
        //AMD
        define(["dependentModule1", "dependentModule2"...], factory);
    } else if (typeof exports ==='object') {
        //CommonJS
        module.exports = factory(requie("dependentModule1"), requie("dependentModule2")...);
    } else {
        root.currentModule = factory(root.dependentModule1, root.dependentModule2);
    }
})(
    (typeof window == "object" && window) || (typeof global == "object" && global),
    (dependentModule1, dependentModule2...) => {
        //todo
    }
)

OSCHINA-MIRROR/silis-ModuleJS

ModuleJS

Introduction

File size

define module

Export module

Import module

Dependent module

AMD specification example

CMD specification example

CMD specification example

Комментарии ( 0 )

Введение

Обновления (4)

Участники (1)

Недавние действия

OSCHINA-MIRROR/silis-ModuleJS .gitee-modal { min-width: 500px !important; } .gitee-modal .close { right: 0.6rem !important; }

ModuleJS

Introduction

File size

define module

Export module

Import module

Dependent module

AMD specification example

CMD specification example

CMD specification example

Комментарии ( 0 )

Введение

Обновления (4)

Участники (1)

Недавние действия

OSCHINA-MIRROR/silis-ModuleJS