htm5前端项目模块化开发

前端开发过程中也有很多重复的模块和内容，这时候公共的组件就发挥了关键作用了。
前端怎么进行模块化开发呢，要以什么为参考方向呢，找不到参考的，推荐看看人大佬完整的项目源码，了解分层分包的项目管理的便利之处。
下面我们看看原生JS+Layui框架下使用的模块化开发的基本逻辑。

var Const = (function() {  
    var constants = {//定义常量
      MILLISEC: 400,
    
    }
    var tableCol = [ //表头
    ];
    var DocumentHtml={};
    // 定义了一个静态方法
    DocumentHtml.getConstant=function(name){//获取常量的方法
      return constants[name];
    }
    DocumentHtml.setTableCols = function(cols){
        this.tableCol = cols;
    }
    DocumentHtml.getTableCols = function(){
        return tableCol;
    }

    return DocumentHtml;
  })();

创建js对象
引入js到业务文件里

<Script src="./common/const.js"></Script>

全局的api接口

var API = (function(){
    var publicTables = function(event,ele,toolBar,api,cols){
        //console.log(event);
        //console.log(ele);
        //console.log(toolBar);
        //console.log(api);
        //console.log(cols);
        var table = event.table;
         table.render({
            elem: ele
            , toolbar: '#toolbarTable'
            , height: 684
            , cellMinWidth : 80
            , url: api //数据接口
            , page: true //开启分页
            , cols: [cols]
        });
    
        //触发事件
        table.on('toolbar(PUBLICFILTER)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'add':
                    layer.msg('添加');
                    break;
                case 'delete':
                    layer.msg('删除');
                    break;
                case 'update':
                    layer.msg('编辑');
                    break;
            };
        });
    
    };

    var DocumentAPI={};

    DocumentAPI.getPublicTables = publicTables;
    return DocumentAPI;
})()

同上引用
API.[方法名]进行一个函数调用
其他通用函数也阔以写公共的方法