FastAdmin中RequireJs是如何调用的

模块化

---

1. Fastadmin中的js文件是通过RequireJs模块化工具来引入和调用的，每个控制器都对应一个js模块，控制器名称和js中模块名称是一一对应的 。

2. 因此要引入JS文件，需要在index.html页面使用script标签引入require.js框架文件，并指定data-main属性为自己的JS的总入口文件。然后浏览器就会加载require.js，而requirejs会帮我们自动加载main.js。

<!-- data-main是script标签里的一个属性，用来指定require.js加载的第一个js文件，也就是总入口文件。这个属性可以让require.js知道项目的根路径，也可以在这个文件中定义需要加载的其他模块和回调函数；表示require.js会先加载/public/assets/js/my.js文件，并把/public/assets/js/作为根路径。 -->
<script src="/public/assets/js/require.js" data-main="/public/assets/js/backend/auth/admin"></script>

项目的入口js就是require-backend.js

如何使用自定义js或第三方js

---

• 引用第三方库

1. 然后在my.js文件中配置各个模块的路径和依赖关系，并使用require函数加载需要的模块

require.config({      //：调用RequireJS的配置方法，用于设置模块加载器的相关参数。
    baseUrl: "/public/assets/js/",      //设置模块的基准路径，用于加载模块的资源文件。
    paths: {      //设置模块的路径别名，用于在模块中引用其他模块的时候使用。
        'jquery': 'jquery.min',      //将jquery模块设置为jquery.min文件。
        'bootstrap': 'bootstrap.min',  //将bootstrap模块设置为bootstrap.min文件。
        'backend': 'backend'      //将backend模块设置为backend文件。
    },
    shim: {  //设置非AMD规范的模块和依赖关系之间的转换关系。
        'bootstrap': ['jquery']  //将bootstrap模块和jquery模块之间建立依赖关系，表示在加载bootstrap模块之前需要先加载jquery模块。
    },
    charset: 'utf-8' // 文件编码
});
require(['jquery', 'bootstrap', 'backend'], function ($, undefined, Backend) {
    回调函数
    function hello() {
        console.log('一天吃十斤水蜜桃！');
    }
    hello()
});

1. AMD (Asynchronous Module Definition) 是一种 JavaScript 模块化规范，它要求模块必须按照一定的格式编写，包括使用 define 函数定义模块、使用 require 函数引入模块等。而有些库或插件并不符合 AMD 规范，它们可能是以全局变量的形式暴露出来的，或者是依赖于其他全局变量。在这种情况下，我们需要使用 RequireJS 提供的 shim 配置选项来表示模块之间的依赖关系

2. 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定义一个模块：

//define有三个参数，第一个是模块名（可以不写，默认与模块名与文件名同名），第二个是当前模块依赖的其他模块，第三个是一个function，模块体，要求必须return一个数据
define('modelname',['jquery','xxx'], function ($,xxx) {

    var Controller = {
        index: function () {

        },
        add: function () {

        },
        edit: function () {

        }
    };
    return Controller;
});

• 那么index，add，edit等页面对应的js代码是如何被执行的?查看require-backend.js文件

• 其中，require() 函数用于加载模块，第一个参数是一个数组，用于指定要加载的模块的名称或路径；第二个参数是一个回调函数，在指定的模块都加载完成后执行，将加载的模块作为参数传递给回调函数。在加载模块的过程中，如果出现错误，则会执行第三个参数指定的回调函数，可以在该回调函数中进行错误处理。

• 初始化这段代码主要是异步加载 fast 模块，将其作为回调函数 Fast 的参数。

• 在 fast 模块加载完成后，异步加载 backend、backend-init 和 addons 模块，将它们作为回调函数 Backend、undefined 和 Addons 的参数。

• 判断 Config.jsname 是否存在，如果存在则异步加载指定模块（Config.jsname）并执行其中的指定函数（Config.actionname），如果模块中存在该函数，则执行该函数，否则执行模块中的 _empty() 函数。如果加载模块出错，则会在控制台输出错误信息。

• 如果 Config.jsname 不存在，则不执行任何操作。

• 通过Ajax无刷新技术与控制器进行数据交互

通过Ajax无刷新技术与控制器进行数据交互

---

• fastadmin中的js文件可以通过Ajax无刷新技术与控制器进行数据交互，也可以通过Fast.api.open方法打开一个新窗口并传递参数给控制器

//在js文件中定义一个Ajax请求
$.ajax({
    url: "index.php/admin/index/test", //请求的控制器地址
    type: "post", //请求的方式
    data: {name: "张三", age: 18}, //请求的参数
    dataType: "json", //返回的数据类型
    success: function (data) { //请求成功的回调函数
        console.log(data); //打印返回的数据
    },
    error: function (xhr) { //请求失败的回调函数
        console.log(xhr); //打印错误信息
    }
});
//在控制器中接收参数并返回数据
public function test()
{
    $name = $this->request->post('name'); //获取name参数
    $age = $this->request->post('age'); //获取age参数
    return json(['status' => 'success', 'message' => 'Hello, ' . $name . ', you are ' . $age . ' years old.']); //返回json格式的数据
}

• 通过Fast.api.open方法打开一个新窗口并传递参数给控制器

//在js文件中定义一个Fast.api.open方法，打开一个新窗口，并传递id参数给控制器
Fast.api.open("index.php/admin/index/detail?id=" + row.id, "详情");
//在控制器中接收参数并渲染视图
public function detail()
{
    $id = $this->request->get('id'); //获取id参数
    $row = Db::name('user')->where('id', $id)->find(); //根据id查询用户信息
    if (!$row) {
        $this->error(__('No Results were found'));
    }
    $this->view->assign("row", $row); //将用户信息分配给视图变量row 
    return $this->view->fetch(); //渲染视图detail.html，并显示用户信息 
}