layui模块化和非模块化的区别是什么?

模块化与非模块化的区别

layui中有许多不同的内置模块,如弹出层、日期与时间选择器、分页等不同模块。

模块化:使用时加载相应的模块。非模块化:一次性加载所有的模块。

  • 非模块化不用每次都调用layui.use([],fun...)引入对应模块,引入的JS是/layui/layui.all.js

  • 模块化必须每次都调用layui.use([],fun...)引入对应模块,引入的JS是/layui/layui.js  (推荐这种,但是写起来不太方便)

  • /layui/layui.js会包含/layui/layui.js的所有功能,引入这个JS会加载所有的模块,无需自动引入模块,会使layui失去模块化的意义,但是写起来确实方便多了。因此layui官方推荐使用模块化的方式。

模块化的引用

引用 ../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" οnclick="openLayui()" id="inputId" value="弹框" />
  <input type="text" id="test"/>
</body>
</html>

模块化的引用

引用 ../layui/layui.all.js

通常编写一个工具类 layui.util.js(可扩展),在jsp页面直接引用 layer,laydate....

var layer = layui.layer;
var laydate = layui.laydate;

或者直接在jsp页面使用layui.layer、layui.laydate 均可

以上就是layui模块化和非模块化的区别是什么?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » Layui 教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏