layui引入第三方依赖

layui引入第三方js插件准备

  我之前使用的前端框架中包括bootstrap，easy-ui，H-ui，现在开始使用layui，但是我发现layui虽然是一个不错的前端框架，但是其中容易让人踩的坑也不少，其中之一就是引入第三方的js插件，如果要是其它的前端框架，直接在页面中添加相应的js路径，然后直接拿来使用就可以了，但是在layui中却不行，由于其框架的js默认调用方式是layui.use()，这就导致了其它的js插件在layui的作用域中无法使用，因而我们传统的添加使用第三方插件的方式在这里是行不通的。

  如果要是想在layui中引入第三方的js插件，我们就必须对第三方的js插件进行layui方式的再封装操作，即用layui将第三方的js插件包起来，然后再进行使用。在layui中添加第三方插件之前，我建议大家先看看下面的两篇文章。

• 关于 CommonJS AMD CMD UMD
• 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')