正确引入Layui模块

TMaize 于 2017-08-09 发布

Layui 出蛋于2016年金秋，是一款带着浓烈情怀的国产前端UI框架，她追求极简，又不失丰盈的内在，说她是史上最轻量的结晶，似乎并不为过。一切都源自于她对原生态的执着，对前端社区的那些噪杂声音的过滤，以及她本身的精心雕琢

引入所有

浏览器在加载的时候会加载一个较大的layui.all.js文件

然后会把每个模块暴露出去，直接用就可以了

但你必须知道，这种使用方式，意味着Layui的模块化已经失去了它的意义。但不可否认，它比什么都来的简单。

<link rel="stylesheet" href="static/layui/css/layui.css">
<script src="static/layui/lay/dest/layui.all.js"></script>

<script>
    //获得模块的引用
    var layer = layui.layer;
    layer.msg("Hello World");

    //直接用
    layer.msg("666")
</script>

通过layui.use加载模块

通过这种方式引入模块最大的好处是，在需要的时候才被加载需要模块，能够提高网页的记载速度

layui.use(['模块名','模块名'], function(){
    //加载完成的回调函数
    //推荐方法写在这里面，因为不知道什么时候加载完毕
});

<link rel="stylesheet" href="static/layui/css/layui.css">
<script src="static/layui/layui.js"></script>

<script>
console.info(layui);//一个对象，里面什么都没有

layui.use(['layer'], function(){
    
    //加载结束后会把模块名曝露在layui上，可以直接使用layui.xx调用
    var layer = layui.layer;
    console.info(this);//等价于layui
   
});
</script>

自定义模块引入

定义

//layui模块的定义
layui.define([mods], function(exports){
    //mods，你的模块依赖的模块，先加载它们
    //自定义的api
    var api={};
    exports('mod', api);//把mod绑定到layui对象上，注意mod的名字必须喝use的时候一样
});

使用方法如下

<link rel="stylesheet" href="static/layui/css/layui.css">
<script src="static/layui/layui.js"></script>

//指定引入某个目录下的模块
layui.config({
    base: 'static/modules/' //你的模块目录
}).use('mymod'); //加载入口

//或者先声明模块目录
layui.config({
    base: 'static/modules/' //你的模块目录
});

//然后再使用，先根据名字判断是否是layui内置的模块，然后引入声明的模块目录下的mymod.js文件
layui.use(['mymod'], function(){
    //...
});

效果如下

t {
    mymod:Object,
    v:"1.0.9_rls",
    __proto__:Object
}

layui.mymod.say()

推荐将自己的js方法以layui模块的方式书写，这样就可以通过user的方式来在需要的时候加载，加快页面的载入速度

最佳实践

页面

<head>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="app.css">
</head>
<body>
    ...
    <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/javascript" src="app.js"></script>
</body>
</html>

app.js文件

layui.config({
    base: 'modules/'
});

layui.use(['layer', 'form', 'jquery','mymodel'], function() {
    var model = layui.mymodel;
    var $ = layui.jquery;
    
});

独立组件

layui的某些模块是可以作为独立组件的，用的时候直接引用即可

如果你不想使用Layui，而只是想使用layer，你可以去layer独立组件官网下载组件包。你需要在你的页面引入jQuery1.8以上的任意版本，并引入layer.js。

不过支持独立使用的好像只有layer这个模块