layui模块化的用法（一般用于开发环境）

在使用layui的模块的时候。我们可以遵循它的模块规范建立一个入口文件，并通过 layui.use() 方式来加载该入口文件，如下所示：<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-wid...

提拉米秋

1424人浏览 · 2019-11-01 16:06:24

提拉米秋 · 2019-11-01 16:06:24 发布

在使用layui模块的时候，我们可以遵循它的模块规范建立一个入口文件，并通过 layui.use() 方式来加载该入口文件，如下所示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>开始使用layui</title>
  <link rel="stylesheet" href="F:/layui/layui-v2.5.5/layui/css/layui.css">
</head>
<body>
 
<!-- 你的HTML代码 -->
 
<script src="F:/layui/layui-v2.5.5/layui/layui.js"></script>
<script>
layui.config({
  base: 'F:/layui/myTest/' //你存放新模块的目录，注意，不是layui的模块目录
}).use('index'); //加载入口
</script> 
</body>
</html>

上述的 index 即为你F:/layui/myTest/ 目录下的 index.js，它的内容应该如下：

/**
  项目JS主入口
  以依赖layui的layer和form模块为例
**/    
layui.define(['layer', 'form'], function(exports){
  var layer = layui.layer
  ,form = layui.form;
  
  layer.msg('Hello World');
  
  exports('index', {}); //注意，这里是模块输出的核心，模块名必须和use时的模块名一致
});