layui开始使用

最新推荐文章于 2022-12-04 19:23:59 发布

唯爱赞多

最新推荐文章于 2022-12-04 19:23:59 发布

阅读量688

点赞数

分类专栏： layui 文章标签： layui javascript 前端

原文链接：https://www.layui.site/doc/index.htm

版权

layui 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

引入

<!-- 引入 layui.css -->
<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
 
<!-- 引入 layui.js -->
<script src="//unpkg.com/layui@2.6.8/dist/layui.js">

本地使用

<!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="./layui/css/layui.css">
</head>
<body>
 
<!-- 你的 HTML 代码 -->
 
<script src="./layui/layui.js"></script>
<script>
layui.use(['layer', 'form'], function(){
  var layer = layui.layer
  ,form = layui.form;
  
  layer.msg('Hello World');
});
</script> 
</body>
</html>

layui 模块的定义（新js）

新的js文件定义

//layui 模块的定义（新 js 文件）
layui.define([mods], function(exports){
  
  //……
  
  exports('mod', api);
});

模块使用

在需要使用的html页面使用

//layui 模块的使用
layui.use(['mod1', 'mod2'], function(args){
  var mod = layui.mod1;
  
  //……
  
});

建立模块入口

遵循layui模块规范建立

<!-- 你引入的 layui.js 建议是通过官网首页下载的。当然也可以由 github 或 gitee clone -->
<script src="./layui/layui.js"></script> 
<script>
layui.config({
  base: '/res/js/modules/' //你存放新模块的目录，注意，不是 layui 的模块目录
}).use('index'); //加载入口
</script>

上述的 index 即为你 /res/js/modules/ 目录下的 index.js，它的内容应该如下

/**
  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 时的模块名一致
});

从 layui 2.6 开始，如果你引入的是构建后的 layui.js，里面即包含了 layui 所有的内置模块，无需再指定内置模块。

/**
  index.js 项目 JS 主入口
**/ 
layui.define(function(){ // 需确保您的 layui.js 是引入的构建后的版本（即官网下载或 git 平台的发行版）
  //直接可得到各种内置模块
  var layer = layui.layer
  ,form = layui.form
  ,table = layui.table;
  
  //…
  layer.msg('Hello World');
  
  exports('index', {}); //注意，这里是模块输出的核心，模块名必须和 use 时的模块名一致
});

管理扩展模块

//mod1.js
layui.define('layer', function(exports){
  //…
  exports(mod1, {});
});
 
//mod2.js，假设依赖 mod1 和 form
layui.define(['mod1', 'form'], function(exports){
  //…
  exports(mod2, {});
});  
 
//mod3.js
//… 
 
//main.js 主入口模块
layui.define('mod2', function(exports){
  //…
  exports('main', {});
});

上述扩展模块在经过了一定的模块依赖关系后，同样可以合并为一个文件来加载。我们可以借助 Gulp 将上述的 mod1、mod2、mod3、main 等扩展模块构建合并到一个模块文件中：main.js，此时你只需要加载它即可：

<script src="./layui/layui.js"></script>  
<script>
layui.config({
  base: '/res/js/modules/' //你的扩展模块所在目录
}).use('main'); //这里的 main 模块包含了 mod1、mod2、mod3 等等扩展模块
</script>

最多只需要加载两个 JS 文件：layui.js、main.js。这将大幅度减少静态资源的请求

唯爱赞多

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
layui开始使用

引入<link rel="stylesheet" href="//unpkg.com/[email protected]/dist/css/layui.css"> <script src="//unpkg.com/[email protected]/dist/layui.js">本地使用<!DOCTYPE html><html><head> &
复制链接

扫一扫