这里就运用到了大量的 layui.define，展示在 index.single.html，这里面我们配置了 layui 的cdn，配置了全局的 layui 参数，最后是我们所运用的业务脚本。
打开 layui.config.js，可以很清楚看到内容，这里面我本人定义了 2 个组件（注意这个称呼），它们是没有任何业务上的逻辑。所以我放在了 lib 文件夹，它是用了存放一些非业务公共的组件。因为会大量使用，所以我提前配置完毕。
而后我们会来到入口脚本 main.single.js，这里面使用了 layui 自身的模块 jquery，form，也使用了我刚刚定义的模块 logger 和 more，因为我不会导出给他人使用，所以使用的函数use 。而在其内部，我做了简单的测试逻辑。
接下来，你可能会发现还有 api，const，utils 在这里根本没用到，他们是做什么的呢。
api 故名思意就是为了提供与后台接口的处理，因为 layui 自带了 jquery，那么在与后台接口调用上我们采用 jquery.ajax，回调函数有时候是一些初学者的噩梦，所以我们采用 jquery的 deffer 对象，可以链式调用。
这里我没有封装 jquery.ajax 的，这样错误处理，token 携带没有统一的处理，无形会加载工作量，所以你需要补充封装 jquery.ajax 的接口才行，这里可以再次定义一个组件 layui.ajax.js
const 存放常量，这里配置了一个返回接口的关键字 response.js，当然这是为了模拟，如果前后台商量好，也可以直接在项目写死。
utils 存放工具类，我们常用的转换时间，转换url 都是可以写在这里的。
这 3 个文件夹是为了辅助其他业务页面而配置的，所以基本全部使用懒加载调用，它们以函数 define 开始，最后导出一个接口名，给外部调用。不同于lib 需要预先配置，在使用他们的时候，需要自己重新配置，这里以 utils 加载为例：
1 2 3 4 5 6 |
|
注意： 如果你使用ftl，jsp，apsx这些由后台渲染的页面引擎，应该会有一个公共的头部，那么刚刚的全局配置 layui 文件 layui.config.js，你可以在公共的头部加入。
以上就是layui项目中使用函数layui.define的方法介绍的详细内容，更多文章请关注木庄网络博客！
相关阅读 >>
更多相关阅读请进入《layui》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
