全局JS

优质

小牛编辑

144浏览

2023-12-01

在FastAdmin插件开发中会经常在全局载入JS或JS插件。FastAdmin基于RequireJS进行模块化加载JS，因此插件如需使用到JS必须基于RequierJS进行开发。

启动方式

FastAdmin在安装、禁止、启用、卸载插件时会读取所有正常状态下的插件目录下的bootstrap.js，并将他们的代码合并成一个addons.js文件，路径位于/public/assets/js/addons.js。因此我们不能直接修改addons.js这个文件，因为一旦我们在插件管理中对任何一个插件状态进行变量，这个addons.js文件内容就会被重写。

插件目录下的bootstrap.js这个文件是插件的启动文件，你可以在此编写插件核心JS或注册事件，在此JS中可以使用RequireJS依赖其它模块。同时在此插件中可以使用Fast、Backend、Lang等全局对象，因为在此之前此类对象已经加载且注册。

基本示例

以下代码将为你演示加载多个外部JS插件的方法。

require.config({
    paths: {
        'jquery-colorpicker': '../addons/mydemo/js/jquery.colorpicker.min',
        'jquery-autocomplete': '../addons/mydemo/js/jquery.autocomplete',
        'jquery-tagsinput': '../addons/mydemo/js/jquery.tagsinput',
    },
    shim: {
        'jquery-colorpicker': {
            deps: ['jquery'],
            exports: '$.fn.extend'
        },
        'jquery-autocomplete': {
            deps: ['jquery'],
            exports: '$.fn.extend'
        },
        'jquery-tagsinput': {
            deps: ['jquery', 'jquery-autocomplete', 'css!../addons/cms/css/jquery.tagsinput.min.css'],
            exports: '$.fn.extend'
        }
    }
});
require(['fast', 'template', 'jquery-colorpicker'], function(Fast, Template, undefined){
    //插件逻辑代码
    $('.colorpicker').colorpicker({
        color: "#000000"
    });
});

我们可以通过上方插件的依赖和映射关系，然后使用require进行模块载入。

动态配置值

如果我们需要在JS中使用插件管理配置中的动态配置值，此时我们可以通过行为事件来渲染。
首先我们打开addons/mydemo/Mydemo.php文件，在类最后添加一个configInit方法，如下

/**
 * @param $params
 */
public function configInit(&$params)
{
    $config = $this->getConfig();
    $params['mydemo'] = ['usernmae' => $config['usernmae']];
}

清空后台右上角缓存后，然后我们即可在JS中通过以下代码

Config.mydemo.username

来获取服务端username的值。

外部JS

如果我们需要引入外部JS或CSS文件，我们需要在插件目录创建一个assets资源目录，assets这个文件夹很关键，FastAdmin会将assets中的所有文件夹和文件复制到/public/assets/addons/mydemo/文件夹中去。

这个mydemo即是我们的插件目录名称，assets文件夹中的所有文件不会进行文件冲突检测，/public/assets/addons/mydemo/这个目录下的文件，我们在视图文件中可以直接通过__ADDON__指向这个路径。因此在开发视图时我们可以先使用相对路径设计，完成后我们再统一加上这个__ADDON__的前缀。

例如我们在HTML视图中使用

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>FastAdmin</title>
        <link href="__ADDON__/css/common.css" rel="stylesheet">
    </head>
    <body>
        <script src="__ADDON__/js/jquery.tagsinput"></script>
    </body>
</html>

最后生成的HTML会是如下结果

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>FastAdmin</title>
        <link href="/assets/addons/mydemo/css/common.css" rel="stylesheet">
    </head>
    <body>
        <script src="/assets/addons/mydemo/js/jquery.tagsinput"></script>
    </body>
</html>

特别提醒

不要直接使用/public/assets/addons/mydemo目录中的JS或CSS文件，因为此目录中的内容会在插件重新启用后被覆盖，正确的做法是修改/addons/mydemo/assets/目录中的JS和CSS，然后再重新启用插件即可生效。
在生产环境下浏览器会缓存/public/assets/js/addons.js文件，如果发现功能不生效。请注意清除浏览器缓存。