Fastadmin 如何引入 layui 模塊

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 后台文件在 require-backend.js 或 backend-init.js 對應的文件，定義插件的名稱和依賴。

其中 require-frontend.js 和 require-backend.js 是官方自己的寫好的依賴和插件。而打開 frontend-init.js 和 backend-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.js或backend-init.js文件，在部署到生產環境前需要使用php think min -m all -r all壓縮打包一下JS和CSS文件