1. 使用模块

Layui的模块加载采用核心的 layui.use(mods, callback)方法，当你的JS 需要用到Layui模块的时候，我们更推荐你采用预先加载，因为这样可以避免到处写layui.use的麻烦。你应该在最外层如此定义：

layui.use(['form', 'upload'], function(){  //如果只加载一个模块，可以不填数组。如：layui.use('form')var form = layui.form //获取form模块,upload = layui.upload; //获取upload模块//监听提交按钮form.on('submit(test)', function(data){console.log(data);});//实例化一个上传控件upload({url: '上传接口url',success: function(data){console.log(data);}})
});

2. 内置模块

layui 提供了一些常见的模块可以直接使用，非常方便：

弹出层 layer
日期与时间选择 laydate
即时通讯 layim
分页 laypage
模板引擎 laytpl
数据表格 table
表单 form
文件上传 upload
穿梭框 transfer
树形组件 tree
颜色选择器 colorpicker
常用元素操作 element
滑块 slider
评分 rate
轮播 carousel
流加载 flow
工具集 util
代码修饰器 code

3. 扩展一个 layui 模块

第一步：确认模块名，假设为：mymod，然后新建一个mymod.js文件放入项目任意目录下（注意：不用放入layui目录）
第二步：编写test.js 如下：

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

第三步：设定扩展模块所在的目录，然后就可以在别的JS文件中使用了

//config的设置是全局的
layui.config({base: '/res/js/' //假设这是你存放拓展模块的根目录
}).extend({ //设定模块别名mymod: 'mymod' //如果 mymod.js 是在根目录，也可以不用设定别名,mod1: 'admin/mod1' //相对于上述 base 目录的子目录
});//你也可以忽略 base 设定的根目录，直接在 extend 指定路径（主要：该功能为 layui 2.2.0 新增）
layui.extend({mod2: '{/}http://cdn.xxx.com/lib/mod2' // {/}的意思即代表采用自有路径，即不跟随 base 路径
})//使用拓展模块
layui.use(['mymod', 'mod1'], function(){var mymod = layui.mymod,mod1 = layui.mod1,mod2 = layui.mod2;mymod.hello('World!'); //弹出 Hello World!
});

4. 加载第三方插件为layui模块

如果是加载第三方插件，需要改为layui模块式的加载，如sortable插件：

layui.define(function(exports){// 插入sotable.js源码exports('sortable', null);
});

使用：

layui.config({base: '../layadmin/layuiadmin/'
}).extend({index: 'lib/index', //主入口模块sortable: 'business/sortable'
}).use(['index','sortable'], function() {new Sortable($(".view-content")[0],{animation: 150});
});

layui 加载第三方插件相关推荐

解决obsidian无法加载第三方插件（社区插件）的问题
1.windows系统参考以下方案: 不需要VPN与翻墙,完美解决obsidian无法加载第三方插件(社区插件)的问题 2.以下是参考window系统的操作方法介绍的macOS解决方案 1.插件下载 ...
动态加载、插件化、热部署、热修复（更新）知识汇总
开发中经常能听到动态加载,插件化,热部署等词,动态加载到底是何方神物,它能实现什么功能,实现原理又如何?动态加载和插件化.热部署又有着什么样的联系呢?下面我们一起来学习吧. 1. 基本知识 1.1 动 ...
Laravel 加载第三方类库的方法
https://www.jb51.net/article/138530.htm 这篇文章主要介绍了Laravel 加载第三方类库的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编 ...
Android之解决webview加载第三方网页点击弹不出下拉框（html页面里面的select标签）
1 问题决webview加载第三方网页点击弹不出下拉框(html页面里面的select标签),我们访问youtube.com官网,点击网站的视频,点击视频右上角三个点设置,然后点击播放设置然后点 ...
ie11加载java插件_IE浏览器中ActiveX插件的使用
在某些行业的B/S应用系统中会不可避免的要用到ActiveX浏览器插件,而ActiveX插件只能在IE内核浏览器中运行,而常用的IE浏览器的版本众多,从IE6到IE11,总共有6个版本,这就给开发的应 ...
猎豹浏览器插件无法加载怎么办插件无法加载解决方法
首先,点击浏览器左上角的"豹头"图标,并在随后弹出的页面中选择[选项/设置]; 猎豹浏览器插件无法加载怎么办?插件无法加载解决方法接着,在设置页面单击[我的应用],这时就可以看到 ...
SpringBoot 手写过滤器amp;加载第三方过滤器
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/qq_36367789/article/details/81665638 如何手写一个过滤器呢.假设我 ...
thinkphp6 加载第三方类库_thinkphp中第三方类引入问题
项目引入了第三方类库acp_service,引入是成功的,这个acp_service类中自己引入了 secureUtil.php类.secureUtil.php类引入了另外一个类并且示例化了引入的类, ...
js加载第三方字体,检测加载完成事件
最近在做一个项目涉及到加载第三方字体的问题,首批需要支持一百多种字体,然后首先想到的就是@fant-face,但是在实际应用中发现无法满足当前需求. 目前的项目是用canvas的一个开源库fabric ...

layui 加载第三方插件