当前博客:[WebUI系列]10.进一步轻量化layuimini框架

152 次浏览

博客作者:【汨酴】

个性签名:增强知识,努力学习

1.前面我们认识了layuimini,对其已有初步的认识,今天我们就进一步了解并轻量化框架.接下来内容可能有点生涩,语言不太好描述,大家多看图理解.

2.查看主页index.html,除了常规引用layui.css,layui.js外,还有这个

<script src="js/lay-config.js?v=2.0.0" charset="utf-8"></script>

其内容结构体如:

layui.config({
  base: '/res/js/' //假设这是你存放拓展模块的根目录
}).extend({ //设定模块别名
  mymod: 'mymod' //如果 mymod.js 是在根目录,也可以不用设定别名
  ,mod1: 'admin/mod1' //相对于上述 base 目录的子目录
});

这就是layui的模块扩展

3.简化lay-config.js

目前layuimini所扩展的模块并非全部我们项目所需要,所以我们只保留必须的,以后需要我们再进行扩展,保留必要的如下:

layui.config({
    base: rootPath + "lay-module/",
    version: true
}).extend({
    miniAdmin: "layuimini/miniAdmin", // layuimini后台扩展
    miniMenu: "layuimini/miniMenu", // layuimini菜单扩展
    miniTab: "layuimini/miniTab", // layuimini tab扩展
    miniTheme: "layuimini/miniTheme", // layuimini 主题扩展
});

同时删除相关文件或留存备用

4.简化index.html的js内容

修改后

<script>
        layui.use(['jquery', 'layer', 'miniAdmin'], function () {
            var $ = layui.jquery,
                layer = layui.layer,
                miniAdmin = layui.miniAdmin;

            var options = {
                iniUrl: "api/init.json",    // 初始化接口
                clearUrl: "api/clear.json", // 缓存清理接口
                urlHashLocation: true,      // 是否打开hash定位
                bgColorDefault: false,      // 主题默认配置
                multiModule: true,          // 是否开启多模块
                menuChildOpen: false,       // 是否默认展开菜单
                loadingTime: 0,             // 初始化加载时间
                pageAnim: true,             // iframe窗口动画
                maxTabNum: 20,              // 最大的tab打开数量
            };
            miniAdmin.render(options);

            $('.login-out').on("click", function () {
                layer.msg('退出登录成功', function () {
                    window.location = 'page/login-3.html';
                });
            });
        });
    </script>

5.简化后,资源请求明显减少,效率提高,见图

[WebUI系列]10.进一步轻量化layuimini框架