Modular management of front-end code using Mini-define

Source: Internet
Author: User
Tags define function

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.