Fastadmin引入Layui模块

转载地址:https://www.cnblogs.com/Jun-tutu/p/12173541.html

Fastadmin,PHP,Fastadmin引入layui模块,Fastadmin使用layui。

Fastadmin基于RequireJS进行JS模块的管理,因此如果我们需要再引入第三方JS插件,则必须按照RequireJS的规则进行载入。

​ 如果你还不了解什么是 RequireJS,可以先了解下 RequireJS,相关连接:http://www.ruanyifeng.com/blog/2012/11/require_js.html

​ FasrAdmin 前台文件在 require-frontend.js frontend-init.js 对应的文件,定义插件的名称和依赖。

​ FastAdmin 后台文件在 require-backend.jsbackend-init.js对应的文件,定义插件的名称和依赖。

​ 其中require-frontend.jsrequire-backend.js 是官方自己的写好的依赖和插件。而打开 frontend-init.jsbackend-init.js 我们可以发现是空白的。那正好用于我们自己编写,方便管理。

​ 接下来我们就在 backend-init.js中添加如下代码:

define(['backend'], function (Backend) {
    require.config({
        paths: {
            'layui': '../libs/layerui/layui/layui',
        },
        shim: {
            'layui':{
                deps:['css!../libs/layerui/layui/css/layui.css'],
                exports: "layui"
            },
        }
    });
});

​ 首尾两行是backend-init.js中自带的,重点是require.config这部分。

pahts内就是我们引入的js 模块名和路径。RequireJS 就是记载 js 文件的,所以定义到文件名即可 加载的文件 即是 ../libs/layerui/layui/layui.js

shim是依赖配置,layui 它的依赖为一个CSS文件。如果插件没有依赖,则可以不写此部分。

exports这个为输出的变量名,表示在模块外部调用时返回的值,比如:

require(['layui'], function(layui){
    //这里的layui的值就是layui这个变量的值
});

​ 在对应的js 文件中调用 layui 模块

define(['layui'], function (undefined) {
    var Controller = {
        index: function () {
            //正常使用 layui 模块 即可
            layui.use('laydate', function(){
                var laydate = layui.laydate;
            }
    }
}    

​ 就可以在对应的 js 文件中愉快的使用 layui 了。

​ 特别注意的是,如果我们修改了require-backend.jsbackend-init.js文件,在部署到生产环境前需要使用php think min -m all -r all压缩打包一下JS和CSS文件

posted @ 2022-09-02 22:35  YALSY  阅读(369)  评论(0编辑  收藏  举报