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 后台文件在 <code>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文件