扩展一个 layui 模块

最新推荐文章于 2024-03-27 09:54:33 发布

提拉米秋

最新推荐文章于 2024-03-27 09:54:33 发布

阅读量1.3k

点赞数 2

分类专栏： layui html 文章标签： layui html

本文链接：https://blog.csdn.net/weixin_41535326/article/details/102862847

版权

html 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

layui

5 篇文章 0 订阅

订阅专栏

layui 官方提供的模块有时可能还无法满足你，或者你试图按照layer的模块规范来扩展一个模块。那么你有必要认识layui.define()方法。并粗略了解一下extend（我纠结过这个一小段时间）。
下面就让我们一起扩展一个Layui模块吧：
第一步：确认模块名，假设为：mymod，然后新建一个index.js 文件放入项目任意目录下（注意：不一定放入layui目录，可以自己定义路径）。
第二步：编写index.js 如下：

layui.define(function(exports){ //提示：模块也可以依赖其它模块，如：layui.define('layer', callback);
  var obj = {
    hello: function(str){
    //如果str为空的话，弹出“Hello index”
      alert('Hello '+ (str||'index'));
    }
  };
  
  //输出接口
  exports('mymod', obj);
});

第三步：设定扩展模块所在的目录，然后就可以在别的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="F:/layui/layui-v2.5.5/layui/css/layui.css">
</head>
<body>
<script src="F:/layui/layui-v2.5.5/layui/layui.js"></script>
<script>
//config的设置是全局的
layui.config({
  base: 'F:/layui/myTest/' //假设这是你存放拓展模块的根目录
}).extend({ 
  mymod: 'index' //mymod表示index文件中定义的模块名字，index表示的是模块文件，不需要js后缀
});

//使用拓展模块
layui.use(['mymod'], function(){
  var mymod = layui.mymod;
  mymod.hello('World!'); //弹出 Hello World!
});
</script> 
</body>
</html>

提拉米秋

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
扩展一个 layui 模块

layui 官方提供的模块有时可能还无法满足你，或者你试图按照layer的模块规范来扩展一个模块。那么你有必要认识layui.define()方法。并粗略了解一下extend（我纠结过这个一小段时间）。下面就让我们一起扩展一个Layui模块吧：第一步：确认模块名，假设为：mymod，然后新建一个index.js 文件放入项目任意目录下（注意：不一定放入layui目录，可以自己定义路径）。第二...
复制链接

扫一扫