layui引入第三方js插件准备
我之前使用的前端框架中包括bootstrap，easy-ui，H-ui，现在开始使用layui，但是我发现layui虽然是一个不错的前端框架，但是其中容易让人踩的坑也不少，其中之一就是引入第三方的js插件，如果要是其它的前端框架，直接在页面中添加相应的js路径，然后直接拿来使用就可以了，但是在layui中却不行，由于其框架的js默认调用方式是layui.use()，这就导致了其它的js插件在layui的作用域中无法使用，因而我们传统的添加使用第三方插件的方式在这里是行不通的。
如果要是想在layui中引入第三方的js插件，我们就必须对第三方的js插件进行layui方式的再封装操作，即用layui将第三方的js插件包起来，然后再进行使用。在layui中添加第三方插件之前，我建议大家先看看下面的两篇文章。
编写第一个Hello World
在layui中引入第三方js插件分为三步骤：
配置第三方js路径
在layui在使用第三方js插件之前，首先得告知layui，第三方插件的所在位置，否则layui将找到不第三方js插件
//config的设置是全局的
layui.config({
base: '/res/js/' //假设这是你存放拓展模块的根目录
}).extend({ //设定模块别名
mymod: 'mymod' //如果 mymod.js 是在根目录，也可以不用设定别名
,mod1: 'admin/mod1' //相对于上述 base 目录的子目录
});用layui包裹一个js插件
在这里，我们要编写我们js的实现方法，比如说这里我们编写的就是hello()方法。
如果只是编写hello()方法还不够，要想让layui能够正常调用该方法，我们还得按照layui的规范，将hello()方法用layui.define()进行包裹，同时返回对象本身即exports('mymod', obj);。
/**
扩展一个test模块
**/
layui.define(function(exports){ //提示：模块也可以依赖其它模块，如：layui.define('layer', callback);
var obj = {
hello: function(str){
alert('Hello '+ (str||'mymod'));
}
};
//输出test接口
exports('mymod', obj);
}); 在页面调用
在调用之前封装的js时，我们要使用layui.use()方法，按照layui的规范，一个页面如果要使用多个js文件，那么我们仍只能调用一次layui.use()，通过其中的['mymod', 'mod1']进行js的调用，其中mymod与mod1都是自定义的第三方js插件的别名。
//使用拓展模块
layui.use(['mymod', 'mod1'], function(){
var mymod = layui.mymod
,mod1 = layui.mod1
,mod2 = layui.mod2;
mymod.hello('World!'); //弹出 Hello World!
});在layui中引入moment第三方插件
在项目中，由于日期在数据库中存储的格式往往为datetime,而我们在用java获取该值后，假如我们后台不对其进行相应格式化处理，那么该值返回到页面中将会是一个时间戳，而我们想要看的是时间而不是时间戳，所以说在这种情况下我们应该对时间戳进行相应的格式化操作。
在这里，我采用的格式化方式就是引入第三方的时间格式化js插件moment。
其正常的调用方式为：
moment(1524132580000).format('YYYY-MM-DD HH:mm:ss')显示结果为：
2018-04-19 18:09:40配置moment
moment的文件位置
我的第三方插件都放在了/assets/js/lib/路径下，如下：
配置moment的路径
//配置第三方js插件
layui.config({
base: '/assets/js/lib/' //假设这是test.js所在的目录 可以把你需要扩展的js插件都放在一个文件夹内
}).extend({ //设定组件别名
moment: 'moment/moment',
mymod: 'demo/mymod'
});用layui包裹moment
由于js插件在使用的时候，为了不对页面其它地方造成参数污染问题，所以说它们往往是采用闭包的方式，即采用()()的方式，该方式的最大特点就是在内部定义的方法和参数等信息，一旦出了方法体本身，即无效，这样就有效的避免了页面其它地方的参数污染问题。
回到moment中，由于js插件是这样的：
(function(a){
...
}).call(this); 该种方法是只实例化一次，然后自动执行再调用自身，即call(this)，其中的this指代的是匿名函数本身。
而我们是不能对其直接拿来使用的，我们可将该匿名函数进行重命名，即变为：
function moment (a){
...
}这样外部调用的时候，我们只需要返回一个新的该对象就可以了，所以说这里应该这么写：
layui.define(function (exports) {
function moment (a){
...
}
exports('moment', new moment());
});在layui中调用moment
在layui中调用moment，我们可以如下编写：
layui.use(['moment','mymod'], function(){
var moment = layui.moment;
var mymod = layui.mymod;
console.log(moment.moment(1524132580000).format('YYYY-MM-DD HH:mm:ss'));
mymod.sayHello('World!');
});当我们在layui内部执行下面的代码时就完成了成功的时间戳格式化操作。
moment.moment(1524132580000).format('YYYY-MM-DD HH:mm:ss')