Use mini-define to implement modular management of front-end code

Use mini-define to implement modular management of front-end code_javascript skills

WBOY

Release： 2016-05-16 16:24:33

Original

1598 people have browsed it

mini-define

A simple front-end modular framework based on require. If you don't want to spend time learning require.js or read the long cmd/amd specifications, then this mini-define is a good choice for you. If you have used sea.js or require.js before, mini-define is more efficient, lightweight, and easier to use. Project address: github

Usage

First define the module

Define module

1: Use define function to define modules

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

1.1.1: Module without dependencies

Copy code The code is as follows:

          define('id',function(){

                      // put your code here

        });

1.1.2: Dependent modules

Copy code The code is as follows:

​​​​ define('id',['modeA','modeB'],function(A,B){

                      // put your code here

        });

1.2 Depending on whether the processing results need to be returned for external use, there are two situations:

1.2.1 has return object:

Copy code The code is as follows:

               define('id',function(){

                   return {

                                                    // put your code here

                }

            });

1.2.2 No object returned

Copy code The code is as follows:

               define('id',function(){

// put your code here

            });

Two: Call the module using the require() function

2.1 Depending on the number of modules requested, there can be two situations:

2.1.1. Calling a single module

require('modeId')

2.1.2. Call multiple modules
require(['modeA','modeB']);
2.2 Depending on whether there is callback processing, it can be divided into two situations:

2.2.1 There is a callback processing function

Copy code The code is as follows:

             require('modeId',function(mode){
                         //put your code here
            });

require(['modeA','modeB'],function(A,B){
//put your code here
});

2.2.2 No callback processing
require('modeId');
Then reference the required modules in sequence on the index.html page

Copy code The code is as follows:

The last step is to merge and compress the lib directories in your favorite way to generate a min.js file. When publishing the application, the corresponding index.html also needs to be adjusted:

Copy code The code is as follows:

Advantages:

Compared to seajs.js or the original require.js, a code that only has about a hundred lines of annotations looks fat and skinny to describe it as lightweight.
There is no advanced content at all, no complicated skills, and almost zero learning cost.