FastAdmin引入自定义JS

1.模块化

一般我们引入js是这样：

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

RequireJs是模块化工具，每一个我们自己的js文件或者库都可以看成是一个模块，按需引入。

它是这样写的：

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

src是引入requrejs框架文件，data-main是我们自己的js的总入口。js/main对应的js文件是js/main.js（可自行命名）

引用第三方库

使用requre.config({}) 配置模块，如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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依赖配置
    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' // 文件编码
});

config中paths用来配置支持AMD规范的库和js文件，shim是用来配不支持AMD规范的js。配好之后，假设现在要使用jquery和bootstrap，只要用require方法：

require([‘jquery’, ‘bootstrap’], function ($, undefined) { //该function将在引入jquery和bootstrap完成之后执行。 });

引用自定义js

在fastadmin中，我们并没有使用config配置我们自己写的js，如后台某个类增改查方法所在的js文件，是不是很好奇是怎么被调用到的？

前面说了requirejs是模块化工具，要使用我们自己定义的js，首先得用模块化的方式编写我们的js，使用define定义一个模块：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
define('modelname',['jquery','xxx'], function ($,xxx) {

    var hehe = {
        function1: function () {
            
        },
        function2: function () {
            
        },
        function3: function () {
            
        }
    };
    return hehe;
});

define有三个参数，第一个是模块名（可以不写，默认与模块名与文件名同名），第二个是当前模块依赖的其他模块，第三个是一个function，模块体，要求必须return一个数据。

在这里我们return了hehe这个对象，这个对象中定义了好几个function，不信你瞅瞅fastadmin里面的js是不是都是这样写的。

等价代码

1
2
3
4
5
6
7
8
9
10
11
require jquery.php
require xxx.php

class hehe{
    public function function1(){

    }
    public function function2(){

    }
}

那么我们在其他地方就可以使用这个模块：

1
2
3
4
5
6
require(['jquery', 'hehe'], function ($, hehe) {
    //调用hehe模块提供的方法
    hehe.function1();
    hehe.function2();
    hehe.function3();
});

这段代码如果也用php的思维来理解，你可以看作是：

1
2
3
4
5
6
require jquery.php;
reuqire hehe.php

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

require-backend.js

总结

  1. 自定义js，要使用define，并在function体中return
  2. 调用其他js，使用require(),并在function体中编写业务代码
  3. require-backend.js中根据当前控制器名和方法名自动帮我们调用了对应的js文件和其中的方法