Understand how RequireJs is called in FastAdmin

Modular

Generally we introduce js like this:

<script type="text/javascript" src="a.js"></script>
<script type="text/javascript" src="b.js"></script>

RequireJs is a modular tool, each of our own js files or libraries can be regarded as a module and imported on demand.

It is written like this:

<script data-main="js/main" src="js/require.js"></script>

src is the introduction of the requrejs framework file, and data-main is the general entry for our own js. The js file corresponding to js/main is js/main.js (you can name it yourself)

If you don't believe me, you can see if it is written like this in admin/view/common/script.html in fa.

Then the browser will load require.js, and requirejs will automatically load main.js for us.

So how do we introduce other js files? Such as self-written js and third-party js, such as jquery

How to use custom js or third party js

Referencing third-party libraries

Use requre.config({}) to configure the module, like:

require.config({
    paths: {
        'lang': "empty:",
        'form': 'require-form',
        'table': 'require-table',
        'upload': 'require-upload',
        'validator': 'require-validator',
        'drag': 'jquery.drag.min',
        'drop': 'jquery.drop.min',
        'echarts': 'echarts.min',
        'echarts-theme': 'echarts-theme',
        'jquery': '../libs/jquery/dist/jquery.min',

    },
    // shim dependency configuration
    shim: {
        'addons': ['backend'],
        'bootstrap': ['jquery'],
        'bootstrap-table': {
            deps: [
                'bootstrap',
// 'css!../libs/bootstrap-table/dist/bootstrap-table.min.css'
            ],
            exports: '$.fn.bootstrapTable'
        },
        'bootstrap-table-lang': {
            deps: ['bootstrap-table'],
            exports: '$.fn.bootstrapTable.defaults'
        },

    },
    map: {
        '*': {
            'css': '../libs/require-css/css.min'
        }
    },
    waitSeconds: 30,
    charset: 'utf-8' // file encoding
});

The paths in config are used to configure libraries and js files that support AMD specifications, and shim is used to configure js that do not support AMD specifications. After configuration, suppose you want to use jquery and bootstrap now, just use the require method:

require(['jquery', 'bootstrap'], function ($, undefined) {
    //This function will be executed after the introduction of jquery and bootstrap is completed.
});

Refer to the js written by yourself

In fastadmin, we did not use config to configure the js we wrote ourselves, such as the js file where the method of adding, changing and checking a certain class in the background is located. Are you curious about how it is called?

As mentioned earlier, requirejs is a modular tool. To use our own defined js, we must first write our js in a modular way, and use define to define a module:

define('modelname',['jquery','xxx'], function ($,xxx) {

    var hehe = {
        function1: function () {

        },
        function2: function () {

        },
        function3: function () {

        }
    };
    return hehe;
});

define has three parameters, the first is the module name (can not be written, the default is the same name as the module name and file name), the second is other modules that the current module depends on, and the third is a function, the module body, which must be returned a data

Here we return the hehe object. Several functions are defined in this object. If you don’t believe me, see if the js in fastadmin is written like this.

If the above code is understood in php, it can be seen as:

require jquery.php
require xxx.php

class hehe{
    public function function1(){

    }
    public function function2(){

    }
}

then we can use this module elsewhere

require(['jquery', 'hehe'], function ($, hehe) {
    //Call the method provided by the hehe module
    hehe.function1();
    hehe.function2();
    hehe.function3();
});

If this code is also understood in terms of php, you can see it as

require jquery.php;
reuqire hehe.php

hehe.function1();
hehe.function2();
hehe.function3();

At this time, some people must have doubts. When developing fastadmin, we did not call the method like hehe.function1();, so how is the js code corresponding to our index, add, edit and other pages executed?

Please look at the require-backend.js file

So we only need to write the corresponding js file, Karson boss helps us automatically call the corresponding js file and the corresponding js method according to the controller name and method name

How to understand requirejs in fastadmin

First look at admin/view/common/script.html, you will find that the entry js of the project is require-backend.js

Then look at require-backend.js, you will find some third-party modules configured with config. And at the end call the js corresponding to the current controller and method

Summarize

1. Write a js yourself, use define, and return in the function body
2. Call other js, use require(), and write business code in the function body
3. In require-backend.js, the corresponding js file and its methods are automatically called for us according to the current controller name and method name.