我使用的是LayUI做前端框架，原因很简单，网上现成代码，上手简单，自由度高，效果齐全，就官网的文档还是不够好，很多好东西都没列出来，要靠自己挖掘。
现在我准备用官网的iframe版做个管理系统后台，之前已经写过一个单页版的，需求分析已经写好，页面大概50页，8个功能模块，1个公共模块，1个登录。
看代码前，先记录一下页面3个基本方法：layui.config、layui.extend、layui.define
layui.config：初始化配置，可以把固定js，主题和use需要的扩展模块都包含进来。（目前就觉得有这个做法）
layui.extend：指定自己定义的js文件，这js需要写成layui模块的才能调用。
layui.define：引用自己的组件，也能使用官方的组件，跟layui.use有点像
再提一点，官方建议线上调用layer.all.js，可以免去调用组件，直接使用。听起来不错。
好了，下面是代码部分：
html代码，页面
<!--head--> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> <link rel="stylesheet" href="/scripts/layui/css/layui.css" media="all"> <link rel="stylesheet" href="/scripts/layui/admin.css" media="all">
<!--js调用，要写在body底下，不然效果无效 --> <script src="/scripts/layui/layui.all.js"></script> <script> layui.config ({ base: '/scripts/'//根目录 }).extend({ index: 'lib/index',//主入口
my:'../my' }).use('index');
layui.use(['my'], function (e)
{
console.log(layui.my.Name)
})
</script>
<!--body--> <body class="layui-layout-body"> <div id="LAY_app"> <div class="layui-layout layui-layout-admin"> <div class="layui-header"> <!-- 头部区域 --> <ul class="layui-nav layui-layout-left"> <li class="layui-nav-item layadmin-flexible" lay-unselect> <a href="javascript:;" layadmin-event="flexible" title="侧边伸缩"> <i class="layui-icon layui-icon-shrink-right" id="LAY_app_flexible"></i> </a> </li> <li class="layui-nav-item layui-hide-xs" lay-unselect> <a href="http://www.layui.com/admin/" target="_blank" title="前台"> <i class="layui-icon layui-icon-website"></i> </a> </li> <li class="layui-nav-item" lay-unselect> <a href="javascript:;" layadmin-event="refresh" title="刷新"> <i class="layui-icon layui-icon-refresh-3"></i> </a> </li> <li class="layui-nav-item layui-hide-xs" lay-unselect> <input type="text" placeholder="搜索..." autocomplete="off" class="layui-input layui-input-search" layadmin-event="serach" lay-action="template/search.html?keywords="> </li> </ul> <ul class="layui-nav layui-layout-right" lay-filter="layadmin-layout-right"> <li class="layui-nav-item" lay-unselect> <a lay-href="app/message/index.html" layadmin-event="message" lay-text="消息中心"> <i class="layui-icon layui-icon-notice"></i> <!-- 如果有新消息，则显示小圆点 --> <span class="layui-badge-dot"></span> </a> </li> <li class="layui-nav-item layui-hide-xs" lay-unselect> <a href="javascript:;" layadmin-event="theme"> <i class="layui-icon layui-icon-theme"></i> </a> </li> <li class="layui-nav-item layui-hide-xs" lay-unselect> <a href="javascript:;" layadmin-event="note"> <i class="layui-icon layui-icon-note"></i> </a> </li> <li class="layui-nav-item layui-hide-xs" lay-unselect> <a href="javascript:;" layadmin-event="fullscreen"> <i class="layui-icon layui-icon-screen-full"></i> </a> </li> <li class="layui-nav-item" lay-unselect> <a href="javascript:;"> <cite>贤心</cite> </a> <dl class="layui-nav-child"> <dd><a lay-href="set/user/info.html">基本资料</a></dd> <dd><a lay-href="set/user/password.html">修改密码</a></dd> <hr> <dd layadmin-event="logout" style="text-align: center;"><a>退出</a></dd> </dl> </li> <li class="layui-nav-item layui-hide-xs" lay-unselect> <a href="javascript:;" layadmin-event="about"><i class="layui-icon layui-icon-more-vertical"></i></a> </li> <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-unselect> <a href="javascript:;" layadmin-event="more"><i class="layui-icon layui-icon-more-vertical"></i></a> </li> </ul> </div> <!-- 侧边菜单 --> <div class="layui-side layui-side-menu"> <div class="layui-side-scroll"> <div class="layui-logo" lay-href="home/console.html"> <span>layuiAdmin</span> </div> <ul class="layui-nav layui-nav-tree" lay-shrink="all" id="LAY-system-side-menu" lay-filter="layadmin-system-side-menu"> <li data-name="home" class="layui-nav-item layui-nav-itemed"> <a href="javascript:;" lay-tips="主页" lay-direction="2"> <i class="layui-icon layui-icon-home"></i> <cite>主页</cite> </a> <dl class="layui-nav-child"> <dd data-name="console" class="layui-this"> <a lay-href="home/console.html">我的资料</a> </dd> <dd data-name="console"> <a lay-href="home/homepage1.html">主页一</a> </dd> <dd data-name="console"> <a lay-href="home/homepage2.html">主页二</a> </dd> </dl> </li> <li data-name="component" class="layui-nav-item"> <a href="javascript:;" lay-tips="组件" lay-direction="2"> <i class="layui-icon layui-icon-component"></i> <cite>组件</cite> </a> <dl class="layui-nav-child"> <dd data-name="grid"> <a href="javascript:;">栅格</a> <dl class="layui-nav-child"> <dd data-name="list"><a lay-href="component/grid/list.html">等比例列表排列</a></dd> <dd data-name="mobile"><a lay-href="component/grid/mobile.html">按移动端排列</a></dd> <dd data-name="mobile-pc"><a lay-href="component/grid/mobile-pc.html">移动桌面端组合</a></dd> <dd data-name="all"><a lay-href="component/grid/all.html">全端复杂组合</a></dd> <dd data-name="stack"><a lay-href="component/grid/stack.html">低于桌面堆叠排列</a></dd> <dd data-name="speed-dial"><a lay-href="component/grid/speed-dial.html">九宫格</a></dd> </dl> </dd> <dd data-name="button"> <a lay-href="component/button/index.html">按钮</a> </dd> <dd data-name="form"> <a href="javascript:;">表单</a> <dl class="layui-nav-child"> <dd><a lay-href="component/form/element.html">表单元素</a></dd> <dd><a lay-href="component/form/group.html">表单组合</a></dd> </dl> </dd> <dd data-name="nav"> <a lay-href="component/nav/index.html">导航</a> </dd> <dd data-name="upload"> <a href="javascript:;">上传</a> <dl class="layui-nav-child"> <dd data-name="demo1"> <a lay-href="component/upload/demo1.html" lay-text="上传功能演示一">功能演示一</a> </dd> <dd data-name="demo2"> <a lay-href="component/upload/demo2.html" lay-text="上传功能演示二">功能演示二</a> </dd> </dl> </dd> </dl> </li> <li data-name="template" class="layui-nav-item"> <a href="javascript:;" lay-tips="页面" lay-direction="2"> <i class="layui-icon layui-icon-template"></i> <cite>内容</cite> </a> <dl class="layui-nav-child"> <dd><a lay-href="template/personalpage.html">个人主页</a></dd> <dd><a lay-href="template/addresslist.html">通讯录</a></dd> <dd><a lay-href="template/caller.html">客户列表</a></dd> <dd><a lay-href="template/goodslist.html">商品列表</a></dd> <dd><a lay-href="template/msgboard.html">留言板</a></dd> <dd><a lay-href="template/search.html">搜索结果</a></dd> <dd><a href="user/reg.html" target="_blank">注册</a></dd> <dd><a href="user/login.html" target="_blank">登入</a></dd> <dd><a href="user/forget.html" target="_blank">忘记密码</a></dd> <dd><a lay-href="template/tips/404.html">404页面不存在</a></dd> <dd><a lay-href="template/tips/error.html">错误提示</a></dd> <dd><a lay-href="//www.baidu.com/">百度一下</a></dd> <dd><a lay-href="//www.layui.com/">layui官网</a></dd> <dd><a lay-href="//www.layui.com/admin/">layuiAdmin官网</a></dd> </dl> </li> </ul> </div> </div> <!-- 页面标签 --> <div class="layadmin-pagetabs" id="LAY_app_tabs"> <div class="layui-icon layadmin-tabs-control layui-icon-prev" layadmin-event="leftPage"></div> <div class="layui-icon layadmin-tabs-control layui-icon-next" layadmin-event="rightPage"></div> <div class="layui-icon layadmin-tabs-control layui-icon-down"> <ul class="layui-nav layadmin-tabs-select" lay-filter="layadmin-pagetabs-nav"> <li class="layui-nav-item" lay-unselect> <a href="javascript:;"></a> <dl class="layui-nav-child layui-anim-fadein"> <dd layadmin-event="closeThisTabs"><a href="javascript:;">关闭当前标签页</a></dd> <dd layadmin-event="closeOtherTabs"><a href="javascript:;">关闭其它标签页</a></dd> <dd layadmin-event="closeAllTabs"><a href="javascript:;">关闭全部标签页</a></dd> </dl> </li> </ul> </div> <div class="layui-tab" lay-unauto lay-allowClose="true" lay-filter="layadmin-layout-tabs"> <ul class="layui-tab-title" id="LAY_app_tabsheader"> <li lay-id="home/console.html" lay-attr="home/console.html" class="layui-this"><i class="layui-icon layui-icon-home"></i></li> </ul> </div> </div> <!-- 主体内容 --> <div class="layui-body" id="LAY_app_body"> <div class="layadmin-tabsbody-item layui-show"> <iframe src="home/console.html" frameborder="0" class="layadmin-iframe"></iframe> </div> </div> <!-- 辅助元素，一般用于移动设备下遮罩 --> <div class="layadmin-body-shade" layadmin-event="shade"></div> </div> </div> </body>
my.js
layui.define('layer', function (exports)
{
var obj = {
Name : '一个模块'
}
exports('my', obj);
});