Modular management of front-end code using Mini-define

This article mainly introduces the use of mini-define implementation of the front-end code of the modular management, a very good article, which is recommended for small partners in need.

Mini-define

A simple front-end modular framework based on the require implementation. If you do not want to take the time to learn require.js, do not want to look at the long CMD/AMD specifications, then this mini-define is your good choice. If you've used Sea.js or require.js before, then mini-define is more efficient, lighter and easier to use. Project Address: GitHub

Usage

Define the module first

Defining modules

One: Define module with define function

1.1 Depending on whether there are dependencies, there are two situations:

1.1.1: Modules that are not dependent

    Define (' id ',function() {            //  put your codehere        });

1.1.2: Dependent modules

  Define (' id ', [' Modea ', ' modeb '],function(A, b            ) {//  put your codehere        });

1.2 Depending on whether or not you need to return processing results to external use, you can divide into two situations:

1.2.1 has a return object:

Define (' id ',function() {                return  {                    //  put your code here                }            });

1.2.2 No object returned

   Define (' id ',function() {                //  put your codehere            });

Two: Call module with require () function

2.1 Depending on the number of modules requested, there are two possible scenarios:

2.1.1. Invoking a single module

Require (' Modeid ')

2.1.2. Calling multiple modules
Require ([' Modea ', ' modeb ']);
2.2 Depending on whether there are callback processing, can be divided into two situations:

2.2.1 has callback handler function

  Require (' Modeid ',function(mode) {                //put your codehere            });            Require ([' Modea ', ' modeb '],function(A, b                ) {//put your code here            });

.2.2 No callback handling
Require (' Modeid ');
Then, in the Index.html page, refer to the required modules in turn

!--Core Module--><script src= "Lib/core/require.js" ></script><!--module for demonstration--><script src= "lib/ Main.js "></script><script src=" lib/config.js "></script><script src=" Lib/init.js ">< /script>

The last is to merge and compress the Lib directory in the way you like, generating a min.js file. When releasing the application, the corresponding index.html also needs to be adjusted:

<script src= "Lib/min.js" ></script>

Modular management of front-end code using Mini-define