如何引入layui.css,正确引入Layui模块

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

引入所有

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

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

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

//获得模块的引用

var layer = layui.layer;

layer.msg("Hello World");

//直接用

layer.msg("666")

通过layui.use加载模块

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

layui.use(['模块名','模块名'], function(){

//加载完成的回调函数

//推荐方法写在这里面，因为不知道什么时候加载完毕

});

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

layui.use(['layer'], function(){

//加载结束后会把模块名曝露在layui上，可以直接使用layui.xx调用

var layer = layui.layer;

console.info(this);//等价于layui

});

自定义模块引入

定义

//layui模块的定义

layui.define([mods], function(exports){

//mods，你的模块依赖的模块，先加载它们

//自定义的api

var api={};

exports('mod', api);//把mod绑定到layui对象上，注意mod的名字必须喝use的时候一样

});

使用方法如下

//指定引入某个目录下的模块

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的方式来在需要的时候加载，加快页面的载入速度

最佳实践

页面

...