關於layui的模塊擴展

一，自定義模塊部分

首先我們自定義一個bodyTab模塊bodyTab.js：它依賴Jquery和element模塊：

layui.define(['element','jquery'],function(exports){
  var el = layui.element;
  var $ = layui.$;

  function tellName(){
      alert('以冬');

  }
exports('bodyTab',function(){
    return tellName
});

});

，exports是一個函數，它接受兩個參數，第一個參數為模塊名，第二個參數為模塊接口，當你聲明了上述的一個模塊后，你就可以在外部使用了。這里的bodyTab模塊給外部

的接口是一個匿名函數。而這個匿名函數返回值也是一個函數所以我們在調用bodyTab時候，如下：

<script src="./layui/layui.js"></script>
<script>
    //一般直接寫在一個js文件中
    layui.config({
      base:'./static/js/'
    });
    layui.use(['form','element','bodyTab'], function(){
        var Tab = layui.bodyTab;
       Tab()()；
    });
</script>

二，exports模塊接口是一個函數：

layui.define(['element','jquery'],function(exports){
  var el = layui.element;
  var $ = layui.$;

  function tellName(){
      alert('以冬');

  }
 exports('bodyTab',tellName);

});

調用：

<script src="./layui/layui.js"></script>
<script>
    //一般直接寫在一個js文件中
    layui.config({
      base:'./static/js/'
    });
    layui.use(['form','element','bodyTab'], function(){
      var Tab = layui.bodyTab;
      Tab();
     
    });

三，exports輸出的模塊接口是一個對象：

layui.define(['element','jquery'],function(exports){
  var el = layui.element;
  var $ = layui.$;

  var obj = {
      name:'我的一個道姑朋友',
      age:'18',
      tellName:function(){
          alert(this.name);
      }
  };

exports('bodyTab',obj);

});

 調用如下：

<script src="./layui/layui.js"></script>
<script>
    //一般直接寫在一個js文件中
    layui.config({
      base:'./static/js/'
    });
    layui.use(['form','element','bodyTab'], function(){
        var Tab = layui.bodyTab;
      Tab.tellName();
      alert(Tab.age);

    });
</script>