本篇文章为大家探讨layui模块化和非模块化的区别，以及layui模块化与非模块化的不同引用方式，文章内容质量较高，有需要的朋友可以学习和借鉴。
1、模块化与非模块化的区别
layui中有许多不同的内置模块，如弹出层、日期与时间选择器、分页等不同模块。
模块化：使用时加载相应的模块。
非模块化：一次性加载所有的模块。
2、模块化的引用
引用 ../layui/layui.js
① 通常编写一个工具类 layui.util.js（可扩展），在jsp页面中直接引用
var layer;var laydate; layui.use(['layer','laydate'], function() { layer = layui.layer; laydate = layui.laydate; });② jsp页面
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> <script type="text/javascript" src="js/layui/layui.all.js"></script> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/layui/layui_util.js"></script> <script type="text/javascript"> $(function(){ laydate.render({ elem: '#test' //指定元素 }); }); function openLayui() { layer.msg('hello'); layer.open({ type : 1, maxmin : true, area: ['500px', '300px'], content : $('#inputId'), btn: ['确定', '重置', '关闭'], //可以无限个按钮, btn1: function(index, layero){ alert(parent.$("#inputId").val()); //layer.close(parent.layer.getFrameIndex(window.name)); layer.close(index); }, btn2: function(index, layero){ layer.style(index, { width: '80px' }); parent.$("#inputId").val("button"); return false; }, btn3: function(index, layero){ alert(index); return false; } }); var index = layer.getFrameIndex(window.name); layer.title('傻逼', index); } </script> </head> <body> <input type="button" onclick="openLayui()" id="inputId" value="弹框" /> <input type="text" id="test"/> </body> </html>3、非模块化的引用
引用 ../layui/layui.all.js
通常编写一个工具类 layui.util.js（可扩展）,在jsp页面直接引用 layer,laydate....
var layer = layui.layer; var laydate = layui.laydate;
或者直接在jsp页面使用layui.layer、layui.laydate 均可
看完上述内容，你们对layui模块化和非模块化的区别大概了解了吗？如果想了解更多相关文章内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
