zoukankan      html  css  js  c++  java
  • 关于layui的exports

    最近公司的后台管理系统,我选用了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>
  • 相关阅读:
    Vue2.5
    Vue --- :is
    Vue面试中经常会被问到的面试题
    100道JS构造函数面试题
    100道前端面试题
    占位
    06-验证码-基本功能实现
    由ES规范学JavaScript(二):深入理解“连等赋值”问题
    JS中keyup, keypress, keydown以及oninput四个事件的区别
    Java中class的声明
  • 原文地址:https://www.cnblogs.com/qianxunpu/p/7942835.html
Copyright © 2011-2022 走看看