mini-define
A simple front-end modular framework implemented based on require. If you don't want to spend time learning require.js, or look at 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, lighter and easier to use. Project address: github
usage
First define the module
Define modules
1: Use define function to define modules
1.1 Depending on whether there is a dependency, there are two situations:
1.1.1: Modules without dependencies
The code copy is as follows:
define('id',function(){
// put your code here
});
1.1.2: Dependency modules
The code copy is as follows:
define('id',['modeA','modeB'],function(A,B){
// put your code here
});
1.2 According to whether the processing results need to be returned for external use, there can be divided into two situations:
1.2.1 There is a return object:
The code copy is as follows:
define('id',function(){
return {
// put your code here
}
});
1.2.2 No object returned
The code copy is as follows:
define('id',function(){
// put your code here
});
Two: Use require() function to call the module
2.1 According to the number of requested modules, there can be two situations:
2.1.1. Calling a single module
require('modeId')
2.1.2. Calling multiple modules
require(['modeA','modeB']);
2.2 According to whether there is a callback processing, it can be divided into two situations:
2.2.1 There is a callback processing function
The code copy 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 refer to the required modules in turn on the index.html page
The code copy is as follows:
<!--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>
Finally, merge and compress the lib directory in the way you like to generate a min.js file. When publishing an application, the corresponding index.html also needs to be adjusted:
The code copy is as follows:
<script src="lib/min.js"></script>
advantage:
Compared with seajs.js or the original require.js, code with only a hundred lines of comments can be described as lightweight and looks fat, which is completely skinny.
There is no advanced content or complex skills at all, and there is almost zero learning cost.