layui的基本使用

最新推荐文章于 2023-09-06 14:43:22 发布

沐沐茶壶

最新推荐文章于 2023-09-06 14:43:22 发布

阅读量1.2k

点赞数 1

文章标签： javascript 前端 layui

本文链接：https://blog.csdn.net/qq_44886882/article/details/120975432

版权

该笔记记录如何使用layui的模块化方法。

访问layui官网 https://www.layui.site/
下载官网的layui压缩包文件，解压到本地文件夹，文件结构如下：

在这里插入图片描述

在项目下，创建layui文件夹，将这三个文件拷贝过去。
在项目下，新建layuiModel文件夹，存放自定义layui模块文件。
在项目下，创建Html文件。

在这里插入图片描述

其中的自定义layui模块文件内容如下：
该文件中定义的模块包括自定义的属性和方法。

# helloworld.js文件

## 第一个参数是可选的，用于声明该模块所依赖的模块，可以为数组依赖多个模块，也可以为单个字符串依赖单个模块。
## 第二个参数即为模块加载完毕的回调函数，它返回一个exports参数，用于输出该模块的接口。
### 其中exports参数是一个函数，第一个参数指定自定义模块的模块名，第二个参数为模块接口（对象、函数、变量等等）。第一个参数可以认为是Java中的对象引用名，第二个参数是真正的对象。

// 自定义layui模块
// 注意：layui的模块名需要和js文件名一样
layui.define( ['layer'], function(exports){
    console.log("进入helloworld的define");
    var obj = {
        name: "demo",
        hello: function() {
            console.log("hello world!");
        }
    }
    exports( 'helloworld', obj );
})

其中使用layui模块文件内容如下：

# index.js文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>layui的使用</title>
    <link rel="stylesheet" href="./layui/css/layui.css" type="text/css">
    <!-- 引入jqurey文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- 模块化的方式引入layui.js文件 -->
    <script type="text/javascript" src="./layui/layui.js"></script>
</head>

<body>
    <!-- html代码区域 -->

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="./layui/layui.js"></script>
    <script>
        // js代码区域
        // 全局配置layui定义模块位置
        layui.config({
            // 存放layui模块目录
            base: './layuiModel/'
        });
        // 使用自定义模块
        layui.use('helloworld', function(){
            // 获取模块实例
            var helloworld = layui.helloworld;
            console.log( '自定义的helloworld模块内容--->', helloworld );
        })
    </script>
</body>
</html>