layui 模块化引入页面
时间: 2023-09-20 19:04:35 浏览: 106
layui官方文档 官网页面
要将Layui模块引入页面,需要在HTML文件中先引入Layui的JavaScript文件。可以通过以下CDN链接引入:
```html
<script src="https://cdn.staticfile.org/layui/2.5.7/layui.min.js"></script>
```
这是从CDN引入Layui的JavaScript文件,可以根据自己的需求修改链接。
然后,将需要的Layui模块封装成符合AMD规范的JavaScript模块,例如:
```javascript
// 定义模块名和依赖
define('mymodule', ['jquery'], function($){
// 执行模块代码
function sayHello(){
console.log('Hello World');
}
// 导出模块接口
exports('mymodule', {sayHello: sayHello});
});
```
在页面中,使用`layui.use`方法加载需要的模块,例如:
```html
<script>
layui.use('mymodule', function(){
var mymodule = layui.mymodule;
mymodule.sayHello();
});
</script>
```
在上述代码中,使用`layui.use`方法加载了`'mymodule'`模块,并在回调函数中使用了其中的函数。
最后,为了能够正确加载模块,需要将上述代码放在`<body>`标签的最后面,确保Layui的JavaScript文件已经加载完成。同时,需要在`<body>`标签中添加`<div class="layui-fluid"></div>`元素,以确保Layui布局正常显示。
阅读全文